/* =====================================================================
   Woulfe's K9 — Founder / Meet James
   Depends on tokens.css and reveal.css.

   Replaces the inherited `[wk_meet_james]` component and its `wk-mj__*`
   classes — a lime #B5FF00 accent, a background-image panel and a button
   still pointing at localhost:10044. See DESIGN-SYSTEM.md §9.

   Portrait one side, the story the other. On a one-page site this section is
   the About page, so the copy is allowed to run long — which is exactly why
   the portrait sticks: it stays beside the paragraph being read instead of
   scrolling away at the first one.
   ===================================================================== */

.wk9-fdr {
    /* Anchor target — the sticky bar would otherwise land on the heading. */
    scroll-margin-top: calc(var(--wk9-header-offset, 108px) + var(--k9-space-4));
    position: relative;
    box-sizing: border-box;
    padding: var(--k9-section-y) 0;
    background: var(--k9-surface);
    color: var(--k9-text);
    font-family: var(--k9-font-body);
    isolation: isolate;
    overflow: hidden;

    /* 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-fdr *,
.wk9-fdr *::before,
.wk9-fdr *::after { box-sizing: border-box; }

.wk9-fdr__glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(58% 48% at 22% 14%, var(--k9-ink-800) 0%, transparent 70%);
}

.wk9-fdr__inner {
    width: min(var(--k9-container), calc(100% - (var(--k9-gutter) * 2)));
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    align-items: start;
    gap: clamp(var(--k9-space-8), 4.5vw, var(--k9-space-16));
}

/* Portrait -------------------------------------------------------------- */

/* Stuck to the bottom rather than the top, for the same reason as the FAQ
   aside: top-pinning detaches it the instant the section meets the header,
   leaving it sitting below the heading it is supposed to sit level with.
   This keeps it in flow until it would scroll off the foot of the screen. */
.wk9-fdr__media {
    position: sticky;
    bottom: var(--k9-space-6);
    min-width: 0;
}

.wk9-fdr__frame {
    position: relative;
    overflow: hidden;
    margin: 0;
    aspect-ratio: 4 / 5;
    border-radius: var(--k9-radius-xl);
    border: 1px solid var(--k9-line);
    background: var(--k9-surface-card);
    box-shadow: var(--k9-shadow-4);
}

/* Scoped to two classes deliberately — BeTheme's img:not([src$=".svg"]) is
   (0,1,1) and beats a single class. See DESIGN-SYSTEM.md §12, rule 9. */
.wk9-fdr__frame .wk9-fdr__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;   /* faces sit high in a 4:5 crop */
}

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

.wk9-fdr__shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        to top,
        rgba(var(--k9-black-rgb), 0.78) 0%,
        rgba(var(--k9-black-rgb), 0.22) 46%,
        rgba(var(--k9-black-rgb), 0) 70%
    );
}

/* The badge already owns the bottom edge of this frame, so the pagination
   goes to the top-right instead of the shared default. */
.wk9-fdr__frame .wk9-gal__pager {
    top: var(--k9-space-5);
    bottom: auto;
}

/* Glass badge on the portrait, same treatment as the hero's stat panel. */
.wk9-fdr__badge {
    position: absolute;
    transition: border-color var(--k9-duration-fast) var(--k9-ease);
    left: var(--k9-space-5);
    right: var(--k9-space-5);
    bottom: var(--k9-space-5);
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--k9-space-5);
    padding: var(--k9-space-5) var(--k9-space-6);
    border-radius: var(--k9-radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(var(--k9-black-rgb), 0.42);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    box-shadow: var(--k9-shadow-inset);
}

/* Stretched link. The badge stays a flex row and the anchor simply covers
   it, so the artwork, the words and the stars are all clickable. */
.wk9-fdr__badge-link {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    text-decoration: none;
}

.wk9-fdr__badge:hover { border-color: rgba(255, 255, 255, 0.32); }

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

/* The badge is a 211x72 lockup, not a square mark — boxing it and letting
   object-fit letterbox it wasted most of the space it was given. Sized by
   height so it scales at its own ratio. Two classes, because a single one
   loses the height to the theme. See DESIGN-SYSTEM.md §12, rule 9. */
