/* ============================================================
   Soofos — Browse (course archive) page styles
   Class prefix: sf-browse-*
   All visual values from tokens.css. No hardcoded hex/font.
   Responsive: sidebar stacks above grid ≤900px; grid 3→2→1 cols.
   ============================================================ */

/* ── Layout shell ──────────────────────────────────────────────────────────── */

/* Boxed like the home page: content is capped at --container-max and centred,
   so cards keep a sane size at 1920/2560px instead of scaling with viewport. */
.sf-browse-layout {
    display: flex;
    gap: 32px;
    padding: 28px 40px 48px;
    align-items: flex-start;
    max-width: calc(var(--container-max) + 80px);
    margin-inline: auto;
}

/* ── Sidebar ───────────────────────────────────────────────────────────────── */

.sf-browse-sidebar {
    width: 232px;
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 90px; /* clears the sticky marketing nav */
}

/* Collapsible filter panel (details/summary — JS collapses it ≤900px only).
   On desktop the toggle is hidden and the panel is always expanded. */
.sf-browse-filters__toggle {
    display: none;
}

.sf-browse-filters__groups {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sf-browse-filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sf-browse-filter-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: .05em;
    margin-bottom: 2px;
    text-transform: uppercase;
}

/* Category rows */
.sf-browse-filter-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--body);
}

.sf-browse-cat-row {
    display: flex;
    align-items: center;
    gap: 9px;
    text-decoration: none;
    color: var(--body);
    transition: color .12s;
}

.sf-browse-cat-row:hover {
    color: var(--deep-blue);
}

/* Checkbox visual */
.sf-browse-checkbox {
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: 5px;
    border: 1.5px solid var(--faint);
    box-sizing: border-box;
    display: grid;
    place-items: center;
    font-size: 10px;
    font-weight: 900;
    transition: background .12s, border-color .12s;
}

.sf-browse-checkbox.is-checked {
    background: var(--blue);
    border-color: var(--blue);
    color: var(--white);
}

.sf-browse-cat-count {
    margin-left: auto;
    font-size: 12px;
    font-weight: 600;
    color: var(--faint);
}

/* ── Icon helpers (browse-scoped) ──────────────────────────────────────────── */

/* Inline icon wrapper: keeps icon baseline-aligned next to text. */
.sf-browse-show-more .sf-icon,
.sf-browse-load-more .sf-icon,
.sf-browse-sort-btn .sf-icon,
.sf-browse-pill-remove .sf-icon,
.sf-blog-row__all-link .sf-icon,
.sf-programs-row__all-link .sf-icon,
.sf-cat-most-popular__browse-all .sf-icon,
.sf-cat-closers__plus-cta .sf-icon,
.sf-curated-path__cta-icon .sf-icon,
.sf-btn-icon .sf-icon {
    display: inline-flex;
    vertical-align: middle;
    line-height: 0;
}

/* xs size override (~14px): used within tight spaces. */
.sf-icon--xs {
    width: 14px !important;
    height: 14px !important;
}

/* Icon wrapper inside a .btn — seats the icon flush next to label text. */
.sf-btn-icon {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    margin-right: 4px;
}

/* "Show all N →" link */
.sf-browse-show-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 800;
    color: var(--deep-blue);
    text-decoration: none;
    transition: color .12s;
}

.sf-browse-show-more:hover {
    color: var(--blue);
}

/* Level chips */
.sf-browse-chip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.sf-browse-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border: 2px solid var(--blue-border);
    background: var(--white);
    border-radius: var(--r-btn);
    font-size: 12px;
    font-weight: 600;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .12s, background .12s, font-weight .1s;
}

.sf-browse-chip:hover {
    border-color: var(--blue);
    background: var(--blue-tint);
}

.sf-browse-chip.is-active {
    border-color: var(--blue);
    background: var(--blue-fill);
    font-weight: 800;
}

