/* Shelf (course list) — catalog browse page.
 *
 * Ported from redesign/v1 static/redesign/css/shelf.css, dropping the
 * "top pick" banner (no view logic for it yet) and the intersection-
 * mark indicator (no interest taxonomy on main yet).
 *
 * Relies on .shelf and .book from home.css (shared via the book.html
 * partial).
 */

.page-header { padding: 56px 0 8px; }
.page-header .eyebrow {
    font-family: var(--font-mono);
    font-size: 12px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 10px;
}
.page-header .lead { max-width: 60ch; }

/* ---------- Search + filters ---------- */
.shelf-controls {
    display: flex; gap: 16px; flex-wrap: wrap;
    padding: 16px 0 28px;
    align-items: center;
    border-bottom: 1px solid var(--rule);
}
.shelf-search {
    display: flex; gap: 8px; align-items: center;
    flex: 1 1 240px;
}
.shelf-search input[type="search"],
.shelf-search input[type="text"] {
    flex: 1;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid var(--rule-2);
    border-radius: var(--radius-md);
    color: var(--text);
    font: inherit;
}
.shelf-search input:focus {
    outline: 0;
    border-color: var(--amber);
}

.filter-rail {
    display: flex; gap: 8px; flex-wrap: wrap;
    padding: 20px 0 28px;
}
.filter-chip {
    padding: 8px 14px;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font: inherit; font-size: 13px;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 1px solid var(--rule-2);
}
.filter-chip:hover { border-color: var(--amber); color: var(--amber); }
.filter-chip.active {
    background: var(--amber); color: #1B1306;
    border-color: var(--amber);
}
.filter-chip .count {
    font-family: var(--font-mono); font-size: 10px;
    margin-left: 6px; opacity: .6; letter-spacing: .04em;
}
.filter-chip.active .count { opacity: .8; }

/* Native select styled as a chip */
.filter-select {
    padding: 8px 14px;
    border: 1px solid var(--rule-2);
    border-radius: 999px;
    background: transparent;
    color: var(--text);
    font: inherit; font-size: 13px;
    cursor: pointer;
    transition: border-color .15s, color .15s;
}
.filter-select:hover { border-color: var(--amber); color: var(--amber); }
.filter-select:focus { outline: 0; border-color: var(--amber); }

/* The filter block (language + level + optional clear chip). Desktop:
   one inline row. Mobile: a 2x2 grid where row 1 holds the two
   dropdowns side-by-side and the clear-chip on row 2 spans both
   columns (looks intentional rather than orphaned). */
.shelf-filters {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}
.shelf-filters__item { margin: 0; }   /* kill default form <form> margin */

/* ---------- Shelves (book grid) ---------- */
.shelves { padding: 24px 0 80px; }
.shelf-block { margin-bottom: 56px; }

/* Catalog as an old-timey library card-catalog list.
 *
 * Each row mimics a library catalog card: call-number on the left,
 * serif title, mono metadata strip with subject/level/chapters,
 * language tag on the right. Hairline rules between rows.
 */
.catalog {
    margin: 0;
}

/* Grid layout — low specificity so media queries can override.
 * Columns: [thumb 96px] [call 64px] [body 1fr] [tail auto]. The thumb
 * shows course.thumbnail_card if set, otherwise a random approved
 * lesson image picked fresh per render (see Course.display_image).
 * When the course has neither, the cell falls back to a subtle
 * striped placeholder so the row grid stays visually aligned. */
.catalog-entry {
    display: grid;
    grid-template-columns: 96px 64px 1fr auto;
    gap: 20px;
    align-items: center;
    padding: 14px 4px;
    border-top: 1px solid var(--rule);
    transition: background .15s;
}

.catalog-entry__thumb {
    display: block;
    width: 96px;
    aspect-ratio: 3 / 2;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: inset 0 0 0 1px var(--rule);
    flex-shrink: 0;
    background: var(--bg-2);
}
/* No image → solid pastel tile. Colour is the course's persistent
 * display_color, injected via inline style; we give it a light
 * diagonal sheen so the tile doesn't look completely flat. */
.catalog-entry__thumb--color {
    background:
        linear-gradient(135deg,
            var(--course-color, var(--bg-3)),
            color-mix(in oklab, var(--course-color, var(--bg-3)) 82%, #fff)
        );
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.06),
        inset 0 -18px 24px -18px rgba(0, 0, 0, 0.08);
}
.catalog-entry__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.catalog-entry:hover .catalog-entry__thumb img {
    transform: scale(1.04);
}
.catalog-entry:hover .catalog-entry__thumb--color {
    filter: brightness(1.04) saturate(1.08);
    transition: filter .25s ease;
}
/* Link reset — needs :link/:visited to override UA styles */
.catalog-entry:link,
.catalog-entry:visited {
    border-bottom: none;
    text-decoration: none;
    color: var(--text);
}
.catalog-entry:hover {
    background: var(--bg-2);
}

