/* ===========================================
   POM — Fluid & modern layout system
   Utopia-inspired clamp scale + container queries
   Load after style.css, before responsive.css
   =========================================== */

:root {
  /* Fluid type scale */
  --fluid-text-xs: clamp(0.6875rem, 0.64rem + 0.22vw, 0.75rem);
  --fluid-text-sm: clamp(0.8125rem, 0.76rem + 0.28vw, 0.875rem);
  --fluid-text-base: clamp(0.9375rem, 0.88rem + 0.32vw, 1.0625rem);
  --fluid-text-md: clamp(1rem, 0.92rem + 0.42vw, 1.125rem);
  --fluid-text-lg: clamp(1.0625rem, 0.95rem + 0.55vw, 1.25rem);
  --fluid-text-xl: clamp(1.5rem, 1rem + 1.6vw, 2.625rem);
  --fluid-text-2xl: clamp(1.75rem, 1.1rem + 2vw, 2.875rem);
  --fluid-text-stat: clamp(1.75rem, 0.85rem + 3.2vw, 3.25rem);
  --fluid-text-hero: clamp(2.25rem, 1.25rem + 3.5vw, 4rem);

  /* Fluid spacing */
  --space-3xs: clamp(0.25rem, 0.2rem + 0.2vw, 0.375rem);
  --space-2xs: clamp(0.5rem, 0.42rem + 0.35vw, 0.75rem);
  --space-xs: clamp(0.75rem, 0.62rem + 0.55vw, 1rem);
  --space-sm: clamp(1rem, 0.82rem + 0.85vw, 1.35rem);
  --space-md: clamp(1.35rem, 1rem + 1.25vw, 2rem);
  --space-lg: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  --space-xl: clamp(2.75rem, 1.8rem + 3.5vw, 4.75rem);
  --space-2xl: clamp(3.5rem, 2.2rem + 5vw, 7.5rem);

  /* Fluid layout */
  --split-min-height: clamp(22rem, 28vw + 8rem, 37.5rem);
  --split-media-height: clamp(16rem, 38vw, 37.5rem);
  --content-readable: min(42rem, 100%);
  --content-wide: min(80rem, 100%);
  --grid-gap-fluid: clamp(0.65rem, 0.4rem + 1vw, 1.25rem);
  --radius-fluid: clamp(0.5rem, 0.35rem + 0.5vw, 1.25rem);

  /* Symmetric shell — equal start/end so header & content align */
  --shell-pad-start: max(
    var(--container-px),
    calc((100vw - var(--container-max)) / 2 + var(--container-px))
  );
  --shell-pad-end: var(--shell-pad-start);

  /* Motion — modern easing */
  --ease-spring: cubic-bezier(0.34, 1.26, 0.64, 1);
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --- Base fluid typography --- */
body {
  font-size: var(--fluid-text-base);
}

.section-label {
  font-size: var(--fluid-text-md);
  margin-bottom: var(--space-2xs);
}

.section-headline {
  font-size: var(--fluid-text-xl);
  margin-bottom: var(--space-sm);
  text-wrap: balance;
}

.section-body {
  font-size: var(--fluid-text-md);
  max-width: var(--content-wide);
}

.purpose-tagline__text {
  font-size: clamp(1.0625rem, 0.95rem + 0.55vw, 1.25rem);
}

/* --- Fluid sections --- */
.pom-section {
  padding-block: var(--section-py);
}

.pom-section.food-culture {
  padding-block-end: 0;
}

.split-band,
.split-band__media,
.split-band__media img {
  min-height: var(--split-min-height);
}

.split-band__content {
  padding-block: var(--space-lg);
}

.split-band__inner {
  max-width: none;
}

/* --- Fluid header --- */
#main-header .navbar-brand {
  margin-inline-end: clamp(1.25rem, 3vw, 4rem);
}

#main-header .btn-contact {
  margin-inline-start: clamp(1.5rem, 8vw, 10rem);
  padding: 0.5em clamp(1rem, 2vw, 1.625rem);
  border-radius: 999px;
}

#main-header .nav-link {
  padding: 0.5em clamp(0.75rem, 1.2vw, 1.125rem) !important;
  font-size: var(--fluid-text-sm);
}

#main-header .navbar-brand .logo-img,
#main-header .navbar-brand img {
  height: clamp(2.25rem, 4vw + 1rem, 5.125rem);
  width: auto;
}

#main-header.scrolled .navbar-brand .logo-img,
#main-header.scrolled .navbar-brand img {
  height: clamp(1.875rem, 3.5vw + 0.5rem, 2.5rem);
}

/* --- Container queries: brands (typography only) --- */
.brands-picker {
  container-type: inline-size;
  container-name: brands;
}

/* --- Container queries: product companion grid --- */
#products .container {
  container-type: inline-size;
  container-name: products;
}

