/* =========================================================================
   iteracje.css — chronologiczne nadpisania (v3.3 26.04+, v3.6 02.05).
   Wydzielone z styles.css (v3.7k refaktor). Źródło: 1971-2169 + 2526-2583.
   Tutaj zostawiamy zmiany które przyjdą w iteracjach na prośbę siostry.
   ========================================================================= */
/* =========================================================================
   v3.3 (26.04.2026) — zmiany po mailu s. Elżbiety
   ========================================================================= */

/* Pkt 1 — Flagi narodowe SVG zamiast emoji */
.utility-bar__flags,
.utility-bar__flags-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-right: 1px solid var(--border);
    padding-right: 12px;
    flex: 0 0 auto;
}
.lang-flag {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
    transition: transform .15s ease, box-shadow .15s ease;
    text-decoration: none !important;
}
.lang-flag img {
    display: block;
    width: 22px;
    height: 14px;
    object-fit: cover;
}
.lang-flag:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px var(--green-700), 0 2px 6px rgba(0, 0, 0, 0.15);
}
.lang-flag--current {
    box-shadow: 0 0 0 2px var(--green-700);
}

/* Pkt 6/B3 — K2K karta wiodąca w sekcji Modlitwa (większa, podświetlona) */
.deeds-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-4);
}
@media (min-width: 768px) {
    .deeds-grid {
        grid-template-columns: 1fr 1fr;
    }
    .deed-card--featured {
        grid-column: 1 / -1;
        background: linear-gradient(135deg,
            rgba(241, 136, 48, 0.18) 0%,
            rgba(255, 255, 255, 0.04) 100%);
        border: 2px solid rgba(241, 136, 48, 0.45) !important;
        position: relative;
    }
    /* Badge „Flagowe dzieło Zgromadzenia · 40 krajów…" usunięty 29.04
       wg uwagi s. Elżbiety. K2K nadal wyróżniona przez gradient + border
       (delikatnie, bez „marketingu"). */
}

/* Pkt 9/B5 — Sekcja Sanktuarium z wyraźnym sanktuaryjnym zielonym tłem
   (zamiast szarego, na które siostra zwróciła uwagę) */
.section--sanctuary-green {
    background:
        linear-gradient(180deg,
            var(--green-50, #f3f7f4) 0%,
            #e8f0ea 100%);
}
.section--sanctuary-green .sanctuaries-hero {
    background:
        linear-gradient(rgba(20, 60, 40, 0.85), rgba(31, 61, 49, 0.92)),
        var(--sanctuary-bg, url('../../assets/slider_1.jpg')) center/cover;
    box-shadow: 0 8px 32px rgba(31, 61, 49, 0.18);
}

/* Pkt 10 — YouTube karta wiodąca w stopce */
.footer__col--yt-featured {
    grid-column: span 2;
}
.yt-feature-card {
    display: block;
    text-decoration: none;
    color: inherit;
    margin-bottom: var(--s-3);
    padding: var(--s-3);
    background: rgba(255, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-card);
    transition: all .2s ease;
}
.yt-feature-card:hover {
    background: rgba(255, 0, 0, 0.16);
    border-color: rgba(255, 0, 0, 0.4);
    text-decoration: none;
}
.yt-feature-card__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
}
.yt-feature-card__icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff0000;
    color: #fff;
    border-radius: 12px;
}
.yt-feature-card__title {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.yt-feature-card__title strong {
    font-size: 15px;
    font-weight: 700;
}
.yt-feature-card__stats {
    font-size: 12px;
    opacity: 0.75;
}
.yt-feature-card__stats strong {
    color: var(--accent-gold-100, #f9e5b5);
    font-size: 13px;
}
.yt-feature-card__desc {
    font-size: 13px;
    opacity: 0.78;
    line-height: 1.55;
    margin: var(--s-3) 0;
}
body.icons-v2 .icon {
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.08));
}

