/* =========================================================================
   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: układ pudełkowy na tle strony, czołówka z informacjami obok banera,
   nagłówki kolumny bocznej na pełnym kolorze, datowniki na zdjęciach.

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

:root {
  --radius-xs: 0px;
  --radius-sm: 2px;
  --radius-md: 2px;
  --radius-lg: 2px;
  --radius-xl: 3px;
  --radius-2xl: 3px;
  --radius-3xl: 3px;
  --radius-4xl: 3px;
  --footer-bg: var(--pri);
  /* Kontener Bootstrapa 3 ze starego szablonu. */
  --tresc-max: 1170px;
  --font-serif: 'Open Sans Condensed', 'Arial Narrow', 'Segoe UI', sans-serif;
  --font-sans: 'Pontano Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mateusz-rama: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 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`) ---------------------------------- */
.front-header {
  background: transparent;
  border-bottom: 3px solid var(--pri);
}
.front-header__inner { max-width: var(--tresc-max); }
.front-header__logo { height: 86px; }
.front-header__name {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: 0;
}
.front-root a.front-topnav__link,
.front-topnav__link {
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 300;
  color: var(--ink);
  border-bottom: 0;
  padding: 5px 8px;
}
.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 INFORMACJE (`less/gpg/banners.less`, `information.less`) */
.masthead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  width: min(100% - 2 * var(--tresc-pad), var(--tresc-max) - 2 * var(--tresc-pad));
  height: 372px;
  margin: 20px auto 0;
  box-shadow: var(--mateusz-rama);
}
.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);
}
.masthead-info__tabs {
  display: flex;
  flex: none;
  background: var(--pri);
}
.masthead-info__tab {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 6px;
  border: 0;
  background: transparent;
  color: var(--surface);
  font-family: var(--font-serif);
  font-size: 17px;
  line-height: 1.2;
  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(--surface);
  color: var(--pri);
  font-weight: 700;
}
.masthead-info__tab:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: -3px;
}
/* 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__times {
  justify-content: flex-start;
  margin-inline: 0;
}
.masthead-info__panel {
  flex: 1 1 auto;
  min-height: 0;
  padding: 16px 20px;
  overflow-y: auto;
  font-size: 15px;
  line-height: 1.5;
}

/* ---- UKŁAD POD CZOŁÓWKĄ -------------------------------------------------
   Ramka: 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: 24px; }
.front-sidebar { flex-basis: 280px; }
.front-main {
  /* Pas o tle „jasnym" nie ma własnej wartości i dziedziczy ten token, więc stoi
     na bieli ramki. Pozostałe warianty tła parafia dostaje bez zmian. */
  --section-bg: var(--surface);
  background: var(--surface);
  padding: 20px 24px;
  box-shadow: var(--mateusz-rama);
}

/* ---- 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: 8px 14px;
  border: 0;
  font-family: var(--font-serif);
  font-size: 20px;
  letter-spacing: 0;
  text-transform: none;
}
.front-sidebar__item { 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: 30px;
  font-weight: 700;
}
.front-root--mateusz .section-head { margin-bottom: 16px; }

/* ---- AKTUALNOŚCI (`less/gpg/news-slider.less`, `other-news.less`) --------
   Wyróżniona: zdjęcie i panel z tytułem obok siebie. Panel stoi na kolorze
   głównym niezależnie od tła pasa, więc napisy biorą `--surface`. */
.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(--surface);
  --card-heading: var(--surface);
  background: var(--pri);
  color: var(--surface);
}
.news-featured__title { font-size: 26px; font-weight: 700; }
.news-featured__body .news-card__subtitle,
.news-featured__excerpt,
.front-root .news-featured__more { color: var(--surface); }

.news-card {
  border: 0;
  background: transparent;
}
.news-card__body { padding: 10px 0 0; }
.news-card__title {
  font-size: 22px;
  font-weight: 700;
}
.news-card:hover { box-shadow: none; }

/* Karty-linki: trzy obok siebie także w kolumnie głównej Mateusza (722 px). Podłoga
   z bazy (260 px) spychała trzecią kartę pod spód. */
.cards-links-grid { --kafel: clamp(214px, 23.5cqi, 320px); }
.card-link__more { padding-inline: 14px; }


/* ---- 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);
  padding: 0 14px 14px;
  box-shadow: var(--mateusz-rama);
}
.front-sidebar .front-section .kicker { display: none; }
.front-sidebar .front-section .section-head {
  margin: 0 -14px 12px;
  padding: 8px 14px;
  border-bottom: 0;
  background: var(--pri);
}
.front-root--mateusz .front-sidebar .front-section .section-title {
  color: var(--surface);
  font-size: 20px;
}

/* ---- GALERIE NA MOCNYM PASIE (`less/gpg/newest-galleries.less`) ---------- */
.gallery-tile { border: 0; border-left: 3px solid var(--sec); }
/* 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));
}
@media (max-width: 899px) {
  section.front-section--wide { padding-inline: var(--tresc-wciecie); }
}

/* ---- TELEFON ------------------------------------------------------------- */
@media (max-width: 899px) {
  .front-header { background: var(--surface); }
  .front-header__logo { height: 56px; }
  .masthead {
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    margin-top: 0;
  }
  .masthead .front-banner { height: 220px; }
  .masthead-info__panel { overflow: visible; }
  .front-main { padding: 8px 16px 16px; }
  .news-featured__grid { grid-template-columns: minmax(0, 1fr); }
}