/* Buffet page (`page-buffet.php`, ТЗ §4.9, Figma «Буфет» `3503:12306`,
   plan 06 task 8) — the page's own sections. The shared centred-column
   rule is `--page-gutter` (container.css); the shared components
   (section-title, view-all, details-link, slider, faq, buffet-card)
   carry their own sheets. */

/* ---------------------------------------------------------------- hero */

.buffet-hero {
	position: relative;
	overflow: hidden;

	/* «Buffet Landing Hero» `3656:13719` is `bg=#FFFFFF` under its own
	   photo — the same white shows once there is no photo. */
	background: var(--color-base-white);
}

.buffet-hero__photo-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.buffet-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 32px;
	padding: 24px var(--page-gutter) 64px;
}

.buffet-hero__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* `banner_image` `c785242b8aa1bd8cda16abc13adeafffa49468e0` is a light
   concrete/plaster texture, not a dark photograph — the frame's own H1
   stays `#272B30` over it (`figma-spec.py`: the text node's colour
   does not change between the frame's photo-less and photo states),
   so there is no scrim and no white-text variant here to begin with;
   `.buffet-hero--photo` only exists as a hook were a future banner
   photo ever a dark one. */

/* The shared banner variant's H1 (`section-title.css`) is sized for the
   other pages that use it (`--fs-h1-s`/`--fs-h1-m`) — this page's own
   «Section Label» `3656:13720`/`4390:26013` draws the largest step of
   the ramp instead at every width (80px at 390, 204px at 1440,
   `--fs-h1-l`), so it is overridden here rather than forked into the
   shared file. */
.buffet-hero__header.c-section-title--banner .c-section-title__heading {
	font-size: var(--fs-h1-l);
	line-height: var(--lh-h1-l);
}

/* «View Schedule Link» — Figma's own «Menu,button» text style (20px/24px
   at 1440, the token ladder's `--fs-menu-button`/`--lh-menu-button`),
   not `.c-details-link`'s default «S/S text» (16px/22px): the same
   component-shape («Детальніше»'s box/arrow), a different type ramp. */
.buffet-hero__cta-link,
.buffet-menu-cta__link {
	font-size: var(--fs-menu-button);
	line-height: var(--lh-menu-button);
}

.buffet-hero__collage {
	display: grid;

	/* One column at narrow widths: three 96px-ish columns clipped the
	   caption at 150% text scale with the dyslexia face (element-overflow
	   helper, 320/360/390 — a real WCAG 1.4.4 reflow failure, not a
	   frame the .fig draws below 1024 anyway, so R13's own exception
	   applies without needing a designer question). */
	grid-template-columns: 1fr;
	gap: 16px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.buffet-hero__photo {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 4px;
}

@media (min-width: 1024px) {

	.buffet-hero__collage {
		grid-template-columns: repeat(3, 1fr);
	}
}

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

.buffet-hero__photo-caption {
	position: absolute;
	right: 12px;
	bottom: 12px;
	left: 12px;
	margin: 0;
	font: 400 var(--fs-h6) / 1.2 var(--font-title);
	text-transform: uppercase;
	color: var(--color-base-white);
}

@media (min-width: 1024px) {

	.buffet-hero__inner {
		padding-top: 32px;
		padding-bottom: 100px;
	}
}

/* «Frame 1437255226» `3977:17447`, the H1+lead row's own container,
   hugs 942px — a narrower cap (720px tried first) squeezed the lead
   paragraph into a sliver and wrapped it edge to edge. */
@media (min-width: 1440px) {

	.buffet-hero__content {
		max-width: 943px;
	}
}

/* ------------------------------------------------------------- menu cta */

.buffet-menu-cta {
	background: var(--color-base-white);
	border-top: 1px solid var(--color-neutral-300);
	border-bottom: 1px solid var(--color-neutral-300);
}

.buffet-menu-cta__inner {
	background: var(--color-base-white);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px var(--page-gutter);
}

.buffet-menu-cta__text {
	margin: 0;

	/* A fixed px value, not `ch`: that unit resolves against the active
	   font's own glyph metrics, so it recomputes once the web font
	   finishes loading (fallback → Sofia Pro) — a genuine post-paint style
	   change that `getAnimations()` picks up as a running CSSTransition
	   even under reduced motion, because the site's own reduced-motion
	   rule sets `transition-duration: 0.01ms` rather than `0s`
	   (a11y-themes.css/base.css) on every element, not only ones with a
	   transition of their own. */
	max-width: 720px;
	font: 600 var(--fs-s-text) / 1.375 var(--font-body);
	text-transform: uppercase;
	color: var(--color-neutral-800);
}

/* ----------------------------------------------------------- spaces --- */

.buffet-spaces {
	display: flex;
	flex-direction: column;
	gap: 64px;
	padding: 64px var(--page-gutter);
	background: var(--color-neutral-100);
}

.buffet-spaces__intro {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* The frame's own free-form scatter, not a grid — `figma-spec.py` on
   `Buffet Spaces Hero` `3517:12622` (1440, container 1328×895) and its
   390 counterpart `Component 3` `4390:26075` (container 390×860), each
   photo's x/y/w/h turned into % of its own container so the box scales
   with it between the breakpoint's own fixed aspect-ratio. Order is
   `spaces_collage`'s own seed order (`Buffet\Seed::SPACES_COLLAGE`):
   1 hf_20260706… `3517:12623`/`4390:26087`, 2 theater-large-image-2
   `3517:12625`/`4390:26090`, 3 theater-large-image-1
   `3517:12626`/`4390:26089`, 4 «Image» `3517:12627`/`4390:26088`.

   This frame is also the positioning root for the heading and paragraph
   overlaid inside it (`.buffet-spaces__intro-heading-box` /
   `.buffet-spaces__intro-text`, below) — the frame draws both at their
   own x/y INSIDE `Buffet Spaces Hero`, not below it (plan 06 task 12
   composition re-check). */
.buffet-spaces__collage-frame {
	position: relative;
	aspect-ratio: 390 / 860;

	/* `Component 3` `4390:26075` is full-bleed at 390 (`bg=#FFFFFF`
	   spans x 0→390, no gutter of its own — the section's own padding
	   comes from `.buffet-spaces`), unlike the 1328-wide inset column
	   every other 390 photo/x-position on this page sits inside.
	   Breaking out of `--page-gutter` here is what makes the %
	   positions below (already computed against a 390-wide reference)
	   land on the frame's own x — inside the padded column they were
	   short by exactly the gutter on both sides (`spec-diff.py`: width
	   DRIFT −32px on a 358px measured column, 390 − 2×16). */
	margin-inline: calc(-1 * var(--page-gutter));
	background: var(--color-base-white);
}

.buffet-spaces__collage {
	padding: 0;
	margin: 0;
	list-style: none;
}

.buffet-spaces__collage-item {
	position: absolute;
	overflow: hidden;
	border-radius: 4px;
}

.buffet-spaces__collage-item:nth-child(1) {
	top: 74.42%;
	left: 52.31%;
	width: 43.59%;
	height: 25.58%;
}

.buffet-spaces__collage-item:nth-child(2) {
	top: 0%;
	left: 4.1%;
	width: 22.05%;
	height: 9.3%;
}

.buffet-spaces__collage-item:nth-child(3) {
	top: 5.81%;
	left: 54.87%;
	width: 41.03%;
	height: 14.88%;
}

.buffet-spaces__collage-item:nth-child(4) {
	top: 70%;
	left: 4.1%;
	width: 31.03%;
	height: 13.95%;
}

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

@media (min-width: 1024px) {

	.buffet-spaces__collage-frame {
		aspect-ratio: 1328 / 895;

		/* 1440's own `Buffet Spaces Hero` `3517:12622` sits inside the
		   frame's usual 1328-wide inset column (not full-bleed like the
		   390 one above), so the 390 breakpoint's negative margin does
		   not carry up. */
		margin-inline: 0;
	}

	.buffet-spaces__collage-item:nth-child(1) {
		top: 62.91%;
		left: 79.75%;
		width: 19.28%;
		height: 37.09%;
	}

	.buffet-spaces__collage-item:nth-child(2) {
		top: 0%;
		left: 0%;
		width: 15.14%;
		height: 21.23%;
	}

	.buffet-spaces__collage-item:nth-child(3) {
		top: 11.17%;
		left: 79.75%;
		width: 20.26%;
		height: 30.17%;
	}

	.buffet-spaces__collage-item:nth-child(4) {
		top: 62.91%;
		left: 4.44%;
		width: 18.9%;
		height: 31.17%;
	}
}

/* «Highlight Section» `3517:12628` / «Highlight Content» `3517:12629` —
   placed at the frame's own box inside `.buffet-spaces__collage-frame`,
   in % of the same container the collage photos already use
   (percentages below: `figma-spec.py` on `3517:12629` for 1440,
   `4390:26077` for 390 — both `size=h:hug`, so only x/y/width are
   pinned; height follows the content, same reasoning as every other
   hug box on this page). */
.buffet-spaces__intro-heading-box {
	position: absolute;
	top: 19.65%;
	left: 4.1%;
	width: 61.79%;
}

/* «Highlight Content» `3517:12629`'s own `flex-col gap=24`: the heading
   (its own two lines are `Header Text`/`Subheader Text`, one `<h2>`, the
   line-height between them) then the subtitle stacked below it, at
   every width — not beside it (an earlier draft's row layout matched
   the frame's `align=end` to the wrong axis and undershot this box's
   own height by more than half). */
.buffet-spaces__intro-inner {
	display: flex;
	flex-direction: column;

	/* `4390:26077` (390) has its own, smaller gap than `3517:12629`
	   (1440, 24px, set in the media query below) — not a rounding of
	   the same value at two widths. */
	gap: 20px;
}

.buffet-spaces__intro-heading {
	margin: 0;
	overflow-wrap: break-word;

	/* The frame's own text-style is «H2/H2 M» (`Header Text`/`Subheader
	   Text`, both breakpoints) — the ramp's medium step, not the small
	   one every OTHER heading on this page uses (`--fs-h2-s`, e.g.
	   `.buffet-spaces__grid-title`): 44px at 390, 120px at 1440,
	   exactly `--fs-h2-m`'s own values. Using `-s` here undershot this
	   box's own frame height by half (task-12-report.md, buffet row —
	   the text now lives at the frame's box, so its own size has to
	   match too, not just its position). */
	font: 400 var(--fs-h2-m) / 1 var(--font-title);
	letter-spacing: -1px;
	text-transform: uppercase;
	color: var(--color-neutral-800);
}

.buffet-spaces__intro-line {
	display: block;
}

.buffet-spaces__intro-subtitle {
	margin: 0;
	font: 600 var(--fs-h4) / 1 var(--font-body);
	letter-spacing: -1px;
	text-transform: uppercase;

	/* The frame's own #12AD99 (--color-primary-500) measures 2.55:1 on this
	   section's light background — short of the 3:1 large-text floor even
	   at this size; --color-primary-600 (3.71:1) clears it (figma-rules.md:
	   nearest passing token, logged in designer-questions.md). */
	color: var(--color-primary-600);
}

/* «About Section» `3517:12634` — same technique, `3517:12635` (1440) /
   `4390:26082` (390). */
.buffet-spaces__intro-text {
	position: absolute;
	top: 37.67%;
	left: 4.1%;
	width: 82.31%;
	margin: 0;
	font: 400 var(--fs-s-text) / 1.375 var(--font-body);
	color: var(--color-neutral-800);
}

.buffet-spaces__grid-wrap {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* The frame («Spaces Overview Cards» `3538:13216`) puts the hint on the
   heading's own row, at the right edge, with the arrow pointing down at the
   cards — not under the grid, where this section used to leave it (plan 06
   task 12, composition re-check). Narrow, it stacks under the heading. */
.buffet-spaces__grid-head {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

@media (min-width: 1024px) {

	.buffet-spaces__grid-head {
		flex-direction: row;
		align-items: flex-end;
		justify-content: space-between;
		gap: 24px;
	}
}

.buffet-spaces__grid-title {
	margin: 0;
	overflow-wrap: break-word;
	font: 400 var(--fs-h2-s) / 1 var(--font-title);
	letter-spacing: -1px;
	text-transform: uppercase;
	color: var(--color-neutral-800);
}

.buffet-spaces__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.buffet-spaces__cell {
	display: flex;
}

.buffet-spaces__hint {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font: 700 var(--fs-s-text) / 1.2 var(--font-body);
	text-transform: uppercase;

	/* --color-primary-600 measures 3.37:1 here, short of 4.5:1 at this size
	   (history.css documents the same ramp step falling short) —
	   --color-primary-700 is the ramp's first step that clears it. */
	color: var(--color-primary-700);
}

.buffet-spaces__hint-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* «Buffet Spaces Hero» `3517:12622` and «Spaces Overview Cards»
   `3538:13216` are two SEPARATE full-width sections stacked one under
   the other in the frame (the collage with its heading and paragraph
   overlaid inside it, then the card grid on its own row below) — not a
   sidebar-and-content pair. An earlier pass put the WHOLE intro (and
   everything below it) in a sticky left column, which read as a
   plausible modern pattern but moved the grid title and every card off
   the frame's own x (R13 is binding without a WCAG reason to deviate;
   none applies here, so that was a bug, not a choice). A later pass
   put the collage at its own exact geometry but left the text below it
   instead of inside it — plan 06 task 12's composition re-check named
   that the frame's own box, not a placement choice open to layout
   convenience (task-12-report.md, buffet row). */
@media (min-width: 1024px) {

	/* «Highlight Section» `3517:12628`'s own `align=end`: the heading
	   fills the box (`w:fill`, unaffected), the hug-width subtitle
	   below it hugs the right edge instead of the left — at 390 the
	   frame's own `Component 3` counterpart has no such rule, and the
	   subtitle sits at the same x as the heading (mobile default,
	   above). */
	.buffet-spaces__intro-subtitle {
		align-self: flex-end;
	}

	.buffet-spaces__intro-inner {
		gap: 24px;
	}

	.buffet-spaces__intro-heading-box {
		top: 8.94%;
		left: 25.75%;
		width: 48.49%;
	}

	.buffet-spaces__intro-text {
		top: 78.55%;
		left: 42.39%;
		width: 29.97%;
	}
}

/* The card row's own widths (314/654, buffet-card.css) are the frame's
   1440 pixels, not a proportional value — forcing `nowrap` any earlier
   than that overflowed the page (overflow-sweep.js: 1024/1280 both
   scrollWidth 1362, the row of three cards not fitting a narrower
   container). Between 768 and 1439 the cards wrap onto more than one
   line instead, which is not drawn anywhere but is the safer floor. */
@media (min-width: 1440px) {

	.buffet-spaces__grid {
		flex-wrap: nowrap;
		gap: 24px;
	}

	.buffet-spaces__cell {
		flex: 0 0 auto;
	}
}

/* ---------------------------------------------------------- gallery --- */

.buffet-gallery {
	padding: 64px var(--page-gutter);
}

.buffet-gallery__inner {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

.buffet-gallery__title {
	margin: 0;
	overflow-wrap: break-word;
	font: 400 var(--fs-h2-s) / 1 var(--font-title);
	letter-spacing: -1px;
	text-transform: uppercase;
	text-align: center;
	color: var(--color-neutral-800);
}

/* How much of the next photograph the window shows, including the gap before
   it — the frame leaves a sliver of it at the edge («Атмосфера буфету»
   `3538:13237`). The shared slider reads this; it never sets it itself. */
.buffet-gallery .c-slider {
	--c-slider-peek: 200px;
}

@media (max-width: 767px) {

	.buffet-gallery .c-slider {
		--c-slider-peek: 40px;
	}
}

.buffet-gallery__figure {
	margin: 0;
}

.buffet-gallery__image {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.buffet-gallery__caption {
	margin-top: 12px;
	font: 400 var(--fs-s-text) / 1.375 var(--font-body);
	color: var(--color-neutral-800);
}

@media (min-width: 768px) {

	.buffet-gallery__title {
		text-align: left;
	}
}

/* -------------------------------------------------------- highlights - */

.buffet-highlights {
	padding: 64px var(--page-gutter) 96px;
}

.buffet-highlights__inner {
	display: flex;
	flex-direction: column;
	gap: 54px;
}

.buffet-highlights__title {
	margin: 0;
	overflow-wrap: break-word;
	font: 400 var(--fs-h2-s) / 1 var(--font-title);
	letter-spacing: -1px;
	text-transform: uppercase;
	color: var(--color-neutral-800);
}

.buffet-highlights__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	padding: 0;
	margin: 0;
	list-style: none;
}

.buffet-highlights__tile {
	position: relative;
	display: flex;
	overflow: hidden;
	border-radius: 4px;
}

.buffet-highlights__tile--photo {
	align-items: flex-end;
	min-height: 280px;
	background: var(--color-neutral-200);
}

.buffet-highlights__tile--text {
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	padding: 24px;
	background: var(--color-neutral-100);
}

.buffet-highlights__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.buffet-highlights__tile--photo .buffet-highlights__text {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px;
	color: var(--color-base-white);
	background: linear-gradient(0deg, rgb(0 0 0 / 60%) 0%, rgb(0 0 0 / 0%) 70%);
}

.buffet-highlights__label {
	font: 600 var(--fs-s-text) / 1.375 var(--font-body);
	text-transform: uppercase;
	color: var(--color-primary-400);
}

.buffet-highlights__tile--text .buffet-highlights__label {

	/* Same substitution as .buffet-spaces__hint above: --color-primary-700
	   (5.5:1) is the ramp's first step clearing 4.5:1 on this background. */
	color: var(--color-primary-700);
}

.buffet-highlights__heading {
	font: 400 var(--fs-h6) / 1.2 var(--font-title);
	text-transform: uppercase;
}

.buffet-highlights__tile--text .buffet-highlights__heading {
	color: var(--color-neutral-800);
}

@media (min-width: 1024px) {

	.buffet-highlights__row {
		grid-template-columns: repeat(3, 1fr);
		align-items: stretch;
	}

	/* The frame (`3550:13855`) draws two full-height photo tiles and, beside
	   them, ONE column holding the two text tiles stacked. Naming the row but
	   not the column left the last tile to auto-placement, which put it in the
	   first free cell of row 2 — under the first photograph, with an empty gap
	   beside it (plan 06 task 12, composition re-check). */
	.buffet-highlights__tile--photo {
		grid-row: 1 / span 2;
	}

	.buffet-highlights__tile--text:nth-last-child(2) {
		grid-column: 3;
		grid-row: 1;
	}

	.buffet-highlights__tile--text:last-child {
		grid-column: 3;
		grid-row: 2;
	}
}

@media (forced-colors: active) {

	.buffet-menu-cta,
	.buffet-highlights__tile {
		outline: 1px solid CanvasText;
		outline-offset: -1px;
	}
}