/* Duration radio rows */
.sf-browse-radio-row {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 700;
    color: var(--body);
    text-decoration: none;
    transition: color .12s;
}

.sf-browse-radio-row:hover {
    color: var(--deep-blue);
}

.sf-browse-radio {
    width: 16px;
    height: 16px;
    flex: none;
    border-radius: 50%;
    border: 1.5px solid var(--faint);
    box-sizing: border-box;
    transition: border-color .12s, border-width .12s;
}

.sf-browse-radio.is-checked {
    border: 5px solid var(--blue);
}

/* Plus promo card */
.sf-browse-plus-promo {
    background: var(--blue-fill);
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 12px;
    color: var(--deep-blue);
    line-height: 1.5;
    font-weight: 700;
    text-decoration: none;
    display: block;
    transition: background .12s;
}

.sf-browse-plus-promo:hover {
    background: var(--blue-border);
}

/* ── Results column ────────────────────────────────────────────────────────── */

.sf-browse-results {
    flex: 1;
    min-width: 0;
}

/* Results header */
.sf-browse-results-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.sf-browse-results-title {
    font-size: 21px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -.2px;
}

.sf-browse-results-count {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted-2);
}

/* Sort dropdown (details/summary, no JS) */
.sf-browse-sort {
    position: relative;
}

.sf-browse-sort-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ink);
    background: var(--white);
    border: 1.5px solid var(--blue-border);
    border-radius: var(--r-btn);
    padding: 8px 16px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: border-color .12s;
}

.sf-browse-sort-btn::-webkit-details-marker {
    display: none;
}

.sf-browse-sort:hover .sf-browse-sort-btn,
.sf-browse-sort[open] .sf-browse-sort-btn {
    border-color: var(--blue);
}

.sf-browse-sort-dropdown {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--white);
    border: 1.5px solid var(--blue-border);
    border-radius: var(--r-card-sm);
    box-shadow: var(--shadow-pop);
    min-width: 180px;
    z-index: 50;
    overflow: hidden;
}

.sf-browse-sort-option {
    display: block;
    padding: 10px 16px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    transition: background .1s;
}

.sf-browse-sort-option:hover {
    background: var(--blue-fill);
}

.sf-browse-sort-option.is-current {
    font-weight: 900;
    color: var(--deep-blue);
    background: var(--blue-tint);
}

/* Active filter pills */
.sf-browse-active-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-bottom: 18px;
}

.sf-browse-active-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 800;
    color: var(--deep-blue);
    background: var(--blue-fill);
    border-radius: var(--r-pill);
    padding: 6px 13px;
}

.sf-browse-pill-remove {
    display: inline-flex;
    align-items: center;
    color: var(--muted-2);
    text-decoration: none;
    line-height: 0;
    transition: color .12s;
}

.sf-browse-pill-remove:hover {
    color: var(--ink);
}

.sf-browse-clear-all {
    font-size: 12px;
    font-weight: 800;
    color: var(--muted-2);
    text-decoration: none;
    align-self: center;
    transition: color .12s;
}

.sf-browse-clear-all:hover {
    color: var(--ink);
}

/* ── Course card grid ──────────────────────────────────────────────────────── */

.sf-browse-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* Equal-height cells: the wrap stretches, the card fills it. */
.sf-browse-grid > .course-card-wrap {
    display: flex;
}

.sf-browse-grid > .course-card-wrap > .course-card {
    width: 100%;
}

/* Price inside card */
.sf-card-price-main {
    font-size: 15px;
    font-weight: 900;
    color: var(--ink);
}

.sf-card-price-original {
    font-size: 11px;
    color: var(--faint);
    text-decoration: line-through;
}

.sf-card-in-plus {
    font-size: 10.5px;
    font-weight: 800;
    color: var(--deep-blue);
    background: var(--blue-fill);
    border-radius: var(--r-pill);
    padding: 3px 8px;
    margin-left: auto;
}

/* Individual browse card override (fills grid cell). The public catalogue
   card is larger than the compact portal card, so scale its typography and
   spacing up and pin the price row to the bottom edge. */
