/*
  Page-level layout: resets, page structure, containers, and grids.
  Breakpoints: tablet 48rem (768px), desktop 64rem (1024px).
*/

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

body,
h1, h2, h3, h4, p,
ul, ol, figure {
  margin: 0;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: var(--color-background-primary);
}

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);
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- Page structure ---------- */
main {
  flex: 1;
}

.container {
  width: 100%;
  /* Content is --size-content-max wide (1200px, as in Figma); padding sits outside it */
  max-width: calc(var(--size-content-max) + 2 * var(--space-gutter));
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

/* Wider content (1280px), used by sections whose Figma padding is 80px instead of 120px */
.container--wide {
  max-width: calc(var(--size-content-wide) + 2 * var(--space-gutter));
}

@media (min-width: 64rem) {
  .container {
    max-width: calc(var(--size-content-max) + 2 * var(--space-xl));
    padding-inline: var(--space-xl);
  }

  .container--wide {
    max-width: calc(var(--size-content-wide) + 2 * var(--space-xl));
  }
}

.section {
  padding-block: var(--space-2xl);
}

@media (min-width: 64rem) {
  .section {
    padding-block: var(--space-section);
  }
}

/* ---------- Style guide page ---------- */
.styleguide__section {
  border-top: var(--border-width) solid var(--color-border-primary);
}

.styleguide__group-title {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-md);
}

.swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--size-swatch-min), 1fr));
  gap: var(--space-lg) var(--space-md);
  padding: 0;
  list-style: none;
}

.demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--size-demo-min), 1fr));
  gap: var(--space-lg);
}

.demo-stack {
  display: grid;
  gap: var(--space-2xl);
}


/* =====================================================================
   Shared page layouts
   ===================================================================== */

/* ---------- Page section: a full-width band with a container inside ----------
   Background modifiers follow the semantic background tokens. */
.page-section {
  padding-block: var(--space-section-block-mobile);
}

.page-section__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-section-gap-mobile);
}

.page-section--bg-primary {
  background-color: var(--color-background-primary);
}

.page-section--bg-brand-alt-light {
  background-color: var(--color-background-brand-alt-light);
}

.page-section--bg-light {
  background-color: var(--color-background-light);
}

/* ---------- Card row: one column on phones, then as many ~280px columns as fit ---------- */
.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--size-card-min)), 1fr));
  gap: var(--space-card-gap);
}

/* ---------- Badge stack: providers badges on top of each other; full width on mobile ---------- */
.badge-stack {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-stack-gap);
}

@media (min-width: 64rem) {
  .page-section {
    padding-block: var(--space-section-block);
  }

  .page-section__inner {
    gap: var(--space-section-gap);
  }

  .badge-stack {
    align-items: flex-start;
  }
}

/* ---------- Split section: text panel + photo ----------
   Mobile: stacked (text, then photo; add --media-first for photo on top).
   From 64rem: side by side, photo on the right at 636/1440 of the width.
   Used by the Home closing section and the 404 page. */
.split-section {
  display: flex;
  flex-direction: column;
}

.split-section__content {
  display: flex;
  flex-direction: column;
  gap: var(--split-section-gap-mobile);
  padding: var(--space-section-block-mobile) var(--space-gutter);
  background-color: var(--color-background-brand-light);
}

.split-section__media {
  position: relative;
  height: var(--split-section-media-height-mobile);
}

.split-section__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.split-section--media-first .split-section__media {
  order: -1;
}

/* A <picture> (different photo crop per breakpoint) passes the sizing through to its <img> */
.split-section__media > picture {
  display: contents;
}

/* --fill: the section stretches to fill the space between header and footer
   (404, Partnerships), so wide or zoomed-out screens get no empty band.
   The text stays vertically centred in the mint panel. */
main:has(> .split-section--fill) {
  display: flex;
  flex-direction: column;
}

.split-section--fill {
  flex: 1;
}

.split-section--fill .split-section__content {
  flex: 1;
  justify-content: center;
}

@media (min-width: 64rem) {
  .split-section {
    flex-direction: row;
  }

  .split-section__content {
    flex: 1;
    min-width: 0;
    gap: var(--split-section-gap);
    padding: var(--space-section-block) var(--space-xl);
  }

  .split-section__media {
    flex: 0 0 var(--split-section-media-width);
    height: auto;
  }

  .split-section--media-first .split-section__media {
    order: 0;
  }

  .split-section__photo {
    position: absolute;
    inset: 0;
  }
}

/* Figma's 80px side padding needs room: from 80rem (1280px) */
@media (min-width: 80rem) {
  .split-section__content {
    padding-inline: var(--space-section-block);
  }
}

/* ---------- Closing call to action (Home, Branches): uses .split-section ----------
   Heading + providers badges on the mint panel, photo with the
   "Certified Super Healthee" sticker. */
.closing-cta__heading {
  display: flex;
  flex-direction: column;
  gap: var(--closing-cta-heading-gap-mobile);
}

.closing-cta__subtitle {
  margin: 0;
}

.closing-cta__sticker {
  position: absolute;
  left: var(--closing-cta-sticker-left-mobile);
  top: var(--closing-cta-sticker-top-mobile);
  width: var(--closing-cta-sticker-size-mobile);
  height: auto;
  pointer-events: none;
}

