/* ============================================================
   HOME.CSS — Arihant Fabrics
   Role: Homepage-specific styles only.
         All shared styles live in base/layout/components.css.
   ============================================================ */


/* ============================================================
   HERO SECTION
   Design: left text / right image split layout.
   Desktop : two-column grid (1.6fr 1fr), 80px horizontal padding
             matching header — ensures text left-edge aligns with
             logo and image right-edge aligns with Enquire Now.
   Tablet  : single column, image above text, 280px image height,
             fade-to-white gradient at image bottom.
   Mobile  : single column, image above text, 280px image height,
             fade-to-white gradient at image bottom, full-width
             stacked buttons. No enforced min-height — section
             sizes to its content rather than filling the viewport.

   Key approved values:
     Desktop H1        : clamp(2rem, 4.375vw, 3.5rem)
     Desktop subtitle  : clamp(0.875rem, 1.25vw, 1rem)
     Subtitle max-width: 56ch
     Column ratio      : 1.6fr 1fr
     Section padding   : min(4rem, 5vw) 80px
     Image             : aspect-ratio 1/1, object-fit cover, center
     Mobile H1         : clamp(1.5rem, 4.5vw, 1.75rem)
     Fill btn bg       : #7d6c54  hover: #615039  text: #f9f9f9
     Btn border-radius : 8px
     Btn min-height    : 44px (WCAG 2.2 touch target)
   ============================================================ */

/* ── Desktop hero section ── */
.hero-new {
  height: calc(100vh - var(--header-height));
  height: calc(100svh - var(--header-height));
  background: var(--color-white);
  position: relative;
  padding: min(4rem, 5vw) var(--page-padding-inline);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Two-column grid row: text left, image right */
.hero-new__row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: min(3rem, 4vw);
  align-items: center;
  width: 100%;
}

/* Left text column */
.hero-new__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ── H1 ──
   Intentionally overrides --font-size-h1 token — hero display
   heading needs this larger size. Token stays correct for inner pages.
   clamp reaches 3.5rem at 1280px and stays there at wider viewports. */
.hero-new__heading {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.375vw, 3.5rem);
  font-weight: 400;
  color: var(--color-navy);
  line-height: 1.15;
  margin: 0 0 min(1.5rem, 2vw);
  text-align: left;
}

.hero-new__heading strong {
  font-weight: 700;
  display: block;
}

/* ── Subtitle ── */
.hero-new__sub {
  font-family: var(--font-body);
  font-size: clamp(0.875rem, 1.25vw, 1rem); /* 1rem at 1280px+ */
  color: var(--color-navy);
  line-height: var(--line-height-body);
  opacity: 0.7;
  max-width: 56ch;
  margin: 0 0 min(2rem, 3vw);
  text-align: left;
}

/* ── Button group — left-aligned ── */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
  align-items: center;
}

/* ── Image column ──
   Desktop: right column of grid.
   Mobile/tablet: order:-1 moves it above text automatically — no extra HTML needed. */
.hero-new__image {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1 / 1; /* explicit — not relying on intrinsic image ratio */
  position: relative;
}

.hero-new__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Fill button — "Request Quotation"
   bg #7d6c54, hover #615039, text #f9f9f9 — all from prototype */
.hero__btn--fill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  background-color: #7d6c54;
  color: #f9f9f9;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1rem;
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__btn--fill {
    transition: background-color 0.25s ease;
  }
}

.hero__btn--fill:hover {
  background-color: #615039;
  color: #f9f9f9;
  text-decoration: none;
}

/* Outline button — "View Fabric Options"
   border + text: --color-navy (#0a2575) */
.hero__btn--outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  text-decoration: none;
  background: transparent;
  color: var(--color-navy);
  border: 1px solid var(--color-navy);
  border-radius: 8px;
  padding: calc(0.6rem - 1px) calc(1rem - 1px);
  min-height: 44px;
  cursor: pointer;
  white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__btn--outline {
    transition: background-color 0.15s ease, color 0.15s ease;
  }
}

.hero__btn--outline:hover {
  background-color: var(--color-navy);
  color: var(--color-white);
  text-decoration: none;
}

/* ── Scroll indicator — desktop only ──
   Pinned to bottom centre of hero section.
   Hidden on tablet and mobile (those layouts use stacked content). */
.scroll-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  pointer-events: none;
  z-index: 10;
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-indicator { transition: opacity 0.4s ease; }
}