.sf-browse-card {
    display: flex;
    flex-direction: column;
}

.sf-browse-card .course-card__body {
    flex: 1;
    padding: 14px 16px 16px;
    gap: 5px;
}

.sf-browse-card .course-card__title {
    font-size: 14.5px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sf-browse-card .course-card__meta {
    font-size: 12px;
}

.sf-browse-card .course-card__price {
    margin-top: auto;
    padding-top: 8px;
}

/* ── Inline Plus promo tile ────────────────────────────────────────────────── */

.sf-browse-promo-tile {
    background: var(--ink);
    border-radius: var(--r-card);
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    color: var(--white);
}

.sf-browse-promo-icon {
    line-height: 0;
    margin-bottom: 4px;
}

/* NOTE: --blue-on-navy token missing from tokens.css — reported for orchestrator.
   Using color:inherit (white on navy) as safe fallback until token is added. */
.sf-browse-promo-icon__wrap {
    display: inline-flex;
    color: inherit;
}

.sf-browse-promo-headline {
    font-size: 16px;
    font-weight: 900;
    line-height: 1.3;
    margin-top: 8px;
}

.sf-browse-promo-sub {
    font-size: 12.5px;
    color: var(--blue-border);
    line-height: 1.5;
    margin: 6px 0 0;
}

.sf-browse-promo-cta {
    margin-top: auto;
    text-align: center;
    padding-top: 14px;
}

/* ── Empty state ───────────────────────────────────────────────────────────── */

.sf-browse-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--muted-2);
}

.sf-browse-empty p {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* ── Pagination ────────────────────────────────────────────────────────────── */

.sf-browse-pagination {
    display: flex;
    justify-content: center;
    margin-top: 22px;
}

.sf-browse-load-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 13px 30px;
    border: 1.5px solid var(--blue-border);
    border-radius: var(--r-btn);
    background: var(--white);
    font: 800 13.5px var(--font);
    color: var(--ink);
    text-decoration: none;
    transition: border-color .15s, background .12s;
}

.sf-browse-load-more:hover {
    border-color: var(--blue);
    background: var(--blue-tint);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

/* 901–1140px: results column is too narrow for 3 comfortable cards */
@media (min-width: 901px) and (max-width: 1140px) {
    .sf-browse-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ≤900px: sidebar stacks above grid; filter panel becomes a collapsible
   "Filters" disclosure (collapsed by JS, open without JS). */
@media (max-width: 900px) {
    .sf-browse-layout {
        flex-direction: column;
        padding: 20px 20px 36px;
        gap: 16px;
    }

    .sf-browse-sidebar {
        width: 100%;
        position: static;
    }

    .sf-browse-filters {
        background: var(--white);
        border: 1px solid var(--card-border);
        border-radius: var(--r-card-sm);
    }

    .sf-browse-filters__toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 44px;
        padding: 10px 14px;
        font-size: 13.5px;
        font-weight: 800;
        color: var(--ink);
        cursor: pointer;
        list-style: none;
        user-select: none;
    }

    .sf-browse-filters__toggle::-webkit-details-marker {
        display: none;
    }

    .sf-browse-filters__count {
        display: inline-grid;
        place-items: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        border-radius: var(--r-pill);
        background: var(--blue);
        color: var(--white);
        font-size: 11px;
        font-weight: 800;
    }

    .sf-browse-filters__chev {
        margin-left: auto;
        transition: transform .15s;
    }

    .sf-browse-filters[open] .sf-browse-filters__chev {
        transform: rotate(180deg);
    }

    .sf-browse-filters__groups {
        padding: 4px 14px 16px;
        border-top: 1px solid var(--card-border);
    }

    .sf-browse-filters[open] .sf-browse-filters__toggle {
        border-bottom: 0;
    }

    /* Comfortable tap targets inside the panel */
    .sf-browse-cat-row,
    .sf-browse-radio-row {
        min-height: 44px;
    }

    .sf-browse-chip {
        min-height: 40px;
    }

    /* Chip list wraps naturally; category list can scroll if long */
    .sf-browse-filter-list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px 12px;
    }

    .sf-browse-chip-list {
        flex-wrap: wrap;
    }

    .sf-browse-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
    }
}

