/* =========================================================================
   Szablon MATEUSZ — skóra frontu na `front-base.css` (06.11.2026).
   Źródło formy: stary szablon `mateusz` (`less/gpg/*.less`, `less-colors/brown.less`).

   Layout i widgety są wspólne z Klasykiem. Tutaj jest tylko to, czym Mateusz się
   różni: ramka na tle strony, czołówka z pergaminem obok banera, nagłówki kolumny
   na pełnym kolorze, złote datowniki i panel wyróżnionej aktualności.

   ⚠️ KOLORY WYŁĄCZNIE Z TOKENÓW palety. Tła `tlo.jpg` i `pergamin.jpg` to dekoracja
   szablonu: gdy parafia wybierze własne tło strony (`data-tlo`), `tlo.jpg` znika.
   ========================================================================= */

:root {
  --radius-xs: 0px;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-2xl: 0px;
  --radius-3xl: 0px;
  --radius-4xl: 0px;
  --radius-pill: 0px;
  --mateusz-rog: 4px;
  --footer-bg: var(--pri);
  /* Stary szablon miał kontener 1170 px. Na dużych ekranach strona oddycha szerzej. */
  --tresc-max: 1440px;
  --font-serif: 'Open Sans Condensed', 'Arial Narrow', 'Segoe UI', sans-serif;
  --font-sans: 'Pontano Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-nazwa: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mateusz-kadr: 4 / 3;
  --mateusz-rama: 0 2px 6px rgba(47, 41, 37, 0.12);
  --mateusz-unos: 0 18px 36px -20px rgba(47, 41, 37, 0.55);
  /* Brąz stopki jest jaśniejszy niż ciemne stopki innych szablonów, więc bazowy
     przygaszony tekst schodził tu do 3,2:1. */
  --footer-ink-dim: var(--sec-soft);
}

/* Gradient wygasza dolną krawędź obrazu do tła strony. Obie warstwy mają ten sam
   rozmiar, `50vw` to proporcja pliku 2:1. */
html:not([data-tlo]) body {
  background:
    linear-gradient(to bottom, transparent 60%, var(--bg) 100%) top center / 100% 50vw no-repeat,
    url('../img/front/mateusz/tlo.jpg') top center / 100% 50vw no-repeat,
    var(--bg);
}
html:not([data-tlo]) .front-root { background: transparent; }

/* ---- NAGŁÓWEK (`less/gpg/navbar.less`) ----------------------------------
   Przyklejony, więc nie może być przezroczysty: treść przewija się pod nim. */
.front-header {
  background: var(--bg);
  border-bottom: 0;
}
html:not([data-tlo]) .front-header {
  background: var(--bg) url('../img/front/mateusz/tlo.jpg') top center / 100% 50vw no-repeat;
}
.front-header__inner { max-width: var(--tresc-max); }
.front-header__logo { height: 86px; }
.front-root a.front-header__name,
.front-header__name {
  font-family: var(--font-nazwa);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--pri);
}
.front-header__subtitle {
  font-family: var(--font-nazwa);
  font-size: 19px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pri);
}
.front-root a.front-topnav__link,
.front-topnav__link {
  font-family: var(--font-serif);
  font-size: 19px;
  font-weight: 300;
  color: var(--ink);
  border-bottom: 0;
  padding: 5px 9px;
}
.front-root a.front-topnav__link:hover,
.front-root .front-topnav__group:hover > a.front-topnav__link,
.front-root a.front-topnav__link--active,
.front-topnav__link:hover,
.front-topnav__group:hover > .front-topnav__link,
.front-topnav__link--active {
  color: var(--surface);
  background: var(--pri);
  border-bottom-color: transparent;
}