.scroll-indicator.hidden { opacity: 0; }

.hero-new .scroll-indicator {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
}

.scroll-text {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(26, 39, 68, 0.45);
}

.scroll-line {
  width: 0.5px;
  height: 32px;
  background: linear-gradient(to bottom, rgba(26, 39, 68, 0.4), transparent);
  position: relative;
  overflow: hidden;
}

@media (prefers-reduced-motion: no-preference) {
  .scroll-line::after {
    content: '';
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, transparent, #1a2744, transparent);
    animation: scrollLineTravel 1.8s ease-in-out infinite;
  }
}

@keyframes scrollLineTravel {
  0%   { top: -100%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

/* ============================================================
   HERO WORD CAROUSEL
   Approved animation: Option A — fade + drift up.
   Keyframes defined globally; animation only applied inside
   prefers-reduced-motion: no-preference so reduced-motion
   users see the first word statically (handled in main.js too).
   .hero-new__heading strong applies display:block and
   font-weight:700 — carousel span inherits both correctly.
   ============================================================ */

.hero__carousel-word {
  display: inline-block;
}

@keyframes carousel-exit {
  to { opacity: 0; transform: translateY(-16px); }
}

@keyframes carousel-enter {
  from { opacity: 0; transform: translateY(16px); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero__carousel-word.is-exiting {
    animation: carousel-exit 0.32s ease forwards;
  }
  .hero__carousel-word.is-entering {
    animation: carousel-enter 0.32s ease forwards;
  }
}

/* ── Tablet (768-1023px) ──
   Single column. Image above text. 280px image height.
   Eased fade-to-white gradient at image bottom.
   Buttons stay side-by-side. */
@media (min-width: 768px) and (max-width: 1023px) {
  .hero-new {
    height: auto;
    min-height: calc(100vh - var(--header-height)); /* token = 64px at tablet — corrects former 72px bug */
    min-height: calc(100svh - var(--header-height));
    padding: 0 var(--page-padding-inline) 3rem;
    justify-content: flex-start;
  }
  .hero-new__row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .hero-new__image {
    aspect-ratio: auto;
    height: 280px;
    border-radius: 0;
    order: -1; /* image above text */
    overflow: hidden;
    position: relative;
  }
  .hero-new__image img { object-position: top; }
  .hero-new__image::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 50%;
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0)    0%,
      rgba(255,255,255,0.04) 15%,
      rgba(255,255,255,0.15) 30%,
      rgba(255,255,255,0.38) 45%,
      rgba(255,255,255,0.65) 60%,
      rgba(255,255,255,0.87) 75%,
      rgba(255,255,255,0.97) 88%,
      rgba(255,255,255,1)    100%
    );
    pointer-events: none;
  }
  .hero__actions { flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .hero-new .scroll-indicator { display: none; }
}

/* ── Mobile (<768px) ──
   Single column. Image above text. 280px image height.
   No enforced min-height — section sizes to its content.
   Full-width stacked buttons.
   svh fallback for older Android browsers. */
@media (max-width: 767px) {
  .hero-new {
    height: auto;
    padding: 0 var(--page-padding-inline) 2.5rem;
    justify-content: flex-start;
  }
  .hero-new__row {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  .hero-new__heading {
    font-size: clamp(1.5rem, 4.5vw, 1.75rem);
    margin-bottom: 1.25rem;
  }
  .hero-new__sub {
    font-size: 0.875rem;
    max-width: 100%;
    margin-bottom: 1.25rem;
  }
  .hero__actions { flex-direction: column; gap: 10px; }
  .hero__btn--fill,
  .hero__btn--outline {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
  .hero-new__image {
    aspect-ratio: auto;
    height: 280px;
    border-radius: 0;
    order: -1;
    overflow: hidden;
    position: relative;
  }
  .hero-new__image img { object-position: top; }
  .hero-new__image::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 55%;
    background: linear-gradient(
      to bottom,
      rgba(255,255,255,0)    0%,
      rgba(255,255,255,0.04) 15%,
      rgba(255,255,255,0.15) 30%,
      rgba(255,255,255,0.38) 45%,
      rgba(255,255,255,0.65) 60%,
      rgba(255,255,255,0.87) 75%,
      rgba(255,255,255,0.97) 88%,
      rgba(255,255,255,1)    100%
    );
    pointer-events: none;
  }
  .hero-new .scroll-indicator { display: none; }
}


/* ============================================================
   WHY US SECTION
   Moved entirely from components.css — this bento layout is
   homepage-specific.
   Source: WordPress prototype (Homepage__Wordpress_based_)
   Layout: Option C bento (2+3) · Responsive: R3 (2-col all the way)
   Overflow bug fix: overflow:hidden on .why-card clips both the
     left accent bar corner AND the bottom hover accent line.

   Prototype values used literally:
     Section padding     : min(4rem, 5vw) TB · var(--page-padding-inline) LR
     Container bg        : #011030
     Container radius    : 1.2em
     Container shadow    : 12px 12px 50px rgba(0,0,0,0.4)
     Container padding   : min(3.5rem, 4vw) TB · min(4rem, 5vw) LR
     Eyebrow colour      : #b2b2b2 · letter-spacing 2.5px
     HR colour           : rgba(122,107,74,0.55)
     Card border         : 1px solid rgba(18,18,184,0.38)
     Card radius         : 12px
     Card padding        : min(1.5rem, 2vw) TB · 1rem LR
     Icon size           : 32px
     Card desc colour    : #b2b2b2
     Hover lift          : translateY(-5px)
     Bottom accent       : #7a6b4a · expands to 60% width
     Left accent bar     : 3px · 40% height · rgba(122,107,74,0.7)
   ============================================================ */

/* ── Section wrapper ── */
.why-us {
  background: var(--color-white);
  padding: min(4rem, 5vw) var(--page-padding-inline);
}

/* ── Dark container ── */
.why-container {
  background: #011030;
  border-radius: 1.2em;
  box-shadow: 12px 12px 50px rgba(0, 0, 0, 0.4);
  padding: min(3.5rem, 4vw) min(4rem, 5vw) min(3rem, 4vw);
}

/* ── Section header ── */
.why-eyebrow {
  text-align: center;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #b2b2b2;
  margin-bottom: 14px;
}

.why-heading {
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: #ffffff;
  margin-bottom: 18px;
  line-height: 1.2;
}

.why-rule {
  border: none;
  border-top: 0.5px solid rgba(122, 107, 74, 0.55);
  margin: 0 0 min(2.5rem, 3vw);
}

/* ── Bento grid — desktop (2+3) ──
   6-col base: cards 1-2 span 3 each (top row),
   cards 3-5 span 2 each (bottom row). */
.why-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.why-card:nth-child(1),
.why-card:nth-child(2) { grid-column: span 3; }

.why-card:nth-child(3),
.why-card:nth-child(4),
.why-card:nth-child(5) { grid-column: span 2; }

/* ── Card base ── */
.why-card {
  border: 1px solid rgba(18, 18, 184, 0.38);
  border-radius: 12px;
  padding: min(1.5rem, 2vw) 1rem;
  position: relative;
  overflow: hidden; /* OVERFLOW FIX: clips accent bar corner + hover line */
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (prefers-reduced-motion: no-preference) {
  .why-card {
    transition: transform 0.35s ease, background 0.35s ease;
  }
}

.why-card:hover {
  transform: translateY(-5px);
  background: rgba(255, 255, 255, 0.06);
}

/* Bottom accent line — expands on hover */
.why-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: #7a6b4a;
}

@media (prefers-reduced-motion: no-preference) {
  .why-card::after {
    transition: width 0.4s ease;
  }
}

.why-card:hover::after { width: 60%; }

/* Left accent bar removed per user decision (16 Jun 2025).
   .why-card--primary class kept in HTML for future use. */

/* ── Icon ── */
.why-card__icon {
  width: 32px;
  height: 32px;
  display: block;
  flex-shrink: 0;
}

/* ── Title ── */
.why-card__title {
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: #ffffff;
  line-height: 1.35;
  margin: 0;
}

/* ── Description ── */
.why-card__desc {
  font-family: var(--font-body);
  font-size: 12.5px;
  color: #b2b2b2;
  line-height: 1.65;
  margin: 0;
}

/* ── TABLET (768–1023px): 2+2+1 ── */
@media (max-width: 1023px) {
  .why-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .why-card:nth-child(1),
  .why-card:nth-child(2),
  .why-card:nth-child(3),
  .why-card:nth-child(4) { grid-column: span 1; }
  .why-card:nth-child(5)  { grid-column: span 2; }
}




/* ── MOBILE (<768px): R3 — first full, then 2-col pairs ──
   R3 refinement: descriptions hidden on 2-col cards to keep
   them clean and scannable at small widths. */
@media (max-width: 767px) {
  .why-us        { padding: 2.5rem 24px; } /* 24px — aligned with header, footer, all sections */
  .why-container { padding: min(2rem, 4vw) min(1.5rem, 4vw) min(1.5rem, 4vw); }
  .why-cards     { grid-template-columns: repeat(2, 1fr); }
  .why-card:nth-child(1)     { grid-column: span 2; }
  .why-card:nth-child(n+2)   { grid-column: span 1; }
  .why-card:nth-child(n+2) .why-card__desc { display: none; }
}

/* ── VERY SMALL (<400px): single column, restore descriptions ── */
@media (max-width: 399px) {
  .why-cards                 { grid-template-columns: 1fr; }
  .why-card:nth-child(n)     { grid-column: span 1; }
  .why-card:nth-child(n+2) .why-card__desc { display: block; }
}


/* ============================================================
   FABRIC RANGE SECTION — Homepage
   Design: Option G — gradient header + co-fading stripe texture.
   Approved: gradient fades accent-tint to white; stripe rides
   the same mask-image so both disappear together.

   Source: WordPress prototype values (all exact):
     Grid gap:          20px
     Grid max-width:    1024px
     Card radius:       8px
     Title font-size:   2.4rem
     Tagline font-size: 1.12rem (Cardo italic)
     Varieties label:   0.72rem Inter 500 uppercase letter-spacing:1px
     Type pill font:    0.81rem, border-radius:16px, padding:3px 8px
     CTA padding:       8px 0, radius:8px, uppercase, letter-spacing:1px
     Hover (proto):     box-shadow glow — REPLACED with translateY(-4px) lift
     
   CSS variable system (per-card):
     --rc-accent       title, pill text, CTA bg
     --rc-hover        CTA hover bg
     --rc-bg           accent at 12% opacity (gradient start + pill bg)
     --rc-rgb          raw RGB triplet for rgba() composition
     --rc-muted        accent at 80% opacity (tagline, label)
     --rc-stripe       accent at 2.5% opacity (stripe line colour)
     --rc-stripe-angle stripe direction per card (45°/90°/-45°)
   ============================================================ */

/* ── Per-card colour tokens ── */
.fabric-card--greige {
  --rc-accent:        #707067;
  --rc-hover:         #54544d;
  --rc-bg:            rgba(112, 112, 103, 0.12);
  --rc-rgb:           112, 112, 103;
  --rc-muted:         rgba(112, 112, 103, 0.8);
  --rc-stripe:        rgba(112, 112, 103, 0.025);
  --rc-stripe-angle:  45deg;
}

.fabric-card--yarn-dyed {
  --rc-accent:        #b47840;
  --rc-hover:         #b36b29;
  --rc-bg:            rgba(180, 120, 60, 0.12);
  --rc-rgb:           180, 120, 60;
  --rc-muted:         rgba(180, 120, 60, 0.8);
  --rc-stripe:        rgba(180, 120, 60, 0.025);
  --rc-stripe-angle:  90deg;
}

.fabric-card--denim {
  --rc-accent:        #0a2575;
  --rc-hover:         #01154f;
  --rc-bg:            rgba(10, 37, 117, 0.12);
  --rc-rgb:           10, 37, 117;
  --rc-muted:         rgba(10, 37, 117, 0.8);
  --rc-stripe:        rgba(10, 37, 117, 0.025);
  --rc-stripe-angle:  -45deg;
}

/* ── Section wrapper ── */
.fabric-range {
  background: var(--color-bg-light); /* warm off-white — differentiates from white sections */
  padding: min(4rem, 5vw) var(--page-padding-inline);
}

/* ── Section eyebrow ── */
.fabric-range__eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(10, 37, 117, 0.65); /* was 0.45 — increased to pass WCAG AA 4.5:1 at 10px */
  margin-bottom: 10px;
}

/* ── Section header ── */
.fabric-range__header {
  text-align: center;
  max-width: 70ch;
  margin-inline: auto;
  margin-bottom: min(3rem, 4vw);
}

.fabric-range__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.403rem, 1.403rem + ((1vw - 0.2rem) * 1.495), 2.3rem);
  font-weight: 700;
  color: var(--color-navy);
  line-height: var(--line-height-heading);
  margin-bottom: 14px;
}

