/* =========================================================================
   page-oredzie-archiwum.css — wirtualny hub Archiwum kwartalnika
   „Orędzie Miłosierdzia" (wariant A z mailem siostry 09.05.2026).

   Layout: hero + sticky chip-bar lat (18 lat) + sekcje per rok (4 kolumny)
   z akordeonami `<details>` rozwijającymi listę PDF-rozdziałów.

   Korzysta z globalnych tokenów (--green-50, --green-700, --s-2, --bg, …)
   zdefiniowanych w styles.css / tokens.css.
   ========================================================================= */

/* === Sticky pasek lat (wzorowany na .section-menu-chips) ============== */

.oredzie-yearbar {
    position: sticky;
    top: var(--nav-h, 64px);
    z-index: 8;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
    padding-block: .65rem;
    margin-bottom: var(--s-5);
}

.oredzie-yearbar__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: .4rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.oredzie-yearbar__list::-webkit-scrollbar { height: 4px; }
.oredzie-yearbar__list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.oredzie-yearbar__chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    padding: .45rem .9rem;
    background: var(--green-50);
    border: 1px solid var(--green-100);
    border-radius: 999px;
    color: var(--green-700);
    font-size: .9rem;
    font-weight: 500;
    text-decoration: none;
    scroll-snap-align: start;
    transition: background .15s, color .15s, border-color .15s;
}

.oredzie-yearbar__chip:hover,
.oredzie-yearbar__chip:focus-visible {
    background: var(--green-100);
    color: var(--green-800, var(--green-700));
    outline: none;
}

.oredzie-yearbar__chip.is-active {
    background: var(--green-700);
    color: var(--bg);
    border-color: var(--green-700);
}

