/* Dopasowanie arkuszy nowego Mateusza do starego ISP (strona glowna). Laduje sie po front-*.css. */

/* Pasek strony pokazowej (css-demo/template-isp.css): na komputerze przyklejony u gory, wiec tresc
   i przyklejony naglowek schodza o jego wysokosc; na telefonie siedzi na dole i nie zaslania stopki. */
.template-isp .container { max-width: var(--tresc-max, 1200px); margin: 0 auto; padding: 0 16px; }
@media (min-width: 993px) {
  .template-isp ~ .front-root { padding-top: 40px; }
  .template-isp ~ .front-root .front-header[data-sticky] { top: 40px; }
}
@media (max-width: 992px) {
  .template-isp { font-size: 14px; }
  .template-isp img { display: none; }
  .template-isp ~ .front-root { padding-bottom: 90px; }
}

/* Tresc z edytora (godziny kancelarii, opis Mszy bez porzadku w panelu). */
.mateusz-rich p { margin: 0 0 8px; }
.mateusz-rich p:last-child { margin-bottom: 0; }
.mateusz-office { margin-bottom: 14px; }

/* Reklamy lewe jako kafle: grafika banera w calosci (nie przycinana jak zdjecie w kaflu nowego ISP). */
.front-promoted-tiles .mateusz-advert {
  display: block;
  min-height: 0;
  background: transparent;
}
.front-promoted-tiles .mateusz-advert__img {
  display: block;
  width: 100%;
  height: auto;
}
.front-promoted-tiles .mateusz-advert + .mateusz-advert { margin-top: 12px; }

/* Ewangelia z niedziela.pl: js/bottom/liturgy.js wstawia do #niedziela tresc, "Oto slowo Panskie" i sigle.
   Ukladamy je jak w nowym ISP: sigla (jak front-gospel__ref) nad skrocona trescia (jak front-gospel__body). */
#niedziela { display: flex; flex-direction: column; }
#niedziela p { margin: 0; }
#niedziela .nd_czytanie_odp,
#niedziela .nd_czytanie_nazwa { display: none; }
#niedziela .nd_czytanie_sigla { order: -1; margin: 6px 0 14px; color: var(--section-muted); font-size: 15px; }
#niedziela .nd_czytanie_tresc { color: var(--section-text-soft, var(--section-text)); line-height: 1.65; }
@media (max-width: 900px) {
  #niedziela .nd_czytanie_tresc { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
}

/* Na telefonie reklamy lewe ukryte jak w starym szablonie (hidden-xs), inaczej spychaja aktualnosci daleko w dol. */
@media (max-width: 767px) {
  .front-promoted-tiles.mateusz-adverts { display: none; }
}

/* Kalendarz intencji z rdzenia (services/_calendar.phtml) ma Msze w div.front-intentions-mass, a siatka Mateusza z nowego
   ISP zaklada dt/dd wprost w dl: bez tego Msze ukladaja sie w kolumny. Uklad i linie daje core-css/intentions-calendar.css. */
.front-root--mateusz .mateusz-stary .front-intentions-masses { display: block; columns: auto; }
.front-root--mateusz .mateusz-stary .front-intentions-mass__time,
.front-root--mateusz .mateusz-stary .front-intentions-mass__body { border-bottom: 0; }