.fabric-range__sub {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  line-height: var(--line-height-body);
}

/* ── 3-col grid ── */
.fabric-range__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1024px;
  margin-inline: auto;
  align-items: stretch;
}

/* ── Card base ── */
.fabric-card {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: 8px;
  overflow: hidden; /* clips pseudo-element + hover lift */
  border: 1px solid rgba(var(--rc-rgb), 0.22);
}

@media (prefers-reduced-motion: no-preference) {
  .fabric-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
}

.fabric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 36px rgba(var(--rc-rgb), 0.15);
}

/* ── Card top — gradient + co-fading stripe ──
   Background: linear-gradient from tinted accent (12% opacity)
   at top → white at bottom.

   ::before pseudo-element carries the stripe pattern.
   mask-image makes the stripe opaque at the top and fully
   transparent at the bottom — exactly mirroring the gradient.
   Both the colour tint and the stripe vanish together.

   z-index: 0 on ::before, z-index: 1 on > * keeps text above. ── */
.fabric-card__top {
  position: relative;
  background: linear-gradient(
    to bottom,
    var(--rc-bg) 0%,
    var(--color-white) 100%
  );
  padding: 16px 16px 20px;
}

.fabric-card__top::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    var(--rc-stripe-angle),
    var(--rc-stripe) 0px,
    var(--rc-stripe) 1px,
    transparent 1px,
    transparent 8px
  );
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.fabric-card__top > * {
  position: relative;
  z-index: 1;
}