/* ---- CZOŁÓWKA: BANER I PERGAMIN (`banners.less`, `information.less`) ---- */
.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 390px;
  width: min(100% - 2 * var(--tresc-pad), var(--tresc-max) - 2 * var(--tresc-pad));
  height: 480px;
  margin: 8px auto 0;
  padding: 6px;
  background: var(--surface);
  box-shadow: var(--mateusz-unos);
}
.masthead--solo { grid-template-columns: minmax(0, 1fr); }
.masthead .front-banner {
  min-height: 0;
  height: 100%;
}
.masthead-info {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface) url('../img/front/mateusz/pergamin.jpg') center bottom / cover no-repeat;
}
.masthead-info__tabs {
  display: flex;
  flex: none;
  background: var(--pri);
}
.masthead-info__tab {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 44px;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  color: var(--surface);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color var(--motion-state) var(--motion-ease-state);
}
.masthead-info__tab:hover,
.masthead-info__tab:active { background: var(--pri-strong); }
.masthead-info__tab.is-active {
  background: var(--sec);
  color: var(--ink);
  font-weight: 700;
}
/* Specyficzność wyższa od wspólnej reguły fokusu, której ciemny akcent ginął na brązie. */
.front-root .masthead-info__tabs .masthead-info__tab:focus-visible {
  outline: 2px solid var(--surface);
  outline-offset: -4px;
}
.front-root .masthead-info__tabs .masthead-info__tab.is-active:focus-visible { outline-color: var(--ink); }
.masthead-info__panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  padding: 14px 18px;
  overflow-y: auto;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.45;
}
.masthead-info__panel .info-block__body { flex: 1 1 auto; }
.masthead-info__panel .info-block__more {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: 44px;
  margin-top: 8px;
  border-radius: 0;
}
/* Baza centruje godziny pod pas pełnej szerokości. W wąskim panelu rzędy zaczynają
   się od lewej, razem z nazwą dnia. */
.masthead-info .mass-schedule {
  --time-size: 26px;
  gap: 10px;
}
.masthead-info .mass-schedule__group { gap: 4px; }
.masthead-info .mass-schedule__day {
  font-size: 14px;
  color: var(--pri);
}
.masthead-info .mass-schedule__times {
  justify-content: flex-start;
  margin-inline: 0;
}
.masthead-info .info-phone { margin-top: 12px; }
.front-root .masthead-info a.info-phone__number {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--pri);
  font-size: 22px;
  font-weight: 700;
}

/* ---- UKŁAD POD CZOŁÓWKĄ -------------------------------------------------
   Kolumny stoją na tle strony, a treść i pudełka boczne na białym. */
.front-body__inner { padding-top: 20px; padding-bottom: 32px; }
.front-body--with-sidebar .front-body__inner { gap: 28px; }
.front-sidebar {
  flex-basis: 300px;
  /* Przyklejony nagłówek zasłaniałby górę kolumny. */
  top: calc(var(--header-h, 72px) + 16px);
}
.front-main {
  /* Pas o tle „jasnym" nie ma własnej wartości i dziedziczy ten token, więc stoi
     na bieli ramki. Wcięcia daje ramka, a pas z własnym tłem dostaje je niżej. */
  --section-bg: var(--surface);
  --tresc-wciecie: 0px;
  background: var(--surface);
  padding: 22px 28px 28px;
  box-shadow: var(--mateusz-rama);
}
.front-main section.front-section[style*="--section-bg"] { padding-inline: var(--tresc-pad); }

/* ---- KOLUMNA BOCZNA (`less/gpg/side-nav.less`, `.left-header`) ----------- */
.front-sidebar__box {
  background: var(--surface);
  border: 0;
  box-shadow: var(--mateusz-rama);
}
.front-sidebar__head {
  background: var(--pri);
  color: var(--surface);
  padding: 10px 14px;
  border: 0;
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 300;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
}
.front-sidebar__item {
  margin-inline: 14px;
  border-bottom: 1px solid var(--border);
}
.front-sidebar__item:last-child { border-bottom: 0; }

/* ---- NAGŁÓWKI SEKCJI ----------------------------------------------------- */
.front-root--mateusz .section-title {
  font-family: var(--font-serif);
  font-size: 38px;
  font-weight: 300;
  color: var(--section-text);
}
.front-root--mateusz .section-head { margin-bottom: 14px; }

/* ---- AKTUALNOŚCI (`less/gpg/news-slider.less`, `other-news.less`) --------
   Wyróżniona: zdjęcie i złoty panel obok siebie. Stary biały napis na złocie miał
   2,4:1, więc tekst idzie ciemnym tokenem. */
