/* =========================================================
   SINGLE HISTORICAL SOURCE PAGE — 2026-10-04
   Three-panel layout via the shared .tunebook-panel-* base
   in frontend.css. Header values mirror the single book page
   so the two source types read as siblings. Shared pieces
   (.tunebook-eyebrow, .ht-expandable, .tunebook-lightbox) stay
   in frontend.css — only new rules here.
   Version: Tunebook_Historical_Source_Layout::ASSETS_VERSION
   ========================================================= */

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

/* Theme block-gap neutralizer — same as .tunebook-book-wrap */
.tune/* =========================================================
   SINGLE HISTORICAL SOURCE PAGE — 2026-10-04
   Three-panel layout via the shared .tunebook-panel-* base
   in frontend.css. Header values mirror the single book page
   so the two source types read as siblings. Shared pieces
   (.tunebook-eyebrow, .ht-expandable, .tunebook-lightbox) stay
   in frontend.css — only new rules here.
   Version: Tunebook_Historical_Source_Layout::ASSETS_VERSION
   ========================================================= */

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

/* Theme block-gap neutralizer — same as .tunebook-book-wrap */
.tunebook-hsource-wrap {
    background: #082028;
    margin-top: 0;
    margin-block-start: 0;
}

/* wpautop backstop */
.tunebook-hsource-wrap p:empty { display: none; }

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

.tunebook-hsource-header {
    padding: 16px 28px 18px;
    border-bottom: 1px solid rgba(92, 194, 204, 0.14);
}

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

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

.tunebook-hsource-headline {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-size: 14px;
    color: #D1E8E8;
    margin-top: 4px;
}

.tunebook-hsource-events {
    font-size: 12px;
    color: rgba(200, 221, 227, 0.75);
    margin-top: 6px;
}

.tunebook-hsource-events-label {
    color: #bc8e55;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-right: 4px;
}

.tunebook-hsource-description {
    font-size: 14px;
    color: rgba(200, 221, 227, 0.75);
    line-height: 1.65;
    max-width: 640px;
    margin: 10px 0 0;
}

.tunebook-hsource-description p { margin: 0 0 10px; }
.tunebook-hsource-description p:last-child { margin-bottom: 0; }

.tunebook-hsource-header-tail {
    margin-top: 10px;
}

.tunebook-hsource-cite,
.tunebook-hsource-credit {
    font-size: 12px;
    color: rgba(200, 221, 227, 0.55);
    line-height: 1.5;
}

.tunebook-hsource-credit {
    margin-top: 4px;
    font-size: 11px;
    color: rgba(200, 221, 227, 0.4);
}


.tunebook-hsource-link {
    color: #5CC2CC;
    text-decoration: none;
    transition: color 0.15s ease;
}

.tunebook-hsource-link:hover {
    color: #bc8e55;
}

/* ── Cover (the scan) ───────────────────────────────────── */

.tunebook-hsource-header-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    /* Trailing 1fr row: when the cover is taller than the text, the extra
       height lands in an empty row at the bottom. Without it, the grid
       spreads that height across the text rows and opens a gap above
       the Source line. (2026-10-04) */
    grid-template-areas:
        "title cover"
        "meta  cover"
        "desc  cover"
        "tail  cover"
        ".     cover";
    grid-template-rows: auto auto auto auto 1fr;
    column-gap: 28px;
    align-items: start;
}

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

/* Clippings run tall and narrow, so portrait gets a little more
   width than a book cover. */
.tunebook-hsource-cover--portrait  { width: 150px; }
.tunebook-hsource-cover--landscape { width: 220px; }

/* The frame: capped height, showing the TOP of the scan — headline and
   first paragraphs are what identify a clipping. Must agree with
   CROP_RATIO in the layout class (150 x 320 ≈ 2.1:1). */
.tunebook-hsource-cover-link {
    display: block;
    position: relative;
    max-height: 220px;
    overflow: hidden;
    cursor: zoom-in;
    border: 1px solid rgba(209, 232, 232, 0.28);
    border-radius: 2px;
}

.tunebook-hsource-cover-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Fade on the bottom edge — only when PHP says the scan is cut off, so a
   short clipping never gets a misleading "there's more" cue. */
.tunebook-hsource-cover.is-cropped .tunebook-hsource-cover-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 56px;
    background: linear-gradient(to bottom, rgba(8, 32, 40, 0), rgba(8, 32, 40, 0.92));
    pointer-events: none;
}

.tunebook-hsource-cover-more-row {
    margin-top: 6px;
    text-align: center;
}

.tunebook-hsource-cover-more {
    font-size: 11px;
    color: #5CC2CC;
    text-decoration: none;
    transition: color 0.15s ease;
}