.oredzie-yearbar__year {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.oredzie-yearbar__count {
    font-size: .75rem;
    opacity: .75;
    font-variant-numeric: tabular-nums;
}

.oredzie-yearbar__chip.is-active .oredzie-yearbar__count { opacity: .9; }

/* === Sekcja roku ====================================================== */

.oredzie-year {
    margin-bottom: var(--s-7, 3rem);
    scroll-margin-top: calc(var(--nav-h, 64px) + 4.5rem); /* offset pod menu i sticky chipy */
}

.oredzie-year__title {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    margin: 0 0 var(--s-4);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--border);
    font-size: clamp(1.65rem, 3.5vw, 2.25rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: var(--green-800, var(--green-700));
}

.oredzie-year__num {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.oredzie-year__count {
    font-size: .875rem;
    font-weight: 400;
    color: var(--text-muted, #6c757d);
    letter-spacing: 0;
}

/* === Grid numerów (kart) ==============================================
   rev. h (12.05) — mail S.E. „Uwagi 11 maja" pkt 4:
     „cztery numery kwartalnika w jednym rzędzie według lat"
   Kwartalnik = 4 numery/rok, więc każdy rok = jeden rząd 4 kolumn na desktopie.
   ===================================================================== */

.oredzie-issues {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-4, 1.25rem);
}

.oredzie-issue { margin: 0; }

/* === Pojedynczy numer (akordeon <details>) ============================ */

.oredzie-issue__details {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .2s, border-color .2s;
}

.oredzie-issue__details:hover {
    border-color: var(--green-200, var(--green-100));
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

.oredzie-issue__details[open] {
    border-color: var(--green-300, var(--green-200, var(--green-100)));
    box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
}

.oredzie-issue__summary {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    padding: var(--s-3);
    cursor: pointer;
    list-style: none;
    text-align: center;
}
.oredzie-issue__summary::-webkit-details-marker { display: none; }
.oredzie-issue__summary::marker { display: none; }

.oredzie-issue__cover {
    margin: 0;
    width: 100%;
    aspect-ratio: 99/140;
    background: var(--green-50);
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
}

.oredzie-issue__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.oredzie-issue__cover--noimage {
    background: linear-gradient(135deg, var(--green-50), var(--green-100));
    color: var(--green-700);
}

.oredzie-issue__cover-placeholder { opacity: .55; }

.oredzie-issue__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    min-width: 0;
}

.oredzie-issue__nr {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--green-800, var(--green-700));
    letter-spacing: -0.005em;
}

.oredzie-issue__sezon {
    font-size: .825rem;
    color: var(--text-muted, #6c757d);
    line-height: 1.3;
}

.oredzie-issue__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    margin-top: .35rem;
    font-size: .72rem;
    font-weight: 500;
    color: var(--accent-warm-600, #e15601);
    letter-spacing: .015em;
}

.oredzie-issue__cta-only-cover {
    color: var(--text-muted, #6c757d);
    font-style: italic;
}

.oredzie-issue__chevron {
    display: inline-block;
    transition: transform .18s ease;
    font-size: .9rem;
    line-height: 1;
}

.oredzie-issue__details[open] .oredzie-issue__chevron {
    transform: rotate(180deg);
}

/* === Panel akordeonu (rozwinięte PDF-y) =============================== */

.oredzie-issue__panel {
    padding: 0 var(--s-3) var(--s-3);
    border-top: 1px solid var(--border);
    background: var(--green-50);
}

.oredzie-issue__cover-link {
    margin: var(--s-2) 0 var(--s-2);
    font-size: .825rem;
}

.oredzie-issue__cover-link a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    color: var(--green-700);
    text-decoration: none;
}

.oredzie-issue__cover-link a:hover { text-decoration: underline; }

.oredzie-issue__pdfs {
    list-style: none;
    margin: var(--s-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1px; /* bardzo cienka separacja */
}

.oredzie-issue__pdfs li { margin: 0; }

.oredzie-issue__pdfs a {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--s-2);
    align-items: center;
    padding: .55rem .65rem;
    background: var(--bg);
    border-radius: 6px;
    color: var(--text);
    text-decoration: none;
    font-size: .9rem;
    line-height: 1.35;
    transition: background .12s, color .12s;
}

.oredzie-issue__pdfs a:hover,
.oredzie-issue__pdfs a:focus-visible {
    background: var(--green-100);
    color: var(--green-800, var(--green-700));
    outline: none;
}

.oredzie-issue__pdfs a .icon {
    color: var(--accent-warm-600, #c0392b);
    flex-shrink: 0;
}

.oredzie-pdf__title {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oredzie-pdf__ext {
    font-size: .7rem;
    font-weight: 600;
    color: var(--accent-warm-600, #c0392b);
    background: rgba(225, 86, 1, .1);
    padding: .15rem .45rem;
    border-radius: 3px;
    letter-spacing: .04em;
}

.oredzie-pdf__ext--jpg,
.oredzie-pdf__ext--jpeg,
.oredzie-pdf__ext--png {
    color: var(--green-700);
    background: rgba(19, 86, 50, .08);
}

/* === Multi-part rozdziały (NR 119+, JPG-skany 1-3 części) ============= */

.oredzie-pdf__row { margin: 0; }

.oredzie-pdf__multipart {
    background: var(--bg);
    border-radius: 6px;
    padding: .55rem .65rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.oredzie-pdf__row-title {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--text);
    font-size: .9rem;
    line-height: 1.35;
}

.oredzie-pdf__row-title .icon {
    color: var(--green-700);
    flex-shrink: 0;
}

.oredzie-pdf__count {
    margin-left: auto;
    font-size: .7rem;
    font-weight: 500;
    color: var(--text-muted, #6c757d);
    font-variant-numeric: tabular-nums;
}

.oredzie-pdf__parts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    margin-left: calc(16px + var(--s-2)); /* wyrównanie pod ikoną rozdziału */
}

.oredzie-pdf__parts a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .5rem;
    background: var(--green-50);
    border: 1px solid var(--green-100);
    border-radius: 4px;
    color: var(--green-700);
    text-decoration: none;
    font-size: .78rem;
    line-height: 1;
    transition: background .12s, border-color .12s;
}

.oredzie-pdf__parts a:hover,
.oredzie-pdf__parts a:focus-visible {
    background: var(--green-100);
    border-color: var(--green-200, var(--green-100));
    outline: none;
}

.oredzie-pdf__part-label { font-weight: 500; }
.oredzie-pdf__parts .oredzie-pdf__ext { font-size: .65rem; padding: .1rem .3rem; }

.oredzie-issue__empty {
    padding: var(--s-2) 0 0;
    margin: 0;
    color: var(--text-muted, #6c757d);
    font-size: .825rem;
    font-style: italic;
}

/* === Stopka archiwum (źródło) ========================================= */

.oredzie-archive__source {
    margin-top: var(--s-7, 3rem);
    padding-top: var(--s-4);
    border-top: 1px solid var(--border);
    font-size: .825rem;
    color: var(--text-muted, #6c757d);
    text-align: center;
}

.oredzie-archive__source a {
    color: var(--green-700);
    text-decoration: none;
}
.oredzie-archive__source a:hover { text-decoration: underline; }

/* === Mobile (≤ 767px) =================================================
   rev. h (12.05): summary jest teraz column-flex (okładka u góry, info pod);
   na mobile dla oszczędności pionowej powracamy do układu obok-siebie. */

@media (max-width: 767px) {
    .oredzie-yearbar { padding-block: .5rem; }
    .oredzie-yearbar__chip {
        padding: .4rem .75rem;
        font-size: .85rem;
    }
    .oredzie-issues {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-3);
    }
    .oredzie-issue__summary {
        padding: var(--s-2) var(--s-3);
    }
    .oredzie-issue__cover { width: 100%; }
    .oredzie-issue__nr { font-size: 1rem; }
}

@media (max-width: 480px) {
    .oredzie-issues {
        grid-template-columns: 1fr;
    }
    .oredzie-issue__summary {
        flex-direction: row;
        text-align: left;
        align-items: center;
        gap: var(--s-3);
    }
    .oredzie-issue__cover {
        width: 72px;
        flex: 0 0 72px;
    }
    .oredzie-issue__info {
        align-items: flex-start;
        text-align: left;
        flex: 1;
    }
}

/* === Tablet (768–1024) ================================================
   Na tablecie ograniczamy do 3 kolumn (lepiej widoczne karty okładek). */

@media (min-width: 768px) and (max-width: 1024px) {
    .oredzie-issues {
        grid-template-columns: repeat(3, 1fr);
    }
}