.news-featured { border: 0; }
.news-featured__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.news-featured--textonly .news-featured__grid { grid-template-columns: 1fr; }
.news-featured__body {
  --card-text: var(--ink);
  --card-heading: var(--ink);
  background: var(--sec);
  color: var(--ink);
}
.news-featured__title { font-size: 30px; font-weight: 700; }
/* Slajd zmienia się co kilka sekund. Podtytuł albo zajawka, nigdy oba naraz. */
.news-featured__body .news-card__subtitle { font-size: 17px; }
.news-featured__body .news-card__subtitle + .news-featured__excerpt { display: none; }
.news-featured__body .news-card__subtitle,
.news-featured__excerpt,
.front-root .news-featured__more { color: var(--ink); }

/* Datownik: złota belka przy krawędzi zdjęcia zamiast kartki z kalendarza.
   Stary szablon nie pokazywał kategorii na kaflu. */
.news-stamps .news-stamps__category { display: none; }
.news-stamps--over { inset: auto 0 0 auto; }
.news-date {
  flex-direction: row;
  gap: 4px;
  min-width: 0;
  padding: 4px 8px;
  border: 0;
  background: var(--sec);
  color: var(--ink);
  box-shadow: none;
}
.news-date__day,
.news-date__month {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  color: inherit;
}

/* W sliderze data to biała tabliczka na zdjęciu, jak w starym szablonie: duża liczba
   i pełny miesiąc. Złota belka zostaje na kaflach. */
.news-featured .news-stamps--over { inset: auto 10px 10px auto; }
.news-featured .news-date {
  align-items: baseline;
  gap: 6px;
  padding: 6px 14px 8px;
  background: var(--surface);
  box-shadow: var(--shadow-stamp);
}
.news-featured .news-date__day {
  font-family: var(--font-serif);
  font-size: 30px;
  color: var(--pri);
}
.news-featured .news-date__month,
.news-featured .news-date__year { font-size: 17px; font-weight: 400; color: var(--ink); }
.news-featured .news-date__month { font-size: 0; }
.news-featured .news-date__month::after {
  content: attr(data-long);
  font-size: 17px;
}

/* Kreski karuzeli grubsze i dłuższe, cel dotyku sięga 44 px. */
.news-carousel__dots--progress .news-carousel__dot {
  width: 44px;
  height: 6px;
  background: var(--border);
}
.news-carousel__dot::after { inset: -19px 0; }

.news-card {
  border: 0;
  background: transparent;
}
.news-card:hover { box-shadow: none; }
.news-card__body { padding: 12px 0 0; }
.news-card__title {
  font-size: 23px;
  font-weight: 700;
}
.news-card__subtitle {
  color: var(--section-text);
  font-weight: 400;
}
/* Kafel bez zdjęcia na stronie głównej dostaje pergamin z czołówki, żeby rząd trzymał
   rytm. Bez symboli: to samo tło, nie udawane zdjęcie. Na liście aktualności zostaje
   wspólna zasada: brak zdjęcia to sam tekst. */
.front-root--home .news-card--textonly { position: relative; }
.front-root--home .news-card--textonly::before {
  content: '';
  display: block;
  aspect-ratio: var(--mateusz-kadr);
  background: var(--surface-2) url('../img/front/mateusz/pergamin.jpg') center / cover no-repeat;
}
.front-root--home .news-card--textonly .news-stamps--inline {
  position: absolute;
  inset: 0 0 auto;
  aspect-ratio: var(--mateusz-kadr);
  align-items: flex-end;
  margin: 0;
  pointer-events: none;
}

/* „Czytaj dalej" jest małym przyciskiem, jak `» więcej` w starym szablonie. */
.news-card__more {
  padding: 6px 12px;
  background: var(--pri);
  color: var(--surface);
  font-size: 14px;
  font-weight: 700;
  transition: background-color var(--motion-state) var(--motion-ease-state),
              word-spacing var(--motion-state) var(--motion-ease-state);
}
.news-card:hover .news-card__more { background: var(--pri-strong); }

/* Przycisk kroniki złoty, jak `Kronika Parafialna` w starym szablonie. */
#aktualnosci .section-foot .btn {
  border-color: var(--sec);
  background: var(--sec);
  color: var(--ink);
}
#aktualnosci .section-foot .btn:hover {
  border-color: var(--pri);
  background: var(--pri);
  color: var(--surface);
}

/* Pasek akcji bez kreski przy lewej krawędzi: w ramce to tylko obcy akcent. */
.front-promoted-bar__content { border-left: 0; }

