/* ==========================================================================
   Layout – base reset and page-level structure. Uses semantic tokens only.
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* The page is at least as tall as the window: main grows to fill any
   leftover space, so the footer always sits at the bottom (no empty gap
   below it on tall or zoomed-out screens). */
body {
  margin: 0;
  background: var(--color-background-primary);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
}

main > * {
  flex-shrink: 0;
}

img,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-width);
}

.container {
  width: 100%;
  /* Content is up to 1200px wide; the gutters sit outside it (Figma: 120px margins at 1440px) */
  max-width: calc(var(--layout-container-max) + 2 * var(--spacing-page-gutter));
  margin-inline: auto;
  padding-inline: var(--spacing-page-gutter);
}

.section {
  padding-block: var(--spacing-section);
}

/* Text for screen readers only (e.g. extra context on a "Read article" link) */
.visually-hidden {
  position: absolute;
  width: var(--visually-hidden-size);
  height: var(--visually-hidden-size);
  margin: calc(-1 * var(--visually-hidden-size));
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Wider container (1280px content), e.g. the "Love for Burger Beast" section */
.container--wide {
  max-width: calc(var(--layout-container-wide-max) + 2 * var(--spacing-page-gutter));
}

/* Card grid: 3 columns on desktop; one centred column below 64rem */
.card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--grid-gap);
  width: 100%;
}

@media (max-width: 64rem) {
  .card-grid {
    grid-template-columns: minmax(0, var(--layout-card-max));
    justify-content: center;
  }
}

/* ==========================================================================
   Page sections (shared by Home and Menu)
   ========================================================================== */

.page-section {
  position: relative;
  padding-block: var(--section-padding-y);
  overflow: hidden;
}

.page-section__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--section-gap);
}

/* Light purple background, e.g. "Love for Burger Beast" */
.page-section--tint {
  background: var(--color-background-brand-extralight);
}

/* ==========================================================================
   Home page (index.html)
   ========================================================================== */

/* ---------- Hero ---------- */
.home-hero {
  background: var(--color-background-brand-dark);
}

.home-hero__image {
  position: absolute;
  top: var(--home-hero-image-top);
  left: var(--home-hero-image-left);
  width: var(--home-hero-image-width);
  max-width: none;
  height: auto;
}

.home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--home-hero-overlay);
}

.home-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--home-hero-gap);
}

.home-hero__text {
  display: flex;
  flex-direction: column;
  gap: var(--home-hero-text-gap);
  max-width: var(--home-hero-content-width);
}

.home-hero__title {
  margin: 0;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text-primary-light);
}

.home-hero__title span {
  display: block;
}

.home-hero__tagline {
  margin: 0;
  color: var(--color-text-primary-light);
}

.home-hero__badges {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--home-hero-badges-gap);
}

@media (max-width: 48rem) {
  /* Photo fills the hero; the purple fade runs top to bottom */
  .home-hero__image {
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .home-hero::after {
    background: var(--home-hero-overlay-mobile);
  }

  .home-hero__title {
    white-space: normal;
  }

  .home-hero__inner,
  .home-hero__badges {
    align-items: stretch;
  }
}

/* ---------- Featured dishes ---------- */
.home-featured {
  background: var(--color-background-brand-dark);
}

.home-featured__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: var(--home-featured-bg-opacity);
}

/* Decorative beast eyes beside the heading (desktop only, as in Figma) */
.home-featured__eyes {
  position: absolute;
  z-index: 1;
  object-fit: cover;
  pointer-events: none;
}

.home-featured__eyes--left {
  top: var(--home-eyes-left-y);
  left: calc(50% + var(--home-eyes-left-x));
  width: var(--home-eyes-left-width);
  height: var(--home-eyes-left-height);
  transform: rotate(var(--home-eyes-left-rotate));
}

.home-featured__eyes--right {
  top: var(--home-eyes-right-y);
  left: calc(50% + var(--home-eyes-right-x));
  width: var(--home-eyes-right-width);
  height: var(--home-eyes-right-height);
  transform: rotate(var(--home-eyes-right-rotate));
}

@media (max-width: 64rem) {
  .home-featured__eyes {
    display: none;
  }
}

/* ---------- Love for Burger Beast (social proof) ---------- */
.home-social .article-slider {
  width: 100%;
}

/* ==========================================================================
   404 page (404.html)
   ========================================================================== */