.product-grid {
  gap: var(--grid-gap-fluid);
  min-height: clamp(36rem, 64vw, 48rem);
}

@container products (min-width: 52rem) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-rows: minmax(clamp(15rem, 22cqi, 20rem), 1fr);
    grid-auto-flow: row dense;
  }

  /* Feature tiles span a 2x2 block; dense packing keeps the mosaic gap-free
     regardless of how many category tiles there are. */
  .product-tile--hero {
    grid-column: span 2;
    grid-row: span 2;
  }
}

@container products (min-width: 30rem) and (max-width: 51.99rem) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(clamp(16rem, 42cqi, 22rem), 1fr);
    grid-auto-flow: row dense;
  }

  /* Feature tiles become full-width banners on tablet — taller so images stay full. */
  .product-tile--hero {
    grid-column: 1 / -1;
    grid-row: span 2;
    min-height: clamp(20rem, 52vw, 28rem);
  }
}

@container products (max-width: 29.99rem) {
  .product-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: minmax(clamp(16rem, 72cqi, 24rem), 1fr);
    grid-auto-flow: row;
  }

  .product-tile--hero {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: clamp(16rem, 72cqi, 24rem);
  }
}

.product-tile {
  border-radius: var(--radius-fluid);
  min-height: 0;
}

.product-tile__title {
  font-size: 1rem;
}

.product-tile__desc {
  font-size: var(--fluid-text-sm);
  max-width: min(20rem, 100%);
}

/* --- Container queries: dish grid --- */
#recipe-dishes {
  container-type: inline-size;
  container-name: dishes;
}

.dish-grid {
  gap: var(--dish-gap, var(--grid-gap-fluid));
  padding-inline: clamp(var(--container-px), 2vw, 2rem);
}

/* Large screens (>=1440) — classic wide / narrow / wide mosaic */
@container dishes (min-width: 90rem) {
  .dish-grid {
    grid-auto-flow: column dense;
    grid-template-rows: repeat(2, var(--dish-row, clamp(9rem, 14cqi, 13rem)));
    grid-auto-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
  .dish-grid .recipe-card--feature {
    grid-row: span 2;
  }
}

/* Above 1365 up to ~1440: balanced alternating mosaic (unchanged above 1365) */
@container dishes (min-width: 84.41rem) and (max-width: 89.99rem) {
  .dish-grid {
    grid-auto-flow: column dense;
    grid-template-rows: repeat(2, var(--dish-row, clamp(7.5rem, 12.9cqi, 12rem)));
    grid-auto-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }
  .dish-grid .recipe-card--feature {
    grid-row: span 2;
  }
}

/* Tablet & laptop (~448–1365px): use the same clean mosaic as phones — each
   feature dish spans the full width with the remaining dishes paired 2-up.
   40cqi row height keeps the feature banner's ~2.5:1 proportion as the
   container grows (so it looks right at 740px and 1280px, not stretched). */
@container dishes (min-width: 28rem) and (max-width: 84.4rem) {
  .dish-grid {
    display: grid;
    grid-auto-flow: row dense;
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(8rem, 40cqi, 30rem);
    align-items: stretch;
    gap: var(--dish-gap, var(--grid-gap-fluid));
  }

  .dish-grid .recipe-card,
  .dish-grid .recipe-card--feature {
    max-width: none;
    flex: initial;
    aspect-ratio: auto;
    height: 100%;
  }

  .dish-grid .recipe-card--feature {
    grid-column: 1 / -1;
    grid-row: span 1;
  }
}

@container dishes (max-width: 27.99rem) {
  .dish-grid {
    grid-auto-flow: row dense;
    grid-template-rows: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: clamp(6.5rem, 40cqi, 10rem);
    gap: var(--space-2xs);
  }

  .dish-grid .recipe-card--feature {
    grid-column: 1 / -1;
    grid-row: span 1;
  }
}

.dish-grid .recipe-card {
  border-radius: var(--radius-fluid);
}

/* --- Container queries: stats --- */
#wellness .container {
  container-type: inline-size;
  container-name: wellness;
}

.stats-row {
  gap: clamp(var(--space-md), 4cqi, 5rem);
  margin-top: var(--space-lg);
}

@container wellness (max-width: 28rem) {
  .stats-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
    gap: var(--space-sm);
  }

  .stat-item {
    min-width: 0;
  }
}

.stat-number {
  font-size: var(--fluid-text-stat);
}

.stat-label {
  font-size: var(--fluid-text-xs);
}

/* --- Container queries: catalog (products page) --- */
.product-catalog .container {
  container-type: inline-size;
  container-name: catalog;
}

.catalog-grid {
  gap: var(--grid-gap-fluid);
}