/* ---- OGŁOSZENIA: SZARA RAMKA ZAMIAST PASA (`rss.less`, `.gpg-frame`) ------ */
.front-main .front-ann--compact {
  border-top: 0;
  background: var(--surface-2);
  padding: 20px 24px;
}

/* ---- SEKCJE W KOLUMNIE BOCZNEJ (`less/gpg/liturgy.less`) -----------------
   Ten sam pas nagłówka co menu boczne. Reguła obejmuje każdy widget z miejscem
   „kolumna boczna", nie tylko Ewangelię. */
.front-root--mateusz .front-sidebar section.front-section {
  --section-bg: var(--surface);
  border-top: 0;
  padding: 0 14px 14px;
  box-shadow: var(--mateusz-rama);
}
.front-sidebar .front-section .section-head {
  margin: 0 -14px 12px;
  padding: 10px 14px;
  border-bottom: 0;
  justify-content: center;
  background: var(--pri);
}
.front-root--mateusz .front-sidebar .front-section .section-title {
  color: var(--surface);
  font-size: 26px;
  text-align: center;
}
.front-sidebar .front-section .kicker { display: none; }

/* ---- SAKRAMENTY JAKO PAS HERO (`.gpg-services`) --------------------------
   Pas na całą szerokość, średniej wysokości: zdjęcie parafii w tle, a bez zdjęcia kolor
   pasa z panelu. Kolory idą z tokenów pasa (`--section-*`), więc oba warianty wyglądają
   tak samo dobrze. Koła i pierścień zostają ze starego szablonu. Na telefonie lista z
   kreskami, jak menu boczne: dwie kolumny kół byłyby dłuższe od całej tej sekcji.

   Komórka siatki jest własnym kontenerem, więc wymiary kafla idą przez `@media`, a nie
   `@container`. */
.front-root--mateusz .front-sacraments {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 400px;
  margin: 0;
  padding: 48px var(--tresc-pad);
}
.front-root--mateusz .front-sacraments .section-head {
  justify-content: center;
  margin: 0 0 30px;
}
.front-root--mateusz .front-sacraments .section-title {
  font-size: 40px;
  text-align: center;
}
.sacrament-grid {
  --kafel: clamp(140px, 23cqi, 300px);
  --kafel-max: 25%;
}
.front-root--mateusz .sacrament-grid {
  justify-content: center;
  gap: 26px 8px;
  width: 100%;
  max-width: var(--tresc-max);
  margin-inline: auto;
}
.front-root--mateusz .sacrament-tile { gap: 12px; }
.front-root--mateusz .sacrament-tile__photo {
  position: relative;
  width: min(132px, 80cqi);
  height: min(132px, 80cqi);
  border: 0;
}
.front-root--mateusz .sacrament-tile__photo::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 5px solid color-mix(in srgb, var(--surface) 50%, transparent);
  border-radius: 50%;
}
.front-root--mateusz .sacrament-tile__caption {
  font-size: 20px;
  font-weight: 700;
}
@media (min-width: 1100px) {
  .sacrament-grid {
    --kafel: clamp(110px, 11.5cqi, 170px);
    --kafel-max: 12.5%;
  }
}

/* ---- GALERIE NA MOCNYM PASIE (`less/gpg/newest-galleries.less`) ---------- */
.gallery-tile { border: 0; }
/* Cztery galerie w rzędzie zamiast taśmy z ucięciem. Próg z zapytania o kontener
   zostaje bazowy, więc węższe pasy dalej przewijają się bokiem. */
@container (min-width: 861px) {
  .gallery-strip-wrap { --strip-visible: 4; }
}
/* Pas szeroki trzyma tę samą krawędź co ramka nad nim. Ramka ma wcięcie `--tresc-pad`
   wewnątrz kontenera, a wspólne wcięcie pasów kończy się na krawędzi kontenera. */
section.front-section--wide {
  padding-inline: max(var(--tresc-pad), var(--tresc-wciecie) + var(--tresc-pad));
}

/* Złoto stopki miało 3:1 przy 12 px. Biel na złotym przycisku szukania 2,55:1. */
.front-footer__sublabel { color: var(--sec-soft); }
.news-search__submit { color: var(--ink); }

/* Nadtytuły z wspólnych nagłówków podstron: nagłówek niesie się sam. */
.front-root--mateusz .kicker { display: none; }

