/* ══════════════════════════════════════════════════════════════
   Talent Capital — client feedback batch 8, track "tc-result"
   (2026-09-21). Loaded AFTER css/style.css, from talent-capital/
   index.html only. Scope: #pipeline (TC-10, TC-11) and #what (TC-7).
   Palette: Talent Capital's OWN yellow tokens — no FDN gold here.
   Square corners, hairline rows, Inter, .glow halo.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════ TC-10 / TC-11 · #pipeline "THE RESULT" ══════════════════
   Rebuilt on the client's new copy (18/09/2026): one intro paragraph, SIX
   sub-topic headings each with its own body copy, the arrow chain, the closing
   line. The 01–06 numbering he objected to is gone — "Thousands of Companies"
   is the first SUB-TOPIC, not item 01.
   TC-11: a footballer photograph sits behind a near-white wash, so the copy
   still reads ("just plain white"). */

.pipeR{
  position: relative;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}

.pipeR__bg{
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
}
.pipeR__bg img{
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 44%;
  /* "just plain white" (client): the sunset frame is strongly orange, so it is
     desaturated and blown out until only the silhouette and the goal frame
     survive — nothing left to fight the Talent Capital yellow. */
  opacity: .19;
  filter: grayscale(1) brightness(1.42) contrast(1.45);
}

/* the picture fades away under the dense body copy, so the six sub-topics read
   on plain white. */
.pipeR__wash{
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0)    0%,
      rgba(255,255,255,.28) 42%,
      rgba(255,255,255,.72) 72%,
      #FFFFFF               96%);
}
/* one hairline of the house yellow along the top edge of the band */
.pipeR__wash::after{
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--accent);
}

.pipeR .container{ z-index: 2; }

.pipeR__lede{
  font-size: clamp(1.06rem, 1.6vw, 1.34rem);
  line-height: 1.5;
  color: var(--txt-hi);
  font-weight: 400;
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
}

/* ── the six sub-topics: hairline rows, never cards ── */
.pipeR__grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(26px, 3vw, 44px) clamp(26px, 3.4vw, 54px);
  margin-top: clamp(44px, 5.4vw, 74px);
}
.pipeR__item{
  border-top: 1px solid var(--line);
  padding-top: clamp(16px, 1.6vw, 22px);
  min-width: 0;
}
/* the accent tick that replaces the numeral the client struck out */
.pipeR__item::before{
  content: ''; display: block;
  width: 26px; height: 3px; background: var(--accent);
  margin-bottom: clamp(12px, 1.3vw, 18px);
}
.pipeR__name{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.14rem, 1.55vw, 1.42rem);
  line-height: 1.16; letter-spacing: -.022em;
  color: var(--txt-hi);
}
.pipeR__body{
  margin-top: 10px;
  font-size: clamp(.95rem, 1.08vw, 1.02rem);
  line-height: 1.6;
  color: var(--txt);
}

/* ── the arrow chain ── */
.pipeR__chain{
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 10px clamp(10px, 1.1vw, 16px);
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: clamp(28px, 3.2vw, 44px);
  border-top: 1px solid var(--line);
}
.pipeR__link{
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(.82rem, 1.02vw, .98rem);
  letter-spacing: .01em;
  color: var(--txt-hi);
  white-space: nowrap;
}
.pipeR__sep{
  font-family: var(--font-mono); font-weight: 600;
  font-size: clamp(.84rem, 1.05vw, 1rem);
  color: var(--accent-deep);
  line-height: 1;
}

/* ── the closing line ── */
.pipeR__coda{
  position: relative;
  margin: clamp(38px, 4.6vw, 62px) auto 0;
  /* 2026-09-21 fix-1: 30ch broke the closing line into THREE at 1440 and left
     "capital." orphaned under a two-line phrase. Widened, and the wrap is
     balanced so the two lines come out even. */
  max-width: 38ch;
  text-wrap: balance;
  padding: clamp(22px, 2.6vw, 34px) clamp(20px, 3vw, 40px);
  background: var(--bg);
  border: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.28rem, 2.35vw, 1.95rem);
  line-height: 1.16; letter-spacing: -.02em;
  color: var(--txt-hi);
}

@media (max-width: 1080px){
  .pipeR__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px){
  .pipeR__grid{ grid-template-columns: 1fr; }
  .pipeR__lede{ text-align: left; }
  .pipeR__chain{ justify-content: flex-start; }
  .pipeR__coda{ max-width: none; }
  /* one column of copy runs the full height of the band, so the photograph
     drops back further and the goal frame keeps clear of the text. */
  .pipeR__bg img{ opacity: .12; object-position: 50% 26%; }
  .pipeR__wash{
    background:
      linear-gradient(180deg,
        rgba(255,255,255,0)    0%,
        rgba(255,255,255,.45) 26%,
        rgba(255,255,255,.86) 48%,
        #FFFFFF               70%);
  }
}

/* ══════════════════ TC-7 · #what carousel ══════════════════
   Client: "move the arrows to the left and right side". The pair that used to
   sit above the stage becomes one arrow OUTSIDE each edge of the cards, on the
   FDN house pattern (grid: auto 1fr auto). The buttons stay inside [data-lib]
   so main.js's delegated click handler is untouched. */

.lib__stage{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(10px, 1.4vw, 20px);
}
/* neutralise the old top row without touching style.css */
.lib > .lib__arrows{ display: none; }

.lib__stage .lib__btn{
  width: clamp(40px, 3.2vw, 48px);
  height: clamp(40px, 3.2vw, 48px);
}

@media (max-width: 760px){
  /* ── TC-7, fix-1 · a real one-at-a-time carousel on the phone ──
     style.css stacks all six panels at 210px below 760px, which is not a
     carousel at all: arrows overlaid on that stack sit on the FIRST
     photograph for ever and drive a caption a screen and a half away. Here the
     stage becomes ONE 210px window that shows only the open tile, with
     .lib__copy directly under it, so the arrows move the picture you are
     looking at and the sentence right beneath it. */
  .lib__stage{
    grid-template-columns: minmax(0, 1fr);
    position: relative;
  }
  .lib__view{
    display: block;
    position: relative;
    height: 210px;
    gap: 0;
  }
  .lib__panel{
    position: absolute; inset: 0;
    width: 100% !important; height: 100% !important;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .45s ease, visibility 0s linear .45s;
  }
  .lib__panel.is-open{
    opacity: 1; visibility: visible; pointer-events: auto;
    transition-delay: 0s, 0s;
  }
  .lib__copy{ margin-top: 18px; }

  /* the arrows overlay the edges of the tile that is actually on screen —
     the index.html #intelligence pattern (left: 8px / right: 8px). */
  .lib__stage .lib__btn{
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 4;
    width: 42px; height: 42px;
    background: rgba(10,10,11,.72);
    border-color: rgba(244,248,251,.34);
    color: #fff;
  }
  .lib__stage .lib__btn:first-child{ left: 8px; }
  .lib__stage .lib__btn:last-child{ right: 8px; }
  .lib__stage .lib__btn:hover{
    background: var(--accent); border-color: var(--accent); color: var(--accent-on);
  }
}

@media (prefers-reduced-motion: reduce){
  /* style.css kills .lib__panel transitions for reduced motion; this file
     loads after it, so the phone cross-fade has to opt out here too. */
  .lib__panel{ transition: none !important; }
}