/* running.css — the little that is genuinely unique to Triduro.
 *
 * 🚨 EVERYTHING ELSE COMES FROM ../assets/css/site.css, WHICH IS SHARED. Do not
 * restate a class this file does not need to own. The first build of this site
 * invented a whole vocabulary (.site-head, .doors, .band, .standfirst…),
 * assumed the shared stylesheet defined it, and shipped an unstyled page: 27 of
 * 35 classes had no rule behind them. The stylesheet returned 200 and every SEO
 * check passed, so nothing caught it but opening the page.
 *
 * ⚠️ Before adding a rule here, grep site.css. If the class already exists there,
 * use it — two definitions of .card is how the network drifts into two
 * different-looking businesses.
 *
 * What this file owns:
 *   .splash            the one-screen two-door front page
 *   .partner-strip     the NSW Triathlon / Balance Tri logos
 *   .creds / .racing   two lines on a team card
 *   .xlinks            cross-links to the other microsites
 */

/* ── the splash ──────────────────────────────────────────────────────────────
 * 🔑 ONE SCREEN, TWO DOORS, NO SCROLL. Jay, 9 Aug 2026: "the one screen, with
 * two options to pick from. you enter and then land on the landing page of
 * performance or rehab." That is the live site's own idea and it is a good one —
 * a visitor arrives knowing which of the two they are, so asking them costs
 * nothing and routes them correctly. It replaced a scrolling home page that
 * buried the choice under a hero.
 *
 * 🚨 THE SPLASH CARRIES NO HEADER AND NO FOOTER, deliberately: there is nothing
 * to navigate to yet. lib.mjs's page({splash:true}) omits both.
 */
body.splash {
  margin: 0;
  min-height: 100svh;
  overflow: hidden;
}

.splash-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100svh;
}

.splash-brand {
  position: absolute;
  top: clamp(1rem, 3vw, 2.25rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
  width: min(92vw, 30rem);
}
.splash-brand img { width: clamp(150px, 22vw, 240px); height: auto; }
.splash-brand p {
  margin: .55rem 0 0;
  font-size: clamp(.72rem, 1.5vw, .85rem);
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
}

.door {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  padding: clamp(1.5rem, 4vw, 3.5rem);
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  isolation: isolate;
}

/* The photograph sits behind at low opacity, exactly as the live site does it —
 * a picture that competes with the words makes neither readable. */
.door img.door-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .34;
  z-index: -2;
  transition: opacity .45s ease, transform .8s ease;
}
.door::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(4, 12, 38, .28) 0%, rgba(4, 12, 38, .86) 78%);
}
.door + .door { border-left: 1px solid rgba(255, 255, 255, .13); }