@media (min-width: 64rem) {
  .closing-cta__heading {
    gap: var(--closing-cta-heading-gap);
  }

  .closing-cta__sticker {
    left: var(--closing-cta-sticker-left);
    top: var(--closing-cta-sticker-top);
    width: var(--closing-cta-sticker-size);
  }
}

/* =====================================================================
   Home page (index.html) — Figma frames 4:168 (desktop) and 66:2411 (mobile)
   Mobile first; desktop layout from 64rem (1024px).
   ===================================================================== */

/* ---------- Hero ---------- */
.home-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--color-background-black);
}

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

/* Dark-to-clear overlay so the text stays readable */
.home-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to right, var(--color-overlay-strong) 0%, var(--color-overlay-soft) 70.694%);
}

.home-hero__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--home-hero-gap-mobile);
  padding-block: var(--space-section-block-mobile);
}

.home-hero__heading {
  display: flex;
  flex-direction: column;
  gap: var(--home-hero-heading-gap-mobile);
  max-width: var(--home-hero-heading-width);
}

.home-hero__title {
  color: var(--color-text-accent-light);
}

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

/* Decorative stickers: desktop only (Figma's mobile frame crops them out) */
.home-hero__sticker {
  display: none;
  position: absolute;
  height: auto;
  pointer-events: none;
}

.home-hero__sticker--purpose {
  left: var(--home-sticker-purpose-left);
  top: var(--home-sticker-purpose-top);
  width: var(--home-sticker-purpose-width);
  transform: rotate(-33.05deg);
}

.home-hero__sticker--reset {
  right: 0;
  top: var(--home-sticker-reset-top);
  width: var(--home-sticker-reset-width);
  transform: rotate(15.56deg);
}

@media (min-width: 64rem) {
  .home-featured .page-section__inner {
    gap: var(--home-featured-gap);
  }

  .home-hero__inner {
    gap: var(--home-hero-gap);
    padding-block: var(--home-hero-padding-block);
  }

  .home-hero__heading {
    gap: var(--home-hero-heading-gap);
  }

  .home-hero__sticker {
    display: block;
  }
}


/* =====================================================================
   404 page (404.html) — Figma frames 74:3471 (desktop) / 75:3744 (mobile)
   Uses .split-section--media-first and .section-heading--start.
   ===================================================================== */

.not-found .not-found__heading {
  gap: var(--not-found-heading-gap);
  max-width: var(--not-found-heading-width);
}

.not-found__text {
  margin: 0;
}

@media (min-width: 64rem) {
  .not-found .split-section__content {
    gap: var(--not-found-gap);
    padding-block: var(--not-found-padding-block);
  }
}


/* =====================================================================
   Menu page (menu.html) — Figma frames 4:927 (desktop) / 66:2769 (mobile)
   Uses .page-header, .page-section, horizontal .dish-card, .badge-stack.
   ===================================================================== */

.menu-dishes {
  display: flex;
  flex-direction: column;
  gap: var(--space-section-gap-mobile);
}

/* Dish grid: one column (horizontal cards stack below 768px), two columns from 1280px,
   where each card is close to Figma's 590px */
.menu-dish-grid {
  display: grid;
  gap: var(--space-card-gap);
}

/* "Find us" panel: provider logos + label + title, with social links (bottom right on desktop) */
.menu-find-us {
  display: flex;
  flex-direction: column;
  gap: var(--menu-find-us-gap);
  padding: var(--menu-find-us-padding);
  border-radius: var(--menu-find-us-radius);
  background-color: var(--color-background-brand-alt);
  box-shadow: var(--menu-find-us-shadow);
}

.menu-find-us__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--menu-find-us-content-gap);
  max-width: var(--menu-find-us-text-width);
}

.menu-find-us__text {
  display: flex;
  flex-direction: column;
  gap: var(--menu-find-us-text-gap);
}

.menu-find-us__social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--menu-find-us-social-gap);
}

.menu-find-us__label {
  font-family: var(--accent-font-family);
  font-weight: var(--accent-font-weight);
  font-size: var(--accent-font-size);
  line-height: var(--accent-line-height);
  letter-spacing: var(--accent-letter-spacing);
  color: var(--color-text-primary-faded);
  text-transform: uppercase;
}

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

@media (min-width: 64rem) {
  .menu-dishes {
    gap: var(--menu-dishes-gap);
  }

  .menu-find-us {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }

  .menu-find-us__social {
    align-items: flex-end;
  }
}

@media (min-width: 80rem) {
  .menu-dish-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* =====================================================================
   Branches page (branches.html) — Figma frames 58:1940 (desktop) / 66:3033 (mobile)
   Uses .page-header, .location-card, .split-section + .closing-cta.
   ===================================================================== */

/* Figma gives this page's header 40px top/bottom on phones (Menu uses 20px) */
@media (max-width: 63.9375rem) {
  .branches .page-header {
    padding-block: var(--branches-header-padding-block-mobile);
  }
}


/* =====================================================================
   Partnerships page (partnerships.html) — Figma frames 145:4509 (desktop) / 145:4621 (mobile)
   Uses .split-section--media-first and .section-heading--start (same pattern as 404).
   ===================================================================== */

.partnerships .partnerships__heading {
  gap: var(--partnerships-heading-gap);
}

/* Figma separates the two paragraphs with one empty line */
.partnerships__text p + p {
  margin-top: var(--h6-line-height);
}

@media (min-width: 64rem) {
  .partnerships .split-section__content {
    gap: var(--partnerships-gap);
    padding-block: var(--partnerships-padding-block);
  }
}