/* =========================================================================
   sections-grid.css — sekcje siatkowo-kaflowe na home: section-base, 5-tab,
   quick-actions, news, deeds, gallery, downloads, buduj, congregation, foto-jezus.
   Wydzielone z styles.css (v3.7k refaktor). Źródło: 608-806 + 909-1093 + 1491-1560.
   ========================================================================= */
/* =========================================================================
   SECTION BASE
   ========================================================================= */
.section {
    padding: var(--s-7) 0;
}
.section--green {
    background: var(--green-50);
}
.section--dark {
    background: var(--green-800);
    color: #fff;
}
.section--dark a { color: #fff; }
.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-6);
    flex-wrap: wrap;
}
.section__head h2 {
    font-family: var(--ff-serif);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.2;
    color: inherit;
}
.section__head p {
    color: var(--text-muted);
    font-size: 15px;
    margin-top: var(--s-2);
}
.section--dark .section__head p { color: rgba(255,255,255,.75); }
.section__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--s-3);
}
.section__more {
    font-size: 14px;
    font-weight: 600;
    color: var(--green-800);
}
.section--dark .section__more { color: var(--accent-gold-100); }

/* =========================================================================
   5-TAB BAR (themes) — pod main-nav / hero
   ========================================================================= */
.tabs-bar {
    background: var(--bg);
    border-bottom: 1px solid var(--border-light);
    overflow-x: auto;
    scrollbar-width: none;
}
.tabs-bar::-webkit-scrollbar { display: none; }
.tabs-bar__inner {
    display: flex;
    gap: var(--s-5);
    padding: var(--s-4) var(--s-4);
    min-width: max-content;
}
.tabs-bar__item {
    flex: 0 0 auto;
    padding: var(--s-3) var(--s-4);
    color: var(--text);
    font-weight: 600;
    font-size: 15px;
    border-radius: var(--r-btn);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    transition: all .2s ease;
}
.tabs-bar__item:hover {
    background: var(--green-50);
    color: var(--green-800);
    text-decoration: none;
}
.tabs-bar__item[aria-current="true"] {
    background: var(--green-800);
    color: #fff;
}

/* =========================================================================
   QUICK ACTIONS (4 big CTA tiles)
   ========================================================================= */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
}
.quick-actions__tile {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    padding: var(--s-5);
    transition: all .2s ease;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    color: var(--text);
    min-height: 160px;
}
.quick-actions__tile:hover {
    box-shadow: var(--shadow-card-h);
    transform: translateY(-2px);
    border-color: var(--green-800);
    text-decoration: none;
    color: var(--text);
}
.quick-actions__icon {
    width: 48px; height: 48px;
    border-radius: var(--r-btn);
    background: var(--green-50);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--green-800);
    font-size: 22px;
}
.quick-actions__title {
    font-weight: 700;
    font-size: 17px;
    line-height: 1.25;
    color: var(--green-900);
}
.quick-actions__sub {
    font-size: 13px;
    color: var(--text-muted);
    flex: 1;
}
.quick-actions__cta {
    font-weight: 600;
    font-size: 14px;
    color: var(--green-800);
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
}

/* =========================================================================
   NEWS CARDS
   ========================================================================= */
.news-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
}
.news-card {
    background: var(--bg);
    border-radius: var(--r-card);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: all .2s ease;
    display: flex;
    flex-direction: column;
    color: var(--text);
}
.news-card:hover {
    box-shadow: var(--shadow-card-h);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--text);
}
.news-card__img {
    aspect-ratio: 16/9;
    background: var(--green-50) center/cover;
    position: relative;
}
.news-card__img::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.25), transparent 40%);
}
.news-card__body { padding: var(--s-4); flex: 1; display: flex; flex-direction: column; }
.news-card__date {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: var(--s-2);
}
.news-card__title {
    font-family: var(--ff-serif);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.3;
    color: var(--green-900);
    margin-bottom: var(--s-2);
}
.news-card__lead {
    font-size: 14px;
    color: var(--text-muted);
    line-height: 1.5;
    flex: 1;
    margin-bottom: var(--s-3);
}
.news-card__cta {
    color: var(--green-800);
    font-weight: 600;
    font-size: 14px;
}


/* =========================================================================
   DEEDS (dark green section, 4 cards)
   ========================================================================= */