.door:hover img.door-bg,
.door:focus-visible img.door-bg { opacity: .5; transform: scale(1.04); }
.door:focus-visible { outline: 3px solid #7fd4ff; outline-offset: -6px; }

.door-body { max-width: 30rem; }
.door-body .eyebrow {
  font-size: clamp(.7rem, 1.4vw, .8rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .82;
  margin: 0 0 .5rem;
}
.door-body h2 {
  margin: 0 0 .6rem;
  font-size: clamp(1.75rem, 4.2vw, 3rem);
  line-height: 1.04;
  letter-spacing: -.02em;
}
.door-body p {
  margin: 0 0 1.25rem;
  font-size: clamp(.95rem, 1.5vw, 1.06rem);
  line-height: 1.5;
  opacity: .9;
}

/* 🚨 A SPAN, NOT A NESTED <a> — the whole door is the link. A button inside an
 * anchor is invalid and, worse, gives a keyboard user two tab stops for one
 * destination. */
.door-cta {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  border-bottom: 2px solid currentColor;
  padding-bottom: .15rem;
}
.door:hover .door-cta { gap: .85rem; }
.door-cta, .door:hover .door-cta { transition: gap .25s ease; }

/* 🚨 STACKS ON A PHONE, and 100svh per half would make it two full screens with
 * the second one invisible. Each half becomes half the viewport instead, so BOTH
 * choices are on screen — which is the entire point of the splash. */
@media (max-width: 760px) {
  .splash-wrap { grid-template-columns: 1fr; }
  .door { min-height: 50svh; padding-top: clamp(4.5rem, 18vw, 7rem); }
  .door + .door { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .13); }
  .door-body h2 { font-size: clamp(1.5rem, 7vw, 2.1rem); }
}

/* Anyone who cannot see 100svh worth of content — a short landscape phone —
 * gets to scroll rather than losing the second door off the bottom. */
@media (max-height: 460px) {
  body.splash { overflow: auto; }
  .splash-wrap, .door { min-height: 0; }
  .door { padding-top: 5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .door img.door-bg, .door-cta { transition: none; }
  .door:hover img.door-bg { transform: none; }
}

/* ── partner logos ───────────────────────────────────────────────────────── */
.partner-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 1.25rem;
}
.partner-strip img { height: clamp(30px, 4vw, 44px); width: auto; }
/* The Balance Tri lockup is white-on-black, so it needs its own field rather
 * than sitting on the page's navy. */
.partner-strip img.on-black {
  height: clamp(44px, 6vw, 64px);
  background: #000;
  padding: .5rem .85rem;
  border-radius: 6px;
}

/* ── team card extras ────────────────────────────────────────────────────── */
.creds {
  font-size: .88rem;
  opacity: .82;
  margin: .35rem 0 0;
}
.racing {
  font-size: .88rem;
  margin: .5rem 0 0;
  padding-left: .7rem;
  border-left: 2px solid currentColor;
  opacity: .9;
}

/* ── cross-links to the rest of the network ──────────────────────────────── */
.xlinks { display: grid; gap: 1rem; }
@media (min-width: 700px) { .xlinks { grid-template-columns: 1fr 1fr; } }
.xlink {
  display: block;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 10px;
  text-decoration: none;
}
.xlink strong { display: block; margin-bottom: .25rem; }
.xlink span { font-size: .92rem; opacity: .8; }
.xlink:hover { border-color: rgba(255, 255, 255, .38); }

/* ── two utilities the shared stylesheet does not define ─────────────────────
 * Checked, not assumed: neither .skip nor .visually-hidden exists in site.css,
 * so "Skip to content" rendered as ordinary body text at the top of every page.
 * Visible in the screenshot that started this fix.
 */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: .75rem 1.1rem;
  background: #0b1c46;
  color: #fff;
  border-radius: 0 0 8px 0;
}
.skip:focus { left: 0; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── side-page tiles ─────────────────────────────────────────────────────────
 * 🚨 SMALL, AND ABOVE THE FOLD. Jay, 9 Aug 2026: "each of those option should be
 * a smaller tile. shouldn't have to scroll down to see them."
 *
 * 🔑 THE HERO IS SHORTENED TO PAY FOR IT. The shared .hero is built for a front
 * page and takes most of a viewport; on a page whose whole job is to offer four
 * choices, that is the wrong allocation. .hero--compact roughly halves it, which
 * is what actually gets the tiles on screen — a smaller tile alone would not.
 */
.hero--compact { padding: var(--sp-12, 3rem) 0 var(--sp-6, 1.5rem); }
.hero--compact h1 { font-size: clamp(1.9rem, 3.6vw, 3rem); }
.hero--compact .lead { max-width: 46ch; font-size: 1.05rem; margin-top: .75rem; }
.hero--compact .hero-media img,
.hero--compact .hero-media picture { max-height: 300px; object-fit: cover; }

.tiles-section { padding-top: 0; }
.tiles-head {
  font-size: clamp(.72rem, 1.4vw, .82rem);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .7;
  margin: 0 0 .9rem;
}
.tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(.6rem, 1.4vw, 1rem);
}
.tile {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, .14);
  isolation: isolate;
}
.tile img, .tile picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform .5s ease;
}
.tile picture img { position: absolute; inset: 0; }
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(4, 12, 38, .18) 35%, rgba(4, 12, 38, .88) 100%);
}
.tile-label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: .7rem .8rem;
  color: #fff;
  font-weight: 600;
  font-size: clamp(.85rem, 1.5vw, 1rem);
  line-height: 1.2;
}
.tile:hover img { transform: scale(1.06); }
.tile:hover { border-color: rgba(255, 255, 255, .42); }
.tile:focus-visible { outline: 3px solid #7fd4ff; outline-offset: 2px; }

/* Two across on a phone keeps all four on screen; one across would put the
 * fourth below the fold again, which is the thing being fixed. */
@media (max-width: 820px) { .tiles { grid-template-columns: repeat(2, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .tile img { transition: none; }
  .tile:hover img { transform: none; }
}

/* 🚨 ON A PHONE THE HERO MEDIA ATE THE TILES. Measured at 390x844: only 2 of the
 * 4 tiles were on screen, so the same complaint that produced the tile grid
 * applied again one breakpoint down. The photograph is the first thing to give
 * up — it is supporting evidence, the four choices are the page's actual job. */
@media (max-width: 820px) {
  .hero--compact { padding-top: var(--sp-6, 1.5rem); }
  /* 🚨 THE HERO PHOTO IS DROPPED ENTIRELY ON A PHONE. Measured at 390x844: with
   * it at 150px the hero still stood 524px tall stacked, which left room for one
   * row of tiles and pushed the other two off. On the side pages the photograph
   * is supporting evidence and the four choices ARE the page, so the photo is
   * what gives way. ⚠️ Only on .hero--compact — service and post heroes keep
   * theirs, because there the image is the subject rather than decoration. */
  .hero--compact .hero-media { display: none; }
  .hero--compact h1 { font-size: clamp(1.6rem, 6.5vw, 2.1rem); }
  .hero--compact .lead { font-size: .98rem; margin-top: .5rem; }
  .tiles { gap: .5rem; }
  .tile { aspect-ratio: 3 / 2; }
}

/* ── the people block on a side page ─────────────────────────────────────────
 * 🚨 REPLACES A HEADING PLUS ONE SHORT LINE. Jay, 9 Aug 2026: "this is cut off?"
 * It was not — the section held "Dave and Jay. More about the team." inside 96px
 * of padding top and bottom, so it read as a rendering failure rather than as a
 * thin section. Real content is the fix; tightening the padding would only have
 * made a stub look deliberate.
 */
.people {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(.8rem, 2vw, 1.4rem);
  margin-top: 1rem;
  max-width: 760px;
}
.person {
  display: flex;
  gap: .9rem;
  align-items: center;
  padding: .8rem;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 12px;
  text-decoration: none;
}
.person:hover { border-color: rgba(255, 255, 255, .4); }
.person:focus-visible { outline: 3px solid #7fd4ff; outline-offset: 2px; }
.person img, .person picture {
  width: 72px; height: 90px;
  border-radius: 8px;
  object-fit: cover;
  flex: 0 0 auto;
}
.person picture img { width: 100%; height: 100%; }
.person-body { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.person-body strong { font-size: 1rem; }
.person-role { font-size: .86rem; opacity: .85; }
.person-creds { font-size: .78rem; opacity: .62; line-height: 1.35; }
.person-more { margin-top: 1rem; font-size: .92rem; }

/* The intro paragraph reads as a standfirst, so it is allowed to run wider than
 * the 30ch the shared .lead sets for a hero. */
.lead--wide { max-width: 62ch; }

/* ── partner logos ───────────────────────────────────────────────────────────
 * 🚨 THESE SHIPPED ON ZERO PAGES. Jay, 9 Aug 2026. One helper in lib.mjs now
 * renders them in the footer (so every page carries them), on the splash, and as
 * a band on both side pages.
 * ⚠️ NSW Triathlon's file is 329x96 and Balance Tri's is a wide lockup, so they
 * are sized by HEIGHT and never by width — matching widths would make one of
 * them illegible.
 */
.partners { margin-top: 1.1rem; }
.partners-head {
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .7;
  margin: 0 0 .8rem;
}
.partner-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1.25rem, 3.5vw, 2.75rem);
}
.partner-logos img {
  height: 40px;
  width: auto;
  opacity: .92;
}
/* The Balance lockup is much wider than it is tall, so at a matching height it
 * reads far larger. Pulled back so the two sit as equals. */
.partner-logos img.p-balance { height: 34px; }

.partners--foot { margin-top: 1.4rem; }
.partners--foot .partner-logos img { height: 32px; opacity: .85; }
.partners--foot .partner-logos img.p-balance { height: 27px; }

/* On the splash they sit under the brand line, small and quiet — they are a
 * credential, not the message. */
.partners--splash { margin-top: .85rem; }
.partners--splash .partner-logos { justify-content: center; gap: 1.5rem; }
.partners--splash .partner-logos img { height: 30px; }
.partners--splash .partner-logos img.p-balance { height: 25px; }

/* 🚨 THE SPLASH BRAND BLOCK IS ABSOLUTELY POSITIONED AND CENTRED, so anything
 * added to it grows over the doors. On a short phone the logos would sit on top
 * of the first door's heading; below 700px tall they come off the splash
 * entirely and are still in the footer of every other page. */
@media (max-width: 480px), (max-height: 700px) {
  .partners--splash { display: none; }
}

@media (max-width: 560px) {
  .partner-logos { gap: 1.25rem; }
  .partner-logos img { height: 32px; }
  .partner-logos img.p-balance { height: 27px; }
}

/* ── mobile tap targets ──────────────────────────────────────────────────────
 * 🚨 MEASURED AT 390x844 AND 360x740: 18 links per page under 32px tall, 15 of
 * them the stacked footer lists at 20px. WCAG 2.2 sets 24x24 as the floor and
 * 44px is the practical target for a thumb. Text-sized links in a vertical list
 * are the classic case — they look fine and are a lottery to tap.
 * ⚠️ SCOPED TO THIS SITE. The shared stylesheet has the same shape, so the other
 * static sites almost certainly share the problem — but changing site.css alters
 * four live sites' footers unasked, so it is flagged rather than done here.
 */
@media (max-width: 900px) {
  .footer-col ul li { margin: 0; }
  .footer-col ul li a {
    display: block;
    padding: 11px 0;
    min-height: 44px;
    line-height: 1.4;
  }
  .footer-col p a { display: inline-block; padding: 6px 0; }
  .crumbs a, .crumbs span { display: inline-block; padding: 6px 0; }
  .person-more a { display: inline-block; padding: 10px 0; min-height: 44px; }
  /* The footer gets long once every link is a 44px target — tighten the gaps
     between columns so the extra height does not become a scroll marathon. */
  .footer-grid { gap: var(--sp-6, 1.5rem); }
}

/* Inline tel:/mailto: links are the most-tapped things on a phone and were 22px
 * tall. Vertical padding on an INLINE element grows the hit box without pushing
 * the lines of prose apart, so this costs nothing in layout. */
@media (max-width: 900px) {
  a[href^="tel:"], a[href^="mailto:"] { padding: 10px 2px; }
  .nav-logo { padding: 7px 0; }
}