/* Buffet card — Figma library set «Buffet Card» `3529:12819`.
   Compact `3529:12818` 314×620 (white bg, 228×228 photo) → Expanded
   `3529:12820` 654×620 (photo fills the background, bg `#E1E5EA`, white
   text, gradient overlays, description/tags opacity 0 → 1). 600 ms
   ease-out (animations.md row «Картка буфету»); `:hover`/
   `:focus-visible` reach Expanded without any script,
   `[aria-expanded="true"]` is the same look driven by assets/js/
   buffet.js for touch and for the featured card's initial state.

   Below 768px the frame draws no Compact/Expanded pair at all —
   «Size=Size3» is its own, always-fully-shown layout (no hover to
   expand into on a touch viewport), so this file resets every
   absolutely-positioned child to a normal stacked flow there instead
   of animating between two rectangles nothing in the frame draws.

   `prefers-reduced-motion`/`data-motion="reduced"` already zero every
   `transition-duration` (base.css, a11y-themes.css) — nothing
   page-specific needed here. */

.c-buffet-card {
	--c-buffet-card-w: 314px;

	position: relative;
	display: block;
	width: var(--c-buffet-card-w);
	height: 620px;
	padding: 0;
	overflow: hidden;
	text-align: left;
	background: var(--color-base-white);
	border: 0;
	border-radius: 0;
	cursor: pointer;
	font: inherit;
	color: inherit;
	transition: width 600ms cubic-bezier(0, 0, 0.58, 1), background-color 600ms cubic-bezier(0, 0, 0.58, 1);
}

.c-buffet-card__media {
	position: absolute;
	top: 172px;
	left: 43px;
	width: 228px;
	height: 228px;
	overflow: hidden;

	/* Dark, not the frame's light `#D9D9D9` placeholder fill: the header/
	   grid/description that sit on top of this layer once expanded turn
	   white for the photo the frame always has here — a dark fallback
	   keeps that white text readable before a real photo is uploaded
	   (axe color-contrast, `#buffet-card-* .c-buffet-card__title` etc.
	   against the light fallback measured 1.26:1). */
	background: var(--color-neutral-800);
	transition: top 600ms cubic-bezier(0, 0, 0.58, 1), left 600ms cubic-bezier(0, 0, 0.58, 1), width 600ms cubic-bezier(0, 0, 0.58, 1), height 600ms cubic-bezier(0, 0, 0.58, 1);
}

.c-buffet-card__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-buffet-card__media::before,
.c-buffet-card__media::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 600ms cubic-bezier(0, 0, 0.58, 1);
}

.c-buffet-card__media::before {
	background: linear-gradient(180deg, rgb(0 0 0 / 55%) 0%, rgb(0 0 0 / 0%) 100%);
}

.c-buffet-card__media::after {
	background: linear-gradient(0deg, rgb(0 0 0 / 55%) 0%, rgb(0 0 0 / 0%) 45%);
}

.c-buffet-card__header {
	position: absolute;
	top: 36px;
	left: 36px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-width: calc(100% - 72px);
	transition: color 600ms cubic-bezier(0, 0, 0.58, 1);
}

.c-buffet-card__floor {
	font: 600 var(--fs-s-text) / 1.375 var(--font-body);
	text-transform: uppercase;

	/* Compact: white card background, so the frame's own #12AD99 (2.81:1)
	   is short of 4.5:1 — --color-primary-700 (5.5:1) is the ramp's first
	   step that clears it (same substitution details-link.css/halls.css
	   already use). Expanded sits over the dark photo/scrim instead, where
	   #12AD99 itself reads fine, same as the frame draws it. */
	color: var(--color-primary-700);
	transition: color 600ms cubic-bezier(0, 0, 0.58, 1);
}

.c-buffet-card:hover .c-buffet-card__floor,
.c-buffet-card:focus-visible .c-buffet-card__floor,
.c-buffet-card[aria-expanded="true"] .c-buffet-card__floor {
	color: var(--color-primary-500);
}

.c-buffet-card__title {
	display: block;
	font: 400 24px / 1 var(--font-title);
	text-transform: uppercase;
	color: var(--color-neutral-800);
	transition: color 600ms cubic-bezier(0, 0, 0.58, 1);
}

.c-buffet-card__tags {
	position: absolute;
	top: 40px;
	right: 36px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 8px;
	opacity: 0;
	transition: opacity 600ms cubic-bezier(0, 0, 0.58, 1);
}

.c-buffet-card__tag {
	padding: 4px 8px;
	font: 400 var(--fs-s-text) / 1.375 var(--font-body);
	color: var(--color-base-white);
	background: var(--color-neutral-800);
	white-space: nowrap;
}

