/* =====================================================================
   Woulfe's K9 — Training services, split-screen rows
   Depends on tokens.css and reveal.css.

   Image one side, copy the other, alternating down the page. The alternation
   is the only rhythm here and it is deliberately static — this sits directly
   under the media marquee, and anything moving sideways beneath a row that
   never stops loses. See DESIGN-SYSTEM.md §9.

   Built from the same vocabulary as the hero: rounded bordered frames, a
   tint that lifts toward the bottom, glass chips, display numerals, and the
   corner arrow that steps on hover. Flush rectangles in a hard grid read as
   a table; this has to read as the same page as the hero above it.

   The heading is a statement rather than a subhead — full display size,
   wiped in word by word — so arriving here reads as entering a section.
   ===================================================================== */

.wk9-tr {
    position: relative;
    box-sizing: border-box;
    padding: var(--k9-section-y) 0;
    /* Anchor target for the hero's "View training" CTA. Without this the
       sticky bar lands on top of the heading it just scrolled to. */
    scroll-margin-top: calc(var(--wk9-header-offset, 108px) + var(--k9-space-4));
    background: var(--k9-surface);
    color: var(--k9-text);
    font-family: var(--k9-font-body);

    /* Full-bleed out of whatever container it is dropped into. */
    width: 100vw;
    max-width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.wk9-tr *,
.wk9-tr *::before,
.wk9-tr *::after { box-sizing: border-box; }

.wk9-tr__intro,
.wk9-tr__rows {
    width: min(var(--k9-container), calc(100% - (var(--k9-gutter) * 2)));
    margin-left: auto;
    margin-right: auto;
}

/* Intro --------------------------------------------------------------- */

.wk9-tr__intro {
    margin-bottom: var(--k9-space-16);
    text-align: center;
}

.wk9-tr__eyebrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--k9-space-3);
    margin: 0 0 var(--k9-space-5);
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    color: var(--k9-text-muted);
}

/* Rules both sides, because the label is centred. */
.wk9-tr__eyebrow-rule {
    display: block;
    width: 44px;
    height: 1px;
    flex: 0 0 44px;
    background: var(--k9-text-faint);
}

/* The statement. Display-xl rather than display-md — this is the doorway
   into the section, and at subhead size it read as a caption for the row
   under it. */
.wk9-tr__heading {
    margin: 0;
    font-family: var(--k9-font-display);
    font-weight: var(--k9-weight-display);
    font-size: var(--k9-text-display-xl);
    line-height: var(--k9-leading-display);
    letter-spacing: var(--k9-tracking-display);
    text-transform: uppercase;
    color: var(--k9-text);
    text-wrap: balance;
}

/* Word wipe. Each word is a clipping box with the word itself sitting below
   the fold until the heading is scrolled to. The padding/negative-margin
   pair keeps the box from cropping the glyphs it is meant to be hiding. */
.wk9-tr__word {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    padding-bottom: 0.12em;
    margin-bottom: -0.12em;
}

.wk9-tr__word-in { display: inline-block; }

/* Only hidden when reveal.js is present to bring it back — otherwise the
   heading is simply a heading. Same contract as reveal.css. */
html.wk9-reveal .wk9-tr__heading .wk9-tr__word-in {
    transform: translateY(115%);
    transition: transform 900ms var(--k9-ease-spring);
    transition-delay: calc(var(--i, 0) * 90ms);
}

html.wk9-reveal .wk9-tr__heading.is-revealed .wk9-tr__word-in {
    transform: none;
}

/* The generic reveal — fade plus rise on the whole element — would fight the
   wipe, so it is neutralised on this one heading. The words carry it. */
html.wk9-reveal .wk9-tr__heading[data-wk9-reveal] {
    opacity: 1;
    transform: none;
}

.wk9-tr__lede {
    margin: var(--k9-space-5) auto 0;
    font-size: var(--k9-text-body-lg);
    line-height: var(--k9-leading-snug);
    color: var(--k9-text-muted);
    max-width: 58ch;
}

/* Rows ---------------------------------------------------------------- */

.wk9-tr__rows {
    display: flex;
    flex-direction: column;
    gap: var(--k9-space-12);
}

/* Each row is a panel in its own right. Bare copy beside a framed photograph
   left the two halves looking like different components; the shell gives the
   row an edge, and the picture something to sit inside. */