/* ---- FILTRY LIST: LATA, MIESIĄCE, KATEGORIE -------------------------------
   Miesiące to brązowa belka z aktywnym złotem, jak oś czasu w starym szablonie i zakładki
   czołówki. Rząd lat stoi nad nią bez odstępu, bo razem robią jeden przełącznik. */
.front-root--mateusz .news-archive-years { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.front-root--mateusz .news-archive-months {
  gap: 0;
  padding: 0;
  background: var(--pri);
}
.front-root--mateusz .news-archive-months__item {
  flex: 1 0 auto;
  padding: 11px 12px;
  border: 0;
  color: var(--surface);
  text-align: center;
}
.front-root--mateusz a.news-archive-months__item:hover { background: var(--pri-strong); }
.front-root--mateusz .news-archive-months a.news-archive-months__item { color: var(--surface); }
.front-root--mateusz .news-archive-months a.news-archive-months__item.is-active { background: var(--sec); color: var(--ink); }
.front-root--mateusz .news-archive-months__item.is-empty { color: var(--surface); opacity: 0.55; }
/* Kategorie to zwykłe napisy z kreską pod aktywną, jak rząd lat. Pudełka pod brązową
   belką były za ciężkie. Wysokość zostaje dotykowa, bo to nadal cel na telefonie. */
.mm-filter { margin-bottom: 14px; }
.mm-filter,
.news-filter { gap: 0 20px; }
.front-root--mateusz a.mm-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink);
  font-size: 15px;
  font-weight: 400;
}
.front-root--mateusz a.mm-chip:hover {
  border-bottom-color: var(--border);
  background: transparent;
  color: var(--pri);
}
.front-root--mateusz a.mm-chip.is-active {
  border-bottom-color: var(--sec);
  background: transparent;
  color: var(--pri);
  font-weight: 700;
}

/* ---- KRONIKA: KAFLE ALBO LISTA (`other-news.less`) ------------------------
   Ten sam markup, kafle układa siatka, listę daje baza. Przełącznik zmienia tylko klasę
   `.news-rows--grid`. W kaflach nagłówki miesięcy znikają, bo rwały rzędy, a miesiąc mówi
   data i belka nad listą. Telefon ma zawsze listę: 23 kafle jeden pod drugim to ściana. */
.news-rows { clear: both; }
/* Na liście data to złoty kwadrat: równa szerokość trzyma tytuły w jednej linii. */
.news-row .news-date {
  flex: none;
  flex-direction: column;
  gap: 2px;
  width: 58px;
  height: 58px;
  padding: 0;
}
.news-row .news-date__day { font-size: 23px; }
.news-row .news-date__month { font-size: 13px; }
.news-row .news-date__year { font-size: 11px; font-weight: 700; color: inherit; }
@media (min-width: 561px) {
  .news-view {
    display: flex;
    float: right;
    margin: 0 0 12px 16px;
  }
  .news-view__btn {
    display: inline-flex;
    align-items: 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 + .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; }
  .news-filter {
    flex-wrap: wrap;
    overflow: visible;
  }
  /* Wiersz: data, miniatura, tekst. Stałe kolumny trzymają tytuły w jednej linii, a wpis
     bez zdjęcia dostaje pergamin, tak samo jak kafel. */
  .news-row {
    grid-template-columns: 58px 120px minmax(0, 1fr);
    grid-template-areas: "date media body";
  }
  .news-row > .news-date { grid-area: date; }
  .news-row__media { grid-area: media; }
  .news-row__body { grid-area: body; }
  .news-row__thumb {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: var(--mateusz-kadr);
    object-fit: cover;
  }
  .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 {
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 30px 20px;
  }
  .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: 4px 8px;
  }
  .news-rows--grid .news-row .news-date__day,
  .news-rows--grid .news-row .news-date__month,
  .news-rows--grid .news-row .news-date__year { font-size: 13px; }
  .news-rows--grid .news-row__cat { display: none; }
  .news-rows--grid .news-row__title { font-size: 23px; font-weight: 700; }
  .news-rows--grid .news-row__more {
    display: block;
    width: fit-content;
    margin-top: 10px;
    padding: 6px 12px;
    background: var(--pri);
    color: var(--surface);
    font-size: 14px;
    font-weight: 700;
    transition: background-color var(--motion-state) var(--motion-ease-state);
  }
  .news-rows--grid .news-row:hover .news-row__more { background: var(--pri-strong); }
}