@container catalog (min-width: 48rem) {
  .catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@container catalog (min-width: 32rem) and (max-width: 47.99rem) {
  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container catalog (min-width: 20rem) and (max-width: 31.99rem) {
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container catalog (max-width: 19.99rem) {
  .catalog-grid {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .catalog-product {
    width: min(100%, 18rem);
  }
}

/* Cap the catalog at 3 columns from 1279px down to the tablet breakpoint.
   Below 768px the container queries above already resolve to 3 → 2 → 1
   columns, so this range dovetails without a jump. Viewport-based so it
   reliably overrides the ≥48rem (4-col) container query at 1279px, where the
   container measures ~79rem and can't be distinguished from 1280px by width. */
@media (min-width: 768px) and (max-width: 1279px) {
  .catalog-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Drop to 2 columns from 740px down to 480px. Below 480px the container
   queries above already resolve to 2 → 1 columns (the single-column,
   centred layout for the smallest phones), so the floor keeps that intact. */
@media (min-width: 480px) and (max-width: 740px) {
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.catalog-product {
  border-radius: var(--radius-fluid);
  padding: var(--space-xs);
}

.catalog-product__visual {
  min-height: 0;
  aspect-ratio: 1;
  border-radius: var(--radius-fluid);
  padding: clamp(0.65rem, 2cqi, 1.25rem);
}

.catalog-product__visual img {
  max-height: 100%;
  width: auto;
  max-width: 100%;
}

.catalog-product__name {
  font-size: clamp(0.6875rem, 0.55rem + 0.5cqi, 0.9375rem);
}

.catalog-product__badge {
  font-size: clamp(0.625rem, 0.5rem + 0.4cqi, 0.875rem);
}

/* --- Container queries: values (about) --- */
.purpose-values .container {
  container-type: inline-size;
  container-name: values;
}

.values-grid {
  gap: clamp(var(--space-sm), 3cqi, var(--space-lg));
  margin-top: var(--space-lg);
}

@container values (min-width: 60rem) {
  .values-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container values (min-width: 28rem) and (max-width: 59.99rem) {
  .values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container values (max-width: 27.99rem) {
  .values-grid {
    grid-template-columns: 1fr;
  }
}

.value-card__title {
  font-size: clamp(1rem, 0.85rem + 0.8cqi, 1.5rem);
}

.value-card__desc {
  font-size: clamp(1rem, 0.9rem + 0.45cqi, 1.25rem);
}

/* --- Fluid nutrition & social --- */
.pom-section--nutrition {
  min-height: clamp(14rem, 38vw, 35rem);
  padding-block: 0;
}

.nutrition-title {
  font-size: clamp(1.5rem, 1rem + 1.8vw, 3rem);
  max-width: min(11rem, 40vw);
}

#social .social-handle {
  font-size: var(--fluid-text-2xl);
  text-wrap: balance;
}

.social-carousel__track .social-card {
  flex: 0 0 clamp(11rem, 22vw, 15rem);
  min-width: clamp(11rem, 22vw, 15rem);
  border-radius: var(--radius-fluid);
}

/* --- Brand lifestyle fluid --- */
.brand-lifestyle .split-band {
  min-height: clamp(18rem, 32vw, 32rem);
}

.brand-lifestyle .split-band__media img {
  min-height: var(--split-media-height);
}

.brand-lifestyle__headline {
  font-size: clamp(1.35rem, 1rem + 1.4vw, 2.25rem);
  text-wrap: balance;
}

.brand-lifestyle__body {
  font-size: var(--fluid-text-base);
}

.brand-lifestyle__inner {
  max-width: min(32rem, 100%);
}

/* --- Purpose page: fluid split ratios + container stacking --- */
.purpose-section {
  container-type: inline-size;
  container-name: purpose;
}

#our-story .split-band,
#our-vision .split-band,
.purpose-zigzag-flow .split-band--img-left {
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
}

#our-mission .split-band,
.purpose-zigzag-flow .split-band--img-right {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
}

/* Stack the zigzag into a full-width single column (image top, content below)
   up to 1024px — same layout as the ≤768px view, just extended. Viewport-based
   so it reliably overrides the fluid split ratios above. */
@media (max-width: 1024px) {
  #our-story .split-band,
  #our-vision .split-band,
  #our-mission .split-band,
  .purpose-zigzag-flow .split-band,
  .purpose-zigzag-flow .split-band--img-left,
  .purpose-zigzag-flow .split-band--img-right {
    grid-template-columns: 1fr;
  }

  #our-mission .split-band__media,
  .purpose-zigzag-flow .split-band--img-right .split-band__media {
    order: -1;
  }
}

/* --- Modern image rendering --- */
img {
  height: auto;
  max-width: 100%;
}

/* --- Smooth focus for keyboard users --- */
:focus-visible {
  outline: 2px solid var(--color-gold);
  outline-offset: 0.2em;
  border-radius: 2px;
}

/* --- Prefer reduced data on slow connections (optional progressive) --- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
  }
}