/* ====================================================================
   FLUID.CSS — responsive container width + fluid type scale
   Loaded AFTER tokens.css / layout.css / components.css so it can
   override --container and font-size rules without editing legacy files.
   Scales cleanly from a 320px phone up through 2560px+ ultrawide monitors.
==================================================================== */

:root {
  /* Old: fixed 1240px container → big dead margins past ~1600px viewports.
     A later fix capped at 1440px, then 1800px, but any fixed cap eventually
     gets hit again — on a wide enough window, or zoomed out far enough,
     the browser-reported viewport outgrows the cap and the same
     dead-margin, content-looks-smaller effect comes back.
     Fix: drop the cap. The container is a pure percentage of the viewport
     now, so it keeps scaling in lockstep with the window/zoom permanently
     — there's no width at which it plateaus and starts looking small
     again. Same idea below for type: the min() ceiling is gone from each
     clamp() (kept as max() so there's still a floor on small screens),
     so headings and body copy keep growing right along with the
     container instead of freezing while the container keeps widening. */
  --container: 92vw;

  /* Fluid type scale — floor size + viewport-relative growth, no ceiling. */
  --fs-body:  max(1rem, 0.94rem + 0.3vw);
  --fs-small: max(0.82rem, 0.78rem + 0.2vw);
  --fs-h1:    max(2.2rem, 1.4rem + 3.6vw);
  --fs-h2:    max(1.7rem, 1.2rem + 2.2vw);
  --fs-h3:    max(1.25rem, 1.05rem + 0.9vw);
  --fs-h4:    max(1.05rem, 0.95rem + 0.4vw);
  --fs-lede:  max(1rem, 0.92rem + 0.4vw);
}

/* .container already reads var(--container) from tokens.css, so
   redefining the variable above is enough — but widen the hard cap
   here too in case a legacy rule set max-width directly. */
.container {
  max-width: var(--container);
}

@media (min-width: 1600px) {
  .container { padding: 0 3rem; }
}

