/*
  layout.css — WellVigour redesign
  Grid systems, section architecture, spatial rhythm
  Seed A=4: Mosaic — asymmetric CSS grid, no uniform card sizes
  ============================================================
*/

/* ── Section shared base ──────────────────────────────────── */
.section {
  position: relative;
  width: 100%;
}

.section-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── HERO — Mosaic-style split with type dominance ───────── */
.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: 1fr;
  position: relative; /* needed for absolutely positioned hero-backdrop */
  background: var(--surface-base);
  /* padding-top accounts for fixed nav (4rem) + disclosure strip (~2.25rem) */
  padding-top: calc(var(--nav-height) + 2.25rem);
  overflow: hidden;
}

.hero-layout {
  display: grid;
  grid-template-columns: 58% 1fr;
  grid-template-rows: 1fr auto;
  min-height: calc(100svh - var(--nav-height) - 2.25rem);
}

/* Left column: typography layer */
.hero-type {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-20) var(--space-16) var(--space-16) var(--gutter);
  position: relative;
  z-index: 2;
}

/* Right column: visual layer */
.hero-visual {
  grid-column: 2;
  grid-row: 1 / 3;
  position: relative;
  overflow: hidden;
  /* Hard geometric cut on left edge — the signature clip-path moment */
  clip-path: var(--clip-hero-img);
}

.hero-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% center;
  filter: contrast(1.15) brightness(0.88) saturate(0.82);
}

/* Cobalt color treatment overlay on hero image */
.hero-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand-primary);
  opacity: 0.18;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Typographic backdrop — giant "05" numeral */
.hero-backdrop {
  position: absolute;
  right: 42%;
  bottom: -0.12em;
  font-family: var(--font-display);
  font-size: clamp(12rem, 38vw, 50rem);
  font-weight: 700;
  color: var(--brand-primary);
  opacity: 0.035;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  letter-spacing: -0.05em;
}

/* ── INTRO / CONTEXT SECTION ─────────────────────────────── */
.section-intro {
  background: var(--surface-base);
  border-top: 2px solid var(--brand-primary);
  padding: var(--space-16) 0;
}

.intro-layout {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-16);
  align-items: start;
}

.intro-label-col {
  padding-top: var(--space-2);
}

.intro-content-col {
  border-left: 2px solid var(--border-mid);
  padding-left: var(--space-10);
}

/* ── REASONS MOSAIC — Seed A=4, the core layout paradigm ─── */
.section-reasons {
  background: var(--surface-base);
  padding: var(--space-6) 0 0;
}

.reasons-header {
  padding: var(--space-12) var(--gutter);
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  border-bottom: 2px solid var(--brand-primary);
  margin-bottom: var(--space-3);
}

.reasons-header-rule {
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}

/* The mosaic grid itself — no uniform sizing */
.reasons-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: minmax(300px, auto);
  gap: 3px;
  background: var(--brand-primary); /* Gap color = cobalt lines between cards */
}

/* Mosaic spans — each card a different size, no two the same */
.reason-card.r1 {
  grid-column: 1 / 5;
  grid-row: 1 / 3;
  min-height: 520px;
}

.reason-card.r2 {
  grid-column: 5 / 7;
  grid-row: 1 / 2;
}

.reason-card.r3 {
  grid-column: 5 / 7;
  grid-row: 2 / 3;
}

.reason-card.r4 {
  grid-column: 1 / 4;
  grid-row: 3 / 4;
}

.reason-card.r5 {
  grid-column: 4 / 7;
  grid-row: 3 / 4;
}

/* ── PRODUCT CTA — Full-bleed cobalt, mandatory layout moment */
.section-cta {
  background: var(--brand-primary);
  padding: var(--space-24) 0;
  position: relative;
  overflow: hidden;
  /* Diagonal clip on entry */
  clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%);
  margin-top: -2px;
}

.section-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 80% 50%, rgba(255,255,255,0.06) 0%, transparent 60%),
    radial-gradient(ellipse at 10% 80%, rgba(0,0,0,0.2) 0%, transparent 50%);
  pointer-events: none;
}

.cta-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-16);
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ── FOOTER ───────────────────────────────────────────────── */
.site-footer {
  background: var(--text-primary);
  color: var(--text-inverse);
  position: relative;
  overflow: hidden;
}