/* ≤580px: single column */
@media (max-width: 580px) {
    .sf-browse-layout {
        padding: 16px 14px 28px;
    }

    .sf-browse-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .sf-browse-filter-list {
        grid-template-columns: 1fr;
    }
}

/* ══════════════════════════════════════════════════════════════════════════════
   CATEGORY PAGE SECTIONS (browse-category.html)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Category hero band ──────────────────────────────────────────────────────── */

/* Band background runs full-bleed; its content is boxed to --container-max. */
.sf-cat-hero {
    background: var(--blue-tint);
    border-bottom: 1px solid var(--blue-border);
    padding: 36px 40px 28px;
}

.sf-cat-hero > * {
    max-width: var(--container-max);
    margin-inline: auto;
}

.sf-cat-hero__crumb {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted-2);
    margin-bottom: 14px;
}

.sf-cat-hero__crumb a {
    color: var(--blue);
    text-decoration: none;
    transition: color .12s;
}

.sf-cat-hero__crumb a:hover {
    color: var(--deep-blue);
}

.sf-cat-hero__body {
    display: flex;
    align-items: center;
    gap: 24px;
}

.sf-cat-hero__text {
    flex: 1;
    min-width: 0;
}

.sf-cat-hero__title {
    font-size: 34px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -.5px;
    margin: 0;
}

.sf-cat-hero__desc {
    font-size: 15px;
    color: var(--muted);
    line-height: 1.55;
    margin: 10px 0 0;
    max-width: 560px;
}

.sf-cat-hero__stats {
    display: flex;
    gap: 20px;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
}

.sf-cat-hero__topics {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.sf-cat-hero__topic-chip {
    padding: 9px 18px;
    border: 1px solid var(--card-border);
    background: var(--white);
    border-radius: var(--r-btn);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--ink);
    text-decoration: none;
    transition: border-color .12s, color .12s, background .12s;
}

.sf-cat-hero__topic-chip:hover {
    border-color: var(--blue);
    color: var(--deep-blue);
    background: var(--blue-fill);
}

/* ── Curated path band ──────────────────────────────────────────────────────── */

.sf-curated-path {
    padding: 32px 40px 8px;
    max-width: calc(var(--container-max) + 80px);
    margin-inline: auto;
}

.sf-curated-path__header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 6px;
}

.sf-curated-path__title {
    font-size: 22px;
    font-weight: 900;
    color: var(--ink);
    margin: 0;
}

.sf-curated-path__badge {
    font-size: 11px;
    font-weight: 900;
    color: var(--deep-blue);
    background: var(--blue-fill);
    border-radius: var(--r-pill);
    padding: 4px 11px;
    white-space: nowrap;
}

.sf-curated-path__sub {
    font-size: 13.5px;
    color: var(--muted);
    margin: 0 0 18px;
}

.sf-curated-path__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.sf-curated-path__card {
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card);
    overflow: hidden;
    position: relative;
    text-decoration: none;
    display: block;
}

.sf-curated-path__step-num {
    position: absolute;
    top: 12px;
    left: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--white);
    font-size: 13px;
    font-weight: 900;
    display: grid;
    place-items: center;
    z-index: 1;
}

.sf-curated-path__thumb {
    height: 118px;
    background: var(--blue-tint);
    overflow: hidden;
}

.sf-curated-path__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sf-curated-path__card-body {
    padding: 13px 15px;
}

.sf-curated-path__card-title {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.35;
    min-height: 38px;
}

.sf-curated-path__card-meta {
    font-size: 11.5px;
    color: var(--muted-2);
    font-weight: 700;
    margin-top: 5px;
}