/* v2 preview (15.05.2026) — obrazowanie: winiety, galerie, social proof */
body.visuals-v2 .page-hero--below {
    background:
        linear-gradient(180deg, rgba(246, 242, 232, .74) 0%, rgba(255, 255, 255, 0) 54%),
        var(--bg);
}
body.visuals-v2 .page-hero--below .page-hero__vignette {
    position: relative;
    max-width: min(1040px, calc(100% - clamp(16px, 5vw, 72px)));
    border-radius: 0 0 8px 8px;
    box-shadow: 0 16px 42px rgba(31, 61, 49, .13);
}
body.visuals-v2 .page-hero--below .page-hero__vignette::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 18% 20%, rgba(255, 238, 181, .24), transparent 34%),
        linear-gradient(90deg, rgba(255, 255, 255, .12), transparent 28%, transparent 72%, rgba(255, 255, 255, .10)),
        linear-gradient(180deg, rgba(255, 248, 229, .16), rgba(20, 63, 48, .06));
    mix-blend-mode: soft-light;
}
body.visuals-v2 .page-hero--below .page-hero__vignette img {
    filter: saturate(.88) contrast(1.04) brightness(1.06);
}
body.visuals-v2 .page-hero__vignette[data-hero-slug="modlitwy"] img {
    object-position: center 46%;
}
body.visuals-v2 .page-hero__vignette[data-hero-slug="dzienniczek-sw-siostry-faustyny"] img {
    object-position: center 52%;
}
body.visuals-v2 .gallery-card,
body.visuals-v2 .gallery-card-lg {
    border-radius: 8px;
}
body.visuals-v2 .gallery-card__img,
body.visuals-v2 .gallery-card-lg__img {
    background-size: cover;
    background-position: center;
    filter: saturate(.9) contrast(1.03) brightness(1.04);
}
body.visuals-v2 .gallery-card::after {
    background:
        linear-gradient(to top, rgba(12, 41, 31, .76) 0%, rgba(12, 41, 31, .18) 56%, rgba(255, 238, 181, .12) 100%);
}
.footer-channel-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s-2);
    margin: var(--s-3) 0;
}
.footer-channel-strip__item {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--s-2);
    row-gap: 1px;
    min-width: 0;
    padding: var(--s-2) var(--s-3);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 8px;
    background: rgba(255, 255, 255, .055);
}
.footer-channel-strip__item .icon {
    grid-row: span 2;
    color: var(--accent-gold-300, #ffd982);
}
.footer-channel-strip__item strong {
    color: var(--bg);
    font-size: 14px;
    line-height: 1.1;
}
.footer-channel-strip__item span {
    min-width: 0;
    color: rgba(255, 255, 255, .68);
    font-size: 11px;
    line-height: 1.2;
}

@media (max-width: 680px) {
    .footer-channel-strip {
        grid-template-columns: 1fr;
    }
}

/* v2 preview — ikonografia pasów home: znak sekcji + spokojniejsze medaliony */
body.visuals-v2 .section--v2-symbols .section__head > div {
    position: relative;
}
body.visuals-v2 .section__emblem {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--s-3);
    border-radius: 999px;
    color: var(--green-800);
    background:
        radial-gradient(circle at 34% 26%, rgba(255, 238, 181, .88), rgba(255, 255, 255, .12) 48%, rgba(20, 106, 81, .08) 100%);
    border: 1px solid rgba(20, 106, 81, .18);
    box-shadow: 0 10px 28px rgba(31, 61, 49, .08);
}
body.visuals-v2 .section--dark .section__emblem {
    color: var(--accent-gold-100, #f9e5b5);
    background: rgba(255, 255, 255, .08);
    border-color: rgba(255, 255, 255, .18);
    box-shadow: none;
}
body.visuals-v2 #rekolekcje .mission-card,
body.visuals-v2 #czyn .mission-card {
    position: relative;
    min-height: 205px;
    padding-top: var(--s-6);
}
body.visuals-v2 #rekolekcje .mission-card::before,
body.visuals-v2 #czyn .mission-card::before,
body.visuals-v2 #do-pobrania .download-tile::before {
    content: '';
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-gold-300, #ffd982), rgba(20, 106, 81, .18));
}
body.visuals-v2 #rekolekcje .mission-card__icon,
body.visuals-v2 #czyn .mission-card__icon {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    color: var(--green-800);
    background: rgba(20, 106, 81, .06);
    border: 1px solid rgba(20, 106, 81, .14);
}
body.visuals-v2 #rekolekcje .mission-card__icon {
    color: var(--accent-warm-600, #e15601);
    background: rgba(255, 238, 181, .34);
    border-color: rgba(240, 194, 76, .35);
}
body.visuals-v2 #modlitwa .deed-card,
body.visuals-v2 #czyn .mission-card {
    overflow: hidden;
}
body.visuals-v2 #modlitwa .deed-card__icon {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    color: var(--accent-gold-100, #f9e5b5);
    background:
        radial-gradient(circle at 32% 28%, rgba(255, 238, 181, .18), rgba(255, 255, 255, .07));
    border: 1px solid rgba(255, 255, 255, .18);
}
body.visuals-v2 #modlitwa .deed-card--featured .deed-card__icon {
    width: 62px;
    height: 62px;
    color: var(--green-900);
    background: var(--accent-gold-100, #f9e5b5);
}
body.visuals-v2 #do-pobrania .download-tile {
    position: relative;
    align-items: flex-start;
    text-align: left;
    min-height: 188px;
    padding: var(--s-5);
}
body.visuals-v2 #do-pobrania .download-tile__type {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 3px 9px;
    border-radius: 999px;
    color: var(--green-900);
    background: rgba(20, 106, 81, .07);
    border: 1px solid rgba(20, 106, 81, .12);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}