/* ── Title ── */
.fabric-card__title {
  font-family: var(--font-heading);
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--rc-accent);
  line-height: 1.1;
  margin-bottom: 2px;
}

/* ── Tagline ── */
.fabric-card__tagline {
  font-family: var(--font-heading);
  font-size: 1.12rem;
  font-style: italic;
  color: var(--rc-muted);
}

/* ── Middle ── */
.fabric-card__mid {
  padding: 16px 16px 12px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fabric-card__vlabel {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--rc-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.fabric-card__types {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.fabric-card__type {
  font-family: var(--font-body);
  font-size: 0.81rem;
  color: var(--rc-accent);
  border: 1px solid var(--rc-accent);
  background: var(--rc-bg);
  padding: 3px 8px;
  border-radius: 16px;
  line-height: 1.4;
}

/* ── Bottom (CTA) ── */
.fabric-card__bot {
  padding: 16px 16px 12px;
}

.fabric-card__cta {
  display: block;
  width: 100%;
  font-family: var(--font-body);
  font-size: 0.81rem;
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  color: var(--color-white);
  background: var(--rc-accent);
  padding: 8px 0;
  border-radius: 8px;
}

@media (prefers-reduced-motion: no-preference) {
  .fabric-card__cta {
    transition: background 0.25s ease;
  }
  .fabric-card__arrow {
    display: inline-block;
    transition: transform 0.25s ease;
  }
  .fabric-card__cta:hover .fabric-card__arrow {
    transform: translateX(4px);
  }
}

.fabric-card__cta:hover {
  background: var(--rc-hover);
  color: var(--color-white); /* prevent browser a:hover from applying blue */
}

/* ── TABLET (768–1023px): 2-col, last card full width ── */
@media (max-width: 1023px) {
  .fabric-range__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  /* 3rd card alone on 2nd row spans full width — looks intentional */
  .fabric-card:last-child:nth-child(3n) {
    grid-column: 1 / -1;
  }
}

/* ── MOBILE (<768px): single column ── */
@media (max-width: 767px) {
  .fabric-range {
    /* 24px — aligned with header, footer, all sections */
    padding: 2.5rem 24px;
  }
  .fabric-range__grid {
    grid-template-columns: 1fr;
  }
  .fabric-card__title {
    font-size: 2rem;
  }
}


/* ============================================================
   PROCESS SECTION — Homepage
   Design: as-is from prototype.
   Source: WordPress prototype values (all exact):
     Background:      #d8d1c1 (warm beige)
     Grid desktop:    repeat(6, 1fr), gap 20px, max-width 1280px
     Grid mobile:     1-col, gap 20px
     Connector line:  0.7px, navy at 53% opacity
     Step marker:     0.72rem, letter-spacing 1px, navy at 80%
     Step name:       Inter bold, 0.9rem
     Step desc:       Inter regular, 0.9rem, navy at 89%
     Eyebrow:         "HOW WE WORK" — user approved
   ============================================================ */

/* ── Section wrapper ── */
.process-section {
  background: #d8d1c1;
  padding: min(4rem, 5vw) var(--page-padding-inline);
}

/* ── Section header ── */
.process-section__header {
  text-align: center;
  max-width: 70ch;
  margin-inline: auto;
  margin-bottom: 50px; /* prototype: 50px spacer before steps */
}

.process-section__eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(10, 37, 117, 0.65); /* was 0.45 — increased to pass WCAG AA 4.5:1 at 10px */
  margin-bottom: 10px;
}

.process-section__heading {
  font-family: var(--font-heading);
  font-size: clamp(1.403rem, 1.403rem + ((1vw - 0.2rem) * 1.495), 2.3rem);
  font-weight: 700;
  color: var(--color-navy);
  line-height: var(--line-height-heading);
  margin-bottom: 14px;
}

.process-section__sub {
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  color: var(--color-navy);
  line-height: var(--line-height-body);
}

/* ── Process grid — mobile (1-col) base ── */
.process {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1280px;
  margin-inline: auto;
  color: var(--color-navy);
  font-family: var(--font-body);
}

/* ── Each step: icon column + text column ── */
.steps {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
}

/* Last step: hide connector line */
.steps:last-child .decorative-line { display: none; }

/* ── Icon + vertical connector (mobile) ── */
.icon-line {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.decorative-line {
  min-height: 40px;
  width: 0.7px;
  flex: 1;
  background: rgba(10, 37, 117, 0.53);
}

/* ── Step text ── */
.step-marker {
  height: 32px;
  letter-spacing: 1px;
  font-size: 0.72rem;
  color: rgba(10, 37, 117, 0.8);
  display: flex;
  align-items: center;
  margin: 0;
}

.step-name {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-navy);
  margin: 0 0 4px;
}

.step-desc {
  font-size: 0.9rem;
  color: rgba(10, 37, 117, 0.89);
  margin: 0;
  line-height: var(--line-height-body);
}

/* ── DESKTOP (≥768px): 6-col, Option B — min-height on step-name ──
   Single continuous row at all desktop/tablet widths.
   "Requirement Intake" may wrap at narrower widths, but all step-names
   get min-height: 48px (= 2 × 0.9rem × 1.65 line-height ≈ 47px).
   Every step allocates the same height for its name, so descriptions
   always start at the same Y position regardless of wrapping.
   No connector hiding needed — single row, only last step hides its line. ── */
@media (min-width: 768px) {
  .process {
    grid-template-columns: repeat(6, 1fr);
    gap: 20px;
  }

  .steps {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .icon-line {
    flex-direction: row;
  }

  .decorative-line {
    flex: 1;
    min-height: 0.7px;
    max-height: 0.7px;
    box-sizing: border-box;
  }

  .step-name {
    min-height: 48px; /* handles "Requirement Intake" wrapping at 768–1199px */
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
  }
}

/* ── At ≥1200px, "Requirement Intake" fits on one line (~137px in a ~151px column).
   Remove min-height so no empty gap appears below short step names. ── */
@media (min-width: 1200px) {
  .step-name {
    min-height: 0;
    height: 25px; /* prototype exact value — restored at full desktop */
    align-items: center;
    flex-wrap: nowrap;
  }
}

/* ── MOBILE (<768px) ── */
@media (max-width: 767px) {
  .process-section { padding: 2.5rem 24px; } /* 24px — aligned with all sections */
  .process-section__header { margin-bottom: 32px; }
}




/* ============================================================
   CTA / ENQUIRY SECTION — Homepage
   Design: as-is from prototype.
   Source: WordPress prototype values (all exact):
     Background:       var(--color-bg-light) — user approved
     Layout:           grid 1fr 2fr (info left, form right)
     Left column:      33% in prototype (1fr in our grid)
     Right column:     67% in prototype (2fr in our grid)
     Form container:   rgba(255,255,255,0.65), border rgba(10,37,117,0.5),
                       border-radius 12px, overflow hidden
     Banner:           bg #0a2575, white, 12px, height 20px, ls 1.5px
     Form grid:        2-col at ≥500px (1fr 1fr), pad 0 25px
     WA button:        bg rgba(37,211,102,0.10), border rgba(37,211,102,0.3),
                       text #4cd97a, border-radius 4px, pad 13px 24px
     Submit:           navy fill, 12px, letter-spacing 1px, uppercase
   ============================================================ */

/* ── Section wrapper ── */
.cta-section {
  background: var(--color-bg-light); /* #f8f8f6 — user approved */
  padding: min(4rem, 5vw) var(--page-padding-inline);
  /* Sticky footer reveal: shadow falls on footer below, reads as card over surface.
     Navy-tinted to harmonise with the footer's #0a2575 background. */
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45); /* black-based — navy shadow was invisible on navy footer */
  /* Prevents shadow bleeding upward into the section above. Currently invisible
     against the dark section above, but fixed here for correctness and
     to future-proof against any background colour change on that section. */
  clip-path: inset(0 -60px -60px -60px);
}

/* ── 2-column inner layout ── */
.cta-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: min(4rem, 5vw);
  max-width: 1280px;
  margin-inline: auto;
  align-items: start;
}

/* ── Left: eyebrow ── */
.cta-eyebrow {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: rgba(10, 37, 117, 0.65); /* was 0.45 — increased to pass WCAG AA 4.5:1 at 10px */
  margin-bottom: 12px;
}

/* ── Left: heading ── */
.cta-heading {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 2.5vw, 2.2rem);
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.25;
  margin-bottom: 16px;
}