.catalog-call {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: right;
}

.catalog-body {
    display: grid;
    grid-template-rows: auto auto;
    gap: 4px;
    min-width: 0;
}
.catalog-title {
    font-family: var(--font-serif);
    font-variation-settings: "opsz" 48, "SOFT" 40;
    font-weight: 500;
    font-size: 22px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--text);
    margin: 0;
    border-bottom: none;
}
.catalog-entry:hover .catalog-title { color: var(--amber-2); }
[data-theme="dark"] .catalog-entry:hover .catalog-title { color: var(--amber); }

.catalog-meta {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .06em;
    text-transform: uppercase;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.catalog-meta .meta-item { white-space: nowrap; }

.catalog-tail {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--muted);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-align: right;
}
.catalog-tail .lang {
    color: var(--text);
    font-weight: 600;
}

/* End-of-list rule */
.catalog .catalog-entry:last-child { border-bottom: 1px solid var(--rule); }

@media (max-width: 720px) {
    .catalog-entry {
        grid-template-columns: 72px 48px 1fr;
        gap: 14px;
    }
    .catalog-entry__thumb { width: 72px; }
    .catalog-tail {
        grid-column: 3;
        text-align: left;
        padding-top: 0;
    }
    .catalog-title { font-size: 19px; }
}
@media (max-width: 560px) {
    /* Compact mobile — thumb spans the left column, [call + tail] and
     * body stack to the right. Keeps visual anchor even on narrow screens. */
    .catalog-entry {
        grid-template-columns: 64px 1fr auto;
        grid-template-rows: auto auto;
        grid-template-areas:
            "thumb call tail"
            "thumb body body";
        row-gap: 2px;
        column-gap: 12px;
        padding: 12px 4px;
        align-items: start;
    }
    .catalog-entry__thumb {
        grid-area: thumb;
        width: 64px;
        aspect-ratio: 1 / 1;
        align-self: center;
    }
    .catalog-call {
        grid-area: call;
        text-align: left;
        padding-top: 0;
    }
    .catalog-body { grid-area: body; }
    .catalog-tail {
        grid-area: tail;
        text-align: right;
        padding-top: 0;
    }
    .catalog-title { font-size: 17px; }
    .catalog-meta { flex-direction: column; gap: 2px; }
    .catalog-meta .meta-item { white-space: normal; }
}

.shelf-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 18px;
}
.shelf-head h2 { margin: 0; }
.shelf-head .count-line {
    font-family: var(--font-mono);
    font-size: 12px; color: var(--muted); letter-spacing: .04em;
}

.shelf-empty {
    text-align: center; padding: 64px 0;
    color: var(--muted);
    font-family: var(--font-serif); font-style: italic;
    font-variation-settings: "opsz" 24, "SOFT" 60;
    font-size: 18px;
}

/* ---------- Pagination ---------- */
.shelf-pagination {
    display: flex; justify-content: center; align-items: center; gap: 16px;
    padding: 48px 0 80px;
    font-family: var(--font-mono);
    font-size: 13px; color: var(--muted); letter-spacing: .04em;
}
.shelf-pagination a {
    color: var(--muted);
    border-bottom: 1px dotted currentColor;
    padding: 4px 2px;
}
.shelf-pagination a:hover { color: var(--amber); border-bottom-style: solid; }
.shelf-pagination .current { color: var(--text); }

@media (max-width: 900px) {
    /* Tighten the top of the page on mobile — 56px of header padding
       pushes the search bar out of the first screen on a phone. */
    .page-header { padding: 20px 0 4px; }
    /* Stack the top-level controls: search in its own row, filter
       block below it, full width. */
    .shelf-controls { flex-direction: column; align-items: stretch;
                      padding: 10px 0 18px; gap: 10px; }
    /* flex: 1 1 240px on .shelf-search was width on row layout but
       becomes HEIGHT on column — that's where the 240px mobile gap
       came from. Reset to flow naturally. */
    .shelf-search { flex: none; }
    .filter-rail { padding: 12px 0 20px; }

    /* Filter block becomes a 2x2 grid: [lang][level] on top,
       [clear-chip spanning both] on bottom. Each control stretches
       to fill its cell so the row feels balanced. */
    .shelf-filters {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .shelf-filters__item { width: 100%; }
    .shelf-filters__item .filter-select { width: 100%; }
    .shelf-filters__clear {
        grid-column: 1 / -1;
        text-align: center;
    }
}