.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--space-12);
  padding: var(--space-20) var(--gutter) var(--space-8);
  max-width: var(--max-content);
  margin: 0 auto;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-brand-col {
  grid-column: 1;
}

.footer-contact-col {
  grid-column: 2;
}

.footer-nav-col {
  grid-column: 3;
}

.footer-wordmark-row {
  padding: 0 var(--gutter);
  max-width: var(--max-content);
  margin: 0 auto;
  overflow: hidden;
}

.footer-disclosures {
  padding: var(--space-8) var(--gutter);
  max-width: var(--max-content);
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.footer-bottom {
  padding: var(--space-5) var(--gutter);
  max-width: var(--max-content);
  margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
}

/* ── SUBPAGE LAYOUT (contact, privacy, terms, disclaimer) ─── */
.subpage-main {
  flex: 1;
  padding: var(--space-16) var(--gutter);
  max-width: calc(var(--max-content) * 0.75);
  margin: 0 auto;
  width: 100%;
}

.subpage-card {
  background: var(--surface-base);
  border-top: 4px solid var(--brand-primary);
  border-left: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  padding: var(--space-12) var(--space-12) var(--space-16);
}

.subpage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.subpage-grid-item {
  border: 1px solid var(--border-subtle);
  border-top: 2px solid var(--brand-primary);
  padding: var(--space-6);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hero-layout {
    grid-template-columns: 55% 1fr;
  }

  .hero-type {
    padding: var(--space-16) var(--space-10) var(--space-12) var(--gutter);
  }

  .intro-layout {
    grid-template-columns: 1fr 1.75fr;
    gap: var(--space-10);
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
  }

  .footer-nav-col {
    grid-column: 1 / -1;
  }
}

@media (max-width: 900px) {
  /* Hero stacks */
  .hero-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
  }

  .hero-type {
    grid-column: 1;
    grid-row: 2;
    padding: var(--space-10) var(--gutter) var(--space-12);
  }

  .hero-visual {
    grid-column: 1;
    grid-row: 1;
    min-height: 55vw;
    clip-path: none;
  }

  .hero-backdrop {
    display: none;
  }

  /* Mosaic collapses to 2-column */
  .reasons-mosaic {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }

  .reason-card.r1 { grid-column: 1 / -1; grid-row: auto; min-height: 420px; }
  .reason-card.r2 { grid-column: 1; grid-row: auto; }
  .reason-card.r3 { grid-column: 2; grid-row: auto; }
  .reason-card.r4 { grid-column: 1 / -1; grid-row: auto; }
  .reason-card.r5 { grid-column: 1 / -1; grid-row: auto; }

  /* CTA stacks */
  .cta-layout {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  /* Intro stacks */
  .intro-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .intro-content-col {
    border-left: none;
    border-top: 2px solid var(--border-mid);
    padding-left: 0;
    padding-top: var(--space-8);
  }

  .section-cta {
    clip-path: polygon(0 6vw, 100% 0, 100% 100%, 0 100%);
    padding-top: calc(var(--space-24) + 4vw);
  }
}

@media (max-width: 640px) {
  /* Mosaic fully single-column */
  .reasons-mosaic {
    grid-template-columns: 1fr;
  }

  .reason-card.r1,
  .reason-card.r2,
  .reason-card.r3,
  .reason-card.r4,
  .reason-card.r5 {
    grid-column: 1 / -1;
    grid-row: auto;
    min-height: 380px;
  }

  /* r4 and r5 had horizontal internal layouts — collapse to vertical at mobile */
  .reason-card.r4,
  .reason-card.r5 {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }

  .reason-card.r4 .reason-img,
  .reason-card.r5 .reason-img {
    grid-column: 1;
    grid-row: 1;
    min-height: 220px;
  }

  .reason-card.r4 .reason-body,
  .reason-card.r5 .reason-body {
    grid-column: 1;
    grid-row: 2;
  }

  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-brand-col,
  .footer-contact-col,
  .footer-nav-col {
    grid-column: 1;
  }

  .subpage-grid {
    grid-template-columns: 1fr;
  }
}

/* Also fix horizontal cards at tablet if needed */
@media (max-width: 900px) {
  .reason-card.r4,
  .reason-card.r5 {
    grid-template-columns: 1fr 1.4fr;
  }
}