.deeds-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-4);
}
.deed-card {
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--r-card);
    padding: var(--s-5);
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    transition: all .2s ease;
}
.deed-card:hover {
    background: rgba(255,255,255,.14);
    border-color: rgba(255,255,255,.4);
    transform: translateY(-2px);
    color: #fff;
    text-decoration: none;
}
.deed-card__icon {
    width: 48px; height: 48px;
    border-radius: var(--r-btn);
    background: rgba(255,255,255,.12);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.deed-card__title {
    font-family: var(--ff-serif);
    font-weight: 700;
    font-size: 18px;
}
.deed-card__desc { font-size: 14px; opacity: .88; flex: 1; }
.deed-card__cta { font-weight: 600; font-size: 14px; color: var(--accent-gold-100); }

/* =========================================================================
   GALLERY (3 cards)
   ========================================================================= */
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-4);
}
.gallery-card {
    border-radius: var(--r-card);
    overflow: hidden;
    position: relative;
    aspect-ratio: 4/3;
    display: block;
    color: #fff;
}
.gallery-card__img {
    position: absolute; inset: 0;
    background: var(--green-800) center/cover;
}
.gallery-card::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 60%);
}
.gallery-card__body {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: var(--s-4);
    z-index: 1;
}
.gallery-card__date { font-size: 12px; opacity: .85; }
.gallery-card__title {
    font-family: var(--ff-serif);
    font-size: 17px; font-weight: 700; line-height: 1.25;
}

/* =========================================================================
   DOWNLOADS (4 tiles)
   ========================================================================= */
.downloads-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
}
.download-tile {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    padding: var(--s-5);
    text-align: center;
    color: var(--text);
    transition: all .2s ease;
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    align-items: center;
    min-height: 180px;
}
.download-tile:hover {
    box-shadow: var(--shadow-card-h);
    border-color: var(--green-800);
    transform: translateY(-2px);
    text-decoration: none;
    color: var(--text);
}
.download-tile__icon {
    width: 56px; height: 56px;
    border-radius: var(--r-btn);
    background: var(--gradient-gold);
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--green-900);
    font-size: 26px;
}
.download-tile__title { font-weight: 700; color: var(--green-900); font-size: 15px; }
.download-tile__cta { color: var(--green-800); font-size: 13px; font-weight: 600; margin-top: auto; }

/* =========================================================================
   BUDUJ Z NAMI banner
   ========================================================================= */
.build-banner {
    position: relative;
    background:
        linear-gradient(rgba(31,61,49,.82), rgba(31,61,49,.88)),
        var(--build-bg, url('../../assets/buduj.jpg')) center/cover;
    color: #fff;
    padding: var(--s-8) 0;
    text-align: center;
    overflow: hidden;
}
.build-banner h2 {
    font-family: var(--ff-serif);
    font-size: 32px;
    line-height: 1.15;
    margin-bottom: var(--s-4);
}
.build-banner p {
    max-width: 680px;
    margin: 0 auto var(--s-5);
    font-size: 16px;
    line-height: 1.6;
    opacity: .92;
}

/* =========================================================================
   CONGREGATION TILES (7)
   ========================================================================= */
.congregation-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-3);
}
.congregation-tile {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-btn);
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    align-items: center;
    text-align: center;
    color: var(--text);
    transition: all .2s ease;
    min-height: 120px;
    justify-content: center;
}
.congregation-tile:hover {
    background: var(--green-800);
    color: #fff;
    border-color: var(--green-800);
    text-decoration: none;
}
.congregation-tile:hover .congregation-tile__icon { background: rgba(255,255,255,.15); color: #fff; }
.congregation-tile__icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: var(--green-50);
    color: var(--green-800);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.congregation-tile__label { font-size: 14px; font-weight: 600; }


/* =========================================================================
   FOTO + OBRAZ JEZUSA (pkt 5)
   Zmiana 22.04 wg maila s. Elżbiety: cały obraz Jezusa w pełnej postaci,
   tekst objaśniający POD obrazem.
   ========================================================================= */
.foto-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-5);
}
.foto-grid .gallery-card { aspect-ratio: 4/3; }

/* Nowy komponent: obraz Jezusa w pełnej postaci */
.obraz-jezusa-card {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow: var(--shadow-card);
}
.obraz-jezusa-image {
    position: relative;
    display: block;
    background: #000;
    overflow: hidden;
    text-decoration: none;
}
.obraz-jezusa-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
    transition: transform .4s ease;
}
.obraz-jezusa-image:hover img { transform: scale(1.03); }
.obraz-jezusa-badge {
    position: absolute;
    top: var(--s-3);
    right: var(--s-3);
    background: rgba(19, 86, 50, 0.9);
    color: #fff;
    padding: 6px 12px;
    border-radius: var(--r-pill);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(4px);
}
.obraz-jezusa-body {
    padding: var(--s-5);
}
.obraz-jezusa-body h3 {
    font-family: var(--ff-serif);
    font-size: 22px;
    font-weight: 700;
    color: var(--green-900);
    margin: 0 0 var(--s-3);
    line-height: 1.2;
}
.obraz-jezusa-body p {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text);
    margin: 0 0 var(--s-4);
}