.wk9-fdr__badge .wk9-fdr__badge-img {
    flex: 0 0 auto;
    width: auto;
    height: 46px;
    max-width: 45%;
    object-fit: contain;
}

.wk9-fdr__badge-text {
    display: block;
    font-size: var(--k9-text-caption);
    font-weight: var(--k9-weight-bold);
    letter-spacing: var(--k9-tracking-micro);
    text-transform: uppercase;
    color: var(--k9-text);
}

.wk9-fdr__stars {
    display: inline-flex;
    gap: 4px;
    margin-top: 6px;
    color: var(--k9-text);
    line-height: 0;
}

/* Sized here rather than on the SVG's own width/height attributes, so the
   badge scales as one thing. */
.wk9-fdr__stars svg {
    display: block;
    width: 16px;
    height: 16px;
}

/* Story ----------------------------------------------------------------- */

.wk9-fdr__body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--k9-space-5);
}

.wk9-fdr__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-fdr__kicker-icon { flex: 0 0 auto; color: var(--k9-text); }

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

/* The opening paragraph carries the section, so it is set a size up and in
   the brighter text colour; the rest of the story sits back from it. */
.wk9-fdr__lede {
    margin: 0;
    font-size: var(--k9-text-body-lg);
    line-height: var(--k9-leading-snug);
    color: var(--k9-text-secondary);
    max-width: 58ch;
}

.wk9-fdr__text {
    margin: 0;
    font-size: var(--k9-text-body-sm);
    line-height: 1.7;
    color: var(--k9-text-muted);
    max-width: 62ch;
}

/* Facts ----------------------------------------------------------------- */

/* Short, checkable facts — a founding date, a place. They are what stops a
   personal story reading as only a personal story. */
.wk9-fdr .wk9-fdr__facts {
    margin: var(--k9-space-1) 0 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-fdr .wk9-fdr__fact {
    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-fdr__fact svg { flex: 0 0 auto; color: var(--k9-text); }

/* Signature ------------------------------------------------------------- */

.wk9-fdr__sign {
    margin: 0;
    padding-top: var(--k9-space-4);
    border-top: 1px solid var(--k9-line);
    width: 100%;
    max-width: 62ch;
    font-size: var(--k9-text-caption);
    color: var(--k9-text-muted);
}

.wk9-fdr__sign strong {
    display: block;
    font-family: var(--k9-font-display);
    font-weight: var(--k9-weight-display);
    font-size: var(--k9-text-title-sm);
    letter-spacing: var(--k9-tracking-display);
    text-transform: uppercase;
    color: var(--k9-text);
}

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

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

.wk9-fdr__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),
        transform var(--k9-duration-fast) var(--k9-ease);
}

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

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

.wk9-fdr__cta--ghost {
    background: transparent;
    border-color: var(--k9-line-strong);
    color: var(--k9-text);
}

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

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

@media (max-width: 1080px) {
    .wk9-fdr__inner {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--k9-space-10);
    }

    /* Nothing to stay level with once it is above the copy rather than
       beside it, and pinning would cover the story. */
    .wk9-fdr__media {
        position: static;
        bottom: auto;
        max-width: 520px;
    }

    /* Portrait, as on desktop. A 3:2 crop left the badge covering most of
       James's face on phones. The column is capped at 520px, so this tops
       out around 650px tall on tablets. */
    .wk9-fdr__frame { aspect-ratio: 4 / 5; }
}

@media (max-width: 600px) {
    .wk9-fdr .wk9-fdr__facts { grid-template-columns: 1fr; }
    .wk9-fdr__actions { width: 100%; }
    .wk9-fdr__cta { flex: 1 1 auto; justify-content: center; }
    .wk9-fdr__badge {
        left: var(--k9-space-4);
        right: var(--k9-space-4);
        bottom: var(--k9-space-4);
        gap: var(--k9-space-4);
        padding: var(--k9-space-4);
    }

    .wk9-fdr__badge .wk9-fdr__badge-img { height: 36px; }
}

@media (prefers-reduced-motion: reduce) {
    .wk9-fdr__cta,
    .wk9-fdr__cta svg { transition: none; }
}