.wk9-tr__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: stretch;
    gap: clamp(var(--k9-space-6), 3.5vw, var(--k9-space-12));
    padding: clamp(var(--k9-space-5), 2vw, var(--k9-space-8));
    border-radius: var(--k9-radius-xl);
    border: 1px solid var(--k9-line-subtle);
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, transparent 46%),
        var(--k9-surface-raised);
}

/* Alternate the image side. Ordering the CHILDREN rather than reversing the
   grid keeps the markup in reading order — image first, copy second — so the
   DOM order is the same for a screen reader on every row. */
.wk9-tr__row:nth-child(even) .wk9-tr__media { grid-column: 2; grid-row: 1; }
.wk9-tr__row:nth-child(even) .wk9-tr__body  { grid-column: 1; grid-row: 1; }

.wk9-tr__media { min-width: 0; }

/* The frame is the hero card, reused: same radius, same hairline, same
   elevation. It takes its height from the copy beside it rather than a fixed
   ratio, so the two halves of a row always end level — the min-height only
   catches a row with very little to say. */
.wk9-tr__frame {
    position: relative;
    overflow: hidden;
    height: 100%;
    min-height: clamp(280px, 24vw, 420px);
    border-radius: var(--k9-radius-lg);
    border: 1px solid var(--k9-line);
    background: var(--k9-surface-card);
    box-shadow: var(--k9-shadow-3);
}

/* Scoped to two classes deliberately. BeTheme ships img:not([src$=".svg"])
   at specificity (0,1,1), which beats a single class. See DESIGN-SYSTEM.md
   §12, rule 9. */
.wk9-tr__frame .wk9-tr__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* A hair over 1 hides the seam some browsers leave on a cover fit. */
    transform: scale(1.001);
    transition: transform var(--k9-duration-slow) var(--k9-ease);
}

.wk9-tr__row:hover .wk9-tr__frame .wk9-tr__img { transform: scale(1.045); }

.wk9-tr__frame .wk9-tr__img--empty {
    background: repeating-linear-gradient(
        135deg,
        var(--k9-surface-inset) 0 12px,
        var(--k9-surface-card) 12px 24px
    );
}

/* Body ---------------------------------------------------------------- */

.wk9-tr__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--k9-space-4);
    padding: var(--k9-space-2) 0;
}

/* Pill rather than a rule-and-caps line. It has to hold two facts now
   ("personalised", "here or your home"), and a pill is what carries a phrase
   without it reading as a label for the title underneath. */
.wk9-tr__kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--k9-space-3);
    margin: 0;
    padding: var(--k9-space-2) var(--k9-space-4);
    border-radius: var(--k9-radius-pill);
    border: 1px solid var(--k9-line-strong);
    background: rgba(255, 255, 255, 0.05);
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    color: var(--k9-text-secondary);
}

.wk9-tr__kicker-icon {
    flex: 0 0 auto;
    color: var(--k9-text);
}

.wk9-tr__title {
    margin: 0;
    font-family: var(--k9-font-display);
    font-weight: var(--k9-weight-display);
    font-size: var(--k9-text-display-md);
    line-height: var(--k9-leading-display);
    letter-spacing: var(--k9-tracking-display);
    text-transform: uppercase;
    color: var(--k9-text);
    text-wrap: balance;
}

.wk9-tr__text {
    margin: 0;
    font-size: var(--k9-text-body);
    line-height: 1.65;
    color: var(--k9-text-secondary);
    max-width: 52ch;
}

/* The follow-up paragraph sits a step back, so the first one still leads. */
.wk9-tr__text--sub {
    font-size: var(--k9-text-body-sm);
    color: var(--k9-text-muted);
}

/* Included ------------------------------------------------------------ */

/* Ticked tiles rather than a bulleted list. Six short facts in a column read
   as small print; in two columns of bordered tiles they read as a spec. */
/* Four tiles in two rows. Six ran the row past the fold, and the two that
   went were the ones every service could have claimed.

   Scoped to two classes: BeTheme sets a left padding on content lists, which
   was indenting the tiles ~40px out of line with the paragraphs and buttons
   above and below them. See DESIGN-SYSTEM.md §12, rule 9. */
.wk9-tr .wk9-tr__points {
    margin: 0;
    padding: 0;
    width: 100%;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--k9-space-2);
}

.wk9-tr .wk9-tr__point {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--k9-space-3);
    padding: var(--k9-space-3) var(--k9-space-4);
    border-radius: var(--k9-radius-md);
    border: 1px solid var(--k9-line-subtle);
    background: rgba(255, 255, 255, 0.03);
    font-size: var(--k9-text-body-sm);
    line-height: var(--k9-leading-snug);
    color: var(--k9-text-secondary);
}

