/* ============================================================
   KARTUL — audio block
   A radio player dropped into a home-page column, often 1/3 width, inside
   a single-viewport stage — kept compact on purpose. Type/colour inherit
   from style.css (Kommuna, paper/ink); only the brand green is set here.
   ============================================================ */

.block-audio {
    /* ========== TUNE HERE ==========================================
       Only sizes/colours specific to this block. Everything else (font,
       ink colour, line-height) comes from the page. */
    --audio-accent: #339966;   /* brand green — controls, live dot */
    --audio-error: #b3261e;    /* error text/border */
    --audio-btn: 34px;         /* play/pause button diameter */
    --audio-gap: 10px;         /* gap between controls */
    --audio-track-h: 3px;      /* seek/volume track thickness */
    /* ================================================================ */

    max-width: 100%;
    min-width: 0;
}

.block-audio-title {
    margin: 0 0 0.4em;
    max-width: 100%;
    overflow-wrap: anywhere;
}

.block-audio-controls {
    display: flex;
    align-items: center;
    gap: var(--audio-gap);
    flex-wrap: wrap;
    font-size: 0.95em;
}

/* ---------- play / pause ---------- */
/* Strip UA button chrome — this codebase always defines its own button
   states rather than inheriting the browser's. */
.block-audio-play {
    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    width: var(--audio-btn);
    height: var(--audio-btn);
    flex: 0 0 auto;
    border: 1.5px solid var(--ink);
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 0.85em;
    padding: 0;
}
.block-audio-play:hover { border-color: var(--audio-accent); color: var(--audio-accent); }
.block-audio-play[aria-pressed="true"] {
    background: var(--audio-accent);
    border-color: var(--audio-accent);
    color: var(--paper);
}
.block-audio-play:focus-visible {
    outline: 2px solid var(--audio-accent);
    outline-offset: 2px;
}
.block-audio-play:disabled { opacity: 0.4; cursor: not-allowed; }

/* nudge the ▶ glyph so it looks centred against ❚❚ */
.block-audio-play [data-audio-icon] { transform: translateX(1px); }

/* ---------- live indicator (replaces the scrubber — you can't seek live) ---------- */
.block-audio-live {
    color: var(--audio-accent);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ---------- elapsed / duration + seek (files only) ---------- */
.block-audio-time {
    font-variant-numeric: tabular-nums;
    opacity: 0.75;
    white-space: nowrap;
}

.block-audio-seek {
    flex: 1 1 80px;
    min-width: 60px;
}

/* ---------- shared range styling (seek + volume) ---------- */
.block-audio-seek,
.block-audio-vol {
    appearance: none;
    -webkit-appearance: none;
    height: var(--audio-track-h);
    background: var(--ink);
    opacity: 0.25;
    border-radius: 2px;
    cursor: pointer;
    outline-offset: 4px;
}
.block-audio-seek:hover,
.block-audio-vol:hover,
.block-audio-seek:focus-visible,
.block-audio-vol:focus-visible { opacity: 0.5; }
.block-audio-seek:focus-visible,
.block-audio-vol:focus-visible { outline: 2px solid var(--audio-accent); }

.block-audio-seek::-webkit-slider-thumb,
.block-audio-vol::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: var(--audio-accent);
    cursor: pointer;
}
.block-audio-seek::-moz-range-thumb,
.block-audio-vol::-moz-range-thumb {
    width: 11px; height: 11px;
    border: 0;
    border-radius: 50%;
    background: var(--audio-accent);
    cursor: pointer;
}

/* ---------- volume ---------- */
.block-audio-volume {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
}
.block-audio-volume-label {
    font-size: 0.8em;
    opacity: 0.5;
}
.block-audio-vol { width: 60px; }

/* ---------- error state ---------- */
.block-audio-error {
    margin: 0.5em 0 0;
    color: var(--audio-error);
    font-size: 0.85em;
}

/* ---------- caption ---------- */
.block-audio-caption {
    margin: 0.5em 0 0;
    opacity: 0.6;
}

/* ---------- Mixcloud embed (page URLs — not a direct audio src) ---------- */
.block-audio--mixcloud .block-audio-embed {
    width: 100%;
    min-width: 0;
}

.block-audio-iframe {
    display: block;
    width: 100%;
    height: 60px;
    border: 0;
    background: transparent;
}

@media (max-width: 780px) {
    .block-audio-controls {
        gap: 8px;
    }
    .block-audio-play {
        flex: 0 0 auto;
    }
}