.cta-heading em {
  font-style: italic;
}

/* ── Left: HR separator ── */
.cta-rule {
  border: none;
  border-top: 1.5px solid #7a6b4a;
  margin: 0 0 16px;
}

/* ── Left: description ── */
.cta-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: var(--line-height-body);
  margin-bottom: 24px;
}

/* ── Left: email line ── */
.cta-mail {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.cta-mail a {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .cta-mail a { transition: opacity 0.25s ease; }
}

.cta-mail a:hover { opacity: 0.7; text-decoration: underline; }

/* ── Right: form container ── */
.cta-form-wrap {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(10, 37, 117, 0.5);
  border-radius: 12px;
  overflow: hidden;
}

/* ── Right: SAMPLING AVAILABLE banner ── */
.cta-form-banner {
  background: #0a2575;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

/* ── Right: form grid ── */
.cta-form-grid {
  display: grid;
  grid-template-columns: 1fr;
  padding: 0 25px 20px 25px; /* prototype: bottom 20px included */
}

@media (min-width: 500px) {
  .cta-form-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); /* prevents left col enforcing min-width from phone-wrap */
    column-gap: 40px;
  }
}

.cta-form-grid .full-row { grid-column: 1 / -1; }

/* ── Right: submit row ── */
.cta-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between; /* prototype: space-between */
  flex-wrap: wrap;
  padding: 8px 25px 20px;
}