.sf-curated-path__cta-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    background: var(--blue-tint);
    border: 1px solid var(--blue-border);
    border-radius: var(--r-card-sm);
    padding: 12px 18px;
}

.sf-curated-path__cta-icon {
    font-size: 18px;
}

.sf-curated-path__cta-text {
    flex: 1;
    font-size: 13px;
    color: var(--deep-blue);
    font-weight: 700;
}

/* ── Most popular header ────────────────────────────────────────────────────── */

.sf-cat-most-popular {
    padding: 32px 40px 0;
    max-width: calc(var(--container-max) + 80px);
    margin-inline: auto;
}

/* The nested layout already has its own horizontal padding+cap; avoid
   double gutters inside the boxed most-popular band. */
.sf-cat-most-popular .sf-browse-layout {
    padding-inline: 0;
}

.sf-cat-most-popular__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 0;
}

.sf-cat-most-popular__title {
    font-size: 22px;
    font-weight: 900;
    color: var(--ink);
    margin: 0;
}

.sf-cat-most-popular__browse-all {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13.5px;
    font-weight: 800;
    color: var(--blue);
    text-decoration: none;
    transition: color .12s;
}

.sf-cat-most-popular__browse-all:hover {
    color: var(--deep-blue);
}

/* Remove top padding from layout inside most-popular (has its own) */
.sf-cat-most-popular__layout {
    padding-top: 16px;
}

/* ── Closers band ───────────────────────────────────────────────────────────── */

.sf-cat-closers {
    padding: 28px 40px 48px;
    display: flex;
    gap: 18px;
    max-width: calc(var(--container-max) + 80px);
    margin-inline: auto;
}

.sf-cat-closers__ask {
    flex: 1.4;
    background: var(--ink);
    border-radius: var(--r-card-lg);
    padding: 26px 30px;
    display: flex;
    align-items: center;
    gap: 24px;
}

.sf-cat-closers__ask-text {
    flex: 1;
    min-width: 0;
}

.sf-cat-closers__ask-title {
    font-size: 19px;
    font-weight: 900;
    color: var(--white);
}

.sf-cat-closers__ask-desc {
    font-size: 13px;
    color: var(--blue-border);
    line-height: 1.55;
    margin: 6px 0 0;
}

.sf-cat-closers__plus {
    flex: 1;
    background: var(--blue-fill);
    border: 1px solid var(--blue-border);
    border-radius: var(--r-card-lg);
    padding: 26px 30px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    text-decoration: none;
    transition: background .12s;
}

.sf-cat-closers__plus:hover {
    background: var(--blue-fill);
}

.sf-cat-closers__plus-title {
    font-size: 16px;
    font-weight: 900;
    color: var(--ink);
}

.sf-cat-closers__plus-desc {
    font-size: 13px;
    color: var(--muted);
    line-height: 1.5;
    margin: 0;
}

.sf-cat-closers__plus-cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 800;
    color: var(--blue);
    margin-top: auto;
}

/* ══════════════════════════════════════════════════════════════════════════════
   TOPIC PAGE SECTIONS (browse-topic.html)
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Topic header ────────────────────────────────────────────────────────────── */

.sf-topic-header {
    padding: 32px 40px 0;
    max-width: calc(var(--container-max) + 80px);
    margin-inline: auto;
}

.sf-topic-header__crumb {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted-2);
    margin-bottom: 14px;
}

.sf-topic-header__crumb a {
    color: var(--blue);
    text-decoration: none;
    transition: color .12s;
}

.sf-topic-header__crumb a:hover {
    color: var(--deep-blue);
}