/* Fills the space between header and footer; content stays vertically centred */
.page-404 {
  position: relative;
  flex-grow: 1;
  display: flex;
  align-items: center;
  padding-block: var(--page-404-padding-y);
  overflow: hidden;
}

.page-404__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Darkening layer over the swirl background */
.page-404::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--page-404-overlay);
}

.page-404__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-404__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--page-404-content-gap);
  max-width: var(--page-404-content-width);
}

.page-404__heading {
  display: flex;
  flex-direction: column;
  gap: var(--page-404-title-gap);
}

.page-404__eyebrow,
.page-404__title,
.page-404__message {
  margin: 0;
}

.page-404__eyebrow,
.page-404__title {
  text-transform: uppercase;
}

.page-404__title,
.page-404__message {
  color: var(--color-text-primary-light);
}

/* Glowing eyes, mirrored as in Figma */
.page-404__eyes {
  flex-shrink: 0;
  width: var(--page-404-eyes-size);
  height: var(--page-404-eyes-size);
  object-fit: cover;
  transform: scaleX(-1);
}

/* Tablet and mobile: eyes on top, text below */
@media (max-width: 64rem) {
  .page-404__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--page-404-stack-gap);
  }

  .page-404__eyes {
    order: -1;
    width: var(--page-404-eyes-width-mobile);
    height: var(--page-404-eyes-height-mobile);
  }
}

/* ==========================================================================
   Menu page (menu.html)
   ========================================================================== */

/* ---------- Dishes ---------- */
.menu-dishes {
  padding-bottom: var(--menu-dishes-padding-bottom);
}

.menu-dishes .page-section__inner {
  gap: var(--menu-dishes-gap);
}

/* Two columns of horizontal dish cards when there's room for both */
.menu-dish-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--menu-dish-min-width)), 1fr));
  gap: var(--grid-gap);
  width: 100%;
}

@media (max-width: 48rem) {
  .menu-dish-grid {
    grid-template-columns: minmax(0, var(--layout-card-max));
    justify-content: center;
  }
}

/* ---------- Providers banner ---------- */
.menu-providers {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--menu-providers-gap);
  width: 100%;
  padding: var(--menu-providers-padding);
  border-radius: var(--menu-providers-radius);
  background: var(--color-background-brand-dark);
  box-shadow: var(--menu-providers-shadow);
}

.menu-providers__text {
  display: flex;
  flex: 0 1 var(--menu-providers-text-width);
  flex-direction: column;
  gap: var(--menu-providers-title-gap);
}

.menu-providers__eyebrow,
.menu-providers__title {
  margin: 0;
}

.menu-providers__eyebrow {
  text-transform: uppercase;
  color: var(--color-text-primary-light-faded);
}

.menu-providers__title {
  color: var(--color-text-primary-light);
}

.menu-providers__badges {
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--home-hero-badges-gap);
}

@media (max-width: 64rem) {
  .menu-providers {
    flex-direction: column;
    align-items: stretch;
  }

  .menu-providers__text {
    flex-basis: auto;
  }

  .menu-providers__badges {
    align-items: stretch;
  }
}

/* ---------- Beast eyes strip (animated) ---------- */
.menu-strip {
  padding-top: var(--menu-strip-padding-top);
  padding-bottom: var(--menu-strip-padding-bottom);
}

.menu-strip img {
  width: 100%;
  height: auto;
}

/* ==========================================================================
   Partnerships page
   Uses the split feature (text panel left, photo right on desktop).
   ========================================================================== */
/* The only section on the page: fills the space between header and footer
   on very tall screens, so no white gap shows above the footer */
.partnerships-feature {
  flex-grow: 1;
}

.partnerships-feature__eyebrow {
  margin: 0;
  text-transform: uppercase;
}

/* Email link in the text: hover turns it the darker red-orange of the
   primary button hover (instead of the default purple link hover) */
.partnerships-feature__email:hover {
  color: var(--partnerships-link-hover-text);
}

/* Tablet and mobile: text on top, photo below at Figma's proportions
   (the split feature normally puts the photo on top) */
@media (max-width: 64rem) {
  /* Any extra height goes to the text panel, not the photo */
  .partnerships-feature {
    grid-template-rows: 1fr auto;
  }

  /* Extra class so this wins over .split-feature--reverse (components.css loads later) */
  .split-feature.partnerships-feature .split-feature__media {
    order: 2;
    height: auto;
    aspect-ratio: var(--partnerships-media-ratio-mobile);
  }

  .partnerships-feature .split-feature__panel {
    gap: var(--partnerships-gap-mobile);
  }
}