/**
 * EBA Audio Modal — premium fullscreen audio player popup.
 *
 * Charcoal backdrop · gold accents · large controls.
 * Triggered by any [data-eba-audio-modal] element with data-audio-* attributes.
 */

html.eba-audio-modal-open,
body.eba-audio-modal-open { overflow: hidden; }

.eba-audio-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    margin: 0 !important;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
}
.eba-audio-modal.is-open {
    display: flex;
    animation: ebaAudFade 0.28s ease-out;
}
@keyframes ebaAudFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.eba-audio-modal__backdrop {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(212, 162, 76, 0.10), transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(212, 162, 76, 0.06), transparent 55%),
        #0f172a;
    cursor: pointer;
}

.eba-audio-modal__panel {
    position: relative;
    width: 100%;
    max-width: 580px;
    /* Fit-to-viewport: panel never exceeds available space (modal padding 24px
       top + 24px bottom = 48px). Internal scroll handles tall content. */
    max-height: calc(100vh - 48px);
    max-height: calc(100dvh - 48px);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #1a253b, #0f172a);
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(212, 162, 76, 0.22);
    box-shadow:
        0 40px 100px -20px rgba(0, 0, 0, 0.7),
        0 0 0 1px rgba(212, 162, 76, 0.06);
    animation: ebaAudSlide 0.42s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Inner header doesn't shrink — cover + title always visible at top */
.eba-audio-modal__panel > .eba-audio-modal__header { flex: 0 0 auto; }
/* Controls section absorbs remaining height and scrolls internally when
   the transcript is expanded — keeps the play button reachable always. */
.eba-audio-modal__panel > .eba-audio-modal__controls {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 162, 76, 0.35) transparent;
}
.eba-audio-modal__panel > .eba-audio-modal__controls::-webkit-scrollbar { width: 6px; }
.eba-audio-modal__panel > .eba-audio-modal__controls::-webkit-scrollbar-thumb {
    background: rgba(212, 162, 76, 0.35);
    border-radius: 4px;
}
@keyframes ebaAudSlide {
    from { opacity: 0; transform: scale(0.94) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ============== HEADER ============== */
.eba-audio-modal__header {
    position: relative;
    padding: 28px 28px 18px;
    text-align: center;
}
.eba-audio-modal__close {
    position: absolute;
    top: 14px; right: 14px;
    z-index: 5;
    width: 38px;
    height: 38px;
    border-radius: 50% !important;
    border: 0 !important;
    background: rgba(255, 255, 255, 0.05) !important;
    background-image: none !important;
    color: #d4a24c !important;
    cursor: pointer;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transition: background 0.18s, color 0.18s, transform 0.18s;
    backdrop-filter: blur(8px);
    text-shadow: none !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.eba-audio-modal__close:hover {
    background: linear-gradient(135deg, #d4a24c, #e0b96b) !important;
    background-image: linear-gradient(135deg, #d4a24c, #e0b96b) !important;
    color: #0f172a !important;
    transform: scale(1.08);
}
.eba-audio-modal__close:focus {
    outline: 2px solid #d4a24c;
    outline-offset: 3px;
}
.eba-audio-modal__close svg { display: block; }

.eba-audio-modal__eyebrow {
    font-size: 10.5px;
    color: #d4a24c;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 8px;
    display: inline-block;
    padding: 5px 12px;
    background: rgba(212, 162, 76, 0.12);
    border: 1px solid rgba(212, 162, 76, 0.25);
    border-radius: 999px;
}

.eba-audio-modal__title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.7rem;
    font-weight: 600;
    color: #f8f5f0;
    margin: 6px 0 4px;
    line-height: 1.2;
}
.eba-audio-modal__tagline {
    font-style: italic;
    color: #94a3b8;
    font-size: 13.5px;
    margin: 0;
}

/* ============== COVER ART ============== */
.eba-audio-modal__cover {
    width: 200px;
    height: 200px;
    margin: 18px auto 6px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    background:
        linear-gradient(135deg, rgba(212, 162, 76, 0.25), rgba(212, 162, 76, 0.05)),
        linear-gradient(180deg, #f5ecd6, #b58834);
    box-shadow:
        0 20px 50px -12px rgba(0, 0, 0, 0.6),
        0 0 0 4px rgba(212, 162, 76, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.eba-audio-modal__panel.is-playing .eba-audio-modal__cover {
    animation: ebaAudPulse 3.2s ease-in-out infinite;
}
@keyframes ebaAudPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.025); }
}
.eba-audio-modal__cover img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.eba-audio-modal__cover svg {
    width: 56px; height: 56px;
    color: rgba(15, 23, 42, 0.4);
}

/* ============== CONTROLS ============== */
.eba-audio-modal__controls {
    padding: 18px 32px 28px;
}

/* Progress bar */
.eba-audio-modal__progress {
    position: relative;
    height: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    cursor: pointer;
    margin-bottom: 8px;
}
.eba-audio-modal__progress:hover { height: 8px; }
.eba-audio-modal__progress-fill {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 0%;
    background: linear-gradient(90deg, #b58834, #d4a24c, #e0b96b);
    border-radius: 999px;
    transition: width 0.1s linear, height 0.15s;
}
.eba-audio-modal__progress-handle {
    position: absolute;
    top: 50%;
    width: 14px; height: 14px;
    background: #f8f5f0;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}
.eba-audio-modal__progress:hover .eba-audio-modal__progress-handle { opacity: 1; }

.eba-audio-modal__times {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #94a3b8;
    font-variant-numeric: tabular-nums;
    margin-bottom: 22px;
    letter-spacing: 0.02em;
}

/* Main controls row */
.eba-audio-modal__main-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin-bottom: 22px;
}
.eba-audio-modal__icon-btn {
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: #cbd5e1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s;
    padding: 0;
}
.eba-audio-modal__icon-btn:hover {
    background: rgba(212, 162, 76, 0.12);
    color: #d4a24c;
}
.eba-audio-modal__icon-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.eba-audio-modal__play {
    width: 72px; height: 72px;
    border-radius: 50%;
    border: 0;
    background: linear-gradient(135deg, #d4a24c, #e0b96b);
    color: #0f172a;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.18s, box-shadow 0.18s;
    box-shadow:
        0 10px 30px -8px rgba(212, 162, 76, 0.55),
        0 0 0 0 rgba(212, 162, 76, 0.4);
    padding: 0;
}
.eba-audio-modal__play:hover {
    transform: scale(1.05);
    box-shadow:
        0 14px 36px -8px rgba(212, 162, 76, 0.7),
        0 0 0 8px rgba(212, 162, 76, 0.08);
}
.eba-audio-modal__play:active { transform: scale(0.97); }
.eba-audio-modal__icon-pause { display: none; }
.eba-audio-modal__panel.is-playing .eba-audio-modal__icon-play  { display: none; }
.eba-audio-modal__panel.is-playing .eba-audio-modal__icon-pause { display: block; }

/* Bottom row: volume + download */
.eba-audio-modal__bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.eba-audio-modal__volume {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    max-width: 200px;
}
.eba-audio-modal__volume input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    outline: none;
    cursor: pointer;
}
.eba-audio-modal__volume input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    background: #d4a24c;
    border-radius: 50%;
    cursor: pointer;
    border: 0;
}
.eba-audio-modal__volume input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    background: #d4a24c;
    border-radius: 50%;
    cursor: pointer;
    border: 0;
}
.eba-audio-modal__volume svg { color: #94a3b8; flex-shrink: 0; }

.eba-audio-modal__download {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 14px;
    background: rgba(255, 255, 255, 0.05);
    color: #d4a24c !important;
    border: 1px solid rgba(212, 162, 76, 0.25);
    border-radius: 9px;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.18s;
}
.eba-audio-modal__download:hover {
    background: linear-gradient(135deg, #d4a24c, #e0b96b);
    color: #0f172a !important;
    border-color: transparent;
}

/* ============== MOBILE ============== */
@media (max-width: 540px) {
    .eba-audio-modal { padding: 16px; }
    .eba-audio-modal__panel { max-width: 100%; }
    .eba-audio-modal__cover { width: 160px; height: 160px; }
    .eba-audio-modal__title { font-size: 1.45rem; }
    .eba-audio-modal__header { padding: 24px 24px 14px; }
    .eba-audio-modal__controls { padding: 14px 22px 22px; }
    .eba-audio-modal__main-row { gap: 16px; }
    .eba-audio-modal__play { width: 64px; height: 64px; }
    .eba-audio-modal__bottom-row { flex-wrap: wrap; }
    .eba-audio-modal__volume { max-width: 100%; order: 2; }
}

/* === Transcript (WCAG 2.1 AA) — sits between time row and play controls,
   modern centered pill that flips to an inline glass card when expanded. === */
.eba-audio-modal__transcript {
    margin: 14px 0 18px;
    text-align: center;
}
.eba-audio-modal__transcript[hidden] { display: none; }
.eba-audio-modal__transcript-summary {
    list-style: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    border-radius: 999px;
    background: linear-gradient(135deg, rgba(212, 162, 76, 0.12), rgba(212, 162, 76, 0.06));
    border: 1px solid rgba(212, 162, 76, 0.25);
    color: #e0b96b;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s;
    user-select: none;
}
.eba-audio-modal__transcript-summary::-webkit-details-marker { display: none; }
.eba-audio-modal__transcript-summary:hover {
    background: linear-gradient(135deg, rgba(212, 162, 76, 0.22), rgba(212, 162, 76, 0.12));
    color: #f0cb83;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px -6px rgba(212, 162, 76, 0.4);
}
.eba-audio-modal__transcript-summary:focus-visible {
    outline: 2px solid #d4a24c;
    outline-offset: 3px;
}
.eba-audio-modal__transcript-chevron {
    transition: transform 0.25s ease;
}
.eba-audio-modal__transcript[open] .eba-audio-modal__transcript-chevron {
    transform: rotate(180deg);
}
.eba-audio-modal__transcript-body {
    margin-top: 16px;
    max-height: 240px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-gutter: stable;
    padding: 12px 14px;
    box-sizing: border-box;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.55), rgba(15, 23, 42, 0.35));
    border: 1px solid rgba(212, 162, 76, 0.18);
    border-radius: 14px;
    color: rgba(255, 255, 255, 0.78);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.75;
    text-align: left;
    backdrop-filter: blur(6px);
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 162, 76, 0.45) transparent;
}
.eba-audio-modal__transcript-body:focus-visible {
    outline: 2px solid #d4a24c;
    outline-offset: 2px;
}
.eba-audio-modal__transcript-body::-webkit-scrollbar { width: 6px; }
.eba-audio-modal__transcript-body::-webkit-scrollbar-track { background: transparent; }
.eba-audio-modal__transcript-body::-webkit-scrollbar-thumb {
    background: rgba(212, 162, 76, 0.45);
    border-radius: 4px;
}
.eba-audio-modal__transcript-body::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 162, 76, 0.7);
}
.eba-audio-modal__transcript-body p {
    margin: 0 0 12px;
    color: inherit;
}
.eba-audio-modal__transcript-body p:last-child { margin-bottom: 0; }

