/* ============================================================================
   Curriculum library — the subject coverage that sits under the page headline.

   Subjects are grouped into short lists, each in a panel carrying its own
   accent, so a visitor looking for one course scans a column rather than a
   sentence.

   The panels are not decoration. The hero's gradient runs from #052B45 to
   #0D6BAA, and a colored accent legible against the dark end washes out
   against the light one -- the group accents fall below 4.5:1 over
   #0D6BAA. Laying a 28% black panel under each group darkens that ground
   enough for the accents to clear 4.5:1 across the whole width. The panels
   also give each group an edge, so the lists stay distinct at every column
   count.

   Page-scoped: loaded via _page_css_ on curricula.html.
   ============================================================================ */

.curr-subject-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    max-width: 64rem;
    margin: 2.25rem auto 0;
    text-align: left;
    /* Panels hug their own content; a stretched panel leaves a pool of empty
       ground under the shorter lists. */
    align-items: start;
}

/* ---- Group panel ----------------------------------------------------------
   Each group names its own accent in --curr-accent; everything else here is
   shared. The accent is a light tint rather than the brand's base colors:
   #FFA600 and #9C27B0 measure 2.9:1 and 1.1:1 on the gradient's light end.
   ------------------------------------------------------------------------- */
.curr-subject-group {
    min-width: 0;
    padding: .875rem 1rem 1rem;
    border-radius: .75rem;
    border-left: 3px solid var(--curr-accent, #7DD3FC);
    background: rgba(0, 0, 0, .28);
}

.curr-subject-label {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .75rem;
    color: var(--curr-accent, #7DD3FC);
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .08em;
    text-transform: uppercase;
}

/* A fixed box keeps the group labels' text aligned despite differing glyph widths. */
.curr-subject-label i {
    flex: 0 0 auto;
    width: 1.125rem;
    font-size: .9375rem;
    text-align: center;
}

/* ---- Heading: a plain label, or a toggle on narrow screens ------------------
   Both are in the markup; exactly one is rendered. The toggle only appears
   once the page script marks the grid collapsible, so without the script the
   groups stay open under plain labels.
   ------------------------------------------------------------------------- */
.curr-subject-label-static,
.curr-group-toggle {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.curr-group-toggle {
    display: none;
    appearance: none;
    border: 0;
    background: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
}

.curr-subject-label .curr-group-chevron {
    width: auto;
    margin-left: auto;
    font-size: .75rem;
    transition: transform .2s ease;
}

.curr-subject-group.is-open .curr-group-chevron { transform: rotate(180deg); }

/* ---- Chips ----------------------------------------------------------------
   No visible border at rest: the panel already encloses the chips, and an
   outline on every one reads as busy. Definition comes from the fill, which
   the dark panel makes plainly visible. White
   text on that fill measures 12.7:1 at the gradient's dark end and 6.9:1 at
   its light end, so the chips are legible the whole way across.
   ------------------------------------------------------------------------- */
.curr-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.curr-chip {
    min-width: 0;
    max-width: 100%;
    padding: .25rem .625rem;
    border-radius: .375rem;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* An unreleased title is marked on the subject it affects, so the rest of the
   list is not read as provisional. */
.curr-chip-soon {
    margin-left: .375rem;
    color: inherit;
    font-size: .625rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ---- Responsive -----------------------------------------------------------
   Explicit widths rather than Tailwind's prefixes: this site redefines the
   scale in basic-layout.html, where 'sm' is a max-width query and 'md' is
   bounded at 950-1299px, so those prefixes do not mean here what they mean
   elsewhere.

   Two columns carry the middle of the range. Below 620px the columns would be
   too narrow for the longer chips; from 1024px there is room for four, which
   keeps each group's list clearly its own.
   ------------------------------------------------------------------------- */
@media (min-width: 620px) {
    .curr-subject-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; }
}

@media (min-width: 1024px) {
    .curr-subject-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
}

/* ---- Chips as filters -----------------------------------------------------
   The chips drive the shelf below, so they are buttons. The UA button styling
   is reset so they read as chips rather than form controls. The transparent
   border reserves the width the pressed state's border takes, so pressing a
   chip does not shift its neighbours.
   ------------------------------------------------------------------------- */
button.curr-chip {
    appearance: none;
    border: 1px solid transparent;
    cursor: pointer;
    font: inherit;
    font-size: .875rem;
    font-weight: 500;
    text-align: left;
    transition: background-color .15s ease, border-color .15s ease;
}

button.curr-chip:hover { background: rgba(255, 255, 255, .2); }

button.curr-chip:focus-visible {
    outline: 2px solid var(--curr-accent, #7DD3FC);
    outline-offset: 2px;
}

/* The pressed chip is the one describing the shelf below, so it takes its
   group's accent. Accents are light tints and the text on them goes dark:
   white on #FCD34D would measure 1.4:1. */
button.curr-chip[aria-pressed="true"] {
    background: var(--curr-accent, #7DD3FC);
    border-color: var(--curr-accent, #7DD3FC);
    color: #052B45;
    font-weight: 600;
}

/* ---- Platform row ---------------------------------------------------------
   The languages are a different axis from the subjects, so the row spans the
   whole grid instead of standing as a fifth column.
   ------------------------------------------------------------------------- */
.curr-platform { grid-column: 1 / -1; }

.curr-platform-note {
    margin: .75rem 0 0;
    color: rgba(255, 255, 255, .78);
    font-size: .8125rem;
    line-height: 1.5;
}

.curr-platform-note a { color: #fff; text-decoration: underline; }

/* ---- Active filter, reported inside the shelf -------------------------------
   Sits on the shelf's light ground, above the grid it describes.
   ------------------------------------------------------------------------- */
.curr-shelf-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem .75rem;
    margin: 0 auto 1rem;
    color: #052B45;
    font-size: .9375rem;
    font-weight: 600;
}

.curr-shelf-filter[hidden] { display: none; }

.curr-shelf-filter-clear {
    appearance: none;
    padding: .25rem .75rem;
    border: 1px solid #0D6BAA;
    border-radius: 999px;
    background: #fff;
    color: #0D6BAA;
    cursor: pointer;
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
}

.curr-shelf-filter-clear:hover { background: #0D6BAA; color: #fff; }

.curr-shelf-filter-clear:focus-visible {
    outline: 2px solid #0D6BAA;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    button.curr-chip,
    .curr-subject-label .curr-group-chevron { transition: none; }
}

/* A chip scrolls the shelf to the top of the viewport, where the sticky nav
   would otherwise sit over the shelf's heading. */
.bookshelf-container { scroll-margin-top: 5rem; }

/* ---- Folded groups on narrow screens ----------------------------------------
   Stacked in one column, five open lists run well over a screen before the
   rest of the page starts. Below the two-column width each group folds to its
   heading, and the whole heading row is the tap target: the toggle is pulled
   out to the panel's padding edge so it spans the panel. The query is written
   as the negation of the two-column one so that no width, fractional widths
   under zoom included, falls between the two.
   ------------------------------------------------------------------------- */
@media not all and (min-width: 620px) {
    .curr-subject-grid.is-collapsible { gap: .625rem; }

    .curr-subject-grid.is-collapsible .curr-subject-group { padding-bottom: 0; }
    .curr-subject-grid.is-collapsible .curr-subject-group.is-open { padding-bottom: 1rem; }

    .curr-subject-grid.is-collapsible .curr-subject-label { margin: 0; }
    .curr-subject-grid.is-collapsible .curr-subject-label-static { display: none; }

    .curr-subject-grid.is-collapsible .curr-group-toggle {
        display: flex;
        width: calc(100% + 2rem);
        margin: -.875rem -1rem 0;
        padding: .875rem 1rem;
        border-radius: .75rem;
    }

    .curr-subject-grid.is-collapsible .curr-group-toggle:focus-visible {
        outline: 2px solid var(--curr-accent, #7DD3FC);
        outline-offset: -2px;
    }

    .curr-subject-grid.is-collapsible .curr-subject-group:not(.is-open) .curr-chip-row,
    .curr-subject-grid.is-collapsible .curr-subject-group:not(.is-open) .curr-platform-note {
        display: none;
    }
}