/* ---- INTENCJE: TABELA Z BELKAMI DNI ----------------------------------------
   Układ ze starego szablonu: belka dnia na całą szerokość, niedziela w brązie, godzina
   w lewej kolumnie. Definicje stoją wprost w siatce, więc godzina nie odpada od intencji. */
.front-root--mateusz .front-intentions-day {
  margin-bottom: 20px;
  padding: 0;
  background: transparent;
}
.front-root--mateusz .front-intentions-day__head {
  margin: 0;
  padding: 8px 14px;
  background: var(--surface-2);
  text-align: center;
}
.front-root--mateusz .front-intentions-day__head::after { display: none; }
.front-root--mateusz .front-intentions-day__feast {
  justify-content: center;
  flex-wrap: wrap;
  font-size: 15px;
}
.front-root--mateusz .front-intentions-day--sunday .front-intentions-day__head {
  --ink: var(--surface);
  --muted: var(--surface);
  --section-muted: var(--surface);
  background: var(--pri);
}
.front-root--mateusz .front-intentions-masses {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  column-gap: 0;
}
.front-root--mateusz .front-intentions-mass__time,
.front-root--mateusz .front-intentions-mass__body {
  padding-block: 9px;
  border-bottom: 1px solid var(--border);
}
.front-root--mateusz .front-intentions-mass__time {
  padding-left: 14px;
  color: var(--pri);
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}
.front-root--mateusz .front-intentions-mass__body { margin: 0; }
.front-root--mateusz .front-intentions-list li { font-size: 16px; }

/* ---- GALERIE I MULTIMEDIA (`gallery-index.less`) -------------------------
   Trzy kafle w rzędzie, jak w starym szablonie. Plakietki złote, jak datowniki. */
.gallery-grid { --kafel: clamp(200px, 19cqi, 300px); }
.gallery-tile .cat-badge,
.gallery-tile--cover .gallery-tile__count {
  background: var(--sec);
  color: var(--ink);
}

/* ---- SZCZEGÓŁY: WIERSZ DO CZYTANIA ---------------------------------------
   Ogłoszenia i wpisy czyta starszy parafianin, często na głos. Pełna szerokość kolumny
   dawała 127 znaków w wierszu. */
.front-post__content,
.ann-body {
  max-width: var(--proza-max);
  font-size: 18px;
  line-height: 1.75;
}
.ann-body li { margin-bottom: 10px; }

/* ---- SZCZEGÓŁY: NAGŁÓWEK WPISU --------------------------------------------
   Tytuł jak na każdej innej podstronie, data w złotym kwadracie jak na liście, kategoria
   zwykłym odnośnikiem. Telefon nie rozciąga daty na całą szerokość. */
.front-post__title {
  color: var(--ink);
  font-size: clamp(30px, 3.4vw, 38px);
  font-weight: 300;
  line-height: 1.2;
}
.front-post__date { justify-self: start; padding-top: 0; }
.front-post .news-date {
  flex-direction: column;
  gap: 2px;
  width: 58px;
  height: 58px;
  padding: 0;
}
.front-post .news-date__day { font-size: 23px; }
.front-post .news-date__month { font-size: 13px; }
.front-post .news-date__year { font-size: 11px; font-weight: 700; color: inherit; }
.front-root--mateusz a.front-post__category {
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--pri);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.front-root--mateusz a.front-post__category:hover {
  background: transparent;
  color: var(--pri-strong);
  text-decoration: underline;
}
.front-post__subtitle { max-width: var(--proza-max); font-size: 19px; }

/* Zdjęcie w swoich proporcjach. Dopasowanie do stałego pola dawało szare pasy po bokach. */
.front-post__lead-image img {
  width: auto;
  max-width: 100%;
  background: transparent;
}

/* Kreska nad „Ostatnimi aktualnościami" i „Poprzednimi ogłoszeniami" potrzebuje oddechu.
   Pod bieżącym ogłoszeniem kreski nie ma, więc tam odstęp zostaje wspólny. */
.front-root--mateusz .front-main :is(.news-recent, .ann-previous):not(.ann-current + .ann-previous) { padding-top: 28px; }

/* Lista ogłoszeń: stała kolumna daty, żeby tytuły stały w jednej linii. Szerokość mieści
   najdłuższą datę, „30 października 2026". Na telefonie data idzie nad tytuł. */
