/* =============================================================
   ZARAS — Home Industries section · home-industries.v2.css
   v1 -> v2: the card-intrinsic CSS moved to the shared
   operating-shapes-card.v1.css module. This file is now the home §03
   SECTION frame only — full-bleed ambient band, head, foot, and the
   <=760px card->stack swap TOGGLE. The card's appearance lives in the
   shared module (loaded BEFORE this file so these framing rules win at
   equal specificity).

   Keeps id="trades" so it inherits the warm-earth ambient glow from
   home-atmosphere.v6.css (#trades::before) and stays the /#trades target.

   Namespace: zi-*  (card visuals come from operating-shapes-card.v1.css).
   ============================================================= */

/* ---- Kill the inherited industries decorations we're replacing ---- */
body[data-page="home"] #trades.zi::after { content: none; display: none; }

/* =============================================================
   SECTION — full-bleed, ambient weight (lighter than the stages)
   ============================================================= */
.zi {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  /* Lighter vertical rhythm than the stages (hp-section is 104/108). */
  padding: 88px 0 92px;
}

/* Gentle teal counter-glow behind the record, on the right —
   pairs with home-atmosphere's warm-earth glow on the left to make
   the "warm -> teal" field the brief asks for. Kept soft (ambient). */
.zi-teal-glow {
  position: absolute;
  z-index: 0;
  top: 30%;
  right: -6%;
  width: 760px;
  height: 560px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(118,199,178,0.10), transparent 72%);
  filter: blur(40px);
}

.zi-inner {
  position: relative;
  z-index: 2;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: 40px;
}

/* =============================================================
   HEAD — quiet eyebrow (plain label, NOT the stage pill chip),
   a deliberately smaller headline, dim body.
   ============================================================= */
.zi-head { max-width: 60ch; display: grid; gap: 18px; }

.zi-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.zi-eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal);
  box-shadow: 0 0 8px rgba(118,199,178,0.6);
}

.zi-h2 {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.02em;
  /* Subordinate to the stages (which run up to ~60px). */
  font-size: clamp(27px, 3.4vw, 44px);
  line-height: 1.04;
  color: var(--ink);
  text-wrap: balance;
  max-width: 20ch;
}
.zi-h2 .l1 { display: block; }
.zi-h2 em { display: block; font-style: normal; color: var(--signal-ink); }

.zi-sub {
  color: var(--ink-sub);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 1.6;
  max-width: 60ch;
  text-wrap: pretty;
}
.zi-sub strong { color: var(--ink); font-weight: 500; }

/* =============================================================
   FOOT — restrained trade-chip row + single routing link.
   No trade-count total. No 3-stat row (that's Platform's beat).
   ============================================================= */
.zi-foot {
  display: flex; flex-direction: column; align-items: flex-start; gap: 20px;
}
.zi-chips {
  display: flex; align-items: center; flex-wrap: wrap; gap: 0;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-sub);
}
.zi-chips .c { position: relative; padding: 4px 18px 4px 0; margin-right: 18px; }
.zi-chips .c::after {
  content: ""; position: absolute; right: 0; top: 50%; margin-top: -6px;
  width: 1px; height: 12px; background: var(--rule-hi);
}
.zi-chips .c:last-child { padding-right: 0; margin-right: 0; }
.zi-chips .c:last-child::after { display: none; }

.zi-link {
  display: inline-flex; align-items: center; gap: 11px; flex: none;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: #d4cfc5;
  border-bottom: 1px solid transparent;
  padding: 4px 0;
  transition: color 180ms ease, border-bottom-color 180ms ease;
}
.zi-link .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 8px rgba(118,199,178,0.6); flex: none; }
.zi-link:hover { color: var(--signal-ink); border-bottom-color: var(--signal-rule); }
.zi-link .arr { display: inline-block; transition: transform 220ms cubic-bezier(.2,.7,.2,1); }
.zi-link:hover .arr { transform: translateX(3px); }

/* -------- breakpoint: swap desktop card for mobile stack --------
   Framing/section only — the stack's appearance lives in the shared
   operating-shapes-card module; this just toggles it on (.zi-stack
   display:block) and the desktop card off. */
@media (max-width: 760px) {
  .zi { padding: 60px 0 64px; }
  .zi-inner { gap: 30px; }
  .zi-card { display: none; }
  .zi-stage-aura { inset: -4% -2%; }
  .zi-stack { display: block; }
  .zi-foot { gap: 20px; }
  .zi-h2 { font-size: clamp(25px, 7.4vw, 34px); }
}