/* HVT Audio Library — block-based section styles. */

.hvt-al-section { margin: 1.5em 0; }

/* ----- Chrome (sitewide warning + header blurb) ---------------------- */
.hvt-al-chrome { margin-bottom: 1em; }
.hvt-al-firefox-warning {
    background: #fff8e5;
    border-left: 4px solid #dba617;
    padding: 8px 12px;
    margin: 0 0 12px;
    font-size: 0.95em;
}
.hvt-al-program-blurb {
    margin: 0 0 16px;
    font-size: 1.4em;
    font-weight: 600;
    text-align: center;
}

/* ----- Headings ------------------------------------------------------ */
.hvt-al-heading { margin: 0.6em 0 0.4em; line-height: 1.25; }

/* When a heading sits inside a row/column container (multi-column layouts),
   it should not blow up to full H1 size. The original landing pages used
   H1 for each column header, but visually those need to be column-scaled.
   Cap visual size at H3-equivalent regardless of stored level. */
.hvt-al-col .hvt-al-heading-h1,
.hvt-al-col .hvt-al-heading-h2 {
    font-size: 1.25em;
    line-height: 1.3;
    margin: 0 0 8px;
    font-weight: 700;
    text-align: center;
}

/* ----- Paragraphs ---------------------------------------------------- */
.hvt-al-paragraph { margin: 0.4em 0 0.8em; }
.hvt-al-paragraph-warning,
.hvt-al-paragraph-troubleshoot {
    background: #fff8e5;
    border-left: 4px solid #dba617;
    padding: 8px 12px;
}
.hvt-al-paragraph-info {
    background: #f0f6ff;
    border-left: 4px solid #4f78b3;
    padding: 8px 12px;
}

/* ----- Divider ------------------------------------------------------- */
.hvt-al-divider { border: none; border-top: 1px solid #e1e1e1; margin: 1.5em 0; }

/* ----- Lists --------------------------------------------------------- */
.hvt-al-list { margin: 0.6em 0 1em 1.4em; }
.hvt-al-list li { margin: 0.2em 0; }

/* ----- Breadcrumb ---------------------------------------------------- */
.hvt-al-breadcrumb { margin: 0.4em 0 1em; font-size: 0.9em; color: #555; }
.hvt-al-breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.hvt-al-breadcrumb a { color: #2c5d9a; text-decoration: none; }
.hvt-al-breadcrumb a:hover { text-decoration: underline; }

/* ----- Buttons / button grid ---------------------------------------- */
.hvt-al-button-wrap { margin: 12px 0; text-align: center; }
.hvt-al-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 16px 24px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.15em;
    text-align: center;
    background: #111;
    color: #fff !important;
    border: 2px solid #111;
    transition: background 0.15s, color 0.15s;
}
.hvt-al-button:hover { background: #333; border-color: #333; color: #fff !important; }
.hvt-al-button-outline {
    background: transparent;
    color: #2c5d9a !important;
    border-color: #2c5d9a;
}
.hvt-al-button-outline:hover { background: #eef4fc; color: #2c5d9a !important; }
.hvt-al-button-subtitle { font-size: 0.85em; color: #555; margin: 4px 0 0; }
.hvt-al-grid-heading { text-align: center; margin: 16px 0 12px; }

.hvt-al-button-grid { display: grid; gap: 12px; }
.hvt-al-cols-1 { grid-template-columns: 1fr; }
.hvt-al-cols-2 { grid-template-columns: repeat(2, 1fr); }
.hvt-al-cols-3 { grid-template-columns: repeat(3, 1fr); }
.hvt-al-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
    .hvt-al-cols-2, .hvt-al-cols-3, .hvt-al-cols-4 { grid-template-columns: 1fr; }
}

/* ----- Rows / columns ----------------------------------------------- */
.hvt-al-row { display: grid; gap: 16px; margin: 1em 0; }
.hvt-al-row.hvt-al-cols-2 { grid-template-columns: repeat(2, 1fr); }
.hvt-al-row.hvt-al-cols-3 { grid-template-columns: repeat(3, 1fr); }
.hvt-al-row.hvt-al-cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px) {
    .hvt-al-row.hvt-al-cols-2,
    .hvt-al-row.hvt-al-cols-3,
    .hvt-al-row.hvt-al-cols-4 { grid-template-columns: 1fr; }
}
.hvt-al-col { min-width: 0; }

/* ----- Image -------------------------------------------------------- */
.hvt-al-image { max-width: 100%; height: auto; display: block; }

/* ----- Embed -------------------------------------------------------- */
.hvt-al-embed { position: relative; width: 100%; padding-bottom: 56.25%; margin: 1em 0; }
.hvt-al-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* ----- Audio players + playlist ------------------------------------- */
.hvt-al-player,
.hvt-al-playlist {
    background: #fafafa;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    padding: 16px;
    margin: 16px 0;
}
.hvt-al-playlist {
    background: #f0f6ff;
    border-color: #c8d8ee;
}
.hvt-al-label {
    margin: 0 0 10px;
    font-size: 1.05em;
    font-weight: 600;
    line-height: 1.3;
}
.hvt-al-player audio,
.hvt-al-playlist audio {
    width: 100%;
    display: block;
    margin-bottom: 12px;
}
.hvt-al-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    align-items: center;
    font-size: 0.95em;
}
.hvt-al-control-group {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.hvt-al-controls button {
    background: #e9e9e9;
    border: 1px solid #c0c0c0;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.95em;
    cursor: pointer;
    line-height: 1.2;
}
.hvt-al-controls button:hover { background: #dcdcdc; }
.hvt-al-controls button.hvt-al-speed-active,
.hvt-al-controls button.hvt-al-loop-active {
    background: #ffeb3b;
    border-color: #d4b900;
    font-weight: 600;
}
.hvt-al-playlist-now { margin-bottom: 10px; font-size: 0.95em; color: #444; }
.hvt-al-playlist-counter { color: #888; margin-left: 8px; font-size: 0.9em; }
.hvt-al-playlist-tracks {
    list-style: decimal inside;
    margin: 12px 0 0;
    padding: 0;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid #d8e1ee;
    border-radius: 4px;
}
.hvt-al-playlist-tracks li {
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid #eef2f8;
    line-height: 1.3;
}
.hvt-al-playlist-tracks li:last-child { border-bottom: none; }
.hvt-al-playlist-tracks li:hover { background: #eef4fc; }
.hvt-al-playlist-tracks li.hvt-al-track-active {
    background: #ffeb3b;
    font-weight: 600;
}
.hvt-al-playlist-tracks li.hvt-al-track-intro {
    color: #555;
    font-style: italic;
}
.hvt-al-playlist-tracks li.hvt-al-track-error {
    background: #ffe8e8 !important;
    color: #8a1f20;
    text-decoration: line-through;
}
.hvt-al-playlist-tracks li.hvt-al-track-error::after {
    content: ' — failed to load';
    font-size: 0.85em;
}
.hvt-al-controls button.hvt-al-skip-active {
    background: #ffeb3b;
    border-color: #d4b900;
    font-weight: 600;
}

/* ----- Errors ------------------------------------------------------- */
.hvt-al-error {
    background: #ffe8e8;
    border: 1px solid #d63638;
    color: #8a1f20;
    padding: 8px 12px;
    border-radius: 4px;
    margin: 12px 0;
}