body {
  font-size: var(--fs-body);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

.lede {
  font-size: var(--fs-lede);
}

.eyebrow,
.photo-credit,
small {
  font-size: var(--fs-small);
}

/* Some legacy inline/embedded styles set fixed clamp() px-based sizes on
   .page-hero h1 directly (see layout.css) — these fluid vw-inclusive
   rules already handle ultrawide growth, this just keeps hero copy from
   out-growing its column on very wide screens. */
.page-hero h1 {
  font-size: max(2.4rem, 5.5vw);
  max-width: min(760px, 60vw);
}
.page-hero .lede {
  max-width: min(540px, 46vw);
}

/* Same ceiling-removal for the homepage hero and the recurring
   section-head heading — both had their own hardcoded clamp() max in
   components.css that would otherwise still plateau even with the
   container and --fs-* scale above now uncapped. */
.hero h1 {
  font-size: max(3.2rem, 9vw);
}
.section-head h2 {
  font-size: max(2rem, 4.4vw);
}
@media (max-width: 760px) {
  .page-hero h1 { max-width: 100%; }
  .page-hero .lede { max-width: 100%; }
}

/* Sections that used a hardcoded inline max-width for narrow reading
   columns (About/Gallery/Contact prose blocks) still read comfortably —
   clamp keeps them from stretching edge-to-edge on ultrawide displays. */
.section .container[style*="max-width"] {
  width: min(100%, 760px);
}

/* Several page sections (About, Contact, Quality, Wholesale) set their
   desktop 2- or 3-column layout as an INLINE style directly on
   `.container`, e.g. style="display:grid;grid-template-columns:1fr 1.2fr".
   An inline style's specificity beats a normal external stylesheet rule,
   so no ordinary media query below could ever collapse these to a single
   column — the columns stayed rigid at every viewport width, squeezing
   text/forms into slivers and pushing them off the right edge on phones
   and tablets. This is the actual cause of the "layout breaks / overflows
   on mobile" and "containers don't scale like the background" bugs.
   `!important` is required here specifically to out-rank the inline
   style; nothing else on the page uses `!important` for this reason.
   Desktop layouts (>760px) are completely untouched. */
@media (max-width: 760px) {
  .container[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* Quality page's "Six checks" grid sets its 3-column layout the same
   way (inline style, this time on .qa-grid instead of .container), so
   it needs the same !important override — otherwise it stays locked at
   3 forced-narrow columns on phones regardless of the .qa-grid media
   queries in components.css, which an inline style always outranks. */
@media (max-width: 760px) {
  .qa-grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}
@media (min-width: 761px) and (max-width: 980px) {
  .qa-grid[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
  }
}

/* ── Language switcher ── */
.lang-switch {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}
.lang-btn {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  border: 1px solid var(--line);
  background: transparent;
  color: inherit;
  border-radius: var(--radius-sm);
  padding: 0.3rem 0.55rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.lang-btn span { display: none; }
@media (min-width: 1200px) {
  .lang-btn span { display: inline; }
}
.lang-btn:hover { border-color: var(--gold-500); }
.lang-btn.is-active {
  background: var(--gold-500);
  border-color: var(--gold-500);
  color: var(--green-950);
}
.site-header.is-scrolled .lang-btn,
.site-header .lang-btn { color: inherit; }
.mobile-nav .lang-switch { justify-content: center; }
.mobile-nav .lang-btn span { display: inline; }

.lang-float {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 1100;
  background: rgba(6, 32, 29, 0.92);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 999px);
  padding: 0.4rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25);
  color: var(--cream-100);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.lang-float .lang-btn { color: inherit; }
.lang-float .lang-btn span { display: inline; }
.lang-float.is-hidden {
  opacity: 0;
  transform: translateY(0.5rem);
  pointer-events: none;
}
@media (max-width: 520px) {
  .lang-float { right: 0.7rem; bottom: 0.7rem; padding: 0.35rem; }
  .lang-float .lang-btn span { display: none; }
}

/* ── Homepage carousel ── */
.cs7-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 640px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--green-950);
  touch-action: pan-y;
}
.cs7c-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s cubic-bezier(.65,0,.35,1);
}
.cs7c-slide {
  flex: 0 0 100%;
  height: 100%;
  margin: 0;
  position: relative;
}
.cs7c-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cs7c-slide figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.5rem 1.5rem;
  background: linear-gradient(0deg, rgba(6,32,29,0.88) 0%, rgba(6,32,29,0) 100%);
  color: var(--cream-100);
  font-family: var(--font-display);
  font-style: italic;
  font-size: max(0.95rem, 0.85rem + 0.6vw);
  line-height: 1.4;
}
.cs7c-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: none;
  background: rgba(6,32,29,0.5);
  color: var(--cream-100);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
}
.cs7c-arrow:hover { background: var(--gold-500); color: var(--green-950); }
.cs7c-prev { left: 1rem; }
.cs7c-next { right: 1rem; }
.cs7c-dots {
  position: absolute;
  bottom: 1.1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.45rem;
}
.cs7c-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  border: none;
  background: rgba(251,249,244,0.4);
  cursor: pointer;
  padding: 0;
}
.cs7c-dot.is-active { background: var(--gold-500); width: 1.4rem; border-radius: 4px; }
.cs7c-playpause {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 50%;
  border: none;
  background: rgba(6,32,29,0.5);
  color: var(--cream-100);
  font-size: 0.7rem;
  cursor: pointer;
}
.cs7c-playpause:hover { background: var(--gold-500); color: var(--green-950); }
@media (max-width: 640px) {
  .cs7-carousel { aspect-ratio: 4 / 5; border-radius: 0; }
  .cs7c-arrow { width: 2.1rem; height: 2.1rem; font-size: 1.2rem; }
}