.wk9-tr__point svg {
    flex: 0 0 auto;
    color: var(--k9-text);
}

/* Price --------------------------------------------------------------- */

/* Full-width band under the tiles. The figure is display type because it is
   the one number on the row anybody is looking for. */
.wk9-tr__price {
    margin: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--k9-space-3) var(--k9-space-5);
    border-radius: var(--k9-radius-md);
    border: 1px solid var(--k9-line);
    background: var(--k9-surface-inset);
    box-shadow: var(--k9-shadow-inset);
}

.wk9-tr__price-value {
    font-family: var(--k9-font-display);
    font-weight: var(--k9-weight-display);
    font-size: var(--k9-text-title-md);
    line-height: 1.05;
    letter-spacing: var(--k9-tracking-display);
    text-transform: uppercase;
    color: var(--k9-text);
    font-variant-numeric: tabular-nums;
}

.wk9-tr__price-note {
    font-size: var(--k9-text-caption);
    color: var(--k9-text-muted);
}

/* Actions ------------------------------------------------------------- */

.wk9-tr__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--k9-space-3);
    margin-top: 0;
}

.wk9-tr__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--k9-space-3);
    min-height: 52px;
    padding: 0 var(--k9-space-6);
    border: 1px solid transparent;
    border-radius: var(--k9-radius-pill);
    background: var(--k9-action);
    color: var(--k9-action-text);
    font-size: var(--k9-text-micro);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    text-decoration: none;
    transition:
        background var(--k9-duration-fast) var(--k9-ease),
        border-color var(--k9-duration-fast) var(--k9-ease),
        color var(--k9-duration-fast) var(--k9-ease),
        transform var(--k9-duration-fast) var(--k9-ease);
}

.wk9-tr__cta svg { transition: transform var(--k9-duration) var(--k9-ease); }
.wk9-tr__cta:hover { background: var(--k9-action-hover); }
.wk9-tr__cta:hover svg,
.wk9-tr__row:hover .wk9-tr__cta svg { transform: translate(3px, -3px); }
.wk9-tr__cta:active { transform: translateY(1px); }

.wk9-tr__cta:focus-visible {
    outline: none;
    box-shadow: var(--k9-focus-ring);
}

/* Outline, so the two buttons rank rather than compete. */
.wk9-tr__cta--ghost {
    background: transparent;
    border-color: var(--k9-line-strong);
    color: var(--k9-text);
}

.wk9-tr__cta--ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--k9-text-faint);
    color: var(--k9-text);
}

/* Responsive ----------------------------------------------------------- */

@media (max-width: 900px) {
    .wk9-tr__rows { gap: var(--k9-space-10); }

    .wk9-tr__row {
        grid-template-columns: 1fr;
        gap: var(--k9-space-6);
    }

    /* Image above copy on every row — alternation means nothing in a single
       column, and forcing it would only shuffle the reading order. */
    .wk9-tr__row:nth-child(even) .wk9-tr__media,
    .wk9-tr__row:nth-child(even) .wk9-tr__body {
        grid-column: 1;
        grid-row: auto;
    }

    /* Back to a ratio: with nothing beside it there is no height to match. */
    .wk9-tr__frame,
    .wk9-tr--compact .wk9-tr__frame {
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 10;
    }

    .wk9-tr__body { justify-content: flex-start; }
    .wk9-tr__intro { margin-bottom: var(--k9-space-10); }
}

@media (max-width: 600px) {
    .wk9-tr .wk9-tr__points { grid-template-columns: 1fr; }

    /* The chip and the pager cannot share a narrow frame edge. */
    .wk9-tr__frame .wk9-gal__pager {
        left: var(--k9-space-4);
        right: auto;
        bottom: var(--k9-space-4);
    }

    .wk9-tr__chip { left: auto; right: var(--k9-space-4); bottom: var(--k9-space-4); }
    .wk9-tr__actions { width: 100%; }
    .wk9-tr__cta { flex: 1 1 auto; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
    .wk9-tr__frame .wk9-tr__img,
    .wk9-tr__cta,
    .wk9-tr__cta svg { transition: none; }
    .wk9-tr__row:hover .wk9-tr__frame .wk9-tr__img { transform: scale(1.001); }

    /* The wipe is the whole entrance, so it has to resolve to "already
       arrived" rather than to a heading that never comes up. */
    html.wk9-reveal .wk9-tr__heading .wk9-tr__word-in {
        transform: none;
        transition: none;
    }
}