/* ============================================================
   TRIPLEX LINERS — V2 · PHOTOGRAPHY COMPONENTS
   Real photography only. Nothing in this file draws anything —
   it frames, crops and paces photographs that were taken on real jobs.
   ============================================================ */

/* ---------- Full-bleed hero photo ---------- */
.tlp-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }

/* ---------- Figure ---------- */
.tlp-fig { margin: 0; }
.tlp-fig__frame { position: relative; overflow: hidden; border-radius: var(--tlp-radius-lg);
  background: #0a121e; }
.tlp-fig__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tlp-fig--tall .tlp-fig__frame { aspect-ratio: 3 / 4; }
.tlp-fig--wide .tlp-fig__frame { aspect-ratio: 16 / 10; }
.tlp-fig--square .tlp-fig__frame { aspect-ratio: 1 / 1; }
.tlp-fig__cap { display: flex; gap: var(--tlp-2); align-items: baseline;
  margin-top: var(--tlp-2); font-size: var(--tlp-size-sm); color: var(--tlp-ink-soft); }
.tlp-section--inverse .tlp-fig__cap { color: var(--tlp-inverse-ink-soft); }
.tlp-fig__tag { flex: none; font-size: var(--tlp-size-xs); font-weight: 700;
  letter-spacing: var(--tlp-track-wide); text-transform: uppercase; color: var(--tlp-accent); }

/* Slow reveal on photographs — the image scales down into place, never up.
   Keeps the crop honest: no part of the frame is ever outside what was shot. */
.tlp-js .tlp-fig__frame img { transform: scale(1.06); transition: transform 1500ms var(--tlp-ease); }
.tlp-js .is-in .tlp-fig__frame img, .tlp-js .tlp-fig.is-in .tlp-fig__frame img { transform: scale(1); }

/* ---------- Two-up comparison ----------
   NOT a before/after slider. These are two different structures and the
   labels say so. A slider would imply one structure changing, which would
   be a lie unless the photographs are of the same manhole. */
.tlp-compare { display: grid; gap: var(--tlp-2); }
@media (min-width: 760px) { .tlp-compare { grid-template-columns: 1fr 1fr; gap: var(--tlp-3); } }
.tlp-compare .tlp-fig__frame { aspect-ratio: 3 / 4; }

/* ---------- Same-structure pair (a genuine before/after, shot on one job) ---------- */
.tlp-truepair { border: 1px solid var(--tlp-line); border-radius: var(--tlp-radius-lg);
  overflow: hidden; background: var(--tlp-paper); }
.tlp-section--inverse .tlp-truepair { border-color: rgba(255,255,255,.16); background: #0a121e; }
.tlp-truepair img { width: 100%; display: block; }
.tlp-truepair__cap { padding: var(--tlp-2) var(--tlp-3); font-size: var(--tlp-size-sm);
  color: var(--tlp-ink-soft); }
.tlp-section--inverse .tlp-truepair__cap { color: var(--tlp-inverse-ink-soft); }

/* ---------- Step photo (install timeline) ----------
   These are old job photographs. Low resolution is fine and honest; small is
   not — they carry the step. Sized to the column, capped so they never
   out-scale their own pixels badly. */
.tlp-step__fig { margin-top: var(--tlp-3); border-radius: var(--tlp-radius);
  overflow: hidden; width: 100%; max-width: 460px;
  border: 1px solid var(--tlp-line); background: #0a121e; }
.tlp-step__fig img { width: 100%; display: block; aspect-ratio: 4 / 3; object-fit: cover; }

/* ---------- Editorial pair: photo + text, alternating ---------- */
.tlp-plate { display: grid; gap: var(--tlp-4); align-items: center; }
@media (min-width: 900px) {
  .tlp-plate { grid-template-columns: 1.05fr .95fr; gap: var(--tlp-6); }
  .tlp-plate--flip > :first-child { order: 2; }
}

/* ---------- Centred captions (Ryan, 2026-07-31) ---------- */
.tlp-fig__cap { display: block; text-align: center; margin-top: var(--tlp-2);
  font-size: var(--tlp-size-sm); color: var(--tlp-ink-soft); }
.tlp-section--inverse .tlp-fig__cap { color: var(--tlp-inverse-ink-soft); }

/* ------------------------------------------------------------------
   FULL-BLEED BAND
   One photograph, one heading, no figure furniture. Used for the
   Edmonton 83-foot liner: the point of the section is scale, and a
   photo in a box does not carry scale.
   ------------------------------------------------------------------ */
.tlp-band {
  position: relative;
  overflow: hidden;
  background: var(--tlp-inverse-bg);
  color: var(--tlp-inverse-ink);
}
.tlp-band__media { position: absolute; inset: 0; }
.tlp-band__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 38%;
}
.tlp-band__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
              rgba(14,24,38,.82) 0%,
              rgba(14,24,38,.62) 45%,
              rgba(14,24,38,.86) 100%);
}
.tlp-band__inner {
  position: relative;
  padding-block: clamp(5rem, 14vw, 9rem);
}
.tlp-band .tlp-h2 { color: var(--tlp-inverse-ink); }
.tlp-band .tlp-lead { color: var(--tlp-inverse-ink-soft); }
.tlp-band .tlp-tick { background: var(--tlp-accent); }