/* The two boxes the card anchors to its own bottom edge — the specs grid and
   the description — are ONE stack, not two independently positioned boxes.
   They used to be `bottom: 56px` and `bottom: 20px`, which holds only while
   the description is one line: a second line pushed its top edge above the
   grid's bottom edge and the two texts overlapped by 8px on the featured card
   (measured, plan 06 task 12). A stack cannot overlap itself. */
.c-buffet-card__footer {
	position: absolute;
	right: 36px;
	bottom: 20px;
	left: 36px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.c-buffet-card__grid {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.c-buffet-card__grid-cell {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 12px;
	border-top: 1px solid var(--color-neutral-300);
	transition: border-color 600ms cubic-bezier(0, 0, 0.58, 1);
}

.c-buffet-card__grid-label {
	font: 400 var(--fs-s-text) / 1.375 var(--font-body);
	color: var(--color-neutral-800);
	transition: color 600ms cubic-bezier(0, 0, 0.58, 1);
}

.c-buffet-card__grid-value {
	font: 600 var(--fs-s-text) / 1.375 var(--font-body);
	color: var(--color-neutral-800);
	transition: color 600ms cubic-bezier(0, 0, 0.58, 1);
}

.c-buffet-card__description {
	overflow: hidden;
	font: 400 var(--fs-s-text) / 1.375 var(--font-body);
	color: var(--color-base-white);
	opacity: 0;
	transition: opacity 600ms cubic-bezier(0, 0, 0.58, 1);
}

/* Expanded — hover/focus for every card, plus the explicit toggled/
   featured state. */
.c-buffet-card:hover,
.c-buffet-card:focus-visible,
.c-buffet-card[aria-expanded="true"] {
	--c-buffet-card-w: 654px;

	background: var(--color-neutral-200);
}

.c-buffet-card:hover .c-buffet-card__media,
.c-buffet-card:focus-visible .c-buffet-card__media,
.c-buffet-card[aria-expanded="true"] .c-buffet-card__media {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.c-buffet-card:hover .c-buffet-card__media::before,
.c-buffet-card:hover .c-buffet-card__media::after,
.c-buffet-card:focus-visible .c-buffet-card__media::before,
.c-buffet-card:focus-visible .c-buffet-card__media::after,
.c-buffet-card[aria-expanded="true"] .c-buffet-card__media::before,
.c-buffet-card[aria-expanded="true"] .c-buffet-card__media::after {
	opacity: 1;
}

.c-buffet-card:hover .c-buffet-card__title,
.c-buffet-card:focus-visible .c-buffet-card__title,
.c-buffet-card[aria-expanded="true"] .c-buffet-card__title {
	font-size: 36px;
	color: var(--color-base-white);
}

.c-buffet-card:hover .c-buffet-card__tags,
.c-buffet-card:focus-visible .c-buffet-card__tags,
.c-buffet-card[aria-expanded="true"] .c-buffet-card__tags,
.c-buffet-card:hover .c-buffet-card__description,
.c-buffet-card:focus-visible .c-buffet-card__description,
.c-buffet-card[aria-expanded="true"] .c-buffet-card__description {
	opacity: 1;
}

/* Expanded, the card is 654px wide and the frame puts «Графік роботи»
   and «Асортимент» side by side («Buffet Card» → Expanded `3529:12820`);
   Compact, at 314px, they are stacked. Stacking them at 654 too left the
   grid 67px taller than the frame's, and since both the grid and the
   description are anchored to the card's bottom edge, the grid grew down
   THROUGH the description: measured 8px of overlapping text on the
   featured card (plan 06 task 12, composition re-check). */
.c-buffet-card:hover .c-buffet-card__grid,
.c-buffet-card:focus-visible .c-buffet-card__grid,
.c-buffet-card[aria-expanded="true"] .c-buffet-card__grid {
	flex-direction: row;
	gap: 24px;
}

.c-buffet-card:hover .c-buffet-card__grid-cell,
.c-buffet-card:focus-visible .c-buffet-card__grid-cell,
.c-buffet-card[aria-expanded="true"] .c-buffet-card__grid-cell {
	flex: 1 1 0;
	min-width: 0;
}

/* Figma «rgba(255,255,255,0.5)» — the token ladder has no 50%-alpha
   white, so the value stays a literal colour here rather than
   borrowing an unrelated token (figma-rules.md: colours failing WCAG
   get the nearest token; this is a decorative divider, not text/UI
   needing a contrast ratio). */
.c-buffet-card:hover .c-buffet-card__grid-cell,
.c-buffet-card:focus-visible .c-buffet-card__grid-cell,
.c-buffet-card[aria-expanded="true"] .c-buffet-card__grid-cell {
	border-top-color: rgb(255 255 255 / 50%);
}

.c-buffet-card:hover .c-buffet-card__grid-label,
.c-buffet-card:hover .c-buffet-card__grid-value,
.c-buffet-card:focus-visible .c-buffet-card__grid-label,
.c-buffet-card:focus-visible .c-buffet-card__grid-value,
.c-buffet-card[aria-expanded="true"] .c-buffet-card__grid-label,
.c-buffet-card[aria-expanded="true"] .c-buffet-card__grid-value {
	color: var(--color-base-white);
}

/* Below 768px: the frame's own «Size=Size3» — always fully shown,
   nothing to expand into. */
@media (max-width: 767px) {

	.c-buffet-card,
	.c-buffet-card:hover,
	.c-buffet-card:focus-visible,
	.c-buffet-card[aria-expanded="true"] {
		--c-buffet-card-w: 100%;

		display: flex;
		flex-direction: column;
		height: auto;
		background: var(--color-base-white);
	}

	.c-buffet-card__media,
	.c-buffet-card:hover .c-buffet-card__media,
	.c-buffet-card:focus-visible .c-buffet-card__media,
	.c-buffet-card[aria-expanded="true"] .c-buffet-card__media {
		position: relative;
		top: auto;
		left: auto;
		width: 100%;

		/* The desktop `[aria-expanded="true"]`/`:hover` rule sets an explicit
		   `height: 100%` (of the whole card, for the full-bleed photo) — a
		   property `aspect-ratio` alone does not reset, so the featured
		   card's photo stayed full-height here instead of the square every
		   card in Size3 draws (the height went into the card's own height
		   instead, +130px against the frame, `.c-buffet-card` height DRIFT). */
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.c-buffet-card__media::before,
	.c-buffet-card__media::after,
	.c-buffet-card:hover .c-buffet-card__media::before,
	.c-buffet-card:hover .c-buffet-card__media::after,
	.c-buffet-card:focus-visible .c-buffet-card__media::before,
	.c-buffet-card:focus-visible .c-buffet-card__media::after,
	.c-buffet-card[aria-expanded="true"] .c-buffet-card__media::before,
	.c-buffet-card[aria-expanded="true"] .c-buffet-card__media::after {
		opacity: 1;
	}

	.c-buffet-card__header {
		position: absolute;
		top: 20px;
		left: 16px;
	}

	/* Size3 always sits over the photo/scrim (no Compact/Expanded pair
	   here), so the floor label stays the light step of the ramp too. */
	.c-buffet-card__floor {
		color: var(--color-primary-500);
	}

	.c-buffet-card:hover .c-buffet-card__title,
	.c-buffet-card:focus-visible .c-buffet-card__title,
	.c-buffet-card[aria-expanded="true"] .c-buffet-card__title,
	.c-buffet-card__title {
		font-size: 20px;
		color: var(--color-base-white);
	}

	.c-buffet-card__tags {
		position: absolute;
		top: 20px;
		right: 16px;
		opacity: 1;
	}

	.c-buffet-card__footer {
		position: static;
		right: auto;
		bottom: auto;
		left: auto;
		width: auto;
		padding: 16px;
		gap: 16px;
	}

	.c-buffet-card__grid,
	.c-buffet-card__description {
		opacity: 1;
	}

	/* The always-open mobile variant («Size=Size3», 358×614) stacks the two
	   cells, so the desktop Expanded row above must not reach it. */
	.c-buffet-card__grid,
	.c-buffet-card:hover .c-buffet-card__grid,
	.c-buffet-card:focus-visible .c-buffet-card__grid,
	.c-buffet-card[aria-expanded="true"] .c-buffet-card__grid {
		flex-direction: column;
		gap: 12px;
	}

	.c-buffet-card__grid-cell,
	.c-buffet-card:hover .c-buffet-card__grid-cell,
	.c-buffet-card:focus-visible .c-buffet-card__grid-cell,
	.c-buffet-card[aria-expanded="true"] .c-buffet-card__grid-cell {
		border-top-color: var(--color-neutral-300);
	}

	.c-buffet-card__grid-label,
	.c-buffet-card__grid-value,
	.c-buffet-card:hover .c-buffet-card__grid-label,
	.c-buffet-card:hover .c-buffet-card__grid-value,
	.c-buffet-card:focus-visible .c-buffet-card__grid-label,
	.c-buffet-card:focus-visible .c-buffet-card__grid-value,
	.c-buffet-card[aria-expanded="true"] .c-buffet-card__grid-label,
	.c-buffet-card[aria-expanded="true"] .c-buffet-card__grid-value,
	.c-buffet-card__description {
		color: var(--color-neutral-800);
	}
}

@media (forced-colors: active) {

	.c-buffet-card {
		outline: 1px solid CanvasText;
		outline-offset: -1px;
	}

	.c-buffet-card__tag {
		border: 1px solid CanvasText;
	}
}