body.visuals-v2 #do-pobrania .download-tile__icon {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    color: var(--green-800);
    background: rgba(255, 255, 255, .58);
    border: 1px solid rgba(20, 106, 81, .12);
}
body.visuals-v2 #do-pobrania .download-tile__title {
    font-family: var(--ff-serif);
    font-size: 16px;
    line-height: 1.25;
}
body.visuals-v2 #do-pobrania .download-tile__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

@media (min-width: 900px) {
    body.visuals-v2 .section--v2-symbols .section__head > div {
        display: grid;
        grid-template-columns: 64px minmax(0, 1fr);
        column-gap: var(--s-4);
        align-items: center;
    }
    body.visuals-v2 .section--v2-symbols .section__head h2,
    body.visuals-v2 .section--v2-symbols .section__head p {
        grid-column: 2;
    }
    body.visuals-v2 .section__emblem {
        grid-row: 1 / span 2;
        margin-bottom: 0;
    }
}

@media (min-width: 768px) {
    .footer__cols {
        grid-template-columns: 2fr 1fr 1fr;
    }
}

/* Pkt 3 — Hero 3b „Myśl na dziś" — wcześniej blok miał max-height + fade-out dla
   długich cytatów. Po uwadze s. Elżbiety z 02.05 (pkt 2: „powiększyć pole na
   cytat — może być tak duże jak obraz transmisji obok") usuwamy obcinanie
   wysokości i mask-image, żeby cytat był w pełni czytelny. Ograniczenie
   bardzo długich cytatów (>500 znaków) zostaje przez data-len. */
.hero__daily-thought {
    position: relative;
}
.hero__daily-thought-text {
    /* Bez max-height i mask-image — pełen tekst widoczny */
    line-height: 1.65;
}
.hero__daily-thought-ref {
    margin-top: var(--s-2);
    font-size: 13px;
    opacity: 0.8;
    letter-spacing: 0.04em;
}

/* Desktop: jeszcze większy cytat (18px) i pole rozciągnięte do wysokości karty
   Transmisji obok (flex grow w hero__card) */
@media (min-width: 1024px) {
    .hero__daily-thought {
        padding: var(--s-6) var(--s-5);
        flex-grow: 1;
    }
    .hero__daily-thought-text {
        font-size: 18px;
        line-height: 1.7;
    }
    /* Hero card #dzienniczek staje się flex-column, żeby pole cytatu mogło
       puchnąć do dołu i wyrównać wysokość z kartą Transmisji obok */
    .hero__grid > #dzienniczek {
        display: flex;
        flex-direction: column;
    }
}