@media (max-width: 640px) {
  .tlp-band__inner { padding-block: 4rem; }
  .tlp-band__media img { object-position: center 30%; }
}

/* ------------------------------------------------------------------
   SPLIT HERO
   The hero photograph is vertical: an 83-foot liner hanging off a
   crane. Cropped into a wide band it becomes an unreadable column and
   the scale — the whole point of the picture — is lost. So the hero
   is two panels: type on the left, the photograph standing full height
   on the right. On a phone the photo goes on top, where vertical
   already works, and the type sits under it.
   ------------------------------------------------------------------ */
.tlp-hero--split {
  display: grid;
  grid-template-columns: 1fr;
  background: var(--tlp-inverse-bg);
  color: var(--tlp-inverse-ink);
  position: relative;
}
.tlp-hero--split .tlp-hero__text {
  display: flex; align-items: center;
  padding: calc(74px + 2.5rem) 1.25rem 3rem;
}
.tlp-hero--split .tlp-hero__textin { max-width: 34rem; }
.tlp-hero--split .tlp-lead { color: var(--tlp-inverse-ink-soft); }
.tlp-hero__shot { margin: 0; position: relative; }
.tlp-hero__shot img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center 45%;
}
.tlp-hero__shot figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.5rem 1rem;
  font-size: .875rem; letter-spacing: .01em;
  color: rgba(255,255,255,.86);
  background: linear-gradient(180deg, rgba(14,24,38,0), rgba(14,24,38,.85));
}

@media (max-width: 899px) {
  .tlp-hero--split .tlp-hero__shot { order: -1; aspect-ratio: 4 / 3; }
  .tlp-hero--split .tlp-hero__shot img { object-position: center 40%; }
  .tlp-hero--split .tlp-hero__text { padding: 2.5rem 1.25rem 3rem; }
  .tlp-hero--split .tlp-hero__cue { display: none; }
}
@media (min-width: 900px) {
  .tlp-hero--split { grid-template-columns: 1.02fr .98fr; min-height: 88vh; }
  .tlp-hero--split .tlp-hero__text { padding: 8rem 4vw 6rem 6vw; }
  .tlp-hero--split .tlp-hero__shot { height: 100%; }
}

/* Compare pairs: 3:2, so a wide culvert shot is not cropped into a
   black slot. The before frame is dark at the centre; bias the crop up
   to the corroded crown where the information is. */
.tlp-compare .tlp-fig__frame { aspect-ratio: 3 / 2; }
.tlp-compare .tlp-fig--bias-up .tlp-fig__frame img { object-position: center 30%; }

/* Full-bleed band: give it real height so the liner reads top to bottom. */
.tlp-band__inner { padding-block: clamp(7rem, 22vw, 13rem); }
.tlp-band__media img { object-position: center 46%; }

/* One photograph, held to a readable width and centred. Used where a
   pair would only repeat itself — two flat yellow walls say less than
   one wall with a penetration cut into it. */
.tlp-showcase { margin: 3rem auto 0; max-width: 36rem; }
.tlp-showcase .tlp-fig__frame { aspect-ratio: 3 / 4; }

/* The fixed nav sits over the hero photograph. Against bright sky the
   links stopped being readable, so the photo panel carries its own top
   scrim. Dark enough for white type, light enough that the liner still
   reads through it. */