.sf-topic-header__top {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.sf-topic-header__left {
    flex: 1;
    min-width: 0;
}

.sf-topic-header__title {
    font-size: 32px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: -.5px;
    margin: 0;
}

.sf-topic-header__desc {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.55;
    margin: 8px 0 0;
    max-width: 560px;
}

.sf-topic-header__stats {
    display: flex;
    gap: 16px;
    font-size: 13px;
    font-weight: 800;
    color: var(--ink);
    padding-bottom: 4px;
    white-space: nowrap;
}

.sf-topic-header__tabs {
    display: flex;
    gap: 4px;
    margin-top: 16px;
    border-bottom: 1.5px solid var(--blue-border);
}

.sf-topic-header__tab {
    padding: 9px 16px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--muted-2);
    text-decoration: none;
    cursor: pointer;
    transition: color .12s;
}

.sf-topic-header__tab.is-active {
    font-weight: 800;
    color: var(--deep-blue);
    border-bottom: 3px solid var(--blue);
    margin-bottom: -1.5px;
}

.sf-topic-header__tab:hover:not(.is-active) {
    color: var(--deep-blue);
}

/* ── Instructors row ────────────────────────────────────────────────────────── */

.sf-instructors-row {
    margin-top: 28px;
    padding-top: 4px;
}

.sf-instructors-row__title {
    font-size: 17px;
    font-weight: 900;
    color: var(--ink);
    margin: 0 0 12px;
}

.sf-instructors-row__list {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sf-instructor-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--r-btn);
    padding: 8px 18px 8px 8px;
    text-decoration: none;
    transition: border-color .12s, box-shadow .12s;
}

.sf-instructor-card:hover {
    border-color: var(--blue);
    box-shadow: var(--shadow-soft);
}

.sf-instructor-card__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--blue-fill);
    color: var(--deep-blue);
    font-weight: 900;
    font-size: 13px;
    display: grid;
    place-items: center;
    flex: none;
}

.sf-instructor-card__info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.sf-instructor-card__name {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ink);
}

.sf-instructor-card__meta {
    font-size: 10.5px;
    color: var(--muted-2);
    font-weight: 700;
}

/* ── Blog row ───────────────────────────────────────────────────────────────── */

.sf-blog-row {
    margin-top: 28px;
}

.sf-blog-row__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 12px;
}

.sf-blog-row__title {
    font-size: 17px;
    font-weight: 900;
    color: var(--ink);
    margin: 0;
}

.sf-blog-row__all-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 800;
    color: var(--blue);
    text-decoration: none;
    transition: color .12s;
}

.sf-blog-row__all-link:hover {
    color: var(--deep-blue);
}

.sf-blog-row__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.sf-blog-card {
    text-decoration: none;
    background: var(--white);
    border: 1px solid var(--card-border);
    border-radius: var(--r-card-sm);
    overflow: hidden;
    display: block;
}

.sf-blog-card__thumb {
    height: 84px;
    background: var(--blue-tint);
    overflow: hidden;
}

.sf-blog-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sf-blog-card__body {
    padding: 12px 14px;
}

.sf-blog-card__title {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.35;
}

.sf-blog-card__meta {
    font-size: 10.5px;
    color: var(--muted-2);
    font-weight: 700;
    margin-top: 5px;
}

/* ── SEO text block ─────────────────────────────────────────────────────────── */

.sf-seo-text {
    margin-top: 28px;
    max-width: 680px;
}

/* Parent-category branch renders the SEO block at top level (outside the
   padded results container) — same gutters as .sf-programs-row (TASK-442),
   now boxed to the shared container width. */
.sf-seo-text-section {
    padding: 0 40px;
    max-width: calc(var(--container-max) + 80px);
    margin-inline: auto;
}

/* Instructors / blog rows rendered at top level on parent-category pages
   (outside .sf-browse-results) get the same gutters + cap as sibling bands. */
#sf-main > .sf-instructors-row,
#sf-main > .sf-blog-row {
    padding: 0 40px;
    max-width: calc(var(--container-max) + 80px);
    margin-inline: auto;
}

.sf-seo-text__title {
    font-size: 17px;
    font-weight: 900;
    color: var(--ink);
    margin: 0 0 8px;
}