/* =========================================================================
   v3.6 (02.05.2026) — baner serwisowy dla aktualności / galerii
   Pojawia się gdy adapter DB (lib/posts.php / lib/galleries.php) zwraca null
   — np. baza padła, plugin BWG zdjęty, połączenie timeout. Lepsza prawda
   („prace serwisowe") niż stałe hard-coded fallback z przedawnioną treścią.
   ========================================================================= */
.maintenance-banner {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4) var(--s-5);
    border-radius: var(--r-card, 8px);
    background: rgba(240, 194, 76, 0.10); /* gold-100 z opacity */
    border: 1px solid rgba(240, 194, 76, 0.35);
    color: var(--text, #1f2a25);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 var(--s-3) 0;
}
.maintenance-banner__icon {
    flex-shrink: 0;
    color: var(--accent-gold-700, #b8860b);
}
.maintenance-banner__text { flex: 1; }
.maintenance-banner__title {
    font-weight: 700;
    margin-bottom: 2px;
}
.maintenance-banner__hint {
    font-size: 13px;
    color: var(--text-muted, #5b6b5e);
}

/* Skeleton — placeholder zachowujący wysokość kart żeby layout nie skakał */
.skeleton {
    background:
        linear-gradient(90deg,
            rgba(255, 255, 255, 0.0) 0%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(255, 255, 255, 0.0) 100%) ,
        var(--green-50, #e8f3ee);
    background-size: 200% 100%;
    border-radius: var(--r-card, 8px);
    animation: fp-skeleton-shimmer 1.6s ease-in-out infinite;
    min-height: 200px;
}
.skeleton--news { aspect-ratio: 1.4 / 1; }
.skeleton--gallery { aspect-ratio: 2 / 1; }

@keyframes fp-skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}

/* =========================================================================
   v3.7m rev. h etap 2 (05.05.2026) — alias-anchor (niewidzialny element)
   Pozwala na drugi #id w jednej sekcji (np. #modlitwy-i-inne dla nowych
   linków z mega-menu, gdy stary #modlitwy zostaje dla wstecznej zgodności).
   ========================================================================= */
.anchor-alias {
    display: block;
    width: 0;
    height: 0;
    overflow: hidden;
    /* nie wpływa na układ, ale pozostaje celem dla scroll-to-id */
}

/* =========================================================================
   v3.7m rev. h etap 4 (05.05.2026) — warianty hero overlay (B2 — mail siostry)
   Stosujemy modyfikator klasy `.section-menu-hero--variant-{1|2|3|4}` na
   `.page-hero--featured` (partials/page-section-menu.php). Aktywujemy
   dynamicznie przez `?hero=1|2|3|4` w URL — siostra wybiera, my aplikujemy
   globalnie w etapie 5.
   ========================================================================= */

/* Wariant 1 — „naturalne kolorowe": minimalna przesłona + multiply.
   Tekst dostaje mocniejszy text-shadow, żeby pozostał czytelny na realnym zdjęciu. */
.page-hero--featured.section-menu-hero--variant-1 .page-hero__overlay {
    background: rgba(31, 61, 49, .12);
    mix-blend-mode: multiply;
}
.page-hero--featured.section-menu-hero--variant-1 .page-hero__title h1,
.page-hero--featured.section-menu-hero--variant-1 .page-hero__intro {
    text-shadow: 0 2px 12px rgba(0, 0, 0, .65), 0 1px 3px rgba(0, 0, 0, .55);
}
.page-hero--featured.section-menu-hero--variant-1 .page-hero__chip {
    background: rgba(0, 0, 0, .35);
    border-color: rgba(255, 255, 255, .35);
}

/* Wariant 2 — „przesłona pod tekstem": gradient tylko w dolnej strefie 60%.
   Górne 40% — zdjęcie bez przesłony, dolne — gradient `transparent → black/.65`. */
.page-hero--featured.section-menu-hero--variant-2 .page-hero__overlay {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0) 35%,
        rgba(15, 30, 22, .55) 70%,
        rgba(15, 30, 22, .80) 100%
    );
}
.page-hero--featured.section-menu-hero--variant-2 .page-hero__title h1,
.page-hero--featured.section-menu-hero--variant-2 .page-hero__intro {
    text-shadow: 0 2px 8px rgba(0, 0, 0, .50);
}

