/* ==========================================================================
   training.css — page-only additions for training.html (prefix .tr-). Loads after pages.css.
   Tokens only (no hex, no new px sizes for type/spacing). 2026-10-22.
   - .tr-tiers / .tr-tier : 3 tier cards; on desktop the rows (top, span, 5 detail rows)
     line up across the cards with CSS subgrid, so the tiers read like a comparison table.
   ========================================================================== */

/* keep a hyphenated word on one line in headings */
.tr-nowrap { white-space: nowrap; }

/* phone: media cards stay full-bleed (pages.css phone .pg-card padding otherwise frames the photo) */
@media (max-width: 734px) {
  .tr-courses .pg-card--media { padding: 0; }
}

/* ---- tier card ---- */
.tr-tier { gap: 0; }
.tr-tier__top { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding-bottom: var(--space-5); }
.tr-tier__top > .kicker { margin-bottom: 0; }
.pg-card--blue .tr-tier__top > .kicker { color: var(--color-on-dark-muted); }

/* headline span: big duration in display type */
.tr-tier__span {
  display: flex; flex-direction: column; gap: var(--space-1); width: 100%;
  padding-block: var(--space-5); border-top: 1px solid var(--pg-line-strong);
}
.tr-tier__amount { font-family: var(--font-display); font-size: var(--fs-display-md); line-height: 1; letter-spacing: var(--ls-display); color: var(--pg-num); }
.tr-tier__unit { font-family: var(--font-alt); font-weight: 600; font-size: var(--fs-label); line-height: 1.4; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--pg-text); }

/* detail rows */
.tr-tier__meta { width: 100%; margin: 0; }
.tr-tier__meta > div { padding-block: var(--space-4); border-top: 1px solid var(--pg-line); }
.tr-tier__meta dt { margin-bottom: var(--space-2); font-family: var(--font-alt); font-weight: 600; font-size: var(--fs-label); line-height: 1.4; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--pg-text); }
.tr-tier__meta dd { margin: 0; font-size: var(--fs-body); line-height: 1.45; color: var(--pg-strong); text-wrap: pretty; }
.tr-tier__meta ul { display: flex; flex-direction: column; gap: var(--space-2); }
.tr-tier__meta li { position: relative; padding-left: var(--space-4); font-size: var(--fs-body); line-height: 1.45; color: var(--pg-strong); }
.tr-tier__meta li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--color-yellow-400); }

/* "from <course>" link under an example course */
.tr-tier__fromlabel {
  display: inline-block; margin-top: var(--space-1); margin-right: .35em;
  font-family: var(--font-alt); font-weight: 600; font-size: var(--fs-label); line-height: 1.4; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--pg-text);
}
.tr-tier__from {
  display: inline-block; margin-top: var(--space-1);
  font-family: var(--font-alt); font-weight: 600; font-size: var(--fs-label); line-height: 1.4; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--pg-link); text-decoration: underline; text-decoration-color: var(--color-yellow-400); text-decoration-thickness: 2px; text-underline-offset: 4px;
  transition: text-decoration-color var(--dur-mid) var(--ease);
}
.tr-tier__from:hover { text-decoration-color: currentColor; }

/* note + actions under the tiers */
.tr-tiers__foot { margin-top: var(--gap-content-cta); display: flex; flex-direction: column; align-items: center; text-align: center; }
.tr-tiers__note { max-width: var(--measure-intro); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--color-text-muted); text-wrap: balance; }
.tr-tiers__foot .link-underline { margin-top: var(--space-4); }

/* desktop: rows line up across the three cards */
@media (min-width: 1069px) {
  .tr-tiers { row-gap: 0; grid-template-rows: repeat(7, auto); }
  .tr-tier { grid-row: span 7; display: grid; grid-template-rows: subgrid; align-content: start; }
  .tr-tier__meta, .tr-tier__more { display: contents; }
}

/* tablet: one card per row, labels left of their values */
@media (min-width: 735px) and (max-width: 1068px) {
  .tr-tiers { grid-template-columns: minmax(0, 1fr); }
  .tr-tiers > * { grid-column: 1 / -1; }
  .tr-tier__meta > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--space-6); }
  .tr-tier__meta dt { margin-bottom: 0; padding-top: var(--space-1); }
}

/* "Delivery, audience and timing": open on tablet/desktop (summary hidden), accordion on phone */
.tr-tier__more { width: 100%; }
.tr-tier__toggle { display: none; }
@media (max-width: 734px) {
  .tr-tier__more { border-top: 1px solid var(--pg-line); }
  .tr-tier__toggle {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
    padding-block: var(--space-4); cursor: pointer; list-style: none;
    font-family: var(--font-alt); font-weight: 600; font-size: var(--fs-label); line-height: 1.4; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--pg-link);
  }
  .tr-tier__toggle::-webkit-details-marker { display: none; }
  .tr-tier__toggle::after {
    content: "+"; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 1px var(--pg-line-strong); font-size: var(--fs-body); line-height: 1; transition: transform var(--dur-mid) var(--ease);
  }
  .tr-tier__more[open] > .tr-tier__toggle::after { transform: rotate(45deg); }
}

/* tablet: course cards as horizontal media cards (photo left), purpose cards stacked */
@media (min-width: 735px) and (max-width: 1068px) {
  .tr-courses, .tr-purpose { grid-template-columns: minmax(0, 1fr); }
  .tr-courses > *, .tr-purpose > * { grid-column: 1 / -1; }
  .tr-courses .pg-card--media { flex-direction: row; align-items: stretch; }
  .tr-courses .pg-card__media { flex: 0 0 40%; width: 40%; aspect-ratio: auto; min-height: 100%; }
}

/* fix round 2: hero sign must not show through the title — deeper navy on the top band */
.tr-hero::after { background: linear-gradient(180deg, rgb(from var(--color-navy-900) r g b / .55) 0%, rgb(from var(--color-navy-900) r g b / .25) 55%, transparent 100%), var(--overlay-hero); }
/* fix round 2: lighter tier rows */
.tr-tier__meta > div { padding-block: var(--space-3); }
/* fix round 2: course structure photo starts at the top and stays in view on desktop */
@media (min-width: 1069px) {
  .tr-structure .pg-split { align-items: start; }
  .tr-structure .pg-split__media { position: sticky; top: calc(var(--space-12, 96px) + var(--space-4)); }
}

/* fix round 3 (2026-10-22) */
/* hero title: 2 lines at 1440, like about.html */
.tr-hero .pg-hero__title { max-width: 32ch; }
/* approach + structure photos: top-aligned and as tall as the text column on desktop */
@media (min-width: 1069px) {
  .tr-structure .pg-photo { aspect-ratio: 1 / 1; max-height: none; }
}
/* tiers: more air between groups */
.tr-tier__meta > div { padding-block: var(--space-4); }
.tr-tier__meta--ex { padding-bottom: var(--space-2); }
/* phone: details open by default; toggle is a clear 44px tap target */
@media (max-width: 734px) {
  .tr-tier__toggle { min-height: 44px; }
  .tr-tier__toggle::after { width: 44px; height: 44px; }
}