/* Miejsce Mszy (slownik miejsc parafii) nad godzinami w porzadku Mszy. */
.mass-schedule__place { margin: 8px 0 2px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.mass-schedule__day + .mass-schedule__place { margin-top: 2px; }

/* Telefon: aktualnosci (tresc) przed kolumna boczna, Ewangelia zaraz pod nimi, reklamy na koncu.
   Menu boczne jest w menu z hamburgera (_header.phtml), wiec tu go nie ma. Mniejsze marginesy boczne. */
@media (max-width: 900px) {
  .front-root--mateusz { --tresc-pad: 12px; }
  .front-root--mateusz .front-sidebar { order: 0; }
  .front-root--mateusz .front-sidebar .front-gospel { order: -1; }
  .front-root--mateusz .front-sidebar__toggle,
  .front-root--mateusz .front-sidebar > nav.front-sidebar__box { display: none; }
}

/* Przycisk "Wroc" pod galeria: odstep od zdjec i zaokraglenie jak reszta przyciskow. */
.front-root--mateusz .mateusz-stary div.gpg-back { margin-top: 24px; }
.front-root--mateusz .mateusz-stary div.gpg-back a { border-radius: var(--mateusz-rog, 4px); }

/* Data na kaflu aktualnosci byla za mala (13 px). */
.front-root--mateusz .news-date:not(.news-featured .news-date):not(.news-row .news-date) { padding: 6px 12px; }
.front-root--mateusz .news-date:not(.news-featured .news-date):not(.news-row .news-date) .news-date__day { font-size: 20px; }
.front-root--mateusz .news-date:not(.news-featured .news-date):not(.news-row .news-date) .news-date__month { font-size: 16px; }

/* Przyciski starych widokow (aktualnosci, artykuly, galerie) z zaokragleniem jak nowe. */
.front-root--mateusz .mateusz-stary div.gpg-more a,
.front-root--mateusz .mateusz-stary div#article_index a.more,
.front-root--mateusz .mateusz-stary a.gpg-see-gallery,
.front-root--mateusz .mateusz-stary ul.gpg-other-news li div.row a,
.front-root--mateusz .mateusz-stary .btn { border-radius: var(--mateusz-rog, 4px); }
.front-root--mateusz .mateusz-stary div.gpg-months { border-radius: var(--mateusz-rog, 4px); overflow: hidden; }

/* Stopka: biale logo strony-parafialne.pl zamiast napisu, jak na Lukaszu. */
.mateusz-footer-logo { display: inline-flex; align-items: center; }
.mateusz-footer-logo img { display: block; height: 30px; width: auto; }

/* Kronika (archiwum aktualnosci, komponent rdzenia _aktualnosci) na telefonie. W nowym ISP telefon mial zawsze
   liste i nie mial przelacznika; tu wybor kafle/lista jest tez na telefonie. */
@media (max-width: 560px) {
  .news-view { display: flex; margin: 0 0 14px; }
  .news-view__btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
  }
  .news-view__btn:first-child { border-radius: var(--mateusz-rog) 0 0 var(--mateusz-rog); }
  .news-view__btn:last-child { border-radius: 0 var(--mateusz-rog) var(--mateusz-rog) 0; }
  .news-view__btn + .news-view__btn { border-left: 0; }
  .news-view__btn[aria-pressed="true"] { border-color: var(--sec); background: var(--sec); }
  .news-view__btn svg { width: 18px; height: 18px; }

  /* Lista: data, tekst i mala miniatura po prawej (zamiast duzego zdjecia pod tekstem). */
  .news-row { grid-template-columns: 58px minmax(0, 1fr) 76px; grid-template-areas: "date body media"; gap: 12px; }
  .news-row > .news-date { grid-area: date; }
  .news-row__body { grid-area: body; }
  .news-row__media { grid-area: media; }
  .news-row__thumb { display: block; width: 76px; height: 76px; object-fit: cover; }

  /* Kafle: zdjecie na cala szerokosc z data, pod nim tytul, zajawka i przycisk. */
  .news-rows--grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .news-rows--grid .news-rows__period { display: contents; }
  .news-rows--grid .news-rows__month { display: none; }
  .news-rows--grid .news-row {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "media" "body";
    align-content: start;
    gap: 12px;
    padding: 0;
    border-bottom: 0;
  }
  .news-rows--grid .news-row:hover { background: transparent; }
  .news-rows--grid .news-row > .news-date {
    grid-area: media;
    align-self: end;
    justify-self: end;
    z-index: var(--z-plakietka);
    flex-direction: row;
    gap: 4px;
    width: auto;
    height: auto;
    padding: 6px 12px;
  }
  .news-rows--grid .news-row .news-date__day { font-size: 20px; }
  .news-rows--grid .news-row .news-date__month { font-size: 16px; }
  .news-rows--grid .news-row__thumb { width: 100%; height: auto; aspect-ratio: var(--mateusz-kadr); }
  .news-rows--grid .news-row:not(:has(.news-row__media))::before {
    content: '';
    grid-area: media;
    aspect-ratio: var(--mateusz-kadr);
    background: var(--surface-2) url('../img/front/mateusz/pergamin.jpg') center / cover no-repeat;
  }
  .news-rows--grid .news-row__cat { display: none; }
  .news-rows--grid .news-row__title { font-size: 22px; font-weight: 700; }
  .news-rows--grid .news-row__more {
    display: block;
    width: fit-content;
    margin-top: 10px;
    padding: 6px 12px;
    border-radius: var(--mateusz-rog);
    background: var(--pri);
    color: var(--surface);
    font-size: 14px;
    font-weight: 700;
  }

  /* Obraz kategorii: pas na cala szerokosc nad tytulem zamiast malego kwadratu nad nim. */
  .news-cat-head { gap: 16px; }
  .news-cat-head__img { width: 100%; height: auto; aspect-ratio: 21 / 9; border-radius: var(--mateusz-rog); }
}

