/* =========================================================================
   transmisja-archiwum.css — moduł CSS dla strony „Archiwum ostatniej
   transmisji modlitwy w Godzinie Miłosierdzia i Koronki" (rev. g, 04.05.2026).

   Renderuje partials/page-transmisja-archiwum.php (przez page.php gdy template
   = page_transmisja_archiwum.php). Tokeny z styles.css.

   Layout: hero (page-hero--featured z `page-section-menu.css`) + mała sekcja
   z odtwarzaczem MP3 + komunikatem o oknie czasowym + linkiem powrotnym.
   ========================================================================= */

.page-article--transmisja-archiwum {
    max-width: 720px;
    margin-inline: auto;
}

.transmisja-archiwum {
    margin-block: var(--s-7);
    padding: var(--s-6) var(--s-5);
    background: var(--surface, #fff);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .06);
    text-align: center;
}

.transmisja-archiwum__title {
    margin: 0 0 var(--s-4);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--green-800);
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
    justify-content: center;
}

.transmisja-archiwum__title .icon {
    color: var(--accent-warm-600, var(--green-700));
    flex-shrink: 0;
}

.transmisja-archiwum__player {
    width: min(420px, 100%);
    height: 44px;
    margin-block: var(--s-3) var(--s-4);
    border-radius: 22px;
    background: var(--green-50);
}

.transmisja-archiwum__hint {
    margin: 0;
    font-size: .875rem;
    color: var(--text-muted);
    font-style: italic;
}

.transmisja-archiwum__back {
    margin: var(--s-5) 0 0;
    padding-top: var(--s-4);
    border-top: 1px solid var(--border);
    font-size: .9375rem;
}

.transmisja-archiwum__back a {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    color: var(--green-700);
    text-decoration: none;
    font-weight: 500;
}

.transmisja-archiwum__back a:hover,
.transmisja-archiwum__back a:focus-visible {
    color: var(--green-800);
    text-decoration: underline;
}

/* === Hero meta dla strony archiwum — mały „chip" muted dla okna offline === */
.page-hero__chip--muted {
    background: var(--green-100, var(--green-50));
    color: var(--text-muted);
    font-style: italic;
}

/* === Responsive === */
@media (max-width: 600px) {
    .transmisja-archiwum {
        padding: var(--s-5) var(--s-4);
        margin-inline: calc(var(--s-3) * -1);
    }
    .transmisja-archiwum__title {
        font-size: 1rem;
    }
}