.ann-archive__date { flex: 0 0 11em; margin-right: 0; }

/* ---- SZCZEGÓŁY: GALERIA ---------------------------------------------------
   Cztery zdjęcia w rzędzie zamiast pięciu, bo tu główną rolę grają fotografie. */
.photo-grid { grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); }

/* ---- RÓG 4 PX -------------------------------------------------------------
   Lekko zaokrąglone jest wszystko, co się klika albo wypełnia. Zdjęcia, ramki, belki,
   datowniki i plakietki zostają ostre, bo to one niosą kanciasty charakter szablonu. */
.front-root--mateusz :is(
  .btn,
  .news-search__field,
  .news-search__submit,
  .news-card__more,
  .news-row__more,
  .front-pagination__page,
  .front-pagination__btn,
  .front-intentions-nav__btn,
  .info-block__more,
  .front-topnav__link,
  .front-skip,
  .front-burger,
  .front-form__control
) {
  border-radius: var(--mateusz-rog);
}
/* Dwa przyciski stykają się krawędzią, więc zaokrąglone są tylko rogi zewnętrzne. */
.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; }

/* ---- STOPKA: POLECANE NA JASNYM PASIE NAD BRĄZEM ------------------------- */
.front-footer {
  display: flex;
  flex-direction: column;
}
.front-promoted-logos {
  --footer-ink: var(--ink);
  order: -1;
  border-top: 0;
  background: var(--surface-2);
}
/* W kolumnie flex auto-marginesy kurczą blok do treści. */
.front-footer__inner { width: 100%; }

/* ---- TELEFON ------------------------------------------------------------- */
@media (max-width: 1100px) {
  .masthead { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 899px) {
  .front-header__logo { height: 56px; }
  .front-root a.front-header__name,
  .front-header__name { font-size: 19px; }
  .front-header__subtitle { display: none; }
  .masthead {
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    height: auto;
    margin-top: 0;
    padding: 0;
    box-shadow: none;
  }
  .masthead .front-banner { height: 220px; }
  .masthead-info__panel { overflow: visible; }
  .front-main { padding: 16px; }
  .news-featured__grid { grid-template-columns: minmax(0, 1fr); }
  /* Akordeon menu bocznego wygląda jak belka, a nie jak nadtytuł. */
  .front-sidebar__toggle {
    background: var(--pri);
    color: var(--surface);
    font-family: var(--font-serif);
    font-size: 22px;
    letter-spacing: 0;
    text-transform: none;
  }
  /* Telefon nie niesie podwójnej zajawki ani pustego bloku przed aktualnościami. */
  .front-root--home .news-card__subtitle { display: none; }
  .front-sidebar .front-awaiting { display: none; }
  .front-root--mateusz .front-sacraments { min-height: 0; padding: 32px 16px; }
  .front-root--mateusz .front-sacraments .section-head { margin-bottom: 20px; }
  .front-root--mateusz .front-sacraments .section-title { font-size: 32px; }
  section.front-section--wide { padding-inline: var(--tresc-wciecie); }
}
@media (max-width: 560px) {
  .sacrament-grid {
    --kafel: clamp(240px, 100cqi, 560px);
    --kafel-max: 100%;
  }
  .front-root--mateusz .sacrament-grid { gap: 0; }
  .front-root--mateusz .sacrament-grid__cell + .sacrament-grid__cell { border-top: 1px solid var(--section-border); }
  .front-root--mateusz .sacrament-tile {
    flex-direction: row;
    gap: 14px;
    padding-block: 8px;
    text-align: left;
  }
  .front-root--mateusz .sacrament-tile__photo {
    flex: none;
    width: 56px;
    height: 56px;
  }
  .front-root--mateusz .sacrament-tile__photo::after { border-width: 3px; }
  .front-root--mateusz .sacrament-tile__caption { font-size: 20px; }
  .news-recent .news-row__media { display: none; }
  .ann-archive__link { flex-wrap: wrap; row-gap: 2px; }
  .ann-archive__date { flex: 1 1 auto; }
  .ann-archive__name { flex: 0 0 100%; }
  .photo-grid { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }
  .front-root--mateusz .front-intentions-masses { grid-template-columns: 76px minmax(0, 1fr); }
  .front-root--mateusz .front-intentions-mass__time { padding-left: 8px; font-size: 19px; }
}