/* =========================================================================
   RECORDED SOURCE PAGE — [recorded_source]
   assets/css/recorded-source.css · 2026-08-26

   Enqueued by Tunebook_Recorded_Source_Layout only on single recorded
   source pages and the recorded sources archive. Cache-busted by that
   class's ASSETS_VERSION — BUMP IT ON EVERY EDIT HERE and flush the
   GoDaddy CDN.

   Declares only genuinely new rules. These shared vocabularies live in
   frontend.css and load site-wide as before:
     .tunebook-panel-*            grid, rails, mobile order
     .tunebook-eyebrow            section labels
     .tunebook-collection-eyebrow-row  + its p:not([class]) backstop
     .ht-expandable               read-more description
     .tunebook-lightbox           cover overlay

   Values mirror .tunebook-book-* deliberately so the two source types read
   as siblings.
   ========================================================================= */

.tunebook-rsource-body {
    gap: 0;
    min-height: 100%;
}

/* Neutralize Nook's root-level block-gap margin on the shortcode output —
   the FSE shortcode block has no wrapper, so the theme's layout-flow
   spacing lands on the wrap itself. Theme cascade boundary. */
.tunebook-rsource-wrap {
    background: #082028;
    margin-top: 0;
    margin-block-start: 0;
}

/* ── Header ─────────────────────────────────────────────────────────── */

.tunebook-rsource-header {
    padding: 16px 28px 18px; /* top aligned with rail labels */
    border-bottom: 1px solid rgba(92, 194, 204, 0.14);
}

.tunebook-rsource-title {
    font-size: 24px;
    font-weight: 500;
    color: #e8f4f6;
    line-height: 1.3;
    margin: 0 0 8px;
    font-family: var(--tunebook-display-font);
}

.tunebook-rsource-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 4px;
}

.tunebook-rsource-meta-line {
    font-size: 13px;
    color: rgba(200, 221, 227, 0.75);
}

/* Role qualifier — dimmer than the name it follows, so "Henry Reed" reads
   first and "(Performer)" reads as annotation. */
.tunebook-rsource-role {
    color: rgba(200, 221, 227, 0.45);
}

.tunebook-rsource-description {
    font-size: 14px;
    color: rgba(200, 221, 227, 0.82);
    line-height: 1.6;
    margin: 10px 0 0;
}

.tunebook-rsource-description p {
    margin: 0 0 10px;
}

.tunebook-rsource-description p:last-child {
    margin-bottom: 0;
}

/* ── Header tail: finding aid / website + call number ───────────────── */

.tunebook-rsource-header-tail {
    margin-top: 12px;
}

.tunebook-rsource-links {
    font-size: 13px;
    margin: 0 0 4px;
}

.tunebook-rsource-links-label {
    color: rgba(200, 221, 227, 0.45);
    margin-right: 6px;
}

.tunebook-rsource-link {
    color: #5CC2CC;
    text-decoration: none;
}

.tunebook-rsource-link:hover {
    text-decoration: underline;
}

.tunebook-rsource-catalog {
    font-size: 12px;
    color: rgba(200, 221, 227, 0.45);
    font-variant-numeric: tabular-nums;
}

/* ── Cover image ────────────────────────────────────────────────────── */

.tunebook-rsource-header-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "title cover"
        "meta  cover"
        "desc  cover"
        "tail  cover";
    column-gap: 28px;
    align-items: start;
}

.tunebook-rsource-header-grid .tunebook-rsource-title       { grid-area: title; }
.tunebook-rsource-header-grid .tunebook-rsource-meta-row    { grid-area: meta; }
.tunebook-rsource-header-grid .tunebook-rsource-description { grid-area: desc; }
.tunebook-rsource-header-grid .tunebook-rsource-header-tail { grid-area: tail; }
.tunebook-rsource-header-grid .tunebook-rsource-cover       { grid-area: cover; }

.tunebook-rsource-cover-img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid rgba(209, 232, 232, 0.28);
    border-radius: 2px;
}

/* Album art is square; field-collection photos are usually landscape.
   Both wider than a book's portrait cover. */
.tunebook-rsource-cover--portrait  { width: 160px; }
.tunebook-rsource-cover--landscape { width: 200px; }

.tunebook-rsource-cover-link {
    display: block;
    cursor: zoom-in;
}

/* Injection backstop: the <a><img> inline run inside the cover div gets
   <p>-wrapped by the pipeline — unwrap its box entirely. */