/* ── Submit button ── */
.cta-submit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-navy);
  color: var(--color-white);
  border: none;
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 12px 24px;
  cursor: pointer;
  min-height: 44px; /* WCAG 2.2 touch target */
}

@media (prefers-reduced-motion: no-preference) {
  .cta-submit { transition: background 0.25s ease; }
}

.cta-submit:hover { background: #01154f; }

/* ── Response time note ── */
.cta-form-note {
  font-size: 10.5px; /* prototype exact */
  color: rgba(10, 37, 117, 0.5);
}

/* ── MOBILE (<768px) ── */
@media (max-width: 767px) {
  .cta-section { padding: 2.5rem 24px; } /* 24px — aligned with all sections */
  .cta-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}


/* ============================================================
   HOMEPAGE-SPECIFIC FORM ADJUSTMENTS
   Tablet+ shows all 7 fields.
   Mobile shows only 4 fields (desktop-only class hides the rest).
   ============================================================ */

/* The .desktop-only utility class in utilities.css handles visibility.
   No additional overrides needed here unless layout adjustments are required. */

/* ── End of home.css ── */

/* ── Mobile form: 4 fields only (Name, Phone, Fabric Type, Message) ──
   Company, Email, Quantity hidden on mobile per explicit user instruction
   (Note: this deviates from project instructions section 3 which says
   "visually identical to WordPress form" — superseded by user instruction.) ── */
@media (max-width: 575px) {
  .form-group--desktop-only {
    display: none;
  }
}