/* Wyrozniona aktualnosc na glownej: bialy tekst na zlotym panelu zamiast ciemnego. */
.front-root .news-featured__body { --card-text: #fff; --card-heading: #fff; color: #fff; }
.front-root .news-featured__body .news-featured__title,
.front-root .news-featured__body .news-card__subtitle,
.front-root .news-featured__body .news-featured__excerpt,
.front-root .news-featured__body .news-featured__more { color: #fff; }

/* "Przeczytaj artykul" i podobne: po najechaniu zmienia kolor zamiast rozsuwac slowa. */
.front-root .link-more:hover,
.front-root .link-more:active { word-spacing: normal; color: var(--section-accent-ink); }
/* Wyrozniona: "Przeczytaj artykul" jako przycisk z biala ramka na dole panelu; po najechaniu wypelnia sie bialym. */
.front-root .news-featured__body .news-featured__more {
  margin-top: auto;
  padding: 8px 16px;
  border: 2px solid #fff;
  border-radius: var(--mateusz-rog, 4px);
  word-spacing: normal;
  text-decoration: none;
  transition: background-color var(--motion-state) var(--motion-ease-state), color var(--motion-state) var(--motion-ease-state);
}
.front-root .news-featured:hover .news-featured__body .news-featured__more,
.front-root .news-featured:focus-visible .news-featured__body .news-featured__more { background: #fff; color: var(--pri-strong); text-decoration: none; }

/* Logo parafii przy nazwie w naglowku (strony, ktore je wlaczaja w _header.phtml). */
.mateusz-logo { flex: 0 0 auto; display: block; line-height: 0; }
.mateusz-logo img { height: 64px; width: auto; display: block; }
.front-header[data-condensed] .mateusz-logo img { height: 44px; }
@media (max-width: 900px) { .mateusz-logo img { height: 44px; } }

/* Czolowka rosnie z dluzszym porzadkiem Mszy (wiecej porzadkow, uwagi) zamiast przewijac panel obok zdjecia. */
@media (min-width: 900px) {
  .masthead { height: auto; min-height: 480px; }
  .masthead-info__panel { overflow: visible; }
}

/* Wyrozniona aktualnosc: zdjecie zawsze 16:9. Wysokosc 100% liczona od komorki siatki, ktora sama zalezala od zdjecia,
   zapamietywala rozmiar sprzed zwezenia okna i slider mial rozna wysokosc przy tej samej szerokosci. */
.news-featured__media { aspect-ratio: 16 / 9; min-height: 220px; }
.news-featured__media .news-featured__img { position: absolute; inset: 0; height: 100%; min-height: 0; }

/* Ogloszenia: data z kolorowa kropka po prawej, w linii okruszkow (na telefonie zostaje przy tytule). */
@media (min-width: 700px) {
  .isp-ogl__tresc { position: relative; }
  /* front-base i core-css/ogloszenia.css (ladowany pozniej) daja dzieciom sekcji position: relative
     (.isp-ogl .front-section > :not(...)), a data ma stac wzgledem calego bloku: wyzsza specyficznosc. */
  .front-root .isp-ogl .isp-ogl__tresc .front-section, .front-root .isp-ogl .isp-ogl__tresc .front-section > .ann-current, .front-root .isp-ogl .isp-ogl__tresc .front-section > .ann-head { position: static; }
  .isp-ogl__tresc .front-breadcrumbs { padding-right: 230px; }
  .isp-ogl__tresc .ann-head .ann-date { position: absolute; top: 0; right: 0; line-height: 18px; white-space: nowrap; }
}

/* Kafle aktualnosci: "Przeczytaj artykul" po najechaniu tylko ciemnieje, bez rozsuwania slow (word-spacing z front-base). */
.front-root .news-card:hover .news-card__more,
.front-root .news-card:active .news-card__more { word-spacing: normal; }

/* Ewangelia dnia w kolumnie bocznej na tym samym tle co ramka ogloszen na glownej (surface-2). */
.front-root--mateusz .front-sidebar section.front-section.front-gospel { --section-bg: var(--surface-2); background: var(--surface-2); }

/* Baner w czolowce bez paralaksy: warstwa ze zdjeciem byla wyzsza o zakres ruchu (468 -> 668 px), wiec zdjecie
   wykadrowane w panelu (wymiary kategorii banerow) bylo powiekszane i widac bylo tylko jego srodek. */
.masthead .front-banner__stage { top: 0; bottom: 0; animation: none; transform: none; }

/* Tekst tresci jednakowy w stronach (stare widoki), ogloszeniach i edytorze TinyMCE (css/tiny_mce.css):
   ta sama czcionka i interlinia, 17 px na komputerze, 16 px na telefonie. Ogloszenia mialy 18 px, strony 16 px. */
.front-root--mateusz { --tresc-font: 17px; --tresc-lh: 1.75; }
@media (max-width: 560px) { .front-root--mateusz { --tresc-font: 16px; --tresc-lh: 1.7; } }
.front-root--mateusz .mateusz-stary div.content,
.front-root--mateusz .isp-ogl .rich-text.ann-body { font-family: var(--font-sans); font-size: var(--tresc-font); line-height: var(--tresc-lh); }

/* Znaczek galerii na zdjeciu aktualnosci (kafle glownej, wyrozniona, archiwum kafle/lista): ten sam jezyk co
   zlota belka daty i etykieta liczby zdjec na kaflu galerii (zloto szablonu, ciemny tekst, ostre rogi). */
.news-row__media { position: relative; }
.news-gallery-badge {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px;
  border-radius: var(--radius-md, 0);
  background: var(--sec); color: var(--ink);
  font: 600 13px/1.3 var(--font-sans);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.news-gallery-badge__icon { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
/* Lista archiwum: miniatura ma 76 px, zostaje ikona z liczba; slowo tylko dla czytnikow ekranu. */
.news-rows:not(.news-rows--grid) .news-gallery-badge { top: 0; left: 0; gap: 4px; padding: 2px 5px; font-size: 12px; }
.news-rows:not(.news-rows--grid) .news-gallery-badge__icon { width: 12px; height: 12px; }
.news-rows:not(.news-rows--grid) .news-gallery-badge__word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Telefon: logo, nazwa i hamburger w jednym rzedzie; dluga nazwa lamie sie obok, menu zostaje z prawej. */
@media (max-width: 900px) {
  .front-header__inner { flex-wrap: nowrap; }
  .front-header__brand { flex: 1 1 auto; min-width: 0; }
  .front-header__name { overflow-wrap: anywhere; }
  .front-burger { flex: none; }
}

/* Przycisk Facebooka z rdzenia (core-css/fb.css, obrazek 53 x 111): mniejszy; na telefonie jeszcze mniejszy,
   bo klasy hidden-xs/hidden-sm pochodzily z bootstrapa, ktorego nowy szablon nie ma. */
img.fb-icon { width: 34px; height: auto; margin-top: -36px; }
@media (max-width: 900px) { img.fb-icon { width: 24px; margin-top: -25px; } }

/* Galerie z wieloma kategoriami i rocznikami (core/view/_galerie/lista.phtml): wlasna lista rozwijana (Alpine) zamiast
   sciany przyciskow i systemowego selecta; w pasku lat po szesciu najnowszych "Wczesniejsze lata" w stylu zakladki roku. */
.gallery-filter--select { overflow: visible; }
.gallery-dropdown { position: relative; display: inline-flex; align-items: center; gap: 12px; }
/* Pasek lat i filtr kategorii nad siatka galerii (dzieci .front-section maja z-index 1), inaczej rozwiniete menu chowa sie pod kaflami. */
.front-section.isp-gal > .gallery-years--compact { position: relative; z-index: 4; }
.front-section.isp-gal > .gallery-filter--select { position: relative; z-index: 3; }
.gallery-dropdown__caption { font-weight: 700; color: var(--ink); }
.gallery-dropdown__button {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  min-width: min(100%, 300px); padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--mateusz-rog, 4px); background: var(--surface);
  font: 600 16px/1.3 var(--font-sans); color: var(--ink); text-align: left; cursor: pointer;
  transition: border-color var(--motion-state) var(--motion-ease-state), box-shadow var(--motion-state) var(--motion-ease-state);
}
.gallery-dropdown__button:hover, .gallery-dropdown__button[aria-expanded="true"] { border-color: var(--sec-strong); }
.gallery-dropdown__chevron { width: 12px; height: 8px; flex: none; fill: none; stroke: var(--ink-3); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--motion-state) var(--motion-ease-state); }
.gallery-dropdown__button[aria-expanded="true"] .gallery-dropdown__chevron { transform: rotate(180deg); }
.gallery-dropdown__menu {
  position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; min-width: 100%; width: max-content; max-width: min(92vw, 420px);
  max-height: min(60vh, 420px); overflow: auto; margin: 0; padding: 6px; list-style: none;
  border: 1px solid var(--border-2); border-radius: var(--mateusz-rog, 4px); background: var(--surface);
  box-shadow: 0 12px 32px rgba(46, 32, 22, .16), 0 2px 6px rgba(46, 32, 22, .08);
}
.gallery-dropdown--categories .gallery-dropdown__menu { left: auto; right: 0; }
.gallery-dropdown__caption + .gallery-dropdown__button + .gallery-dropdown__menu { left: 0; right: auto; }
.gallery-dropdown__menu a { display: block; padding: 9px 12px; border-radius: calc(var(--mateusz-rog, 4px) - 1px); font-size: 15px; line-height: 1.35; color: var(--ink); text-decoration: none; }
.gallery-dropdown__menu a:hover, .gallery-dropdown__menu a:focus-visible { background: var(--sec-soft); color: var(--ink); outline: none; }
.gallery-dropdown__menu a.is-active { background: var(--pri); color: #fff; font-weight: 700; }
/* Wczesniejsze lata: przycisk jak zakladka roku w pasku. */
.gallery-years--compact { align-items: flex-end; overflow: visible; flex-wrap: wrap; }
.gallery-dropdown--years { flex: 0 0 auto; margin-bottom: -1px; border-bottom: 3px solid transparent; }
.gallery-dropdown--years.is-active { border-bottom-color: var(--section-accent-ink); }
.gallery-dropdown--years .gallery-dropdown__button { min-width: 0; padding: 6px 12px; border: 0; border-radius: 0; background: transparent; font: 600 20px/1.3 var(--font-serif); color: var(--section-text, var(--ink)); }
.gallery-dropdown--years.is-active .gallery-dropdown__button { color: var(--section-heading, var(--pri)); }
.gallery-dropdown__menu--years { left: auto; right: 0; min-width: 140px; }
.gallery-dropdown__menu--years a { font: 600 18px/1.3 var(--font-serif); text-align: center; }
@media (max-width: 560px) {
  .gallery-dropdown--categories { display: grid; gap: 6px; width: 100%; }
  .gallery-dropdown--categories .gallery-dropdown__button { width: 100%; }
  .gallery-dropdown--categories .gallery-dropdown__menu { left: 0; right: 0; max-width: none; width: auto; }
}

/* Naglowek galerii: spokojny wiersz informacji z ikonami, opis jako wstep, linia oddzielajaca od siatki zdjec. */
.gallery-head { margin-bottom: 28px; padding-bottom: 22px; border-bottom: 1px solid var(--border-2); }
.gallery-head .section-title { margin: 0; }
.gallery-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 0; margin: 12px 0 0; padding: 0; list-style: none; font-size: 15px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gallery-head__meta li { display: inline-flex; align-items: center; gap: 7px; }
.gallery-head__meta li + li::before { content: ""; width: 4px; height: 4px; margin: 0 14px; border-radius: 50%; background: var(--border); }
.gallery-head__icon { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--sec-strong); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.gallery-head__meta a { color: var(--pri); font-weight: 600; text-decoration: none; }
.gallery-head__meta a:hover { text-decoration: underline; text-underline-offset: 3px; }
.gallery-head__desc { margin: 14px 0 0; max-width: 65ch; font-size: var(--tresc-font, 17px); line-height: var(--tresc-lh, 1.75); color: var(--ink); }
@media (max-width: 560px) {
  .gallery-head { margin-bottom: 20px; padding-bottom: 16px; }
  .gallery-head__meta li + li::before { margin: 0 10px; }
}

/* ---- Sekcje strony glownej z ustawien wygladu (szablon centralny) ---- */
/* Akcje: grafiki z linkami (kategoria reklam), w kolejnosci sekcji. */
.mateusz-actions__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; align-items: start; }
.mateusz-actions__item { display: block; overflow: hidden; border-radius: var(--mateusz-rog, 4px); box-shadow: 0 2px 10px rgba(46, 32, 22, .08); transition: transform var(--motion-state) var(--motion-ease-state), box-shadow var(--motion-state) var(--motion-ease-state); }
.mateusz-actions__item img { display: block; width: 100%; height: auto; }
.mateusz-actions__item:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(46, 32, 22, .14); }

/* Ewangelia dnia (z odtwarzaczem) obok ogloszen. */
.mateusz-duo { display: grid; gap: 22px; }
.mateusz-duo--two { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; }
/* Opakowanie div nie dostaje rytmu sekcji kolumny (.front-main section.front-section): odstep daje sam, a karty w srodku bez marginesow, z tym samym wcieciem. */
.front-main .mateusz-duo { margin-block: 28px; }
.front-main .mateusz-duo:first-child { margin-top: 0; }
.front-main .mateusz-duo:last-child { margin-bottom: 0; }
.front-main .mateusz-duo > section.front-section { margin: 0; padding: 24px; }
/* Ogloszenia: karta ze stalym zdjeciem szablonu i ciemnym przejsciem, tresc wysrodkowana (jak na Tomaszu). */
.front-main .mateusz-duo > section.mateusz-ann-card { padding: 0; min-height: 300px; background: #2b211b var(--ann-photo) center / cover no-repeat; overflow: hidden; }
.mateusz-ann-card__link { --section-dot-ring: rgba(255, 255, 255, .85); --section-dot-ring-width: 1px;
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 32px 24px; text-align: center; color: #fff; text-decoration: none;
  background: linear-gradient(180deg, rgba(28, 20, 15, .38) 0%, rgba(28, 20, 15, .58) 55%, rgba(28, 20, 15, .74) 100%); }
.mateusz-ann-card__heading { margin: 0 0 12px; font-size: 30px; font-weight: 600; line-height: 1.15; color: #fff; text-shadow: 0 1px 14px rgba(0, 0, 0, .35); }
.mateusz-ann-card__date { font-size: 15px; color: rgba(255, 255, 255, .88); }
.mateusz-ann-card__title { max-width: 30ch; font-size: 19px; font-weight: 700; line-height: 1.35; color: #fff; text-wrap: balance; }
.mateusz-ann-card__more { margin-top: 18px; padding: 8px 16px; border: 2px solid #fff; border-radius: var(--mateusz-rog, 4px); font-size: 15px; font-weight: 700; color: #fff; transition: background-color var(--motion-state) var(--motion-ease-state), color var(--motion-state) var(--motion-ease-state); }
.mateusz-ann-card__link:hover .mateusz-ann-card__more, .mateusz-ann-card__link:focus-visible .mateusz-ann-card__more { background: #fff; color: var(--pri-strong); }
@media (max-width: 760px) { .front-main .mateusz-duo > section.mateusz-ann-card { min-height: 260px; } }
.mateusz-gospel-home { background: var(--surface-2); }
.mateusz-gospel-home .front-gospel__day { margin: 0 0 8px; font-weight: 700; color: var(--ink); }
.mateusz-gospel-home .front-gospel__text { font-size: 16px; line-height: 1.65; color: var(--ink); }
/* Przyciski obu kart na jednej linii u dolu, niezaleznie od dlugosci Ewangelii. */
.front-main .mateusz-duo > section.front-section { display: flex; flex-direction: column; }
.mateusz-duo .front-gospel__foot { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 18px; }
.mateusz-mwd { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border-2); }
.mateusz-mwd__label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--ink-3); }
.mateusz-mwd__crop { height: 51px; overflow: hidden; }
.mateusz-mwd__player { display: block; width: calc(100% + 8px); height: 88px; margin: -37px 0 0 -8px; border: 0; overflow: hidden; }
@media (max-width: 760px) { .mateusz-duo--two { grid-template-columns: minmax(0, 1fr); } }

/* Wydarzenia: lista z datownikiem szablonu. */
.mateusz-events__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.mateusz-events__item { display: flex; align-items: center; gap: 16px; padding: 12px 14px; border: 1px solid var(--border-2); border-radius: var(--mateusz-rog, 4px); color: var(--ink); text-decoration: none; transition: border-color var(--motion-state) var(--motion-ease-state), background-color var(--motion-state) var(--motion-ease-state); }
.mateusz-events__item:hover { border-color: var(--sec); background: var(--surface-alt); }
.mateusz-events__item .news-date { flex: none; }
.mateusz-events__body { display: grid; gap: 2px; min-width: 0; }
.mateusz-events__title { font: 700 18px/1.3 var(--font-serif); color: var(--ink); }
.mateusz-events__meta { font-size: 14px; color: var(--ink-3); }

/* Blok z grafika: grafika, tytul, opis, przycisk. */
.mateusz-feature { display: grid; gap: 28px; align-items: center; padding: 24px; background: var(--surface-2); }
.mateusz-feature--image { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
/* Kadr 3:2 zamiast naturalnej wysokosci: pionowy plakat nie rozpycha bloku. */
.mateusz-feature__media img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; object-position: 50% 30%; border-radius: var(--mateusz-rog, 4px); }
.mateusz-feature__title { margin: 0 0 8px; font-size: 26px; line-height: 1.2; color: var(--ink); }
.mateusz-feature__text { margin: 0 0 14px; max-width: 60ch; font-size: 16px; line-height: 1.65; color: var(--ink); }
@media (max-width: 760px) { .mateusz-feature--image { grid-template-columns: minmax(0, 1fr); } }

/* Kolumna boczna: cytat dnia i kanal RSS. */
.mateusz-quote__text { margin: 0; font: italic 400 17px/1.6 var(--font-sans); color: var(--ink); }
.mateusz-quote__author { margin: 10px 0 0; text-align: right; font-weight: 700; color: var(--ink-3); }
/* Pasek zrodel (jak na starych Mateuszu i Tomaszu): zakladki na tle akcentu pod naglowkiem bloku. */
.mateusz-rss__tabs { display: flex; flex-wrap: wrap; gap: 2px 4px; margin: -12px -14px 4px; padding: 6px 10px; background: var(--sec); }
.mateusz-rss__tab { padding: 4px 6px; border: 0; background: none; font: 700 13px/1.3 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); opacity: .78; cursor: pointer; text-decoration: underline 2px transparent; text-underline-offset: 5px; transition: opacity var(--motion-state) var(--motion-ease-state), text-decoration-color var(--motion-state) var(--motion-ease-state); }
.mateusz-rss__tab:hover { opacity: 1; }
.mateusz-rss__tab.is-active { opacity: 1; text-decoration-color: currentColor; }
.mateusz-rss__tabs:has(.mateusz-rss__tab:only-child) .mateusz-rss__tab { cursor: default; text-decoration-color: transparent; }
.mateusz-rss__list { margin: 0; padding: 0; list-style: none; }
.mateusz-rss__list li + li { border-top: 1px solid var(--border-2); }
.mateusz-rss__list a { display: block; padding: 10px 0; color: var(--ink); font-size: 15px; line-height: 1.45; text-decoration: none; }
.mateusz-rss__list a:hover { color: var(--pri); text-decoration: underline; text-underline-offset: 3px; }

/* Stopka: prosta (sama nazwa i logo ISP), tekst w stopce, logotypy w kolkach. */
.front-footer__note { max-width: var(--tresc-max); margin: 0 auto; padding: 14px var(--tresc-pad); }
.front-footer__note p { margin: 0; max-width: 90ch; font-size: 13px; line-height: 1.6; color: var(--footer-ink-dim, rgba(255, 255, 255, .72)); }
.front-promoted-logos--circles .front-promoted-logos__inner { gap: 22px; }
.front-promoted-logos--circles .front-promoted-logos__item { display: grid; place-items: center; width: 108px; height: 108px; padding: 13px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); transition: transform var(--motion-state) var(--motion-ease-state); }
.front-promoted-logos--circles .front-promoted-logos__item:hover { transform: scale(1.04); }
.front-promoted-logos--circles .front-promoted-logos__img { max-width: 100%; max-height: 100%; object-fit: contain; filter: none; opacity: 1; }