.tunebook-rsource-cover p:not([class]) {
    display: contents;
}

/* ── Tunes from this Source ─────────────────────────────────────────── */

.tunebook-rsource-tunes-section {
    padding: 18px 28px 40px;
}

.tunebook-rsource-tunes-bar {
    display: flex;
    align-items: baseline;
    margin-bottom: 12px;
}

.tunebook-rsource-tunes-label {
    margin: 0;
}

.tunebook-rsource-tune-count {
    font-size: 13px;
    color: #6897a5;
    margin-left: auto;
}

.tunebook-rsource-empty {
    font-size: 13px;
    color: rgba(200, 221, 227, 0.45);
}

.tunebook-rsource-tune-list {
    list-style: none;
    counter-reset: rsource-tune;
    margin: 0;
    padding: 0;
}

@media (min-width: 1100px) {
    .tunebook-rsource-tune-list {
        columns: 2;
        column-gap: 48px;
    }
}

/* NOWRAP is load-bearing. The first build used flex-wrap:wrap with
   margin-left:auto on the link, so a long title pushed the link onto its own
   line where auto shoved it to the right edge — leaving an orphaned link
   under a blank row. The row must never wrap: the TITLE wraps internally
   (flex:1 1 auto + min-width:0) and the icon stays pinned on the first line
   (flex:0 0 auto). (Fixed 2026-08-26) */
.tunebook-rsource-tune-item {
    counter-increment: rsource-tune;
    display: flex;
    align-items: baseline;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(92, 194, 204, 0.07);
    break-inside: avoid;
}

.tunebook-rsource-tune-item::before {
    content: counter(rsource-tune);
    font-size: 11px;
    color: rgba(200, 221, 227, 0.35);
    font-variant-numeric: tabular-nums;
    min-width: 26px;
    text-align: right;
    flex-shrink: 0;
}

/* min-width:0 lets a long title wrap inside its own box instead of forcing
   the flex row wider — without it, flex items refuse to shrink below their
   content width. */
.tunebook-rsource-tune-link {
    color: #D1E8E8;
    font-size: 14px;
    text-decoration: none;
    line-height: 1.45;
    transition: color 0.15s ease;
    flex: 1 1 auto;
    min-width: 0;
}

.tunebook-rsource-tune-link:hover .tunebook-rsource-tune-title {
    color: #5CC2CC;
}

/* Listen icon — the house recording disc, dimmed so the tune title stays the
   primary target. Fixed width, so it cannot lengthen the row the way the old
   "Listen on LOC" text did. The platform is named once in the bar above.
   align-self:center rather than the row's baseline: an SVG has no text
   baseline, so on a two-line title it would otherwise sit against the last
   line. (2026-08-26) */
.tunebook-rsource-tune-listen {
    flex: 0 0 auto;
    align-self: center;
    display: flex;
    color: rgba(200, 221, 227, 0.4);
    transition: color 0.15s ease;
}

.tunebook-rsource-tune-listen:hover {
    color: #5CC2CC;
}

/* Platform stated once, under the tunes bar. */
.tunebook-rsource-platform-note {
    font-size: 12px;
    color: rgba(200, 221, 227, 0.45);
    margin: -4px 0 12px;
}

/* ── wpautop backstops — scoped to the source wrap only ─────────────── */

.tunebook-rsource-wrap p:empty {
    display: none !important;
}

.tunebook-rsource-header > p,
.tunebook-rsource-tunes-section > p,
.tunebook-rsource-tunes-bar p,
.tunebook-rsource-meta-row p {
    margin: 0;
}

.tunebook-rsource-wrap br {
    display: none;
}

/* ── Mobile ─────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    .tunebook-rsource-header {
        padding: 20px 14px 14px;
    }

    .tunebook-rsource-title {
        font-size: 18px;
    }

    .tunebook-rsource-description {
        font-size: 13px;
    }

    .tunebook-rsource-tunes-section {
        padding: 16px 14px 32px;
    }

    /* Title and meta full width, cover beside the description — same
       treatment as the book page mockup. */
    .tunebook-rsource-header-grid {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "title title"
            "meta  meta"
            "desc  cover"
            "tail  tail";
        column-gap: 14px;
    }

    .tunebook-rsource-cover--portrait  { width: 104px; }
    .tunebook-rsource-cover--landscape { width: 132px; }

    /* Nothing to adjust for the listen icon — the row no longer wraps, so
       it stays pinned beside the title at every width. (2026-08-26) */
}