.tlp-hero__shot::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 190px;
  background: linear-gradient(180deg, rgba(14,24,38,.72), rgba(14,24,38,0));
  pointer-events: none; z-index: 1;
}
.tlp-hero__shot figcaption { z-index: 1; }
.tlp-hero--split .tlp-hero__cue {
  position: absolute; left: 6vw; bottom: 2.25rem; right: auto;
}
@media (max-width: 899px) {
  .tlp-hero--split .tlp-hero__shot { aspect-ratio: 3 / 4; }
  .tlp-hero--split .tlp-hero__shot img { object-position: center 55%; }
  .tlp-hero__shot::before { height: 130px; }
}

/* ------------------------------------------------------------------
   FILM
   Seven videos on fifty pages is 350 YouTube iframes. Each card is a
   thumbnail and a button until it is clicked; only then does an iframe
   get built. Nothing from YouTube loads until the visitor asks for it.
   ------------------------------------------------------------------ */
.tlp-film { margin-top: 2.5rem; }
.tlp-vid {
  position: relative; display: block; width: 100%; padding: 0; margin: 0;
  border: 0; background: #0b1420; cursor: pointer; overflow: hidden;
  border-radius: var(--tlp-radius-lg); text-align: left; color: #fff;
  min-height: 44px;
}
.tlp-vid img {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover; opacity: .78; transition: opacity 400ms var(--tlp-ease),
  transform 900ms var(--tlp-ease);
}
.tlp-vid:hover img, .tlp-vid:focus-visible img { opacity: 1; transform: scale(1.03); }
.tlp-vid__play {
  position: absolute; top: 50%; left: 50%; translate: -50% -50%;
  width: 62px; height: 62px; border-radius: 50%;
  background: rgba(14,24,38,.72); border: 1px solid rgba(255,255,255,.55);
}
.tlp-vid__play::after {
  content: ""; position: absolute; top: 50%; left: 54%; translate: -50% -50%;
  border-left: 17px solid #fff; border-block: 10px solid transparent;
}
.tlp-vid__t {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1rem .85rem; font-size: 1rem; line-height: 1.35;
  background: linear-gradient(180deg, rgba(11,20,32,0), rgba(11,20,32,.92));
}
.tlp-vid--feature .tlp-vid__play { width: 84px; height: 84px; }
.tlp-vid--feature .tlp-vid__play::after { border-left-width: 23px; border-block-width: 14px; }
.tlp-vid--feature .tlp-vid__t { font-size: 1.125rem; padding: 3rem 1.25rem 1.1rem; }
.tlp-film__strip {
  margin-top: var(--tlp-2); display: grid; gap: var(--tlp-2);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.tlp-film__strip .tlp-vid__t { font-size: .9375rem; padding: 2rem .85rem .7rem; }
.tlp-vid iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
@media (prefers-reduced-motion: reduce) {
  .tlp-vid img { transition: none; }
  .tlp-vid:hover img { transform: none; }
}

/* Band crop: bias left so the liner lands right of the type instead of
   directly behind it. */
.tlp-band__media img { object-position: 30% 46%; }
@media (max-width: 640px) { .tlp-band__media img { object-position: 46% 40%; } }

/* Film sits in the full container, not the reading measure. */
.tlp-film { max-width: 68rem; margin-inline: auto; }

/* The band photo is portrait: cover gives it no horizontal slack, so
   object-position cannot move the liner out from behind the type. Move
   the type instead. Copy holds the left third; the liner stands clear
   in its own space. */
.tlp-band__copy { max-width: 30rem; }
@media (max-width: 760px) { .tlp-band__copy { max-width: none; } }

/* Compare pairs read small at 3:2 inside a half-width plate. 4:3 fills
   the column and closes the gap under the text. */
.tlp-compare .tlp-fig__frame { aspect-ratio: 4 / 3; }

/* The band copy sits over a downtown street: signs, cars, glass. A flat
   scrim was not enough for the left third. Add a directional one so the
   type has a dark field without dimming the liner. */
.tlp-band__scrim {
  background:
    linear-gradient(90deg, rgba(14,24,38,.92) 0%, rgba(14,24,38,.72) 34%,
                           rgba(14,24,38,.30) 56%, rgba(14,24,38,.30) 100%),
    linear-gradient(180deg, rgba(14,24,38,.55) 0%, rgba(14,24,38,.20) 40%,
                            rgba(14,24,38,.70) 100%);
}
@media (max-width: 760px) {
  .tlp-band__scrim {
    background: linear-gradient(180deg, rgba(14,24,38,.86), rgba(14,24,38,.78));
  }
}