/* Karaoke-style timestamped segments — clickable to seek, auto-highlight on playback */
.eba-audio-modal__transcript-seg {
    /* CSS Grid: timestamp column auto-sizes to its content, text column takes
       the rest. minmax(0, 1fr) is the magic that lets the text column actually
       SHRINK below its content width so long words wrap instead of overflowing. */
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: 12px;
    width: 100%;
    box-sizing: border-box;
    padding: 9px 10px 9px 12px;
    margin: 0 0 4px;
    background: transparent;
    border-left: 3px solid transparent;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.62);
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.72;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.eba-audio-modal__transcript-seg:hover {
    background: rgba(212, 162, 76, 0.08);
    color: rgba(255, 255, 255, 0.85);
}
.eba-audio-modal__transcript-seg:focus-visible {
    outline: 2px solid #d4a24c;
    outline-offset: 2px;
}
.eba-audio-modal__transcript-seg.is-active {
    background: rgba(212, 162, 76, 0.18);
    color: #f5f1e6;
    border-left-color: #d4a24c;
}
.eba-audio-modal__transcript-ts {
    flex-shrink: 0;
    font-family: 'SFMono-Regular', Menlo, Consolas, monospace;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #d4a24c;
    background: rgba(212, 162, 76, 0.12);
    padding: 2px 8px;
    border-radius: 4px;
    margin-top: 3px;
    min-width: 46px;
    text-align: center;
}
.eba-audio-modal__transcript-seg.is-active .eba-audio-modal__transcript-ts {
    background: rgba(212, 162, 76, 0.32);
    color: #fef7e8;
}
.eba-audio-modal__transcript-text {
    /* Grid cell already constrains width via minmax(0, 1fr) — these belt-and-
       suspenders rules guarantee long words/URLs wrap instead of overflowing. */
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
    display: block;
}

@media (max-width: 640px) {
    .eba-audio-modal__transcript { margin: 10px 0 14px; }
    .eba-audio-modal__transcript-summary { font-size: 12px; padding: 9px 16px; }
    .eba-audio-modal__transcript-body { max-height: 200px; font-size: 13px; padding: 12px 6px 12px 10px; }
    .eba-audio-modal__transcript-seg { padding: 8px 8px 8px 10px; gap: 10px; }
    .eba-audio-modal__transcript-ts { min-width: 42px; font-size: 11px; padding: 2px 6px; }
}

/* === Trigger button on the detail page (replaces inline player) === */
.eba-aud__play-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 14px 26px;
    background: linear-gradient(135deg, #d4a24c, #e0b96b);
    color: #0f172a !important;
    border: 0;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none !important;
    box-shadow: 0 8px 24px -6px rgba(212, 162, 76, 0.5);
    margin-top: 10px;
}
.eba-aud__play-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -6px rgba(212, 162, 76, 0.65);
}
.eba-aud__play-cta-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}