/* Wariant 3 — „lekka mgiełka": opacity 0.22 + zielony tint (zamiast czarnego),
   żeby zachować tonację brand. Lżejsza niż obecna A. */
.page-hero--featured.section-menu-hero--variant-3 .page-hero__overlay {
    background: linear-gradient(135deg, rgba(31, 61, 49, .22) 0%, rgba(19, 86, 50, .22) 100%);
}
.page-hero--featured.section-menu-hero--variant-3 .page-hero__title h1,
.page-hero--featured.section-menu-hero--variant-3 .page-hero__intro {
    text-shadow: 0 2px 10px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .45);
}

/* Wariant 4 — hybrid 2+3 (nasza propozycja): mgiełka 0.18 na całości
   + ciemniejszy gradient pod tekstem 0.55. Najczytelniejszy + obraz nadal widać. */
.page-hero--featured.section-menu-hero--variant-4 .page-hero__overlay {
    background:
        linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(15, 30, 22, .15) 35%,
            rgba(15, 30, 22, .55) 80%,
            rgba(15, 30, 22, .70) 100%
        ),
        linear-gradient(135deg, rgba(31, 61, 49, .18) 0%, rgba(26, 122, 69, .18) 100%);
}
.page-hero--featured.section-menu-hero--variant-4 .page-hero__title h1,
.page-hero--featured.section-menu-hero--variant-4 .page-hero__intro {
    text-shadow: 0 2px 10px rgba(0, 0, 0, .50);
}

/* Panel testowy — chipy nawigacyjne między 4 wariantami.
   Renderowany w partial page-section-menu.php tylko gdy ?hero=… aktywne lub
   na stronie testowej (`/zmbm/zgromadzenie/?ns=1`) — patrz partial. */
.hero-variant-bar {
    position: relative;
    z-index: 5;
    background: rgba(0, 0, 0, .65);
    color: #fff;
    padding: 10px 16px;
    font-size: 13px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.hero-variant-bar__label {
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    font-size: 11px;
    color: rgba(255, 255, 255, .85);
}
.hero-variant-bar__links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}
.hero-variant-bar__links a {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    transition: background .15s ease, border-color .15s ease;
}
.hero-variant-bar__links a:hover {
    background: rgba(255, 255, 255, .22);
    border-color: rgba(255, 255, 255, .45);
    text-decoration: none;
}
.hero-variant-bar__links a.is-active {
    background: var(--accent-gold-500, #f0c24c);
    color: var(--green-900, #1f3d31);
    border-color: var(--accent-gold-500, #f0c24c);
    font-weight: 700;
}
.hero-variant-bar__hint {
    flex: 1 1 auto;
    text-align: right;
    color: rgba(255, 255, 255, .70);
    font-size: 12px;
}

/* =========================================================================
   v3.7m rev. h etap 1 (05.05.2026) — czcionka treści hybrid mobile/desktop
   Mail siostry 05.05: „czy czcionka w tekście artykułów nie jest za duża?
   A może to zależy od urządzenia, na którym się odbiera stronę?"

   Diagnoza: na desktop ≥1024px tekst .page-content (1.05rem ≈ 16.8px)
   + lead (1.15rem ≈ 18.4px) + treść hub-page (dziedziczona z 16px body)
   wygląda subiektywnie za duży, bo odległość oczy-ekran jest większa niż
   na mobile/tablecie. Na mobile zostawiamy obecne rozmiary (czytelność dla
   seniorów = WCAG 2.5).

   Strategia: redukcja TYLKO na desktop ≥1024px. Mobile/tablet bez zmian.
   ========================================================================= */
@media (min-width: 1024px) {
    /* Treść artykułu (page.php) — 16.8px → 16px */
    .page-content {
        font-size: 1rem;
    }
    /* Lead (page.php) — 18.4px → 17px */
    .page-content__lead {
        font-size: 1.0625rem;
    }
}