/* ==========================================================================
   Text + image sections. Drop-in, reusable.
   Inherits the band's ink like css/news.css — add `ti-on-light` on a light
   ground. Every variant keeps the image FULL HEIGHT of its text column:
   the row stretches, the image is absolutely positioned and covers.
   ========================================================================== */
.ti{--ti-ink:var(--text);--ti-sub:var(--muted);--ti-rule:var(--border);--ti-bg:var(--bg)}
.ti-on-light{--ti-ink:var(--to-ink,#191819);--ti-sub:#5b5c63;--ti-rule:rgba(25,24,25,.14);--ti-bg:#fff}
.ti-kick{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.14em;color:var(--accent);margin-bottom:18px}
.ti h2{font-family:var(--font-head);font-weight:700;text-transform:uppercase;letter-spacing:0;
  font-size:clamp(1.7rem,3.4vw,44px);line-height:1;margin:0 0 22px;max-width:20ch;color:var(--ti-ink)}
.ti p{font-size:clamp(15px,1.4vw,18px);line-height:1.62;color:var(--ti-sub);margin:0 0 16px;max-width:56ch}
.ti .ti-more{font-family:var(--font-mono);font-size:12px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--ti-ink);text-decoration:underline;text-underline-offset:4px}

/* shared: any figure in here fills its cell completely */
.ti figure{margin:0;position:relative;overflow:hidden;background:var(--chip,#141210);min-height:100%}
.ti figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ti figcaption{position:absolute;left:18px;bottom:14px;z-index:2;max-width:26ch;
  font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.12em;color:rgba(255,255,255,.82)}

/* ---- A · Split. Text one side, full-height image the other. ---- */
.ti-split{display:grid;grid-template-columns:1fr minmax(320px,440px);
  gap:clamp(32px,5vw,72px);align-items:stretch}
.ti-split.rev{grid-template-columns:minmax(320px,440px) 1fr}
.ti-split.rev > figure{order:-1}
.ti-split .tx{display:flex;flex-direction:column;justify-content:center;padding:clamp(8px,2vh,24px) 0}

/* ---- B · Panel. Equal halves, no gutter, image bleeds to the edge. ---- */
.ti-panel{display:grid;grid-template-columns:1fr 1fr;min-height:clamp(360px,50vh,520px)}
.ti-panel.rev > figure{order:-1}
.ti-panel .tx{display:flex;align-items:center;padding:clamp(40px,5vw,80px) clamp(28px,4vw,72px);
  background:var(--ti-bg)}
.ti-panel .tx > div{max-width:42ch}

/* ---- C · Overlay. Full-bleed frame, text panel inset at one edge. ---- */
.ti-overlay{position:relative;min-height:clamp(400px,58vh,600px);overflow:hidden}
.ti-overlay > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ti-overlay .tx{position:relative;z-index:2;max-width:min(46ch,52%);margin:clamp(32px,5vw,72px);
  background:var(--ti-bg);padding:clamp(28px,3.4vw,48px);border:1px solid var(--ti-rule)}
.ti-overlay.right .tx{margin-left:auto}
.ti-overlay .tx h2{font-size:clamp(1.5rem,2.6vw,34px)}

/* ---- D · Figure column. Tall portrait crop beside a long text block. ---- */
.ti-figcol{display:grid;grid-template-columns:minmax(240px,320px) 1fr;
  gap:clamp(28px,4vw,64px);align-items:stretch}
.ti-figcol figure{aspect-ratio:3/4;min-height:0}

/* ---- E · Stack. Image above, text below. Two or three across. ---- */
.ti-stack{display:grid;grid-template-columns:repeat(var(--ti-cols,3),1fr);gap:clamp(24px,3vw,44px)}
.ti-stack .item figure{aspect-ratio:4/3;min-height:0;margin-bottom:20px}
.ti-stack h3{font-family:var(--font-body);font-weight:600;font-size:19px;line-height:1.28;
  margin:0 0 8px;color:var(--ti-ink)}
.ti-stack p{font-size:15px;margin:0}

/* ---- F · Band. Full-bleed frame, type centred over it. ---- */
.ti-band{position:relative;min-height:clamp(360px,54vh,560px);display:grid;place-items:center;overflow:hidden}
.ti-band > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ti-band::after{content:"";position:absolute;inset:0;background:rgba(17,15,13,.58)}
.ti-band .tx{position:relative;z-index:2;text-align:center;padding:0 clamp(24px,5vw,64px);max-width:60ch}
.ti-band h2{color:#fff;margin-left:auto;margin-right:auto}
.ti-band p{color:rgba(255,255,255,.78);margin-left:auto;margin-right:auto}
.ti-band .ti-more{color:#fff}

@media (max-width:900px){
  .ti-split,.ti-split.rev,.ti-panel,.ti-figcol{grid-template-columns:1fr}
  .ti-split > figure,.ti-figcol figure{order:0;min-height:0;aspect-ratio:16/9}
  .ti-panel > figure{order:0;min-height:0;height:240px}
  .ti-panel.rev > figure,.ti-split.rev > figure{order:-1}
  .ti-overlay .tx{max-width:none;margin:20px}
  .ti-stack{--ti-cols:1}
}