/**
 * findi360 homepage — Batch 3 program status + learning paths.
 * Uses shared fd-* tokens (Batch 1).
 */

/* ── Section A: Program status (Tone B) ── */
.fi-program-status {
    padding: 0;
}

.fi-program-status__head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--fd-space-4, 16px);
    margin-bottom: 0;
    flex-wrap: wrap;
}

.fi-program-status__head-copy {
    flex: 1 1 16rem;
    min-width: 0;
}

.fi-program-status__title {
    margin: 0;
    font-family: var(--fd-font-heading, 'Inter', system-ui, sans-serif);
    font-size: var(--fd-text-h2);
    font-weight: var(--fd-font-weight-heading, 800);
    line-height: var(--fd-line-height-heading, 1.15);
    letter-spacing: var(--fd-letter-tight, -0.02em);
    color: var(--fd-text-strong, var(--fd-black, #0e0e0e));
}

.fi-program-status__intro {
    margin: var(--fd-space-sm, 8px) 0 0;
    font-size: var(--fd-text-body);
    color: var(--fd-muted-text, #6f6a62);
    max-width: var(--fd-measure-lead, 48rem);
}

.fi-program-status__view-all {
    flex-shrink: 0;
    align-self: flex-end;
    min-height: var(--fd-touch-min, 44px);
}

.fi-program-status__grid {
    display: grid;
    grid-template-columns: var(--fd-grid-program);
    gap: var(--fd-grid-gap, var(--fd-space-5, 20px));
    width: 100%;
    min-width: 0;
    align-items: start;
}

.fi-program-status__module {
    padding: var(--fd-space-5, 20px);
    border-radius: var(--fd-radius-md, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-4, 16px);
    min-height: 0;
    height: auto;
}

.fi-program-status__module.tone-open {
    border-top: 3px solid var(--fd-success, #3f8d68);
}

.fi-program-status__module.tone-soon {
    border-top: 3px solid var(--fd-warning, #c88c2e);
}

.fi-program-status__module.tone-next {
    border-top: 3px solid var(--fd-info, #397a9c);
}

.fi-program-status__module-head {
    display: flex;
    align-items: center;
    gap: var(--fd-space-3, 12px);
}

.fi-program-status__icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.fi-program-status__icon svg {
    width: 24px;
    height: 24px;
}

/* The green / amber / blue status colours were removed on 7 Sep 2026. The brand
   sheet has one accent; status is carried by icon shape and wording instead. */

.fi-program-status__module-title {
    margin: 0;
    font-size: var(--fd-text-eyebrow);
    font-weight: var(--fd-font-weight-subheading, 700);
    letter-spacing: var(--fd-letter-eyebrow, 0.06em);
    text-transform: uppercase;
    color: var(--fd-text-primary, var(--fd-charcoal, #202020));
}

.fi-program-status__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-4, 16px);
    flex: 1 1 auto;
}

.fi-program-status__item {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-3, 12px);
    padding-bottom: var(--fd-space-4, 16px);
    border-bottom: 1px solid var(--fd-soft-border, rgba(32, 32, 32, 0.075));
    flex: 1 1 auto;
}

.fi-program-status__item:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

.fi-program-status__item-body {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-xs, 4px);
    min-width: 0;
}

.fi-program-status__item-title {
    margin: 0;
    font-size: var(--fd-text-body-lg);
    font-weight: var(--fd-font-weight-subheading, 700);
    line-height: 1.35;
    color: var(--fd-text-strong, var(--fd-black, #0e0e0e));
}

.fi-program-status__schedule,
.fi-program-status__registration {
    margin: 0;
    font-size: var(--fd-text-caption);
    line-height: 1.45;
    color: var(--fd-muted-text, #6f6a62);
}

.fi-program-status__action {
    align-self: flex-start;
    min-height: var(--fd-touch-min, 44px);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--fd-space-4, 16px);
    font-size: var(--fd-text-label);
    font-weight: var(--fd-font-weight-semibold, 600);
    color: var(--fd-accent-deep, var(--fd-gold-deep, #a86a00));
    text-decoration: none;
    border-radius: var(--fd-radius-sm, 10px);
    border: 1px solid rgba(217, 154, 22, 0.22);
    background: rgba(255, 255, 255, 0.45);
    transition: background-color var(--fd-duration, 200ms) var(--fd-ease), border-color var(--fd-duration, 200ms) var(--fd-ease);
}

.fi-program-status__action:hover {
    background: rgba(217, 154, 22, 0.08);
    border-color: rgba(217, 154, 22, 0.2);
}

.fi-program-status__action:focus-visible {
    outline: 2px solid var(--fd-gold-highlight, #f5be3d);
    outline-offset: 2px;
}

.fi-program-status__empty-state.fd-state {
    flex: 0 1 auto;
    align-self: stretch;
    width: 100%;
    margin: 0;
    padding: var(--fd-space-3, 12px) var(--fd-space-4, 16px);
    border-radius: var(--fd-radius-sm, 10px);
    background: rgba(255, 255, 255, 0.42);
    border: 1px dashed var(--fd-soft-border, rgba(32, 32, 32, 0.1));
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--fd-space-3, 12px);
    min-height: 0;
}

.fi-program-status__empty-state .fd-state__body {
    flex: 1 1 auto;
    min-width: 0;
}

.fi-program-status__empty-state .fd-state__title {
    font-size: var(--fd-text-body);
    font-weight: var(--fd-font-weight-subheading, 700);
}

.fi-program-status__empty-state .fd-state__message {
    font-size: var(--fd-text-body-sm);
    line-height: 1.5;
}

@media (max-width: 1023px) {
    .fi-program-status__module {
        min-height: 0;
    }
}

@media (max-width: 767px) {
    .fi-program-status__head {
        flex-direction: column;
        align-items: stretch;
        gap: var(--fd-space-3, 12px);
    }

    .fi-program-status__view-all {
        align-self: stretch;
        width: 100%;
        justify-content: center;
    }

    .fi-program-status__action {
        align-self: stretch;
        width: 100%;
    }

    .fi-program-status__schedule {
        font-size: var(--fd-text-body-sm);
    }
}

/* ── Section B: Learning paths (Tone A) ── */
.fi-grow-paths {
    padding: 0;
}

.fi-grow-paths__head {
    margin-bottom: 0;
}

.fi-grow-paths__head-copy {
    max-width: var(--fd-measure-lead, 48rem);
}

.fi-grow-paths__title {
    margin: 0;
    font-family: var(--fd-font-heading, 'Inter', system-ui, sans-serif);
    font-size: var(--fd-text-h2);
    font-weight: var(--fd-font-weight-heading, 800);
    line-height: var(--fd-line-height-heading, 1.15);
    letter-spacing: var(--fd-letter-tight, -0.02em);
    color: var(--fd-text-strong, var(--fd-black, #0e0e0e));
}

.fi-grow-paths__support {
    margin: var(--fd-space-sm, 8px) 0 0;
    font-size: var(--fd-text-body);
    line-height: 1.5;
    color: var(--fd-muted-text, #6f6a62);
}

.fi-grow-paths__grid {
    display: grid;
    grid-template-columns: var(--fd-grid-paths, repeat(3, minmax(0, 1fr)));
    gap: var(--fd-space-4, 16px);
    width: 100%;
    min-width: 0;
    align-items: stretch;
}

.fi-grow-paths__tile {
    display: flex;
    align-items: center;
    gap: var(--fd-space-3, 12px);
    min-height: var(--fd-touch-min, 44px);
    height: 100%;
    padding: var(--fd-space-4, 16px);
    border-radius: var(--fd-radius-md, 16px);
    border: 1px solid var(--fd-soft-border, rgba(32, 32, 32, 0.075));
    background: rgba(255, 255, 255, 0.55);
    box-shadow: var(--fd-shadow-sm, 0 4px 14px rgba(40, 30, 10, 0.045));
    color: inherit;
    text-decoration: none;
    transition:
        transform var(--fd-duration, 200ms) var(--fd-ease),
        box-shadow var(--fd-duration, 200ms) var(--fd-ease),
        border-color var(--fd-duration, 200ms) var(--fd-ease);
}

.fi-grow-paths__tile:focus-visible {
    outline: 2px solid var(--fd-focus-ring, var(--fd-gold-deep, #a86a00));
    outline-offset: var(--fd-focus-offset, 2px);
}

.fi-grow-paths__tile.is-unavailable {
    opacity: 0.65;
    pointer-events: none;
}

.fi-grow-paths__icon {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: var(--fd-gold-deep, #a86a00);
}

.fi-grow-paths__icon svg {
    width: 22px;
    height: 22px;
}

.fi-grow-paths__text {
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-1, 4px);
    min-width: 0;
    flex: 1;
}

.fi-grow-paths__name {
    font-size: var(--fd-text-body-lg);
    font-weight: var(--fd-font-weight-subheading, 700);
    line-height: 1.3;
    color: var(--fd-text-strong, var(--fd-charcoal, #202020));
}

.fi-grow-paths__copy {
    font-size: var(--fd-text-body-sm);
    line-height: 1.45;
    color: var(--fd-muted-text, #6f6a62);
}

.fi-grow-paths__arrow {
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    color: var(--fd-gold-deep, #a86a00);
    background: rgba(217, 154, 22, 0.08);
    border: 1px solid rgba(217, 154, 22, 0.16);
}

@media (hover: hover) and (pointer: fine) {
    .fi-grow-paths__tile:hover {
        transform: translateY(-2px);
        box-shadow: var(--fd-shadow-md, 0 12px 32px rgba(40, 30, 10, 0.075));
        border-color: rgba(217, 154, 22, 0.22);
    }

    .fi-grow-paths__tile:hover .fi-grow-paths__arrow {
        background: rgba(217, 154, 22, 0.14);
        border-color: rgba(217, 154, 22, 0.24);
    }
}

@media (max-width: 1023px) {
    .fi-program-status__grid {
        gap: var(--fd-space-4, 16px);
    }

    .fi-grow-paths__grid {
        gap: var(--fd-space-3, 12px);
    }

    .fi-grow-paths__tile {
        min-height: var(--fd-touch-min, 44px);
    }
}

@media (max-width: 767px) {
    .fi-grow-paths__tile {
        align-items: flex-start;
        min-height: var(--fd-touch-min, 44px);
        padding: var(--fd-space-4, 16px);
    }

    .fi-grow-paths__arrow {
        align-self: center;
    }
}

@media (max-width: 639px) {
    .fi-program-status__head {
        align-items: flex-start;
        flex-direction: column;
    }

    .fi-program-status__view-all {
        width: 100%;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fi-grow-paths__tile {
        transition: none;
    }

    .fi-grow-paths__tile:hover {
        transform: none;
    }
}


/* ================================================================
 * S02 rebuild - 7 September 2026
 *
 * Replaces the three fixed columns with one ordered strip. The old
 * __grid / __module / __list / __item rules above no longer match any
 * markup; they are inert and can be deleted in a cleanup pass.
 * ================================================================ */

.fi-program-status__head-tools {
    display: flex;
    align-items: center;
    gap: var(--fd-space-3, 12px);
    flex-shrink: 0;
}

/* -- manual scroll arrows ---------------------------------------- */

.fi-strip__nav {
    display: flex;
    gap: var(--fd-space-2, 8px);
}

.fi-strip__arrow {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--fd-warm-grey, #e7e2da);
    background: var(--fd-white, #fff);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: border-color .15s ease, opacity .15s ease;
}

.fi-strip__arrow svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: var(--fd-text-primary, #111);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.fi-strip__arrow:hover:not(:disabled) { border-color: var(--fd-gold, #d4a017); }
.fi-strip__arrow:disabled { opacity: .32; cursor: default; }
.fi-strip__arrow:focus-visible {
    outline: 2px solid var(--fd-focus, #a86a00);
    outline-offset: var(--fd-focus-offset, 2px);
}

/* -- the strip --------------------------------------------------- */

.fi-strip {
    display: flex;
    gap: var(--fd-space-5, 22px);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 6px 2px 14px;
    margin-inline: -2px;
    scrollbar-width: none;
}

.fi-strip::-webkit-scrollbar { display: none; }

.fi-pcard {
    scroll-snap-align: start;
    flex: 0 0 calc((100% - (var(--fd-space-5, 22px) * 2)) / 3);
    min-width: 268px;
    display: flex;
    flex-direction: column;
    gap: var(--fd-space-3, 12px);
    padding: var(--fd-space-5, 22px);
    background: var(--fd-white, #fff);
    border: 1px solid var(--fd-warm-grey, #e7e2da);
    border-radius: var(--fd-radius-lg, 16px);
    box-shadow: 0 2px 10px rgba(60, 44, 12, .05);
    text-decoration: none;
    color: inherit;
    transition: transform .18s cubic-bezier(.4, 0, .2, 1), box-shadow .18s ease;
}

.fi-pcard:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(60, 44, 12, .11);
}

.fi-pcard:focus-visible {
    outline: 2px solid var(--fd-focus, #a86a00);
    outline-offset: 3px;
}

.fi-pcard__status {
    display: flex;
    align-items: center;
    gap: 9px;
}

.fi-pcard__icon {
    display: inline-flex;
    color: var(--fd-gold, #d4a017);
    flex-shrink: 0;
}

.fi-pcard__icon svg { width: 22px; height: 22px; }

.fi-pcard__status-label {
    font-size: var(--fd-text-eyebrow, .66rem);
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--fd-accent-text, #9a5d00);
}

.fi-pcard__title {
    margin: 0;
    font-size: var(--fd-text-h4);
    font-weight: var(--fd-font-weight-subheading, 700);
    line-height: 1.32;
    letter-spacing: var(--fd-letter-tight, -0.015em);
    color: var(--fd-text-strong, #111);
    text-wrap: balance;
}

.fi-pcard__when {
    display: block;
    font-size: var(--fd-text-small);
    color: var(--fd-muted-text, #6f6a62);
    font-variant-numeric: tabular-nums;
}

.fi-pcard__cta {
    margin-top: auto;
    padding-top: var(--fd-space-2, 8px);
}

.fi-pcard__btn { font-size: var(--fd-text-button); }

.fi-program-status__more {
    margin: var(--fd-space-2, 8px) 0 0;
    font-size: var(--fd-text-small);
    color: var(--fd-muted-text, #6f6a62);
}

/* -- one programme, and none ------------------------------------- */

.fi-solo,
.fi-nolive {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--fd-space-7, 28px);
    flex-wrap: wrap;
    padding: var(--fd-space-7, 30px) var(--fd-space-8, 34px);
    background: var(--fd-white, #fff);
    border: 1px solid var(--fd-warm-grey, #e7e2da);
    border-radius: var(--fd-radius-xl, 20px);
    box-shadow: 0 3px 14px rgba(60, 44, 12, .06);
}

.fi-solo__body,
.fi-nolive__body {
    flex: 1 1 24rem;
    min-width: 0;
}

.fi-solo__title,
.fi-nolive__title {
    margin: var(--fd-space-3, 12px) 0 var(--fd-space-2, 8px);
    font-size: var(--fd-text-h3);
    font-weight: var(--fd-font-weight-heading, 800);
    letter-spacing: var(--fd-letter-tight, -0.025em);
    color: var(--fd-text-strong, #111);
    text-wrap: balance;
}

.fi-solo__when,
.fi-solo__summary,
.fi-nolive__proof {
    margin: 0 0 4px;
    font-size: var(--fd-text-body);
    color: var(--fd-muted-text, #6f6a62);
}

.fi-solo__actions,
.fi-nolive__actions {
    display: flex;
    gap: var(--fd-space-3, 12px);
    flex-shrink: 0;
}

@media (max-width: 1023px) {
    .fi-pcard { flex-basis: calc((100% - var(--fd-space-5, 22px)) / 2); }
}

@media (max-width: 767px) {
    .fi-program-status__head-tools { width: 100%; justify-content: space-between; }
    .fi-pcard { flex-basis: 84%; }
    .fi-solo,
    .fi-nolive { padding: var(--fd-space-5, 22px); }
    .fi-solo__actions,
    .fi-nolive__actions { width: 100%; }
    .fi-solo__actions .fd-btn,
    .fi-nolive__actions .fd-btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .fi-strip { scroll-behavior: auto; }
    .fi-pcard { transition: none; }
    .fi-pcard:hover { transform: none; }
}

/* ── S04 rebuilt to the homepage mockup, 11 Sep 2026: six vertical tiles in one row. ── */
.fi-grow-paths__tile,
.fi-grow-paths__tile.is-unavailable {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px 16px 14px;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(212, 160, 23, 0.14);
}
.fi-grow-paths__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(212, 160, 23, 0.12);
    color: #a67c0a;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.fi-grow-paths__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fi-grow-paths__name { font-weight: 700; font-size: 0.98rem; line-height: 1.25; color: var(--fd-charcoal, #111); }
.fi-grow-paths__copy { font-size: 0.84rem; line-height: 1.4; color: #6b6257; }
.fi-grow-paths__arrow { margin-top: auto; align-self: flex-start; color: var(--fd-gold, #d4a017); font-weight: 700; }
a.fi-grow-paths__tile:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(40, 30, 10, 0.10); border-color: rgba(212, 160, 23, 0.4); }
@media (max-width: 767px) {
    .fi-grow-paths__tile { flex-direction: column; }
}

/* -- 19 Sep 2026: S02 reads catalog courses -------------------------
 * Interest count on Coming-soon / Registration-closed cards, and a gold
 * hairline on the two states the business wants clicked first. */
.fi-pcard__interest {
    display: block;
    font-size: var(--fd-text-small);
    font-weight: 600;
    color: var(--fd-accent-text, #9a5d00);
    font-variant-numeric: tabular-nums;
}

.fi-pcard--live,
.fi-solo--live {
    border-color: var(--fd-gold, #d4a017);
}

/* -- 26 Sep 2026: S02 colour and stickers --------------------------------
 * Registration open is green, Recording available is red (the two states the
 * business wants clicked); each card shows a summary line and a small cut of
 * the matching "in action" sticker. Tones are scoped to the card button. */
.fi-pcard__sticker {
    display: inline-flex;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
}

.fi-pcard__sticker img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    display: block;
}

.fi-pcard__summary {
    margin: 0;
    font-size: var(--fd-text-small);
    line-height: 1.5;
    color: var(--fd-muted-text, #6f6a62);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.fi-pcard--open,
.fi-solo--open {
    border-color: #2f8f5b;
    border-top: 3px solid #2f8f5b;
}

.fi-pcard--open .fi-pcard__status-label,
.fi-solo--open .fi-pcard__status-label { color: #1f6f45; }

.fi-pcard--recording,
.fi-solo--recording {
    border-color: #c8322b;
    border-top: 3px solid #c8322b;
}

.fi-pcard--recording .fi-pcard__status-label,
.fi-solo--recording .fi-pcard__status-label { color: #a8261f; }

/* Selectors carry `html body` and a doubled class to outrank the glass-button
   layer (layouts/partials/glass-buttons: html body .fd-btn--primary.fd-btn--primary,
   specificity 0,2,2), which otherwise repaints these gold except on hover. */
html body .fd-btn.fd-btn--primary.fi-pcard__btn--green {
    background: #2f8f5b;
    border-color: #2f8f5b;
    color: #fff;
}

html body .fi-pcard:hover .fd-btn.fd-btn--primary.fi-pcard__btn--green,
html body .fd-btn.fd-btn--primary.fi-pcard__btn--green:hover:not(:disabled):not([aria-disabled='true']) { background: #27794d; border-color: #27794d; color: #fff; }

html body .fd-btn.fd-btn--primary.fi-pcard__btn--red {
    background: #c8322b;
    border-color: #c8322b;
    color: #fff;
}

html body .fi-pcard:hover .fd-btn.fd-btn--primary.fi-pcard__btn--red,
html body .fd-btn.fd-btn--primary.fi-pcard__btn--red:hover:not(:disabled):not([aria-disabled='true']) { background: #a8261f; border-color: #a8261f; color: #fff; }