/* ===========================================
   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 — fluid on all viewports */
  --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);
}

/* Hero alignment with artboard headline — large screens only */
@media (min-width: 1200px) {
  :root {
    --shell-pad-start: max(
      var(--container-px),
      calc(50vw + (242 - 960) * max(100vw / 1920, 100dvh / 939))
    );
    --shell-pad-end: max(
      var(--container-px),
      calc((100vw - var(--container-max)) / 2 + var(--container-px))
    );
  }
}

/* --- 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);
  padding-inline: clamp(var(--space-md), 4vw, var(--space-xl));
}

.split-band__inner {
  max-width: var(--content-readable);
}

/* --- 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 --- */
.brands-picker {
  container-type: inline-size;
  container-name: brands;
}

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

@container brands (min-width: 56rem) {
  .brands-showcase-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@container brands (min-width: 36rem) and (max-width: 55.99rem) {
  .brands-showcase-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .brand-showcase-item:nth-child(4),
  .brand-showcase-item:nth-child(5) {
    grid-column: span 1;
  }

  .brand-showcase-item:nth-child(5) {
    grid-column: 2 / span 2;
  }
}

@container brands (max-width: 35.99rem) {
  .brands-showcase-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(-1 * var(--container-px));
    padding-inline: var(--container-px);
  }

  .brands-showcase-grid::-webkit-scrollbar {
    display: none;
  }

  .brand-showcase-item {
    flex: 0 0 clamp(9rem, 38cqi, 11.5rem);
    scroll-snap-align: start;
  }
}

.brand-showcase-item__name {
  font-size: clamp(0.6875rem, 0.5rem + 0.9cqi, 0.875rem);
}

.brand-showcase-item__desc {
  font-size: clamp(0.625rem, 0.5rem + 0.65cqi, 0.75rem);
  max-width: min(11.5rem, 100%);
}

.brand-showcase-item__product {
  min-height: clamp(7rem, 18cqi, 16rem);
}

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

.product-grid {
  gap: var(--grid-gap-fluid);
  min-height: auto;
}

@container products (min-width: 52rem) {
  .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: repeat(2, minmax(clamp(10rem, 16cqi, 14rem), 1fr));
  }

  .product-tile--hero {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
  }

  .product-tile:nth-child(2) { grid-column: 3; grid-row: 1; }
  .product-tile:nth-child(3) { grid-column: 4; grid-row: 1; }
  .product-tile:nth-child(4) { grid-column: 3; grid-row: 2; }
  .product-tile:nth-child(5) { grid-column: 4; grid-row: 2; }
}

@container products (min-width: 30rem) and (max-width: 51.99rem) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .product-tile,
  .product-tile--hero,
  .product-tile:nth-child(n) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: clamp(11rem, 32cqi, 16rem);
  }

  .product-tile--hero {
    grid-column: 1 / -1 !important;
    min-height: clamp(13rem, 40cqi, 20rem);
  }
}

@container products (max-width: 29.99rem) {
  .product-grid {
    grid-template-columns: 1fr;
  }

  .product-tile,
  .product-tile--hero,
  .product-tile:nth-child(n) {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    min-height: clamp(11rem, 55cqi, 16rem);
  }
}

.product-tile {
  border-radius: var(--radius-fluid);
  min-height: clamp(10rem, 18vw, 14rem);
}

.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(--grid-gap-fluid);
  padding-inline: clamp(var(--container-px), 2vw, 2rem);
}

@container dishes (min-width: 52rem) {
  .dish-grid {
    grid-template-columns:
      minmax(0, 2fr)
      minmax(0, 1fr)
      minmax(0, 2fr)
      minmax(0, 1fr)
      minmax(0, 2fr);
    grid-template-rows: auto auto;
  }
}

@container dishes (min-width: 28rem) and (max-width: 51.99rem) {
  .dish-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: auto;
  }

  .dish-grid .recipe-card,
  .dish-grid .recipe-card--tall,
  .dish-grid .recipe-card--half,
  .dish-grid [class*="recipe-card--col-"],
  .dish-grid [class*="recipe-card--row-"] {
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 4 / 5;
    min-height: clamp(7.5rem, 28cqi, 11rem);
    height: auto;
  }

  .dish-grid .recipe-card--col-wide-1 {
    grid-column: 1 / -1 !important;
    aspect-ratio: 16 / 9;
    min-height: clamp(9rem, 32cqi, 13rem);
  }
}

@container dishes (max-width: 27.99rem) {
  .dish-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2xs);
  }

  .dish-grid .recipe-card,
  .dish-grid [class*="recipe-card--"] {
    grid-column: auto !important;
    grid-row: auto !important;
    aspect-ratio: 3 / 4;
    min-height: clamp(6.5rem, 40cqi, 10rem);
  }
}

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

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

.catalog-product__visual {
  min-height: clamp(13.5rem, 46cqi, 17rem);
  aspect-ratio: 1;
  border-radius: var(--radius-fluid);
  padding: clamp(0.35rem, 0.8cqi, 0.6rem);
}

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

.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: 48rem) {
  .values-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container values (min-width: 28rem) and (max-width: 47.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.125rem);
}

@media (max-width: 767.98px) {
  .purpose-values {
    padding-block: clamp(2.5rem, 8vw, 3.5rem);
  }

  .value-card:hover {
    transform: none;
  }
}

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

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

/* Card sizing lives in style.css + responsive.css */

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

@container purpose (max-width: 48rem) {
  #our-story .split-band,
  #our-vision .split-band,
  #our-mission .split-band,
  .purpose-zigzag-flow .split-band {
    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;
  }
}