.sf-seo-text__body {
    font-size: 13px;
    color: var(--body);
    line-height: 1.7;
}

.sf-seo-text__body p {
    margin: 0 0 12px;
}

/* ── Programs row (category page) ─────────────────────────────────────────── */

.sf-programs-row {
    margin-top: 28px;
    padding: 0 40px;
    max-width: calc(var(--container-max) + 80px);
    margin-inline: auto;
}

.sf-programs-row__header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.sf-programs-row__title {
    font-size: 17px;
    font-weight: 900;
    color: var(--ink);
    margin: 0;
}

.sf-programs-row__all-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
    text-decoration: none;
    white-space: nowrap;
}

.sf-programs-row__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* Program card (compact, used in category row) */
.sf-program-card-sm {
    display: flex;
    flex-direction: column;
    border-radius: var(--r-card);
    border: 1px solid var(--card-border);
    overflow: hidden;
    text-decoration: none;
    background: var(--white);
    transition: box-shadow 0.18s ease;
}

.sf-program-card-sm:hover {
    box-shadow: var(--shadow-card);
}

.sf-program-card-sm__thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--blue-tint);
}

.sf-program-card-sm__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sf-program-card-sm__body {
    padding: 14px 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sf-program-card-sm__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--blue);
}

.sf-program-card-sm__title {
    font-size: 14px;
    font-weight: 800;
    color: var(--ink);
    line-height: 1.35;
}

.sf-program-card-sm__desc {
    font-size: 12px;
    color: var(--body);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sf-program-card-sm__meta {
    font-size: 11px;
    color: var(--muted);
    font-weight: 600;
    margin-top: 4px;
}

/* ── Responsive: category + topic sections ──────────────────────────────────── */

@media (max-width: 900px) {
    .sf-cat-hero {
        padding: 24px 20px 20px;
    }

    .sf-cat-hero__body {
        flex-direction: column;
        align-items: flex-start;
    }

    .sf-cat-hero__title {
        font-size: 26px;
    }

    .sf-curated-path {
        padding: 24px 20px 8px;
    }

    .sf-curated-path__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sf-cat-most-popular {
        padding: 24px 20px 0;
    }

    .sf-cat-most-popular__header {
        flex-direction: column;
        gap: 4px;
    }

    .sf-cat-closers {
        padding: 20px 20px 36px;
        flex-direction: column;
    }

    .sf-topic-header {
        padding: 20px 20px 0;
    }

    .sf-topic-header__top {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .sf-topic-header__title {
        font-size: 24px;
    }

    .sf-blog-row__grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sf-programs-row {
        padding: 0 20px;
    }

    .sf-seo-text-section,
    #sf-main > .sf-instructors-row,
    #sf-main > .sf-blog-row {
        padding: 0 20px;
    }

    .sf-programs-row__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 580px) {
    .sf-cat-hero {
        padding: 16px 12px 16px;
    }

    .sf-cat-hero__title {
        font-size: 22px;
    }

    .sf-curated-path {
        padding: 16px 12px 8px;
    }

    .sf-curated-path__grid {
        grid-template-columns: 1fr;
    }

    .sf-curated-path__cta-bar {
        flex-direction: column;
        text-align: center;
    }

    .sf-cat-most-popular {
        padding: 16px 12px 0;
    }

    .sf-cat-closers {
        padding: 16px 12px 28px;
    }

    .sf-topic-header {
        padding: 16px 12px 0;
    }

    .sf-topic-header__title {
        font-size: 20px;
    }

    .sf-blog-row__grid {
        grid-template-columns: 1fr;
    }

    .sf-instructors-row__list {
        flex-direction: column;
    }

    .sf-programs-row {
        padding: 0 12px;
    }

    .sf-seo-text-section,
    #sf-main > .sf-instructors-row,
    #sf-main > .sf-blog-row {
        padding: 0 12px;
    }

    .sf-programs-row__grid {
        grid-template-columns: 1fr;
    }
}