.tunebook-hsource-cover-more:hover {
    color: #bc8e55;
}

/* Full-size clippings are often taller than the screen — let the overlay
   scroll instead of shrinking the text to fit. */
.tunebook-hsource-lightbox {
    overflow-y: auto;
    align-items: flex-start;
}

.tunebook-hsource-lightbox img {
    max-height: none;
    max-width: min(92vw, 900px);
    margin: auto;
}

.tunebook-hsource-cover p:not([class]) {
    display: contents;
}

/* ── Tunes mentioned ────────────────────────────────────── */

.tunebook-hsource-tunes-section {
    padding: 18px 28px 24px;
}

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

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

.tunebook-hsource-tune-count {
    margin-left: auto;
    font-size: 12px;
    color: rgba(200, 221, 227, 0.55);
}

.tunebook-hsource-note {
    font-size: 11px;
    color: rgba(200, 221, 227, 0.4);
    margin-bottom: 12px;
}

.tunebook-hsource-group + .tunebook-hsource-group {
    margin-top: 16px;
}

.tunebook-hsource-group-label {
    font-size: 13px;
    color: #D1E8E8;
    font-weight: 500;
    padding-bottom: 4px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(92, 194, 204, 0.14);
}

a.tunebook-hsource-performer {
    color: #D1E8E8;
    text-decoration: none;
    border-bottom: 1px dotted rgba(92, 194, 204, 0.5);
    transition: color 0.15s ease;
}

a.tunebook-hsource-performer:hover {
    color: #5CC2CC;
}

.tunebook-hsource-group-type {
    font-size: 12px;
    font-weight: 400;
    color: rgba(200, 221, 227, 0.55);
}

/* Numbers are printed in the markup (.tunebook-hsource-tune-pos) so they
   run through the whole document across groups. */
.tunebook-hsource-tune-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tunebook-hsource-tune-list li {
    margin: 0;
}

.tunebook-hsource-tune-item {
    padding: 5px 0 5px 38px;
    position: relative;
    border-bottom: 1px solid rgba(92, 194, 204, 0.07);
}

.tunebook-hsource-tune-pos {
    position: absolute;
    left: 0;
    top: 7px;
    width: 26px;
    text-align: right;
    font-size: 11px;
    color: rgba(200, 221, 227, 0.35);
    font-variant-numeric: tabular-nums;
}

.tunebook-hsource-tune-title {
    font-size: 14px;
    line-height: 1.45;
    color: #D1E8E8;
}

.tunebook-hsource-tune-link {
    color: #D1E8E8;
    text-decoration: none;
    transition: color 0.15s ease;
}

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

/* Unlinked rows read as plain record text — dimmer, never hidden. */
.tunebook-hsource-tune-plain {
    color: rgba(200, 221, 227, 0.6);
}

.tunebook-hsource-tune-as {
    font-size: 12px;
    color: rgba(200, 221, 227, 0.45);
}

.tunebook-hsource-tune-detail {
    font-size: 12px;
    color: rgba(200, 221, 227, 0.5);
    margin-top: 1px;
}

.tunebook-hsource-result {
    color: #bc8e55;
}

.tunebook-hsource-empty {
    font-size: 13px;
    color: rgba(200, 221, 227, 0.55);
    font-style: italic;
}

/* ── Transcription ──────────────────────────────────────── */

.tunebook-hsource-transcription-section {
    padding: 18px 28px 40px;
    border-top: 1px solid rgba(92, 194, 204, 0.14);
}

.tunebook-hsource-transcription {
    max-width: 640px;
}

/* Built from paragraph/line <div>s in PHP — no raw newlines or <br>
   in the markup, so neither wpautop nor the br safety net can touch it.
   The clamp's -webkit-box still applies to the wrapper. */
.tunebook-hsource-transcription .ht-expandable-content {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(200, 221, 227, 0.8);
}

.tunebook-hsource-tx-para + .tunebook-hsource-tx-para {
    margin-top: 0.9em;
}

.tunebook-hsource-tx-line:empty {
    display: none;
}

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

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

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

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

    .tunebook-hsource-tunes-section,
    .tunebook-hsource-transcription-section {
        padding-left: 14px;
        padding-right: 14px;
    }

    .tunebook-hsource-header-grid {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "title title"
            "meta  meta"
            "cover desc"
            "tail  tail";
        grid-template-rows: none;
        column-gap: 12px;
    }

    .tunebook-hsource-cover--portrait  { width: 90px; }
    .tunebook-hsource-cover--landscape { width: 130px; }
    .tunebook-hsource-cover-link { max-height: 220px; }

    /* Grid/rail/order handled by .tunebook-panel-* mobile rules */
}