/* ==========================================================================
   single-training.css — Training program singles (thisismyurl_training CPT)
   Loaded conditionally via inc/setup.php on `is_singular('thisismyurl_training')`.
   Tokens + base are inherited through the main stylesheet (also enqueued).
   Built 2026-05-16 alongside single-thisismyurl_training.php to land the
   bespoke training-program detail surface (hero / trust / fit / curriculum
   / outcomes / pathway / booking). Authored into the `page-types` layer
   to sit at the same cascade level as single-landing.css and single-event.css.
   ========================================================================== */

@layer page-types {

  .training-detail {
    margin-top: 1.5rem;
  }

  /* ---- Hero ----
     Two columns at 880px: copy column + sticky offer card. Flat navy
     background, no mesh, no featured image. White type on navy.            */
  .training-detail__hero {
    background: var(--color-accent-strong);
    color: #ffffff;
    /* Symmetric padding — same on all four sides (Christopher 2026-05-17).
       Was asymmetric (vertical clamp ≠ horizontal clamp) and read as a
       slight visual lean once the section landed live. */
    padding: clamp(2rem, 1rem + 4vw, 4rem);
    margin: 0 0 2.5rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
    align-items: start;
    border-radius: var(--radius-card);
  }
  @media (min-width: 880px) {
    .training-detail__hero {
      grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr);
      gap: 3rem;
    }
  }

  .training-detail__hero-text {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    min-width: 0;
  }

  .training-detail__eyebrow {
    margin: 0;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-gold);
  }

  .training-detail__title {
    margin: 0;
    /* Matches single-landing.css clamp so the H1 register is consistent
       across the two senior conversion surfaces. */
    font-size: clamp(2.3rem, 1.45rem + 4.2vw, 4.25rem);
    line-height: 1.04;
    letter-spacing: -0.022em;
    font-weight: 700;
    color: #ffffff;
  }

  .training-detail__lede {
    margin: 0;
    font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.25rem);
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.92);
    max-width: 56ch;
  }

  .training-detail__session-line {
    margin: 0.3rem 0 0;
    font-size: max(0.9375rem, 15px);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.86);
    font-weight: 500;
  }
  .training-detail__session-sep {
    display: inline-block;
    padding: 0 0.25rem;
    color: var(--color-gold);
    font-weight: 700;
  }
  .training-detail__session-date,
  .training-detail__session-location,
  .training-detail__session-format {
    color: #ffffff;
  }

  .training-detail__cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
  }
  .training-detail__cta {
    /* Stack on phones, side-by-side from 540px up. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.85rem 1.4rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: background-color 140ms var(--ease-standard), color 140ms var(--ease-standard), border-color 140ms var(--ease-standard);
  }
  .training-detail__cta--primary {
    background: var(--color-gold);
    color: var(--color-accent-strong);
    border: 2px solid var(--color-gold);
  }
  .training-detail__cta--primary:hover,
  .training-detail__cta--primary:focus-visible {
    background: #ffffff;
    border-color: #ffffff;
    color: var(--color-accent-strong);
  }
  .training-detail__cta--secondary {
    background: transparent;
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.6);
  }
  .training-detail__cta--secondary:hover,
  .training-detail__cta--secondary:focus-visible {
    border-color: var(--color-gold);
    color: var(--color-gold);
  }

  /* ---- Offer card (hero right column / mobile below-CTAs) ---- */
  .training-detail__offer-card {
    background: #ffffff;
    color: var(--color-text);
    padding: 1.5rem;
    border-radius: var(--radius-card);
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    border-top: 3px solid var(--color-gold);
  }
  @media (min-width: 880px) {
    .training-detail__offer-card {
      position: sticky;
      top: var(--scroll-margin-anchor, 112px);
    }
  }

  .training-detail__offer-card-eyebrow {
    margin: 0;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-gold-text);
  }

  .training-detail__offer-card-price {
    margin: 0;
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.35rem;
    line-height: 1.1;
  }
  .training-detail__offer-card-price-from {
    font-size: 0.85rem;
    color: var(--color-muted);
    font-weight: 500;
  }
  .training-detail__offer-card-price-amount {
    font-size: var(--fs-price, clamp(1.5rem, 3vw, 2rem));
    font-weight: 700;
    color: var(--color-text-strong);
    letter-spacing: -0.01em;
  }
  .training-detail__offer-card-price-unit {
    font-size: 0.85rem;
    color: var(--color-muted);
    font-weight: 500;
  }

  .training-detail__offer-card-date,
  .training-detail__offer-card-format {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    font-size: 0.95rem;
  }
  .training-detail__offer-card-label {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-muted);
  }
  .training-detail__offer-card-date-value {
    color: var(--color-text-strong);
    font-weight: 600;
  }

  .training-detail__offer-card-label--ships {
    margin: 0.25rem 0 -0.2rem;
  }
  .training-detail__offer-card-ships {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
  }
  .training-detail__offer-card-ships li {
    position: relative;
    padding-left: 1.2rem;
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--color-text-medium);
  }
  .training-detail__offer-card-ships li::before {
    content: "";
    position: absolute;
    top: 0.6rem;
    left: 0;
    width: 0.5rem;
    height: 0.5rem;
    background: var(--color-gold);
    border-radius: 50%;
  }

  .training-detail__offer-card-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0.75rem 1.1rem;
    background: var(--color-accent-strong);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    border-radius: var(--radius-sm);
    border: 2px solid var(--color-accent-strong);
    margin-top: 0.5rem;
    transition: background-color 140ms var(--ease-standard), border-color 140ms var(--ease-standard);
  }
  .training-detail__offer-card-cta:hover,
  .training-detail__offer-card-cta:focus-visible {
    background: var(--color-accent);
    border-color: var(--color-accent);
  }

  /* ---- Trust strip ---- */
  .training-detail__trust {
    margin: 0 0 2.5rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
  }
  .training-detail__trust-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    /* The current 11px effective from <small> collapse was unreadable on
       mobile; floor at 14px keeps the row legible without dominating. */
    font-size: max(0.8125rem, 14px);
    line-height: 1.45;
    color: var(--color-text-medium);
  }
  .training-detail__trust-item {
    position: relative;
  }
  .training-detail__trust-item + .training-detail__trust-item::before {
    content: "·";
    position: absolute;
    left: -0.85rem;
    color: var(--color-gold);
    font-weight: 700;
  }

  /* ---- Section header (shared by fit / curriculum / pathway / booking) ---- */
  .training-detail__section-header {
    margin: 0 0 1.5rem;
  }
  .training-detail__section-header h2 {
    margin: 0;
    font-size: var(--fs-h2);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--color-text-strong);
    font-weight: 700;
  }
  .training-detail__section-header--inverted h2 {
    color: #ffffff;
  }
  .training-detail__pathway-lede {
    margin: 0.6rem 0 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-text-medium);
    max-width: 70ch;
  }

  /* ---- Fit-marker grid ---- */
  .training-detail__fit {
    background: var(--color-surface-alt);
    padding: clamp(2rem, 1rem + 3vw, 3rem) clamp(1.25rem, 0.5rem + 2.5vw, 2.5rem);
    margin: 0 0 2.5rem;
    border-radius: var(--radius-card);
  }
  .training-detail__fit-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
  }
  @media (min-width: 720px) {
    .training-detail__fit-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 2.5rem;
    }
  }
  .training-detail__fit-column-title {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-text-strong);
  }
  .training-detail__fit-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
  }
  .training-detail__fit-item {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 0.65rem;
    align-items: start;
    line-height: 1.5;
    color: var(--color-text);
  }
  .training-detail__fit-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    line-height: 0;
    flex-shrink: 0;
  }
  .training-detail__fit-icon svg {
    display: block;
  }
  .training-detail__fit-text {
    grid-column: 2;
  }
  /* Closer paragraph below the fit grid — gives "this is not for you"
     readers a real alternative path. Quieter type weight than the column
     items so it reads as a calm exit, not another item on the list. Top
     margin matches the gap between rows of fit items so the rhythm holds.
     Links inherit theme accent treatment (no special override needed). */
  .training-detail__fit-closer {
    margin: 1.75rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border-soft, rgba(10, 34, 64, 0.12));
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--color-text);
  }

  /* ---- Curriculum cards ---- */
  .training-detail__curriculum {
    margin: 0 0 2.5rem;
  }
  .training-detail__curriculum-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    counter-reset: training-curriculum;
  }
  .training-detail__curriculum-card {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 1.25rem;
    align-items: stretch;
    background: #ffffff;
    border-left: 3px solid var(--color-gold);
    border-radius: var(--radius-card);
    padding: 1.5rem;
  }
  @media (max-width: 540px) {
    .training-detail__curriculum-card {
      grid-template-columns: 48px minmax(0, 1fr);
      gap: 1rem;
      padding: 1.25rem;
    }
  }
  .training-detail__curriculum-ordinal {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gold-soft);
    color: var(--color-gold-text);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    border-radius: var(--radius-card);
    align-self: start;
    width: 64px;
    height: 64px;
  }
  @media (max-width: 540px) {
    .training-detail__curriculum-ordinal {
      width: 48px;
      height: 48px;
      font-size: 1.3rem;
    }
  }
  .training-detail__curriculum-body {
    min-width: 0;
  }
  .training-detail__curriculum-title {
    margin: 0 0 0.35rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-text-strong);
    line-height: 1.25;
  }
  .training-detail__curriculum-duration {
    margin: 0 0 0.6rem;
    font-size: 0.85rem;
    color: var(--color-muted);
    font-weight: 500;
  }
  .training-detail__curriculum-skills {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--color-text);
    line-height: 1.55;
  }
  .training-detail__curriculum-skills li {
    margin-bottom: 0.25rem;
  }

  /* ---- Outcomes (full-width navy band) ---- */
  .training-detail__outcomes {
    background: var(--color-accent-strong);
    color: #ffffff;
    padding: clamp(2.5rem, 1.5rem + 4vw, 4rem) 0;
    margin: 0 0 2.5rem;
    border-radius: var(--radius-card);
  }
  .training-detail__outcomes-inner {
    padding-inline: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  }
  .training-detail__outcomes-grid {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem 2rem;
  }
  @media (min-width: 640px) {
    .training-detail__outcomes-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
  }
  @media (min-width: 960px) {
    .training-detail__outcomes-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }
  .training-detail__outcome-cell {
    border-top: 2px solid var(--color-gold);
    padding-top: 1rem;
  }
  .training-detail__outcome-label {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
  }
  .training-detail__outcome-body {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
  }

  /* ---- Delivery modes ("How to bring this training to your team") ----
     Sits between outcomes and pathway. Four mode cards in a responsive
     grid; each card carries title + price + 2-3 sentence body. The closing
     line cross-links to /speaking/ for audiences too large for any of the
     four modes. Christopher 2026-05-17 — added after the cfo-strategist +
     brand-manager + landing-page synthesis that settled on four visible
     modes (onsite / open cohort / live online / self-paced) with speaker
     engagements moved off-page entirely. */
  .training-detail__modes {
    margin: 0 0 2.5rem;
  }
  .training-detail__modes-lede {
    margin: 0.75rem 0 0;
    font-size: 1rem;
    line-height: 1.55;
    color: var(--color-text-medium);
    max-inline-size: 64ch;
  }
  .training-detail__modes-grid {
    list-style: none;
    margin: 1.75rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
  }
  @media (min-width: 720px) {
    .training-detail__modes-grid {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 1.5rem;
    }
  }
  .training-detail__mode-card {
    /* Card chrome matches the training-detail__fit section register:
       soft surface fill, soft border, card radius. The cards sit at one
       hierarchy level below the outcomes section above (which is full-
       bleed navy) and one above the pathway nav below (which is flat). */
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border-soft, rgba(10, 34, 64, 0.10));
    border-radius: var(--radius-card);
    padding: clamp(1.25rem, 0.85rem + 1.4vw, 1.75rem);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .training-detail__mode-title {
    margin: 0;
    font-size: 1.15rem;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: -0.012em;
    color: var(--color-text-strong);
  }
  /* Links inside mode titles (e.g. the self-paced course card links to
     /courses/wordpress-101/) inherit the title's weight
     and a subtle underline that resolves to the brand accent on hover. */
  .training-detail__mode-title a {
    color: inherit;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
  }
  .training-detail__mode-title a:hover,
  .training-detail__mode-title a:focus-visible {
    color: var(--color-accent);
  }
  .training-detail__mode-price {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.005em;
    /* Gold-on-light accent — same treatment used on training-detail
       curriculum-duration / pathway badges; consistent decorative gold. */
    color: var(--color-gold-text);
  }
  .training-detail__mode-body {
    margin: 0.25rem 0 0;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--color-text);
  }
  .training-detail__modes-closer {
    /* Same register as .training-detail__fit-closer above — quieter type,
       top rule that ties it to the cards above. */
    margin: 1.75rem 0 0;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-border-soft, rgba(10, 34, 64, 0.12));
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--color-text);
  }

  /* ---- Pathway ladder ---- */
  .training-detail__pathway {
    margin: 0 0 2.5rem;
  }
  .training-detail__pathway-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.85rem;
  }
  @media (min-width: 720px) {
    .training-detail__pathway-list {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 1rem;
    }
  }
  .training-detail__pathway-card {
    background: var(--color-surface-alt);
    border-radius: var(--radius-card);
    padding: 1rem 1.1rem;
    color: var(--color-text);
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    transition: background-color 140ms var(--ease-standard);
  }
  .training-detail__pathway-card--current {
    background: var(--color-accent-strong);
    color: #ffffff;
  }
  .training-detail__pathway-card-link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    text-decoration: none;
    color: inherit;
    min-height: 44px;
  }
  .training-detail__pathway-card:not(.training-detail__pathway-card--current):hover,
  .training-detail__pathway-card-link:focus-visible {
    background: rgba(226, 176, 74, 0.18);
  }
  .training-detail__pathway-card-step {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-gold-text);
    background: rgba(226, 176, 74, 0.22);
    min-width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
  }
  .training-detail__pathway-card--current .training-detail__pathway-card-step {
    background: var(--color-gold);
    color: var(--color-accent-strong);
  }
  .training-detail__pathway-card-title {
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.3;
    flex: 1;
  }
  .training-detail__pathway-card-arrow {
    color: var(--color-muted);
    font-size: 1rem;
  }
  .training-detail__pathway-card--current .training-detail__pathway-card-marker {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--color-gold);
    margin-left: auto;
  }

  /* ---- Booking section ---- */
  .training-detail__booking {
    background: var(--color-surface-alt);
    padding: clamp(2.5rem, 1.5rem + 4vw, 4rem) 0;
    margin: 0 0 1.5rem;
    border-radius: var(--radius-card);
  }
  .training-detail__booking-inner {
    padding-inline: clamp(1.25rem, 0.5rem + 3vw, 3rem);
  }
  .training-detail__booking-meta {
    margin: 0.6rem 0 0;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--color-text-medium);
  }
  .training-detail__booking-meta-sep {
    display: inline-block;
    padding: 0 0.25rem;
    color: var(--color-gold);
    font-weight: 700;
  }
  .training-detail__booking-meta-date,
  .training-detail__booking-meta-location,
  .training-detail__booking-meta-format {
    color: var(--color-text-strong);
    font-weight: 600;
  }

  /* The registration-form template part renders its own #training-event-registration
     section; the booking wrapper just supplies the surrounding band tint and
     section heading. The form's own chrome is owned by single-event.css. */

  /* ---- Other upcoming sessions (multi-event case, count >= 2) ----
     Renders BELOW the primary event form. The form above is for the soonest
     event; this list lets buyers self-select to a later date. Each row is
     a horizontal layout at desktop (date + location/format + Reserve link),
     stacks to vertical at mobile with the gold left-border moving to top
     so the accent signal is preserved without requiring the row layout.
     Per craft-designer 2026-05-17 — primary-event-in-focus pattern (iii). */
  .training-detail__upcoming-events {
    margin-block-start: 2.5rem;
    padding-block-start: 1.5rem;
    border-top: 1px solid rgba(10, 34, 64, 0.10);
  }
  .training-detail__upcoming-heading {
    margin: 0 0 0.4rem;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-strong);
  }
  /* Class-size signal lives once above the list, not per-row. Per-row
     repetition would imply each session has a different capacity. */
  .training-detail__upcoming-limit {
    margin: 0 0 1.25rem;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--color-muted);
  }
  .training-detail__upcoming-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  .training-detail__upcoming-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.65rem;
    padding: 1rem 1.1rem;
    /* 3px gold accent — horizontal layout at desktop uses left border,
       mobile stack uses top border (see media query below). The border
       is load-bearing: it signals "another date in the same program"
       without introducing a new card style. */
    border-top: 3px solid var(--color-gold);
    border-bottom: 1px solid rgba(10, 34, 64, 0.08);
    background: transparent;
    transition: background-color 140ms var(--ease-standard);
  }
  @media (min-width: 720px) {
    .training-detail__upcoming-row {
      grid-template-columns: 1fr auto;
      align-items: center;
      gap: 1.5rem;
      border-top: 0;
      border-left: 3px solid var(--color-gold);
      border-bottom: 1px solid rgba(10, 34, 64, 0.08);
    }
  }
  .training-detail__upcoming-row:hover {
    background: var(--color-surface-alt);
  }
  .training-detail__upcoming-row-text {
    min-inline-size: 0;
  }
  .training-detail__upcoming-row-date {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-strong);
    letter-spacing: -0.01em;
  }
  .training-detail__upcoming-row-meta {
    margin: 0.15rem 0 0;
    font-size: var(--fs-sm);
    line-height: 1.5;
    color: var(--color-text-medium);
  }
  .training-detail__upcoming-row-sep {
    color: var(--color-muted);
    margin-inline: 0.15rem;
  }
  .training-detail__upcoming-row-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-block-size: 44px; /* tap-target floor */
    padding: 0.5rem 0.25rem;
    color: var(--color-gold-text);
    font-weight: 700;
    font-size: 0.98rem;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 140ms var(--ease-standard),
                border-color 140ms var(--ease-standard);
  }
  .training-detail__upcoming-row-cta:hover,
  .training-detail__upcoming-row-cta:focus-visible {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
    outline: none;
  }
  .training-detail__upcoming-row-cta:focus-visible {
    outline: 3px solid var(--color-teal);
    outline-offset: 2px;
    border-bottom-color: transparent;
  }
  .training-detail__upcoming-row-cta-arrow {
    display: inline-block;
    transition: transform 140ms var(--ease-standard);
  }
  .training-detail__upcoming-row-cta:hover .training-detail__upcoming-row-cta-arrow,
  .training-detail__upcoming-row-cta:focus-visible .training-detail__upcoming-row-cta-arrow {
    transform: translateX(2px);
  }

  /* ---- Offer card multi-event line ----
     One muted line below the format row when 2+ events are scheduled,
     linking to the booking section so the buyer who needs a different
     date can scroll to the full list. */
  .training-detail__offer-card-more {
    margin: 0.5rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(255, 255, 255, 0.18);
    font-size: var(--fs-sm);
    line-height: 1.5;
  }
  .training-detail__offer-card-more-link {
    color: var(--color-gold);
    text-decoration: none;
    border-bottom: 1px solid rgba(226, 176, 74, 0.4);
    font-weight: 600;
  }
  .training-detail__offer-card-more-link:hover,
  .training-detail__offer-card-more-link:focus-visible {
    border-bottom-color: var(--color-gold);
  }

  /* ---- Reduced motion ----
     All transitions above are short (≤140ms) and only affect colour/border,
     so they're already friendly to prefers-reduced-motion. Belt-and-braces:
     drop them to zero when the OS pref is set.                              */
  @media (prefers-reduced-motion: reduce) {
    .training-detail__cta,
    .training-detail__pathway-card,
    .training-detail__pathway-card-link,
    .training-detail__offer-card-cta {
      transition: none;
    }
  }

}