/* GANTRY5 DEVELOPMENT MODE ENABLED.
 *
 * WARNING: This file is automatically generated by Gantry5. Any modifications to this file will be lost!
 *
 * For more information on modifying CSS, please read:
 *
 * http://docs.gantry.org/gantry5/configure/styles
 * http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet
 */

@charset "UTF-8";
/* ============================================================
   FAUSTYNA-SZCZECIN.PL
   WŁASNE STYLE SZABLONU GANTRY 5 / HYDROGEN

   Plik:
   /templates/g5_hydrogen/custom/scss/custom.scss

   WERSJA:
   H-01 v2 — Hero z osobnymi grafikami:
   - komputer,
   - tablet,
   - telefon.

   WAŻNE:
   Nie edytujemy standardowych plików szablonu Hydrogen
   ani plików Gantry znajdujących się w /media/gantry5/.
   ============================================================ */
/* ============================================================
   H-01 — PARAMETRY HERO DO ŁATWEJ ZMIANY

   W przyszłości większość zmian wyglądu Hero wykonasz właśnie
   w tej sekcji. Nie trzeba wtedy szukać wartości w całym pliku.
   ============================================================ */
/* ------------------------------------------------------------
   WYSOKOŚĆ HERO

   Większa wartość = wyższa sekcja.
   Mniejsza wartość = niższa sekcja i szybciej widoczna
   kolejna część strony.
   ------------------------------------------------------------ */
/* ------------------------------------------------------------
   GŁÓWNE KOLORY

   Tutaj możesz później łatwo zmienić kolory akcentów.
   ------------------------------------------------------------ */
/* Główny, spokojny kolor zielony. */
/* Ciemniejszy zielony używany po najechaniu na przycisk. */
/* Delikatny złoty akcent pod nagłówkiem. */
/* Podstawowy biały kolor tekstu. */
/* ============================================================
   H-01 — GŁÓWNY KONTENER HERO
   ============================================================ */
.faustyna-hero {
  /* Pozwala poprawnie układać zawartość wewnątrz Hero. */
  position: relative;
  /* Hero zajmuje całą dostępną szerokość. */
  width: 100%;
  /* Wysokość sekcji na komputerach. */
  min-height: 620px;
  /* Układ elastyczny potrzebny do pionowego centrowania tekstu. */
  display: flex;
  /* Wyśrodkowanie tekstu w pionie. */
  align-items: center;
  /* Tekst pozostaje po lewej stronie. */
  justify-content: flex-start;
  /* Podstawowy kolor tekstu. */
  color: #ffffff;
  /* Ukrywa elementy wychodzące poza Hero. */
  overflow: hidden;
  /* Zapewnia prawidłowe działanie warstw. */
  isolation: isolate;
  /* --------------------------------------------------------
       TŁO DLA KOMPUTERÓW I WIĘKSZYCH LAPTOPÓW

       Pierwsza warstwa to gradient przyciemniający zdjęcie.
       Druga warstwa to fotografia.

       Plik:
       /images/hero/Hero_desktop.webp
       -------------------------------------------------------- */
  /* --------------------------------------------------------
       PODSTAWOWE TŁO HERO

       Jest widoczne głównie po lewej stronie, za tekstem.
       Kolor jest bardzo ciemnym, stonowanym odcieniem zieleni.
       -------------------------------------------------------- */
  background-color: #101c19;
}
/* ============================================================
   H-01 — FOTOGRAFIA HERO NA KOMPUTERACH

   Zdjęcie jest osobną warstwą. Dzięki temu możemy pokazać je
   w całości, bez deformowania i bez obcinania góry oraz dołu.
   ============================================================ */
.faustyna-hero::before {
  /* Tworzy pustą warstwę przeznaczoną na fotografię. */
  content: "";
  /* Warstwa obejmuje całe Hero. */
  position: absolute;
  inset: 0;
  /* Docelowe zdjęcie dla komputerów. */
  background-image: url('../../../../images/hero/Hero_desktop.webp');
  /* --------------------------------------------------------
       KLUCZOWE USTAWIENIE

       auto 100% oznacza:
       - wysokość zdjęcia = 100% wysokości Hero,
       - szerokość jest obliczana automatycznie,
       - fotografia nie jest rozciągana,
       - cała wysokość zdjęcia pozostaje widoczna.
       -------------------------------------------------------- */
  background-size: auto 100%;
  /* Fotografia znajduje się przy prawej krawędzi. */
  background-position: right center;
  /* Brak powtarzania obrazu. */
  background-repeat: no-repeat;
  /* Fotografia znajduje się pod gradientem i tekstem. */
  z-index: 0;
}
/* ============================================================
   H-01 — GRADIENT NAD FOTOGRAFIĄ

   Gradient zapewnia płynne przejście od ciemnej części tekstowej
   do fotografii. Nie będzie ostrej pionowej granicy.
   ============================================================ */
.faustyna-hero::after {
  /* Tworzy pustą warstwę gradientu. */
  content: "";
  /* Gradient obejmuje całe Hero. */
  position: absolute;
  inset: 0;
  /* --------------------------------------------------------
       PRZYCIEMNIENIE

       Lewa strona jest ciemna dla czytelności tekstu.
       Prawa strona pozostaje niemal bez przyciemnienia.
       -------------------------------------------------------- */
  background: linear-gradient(90deg, rgba(7, 13, 11, 0.97) 0%, rgba(7, 13, 11, 0.92) 28%, rgba(7, 13, 11, 0.65) 45%, rgba(7, 13, 11, 0.22) 62%, rgba(7, 13, 11, 0.03) 100%);
  z-index: 1;
  /* Gradient znajduje się nad zdjęciem, ale pod tekstem. */
  /* Warstwa nie przeszkadza w klikaniu przycisków. */
  pointer-events: none;
}
@media only all and (min-width: 1920px) {
  .faustyna-hero::after {
    background: linear-gradient(90deg, rgba(7, 13, 11, 0.97) 0%, rgba(7, 13, 11, 0.93) 34%, rgba(7, 13, 11, 0.72) 49%, rgba(7, 13, 11, 0.38) 62%, rgba(7, 13, 11, 0.12) 76%, rgba(7, 13, 11, 0.02) 100%);
  }
}
/* ============================================================
   H-01 — USUNIĘCIE STANDARDOWYCH ODSTĘPÓW GANTRY

   Dzięki temu Hero dochodzi do krawędzi sekcji Showcase.
   ============================================================ */
#g-showcase {
  /* Usunięcie domyślnego odstępu wewnętrznego. */
  padding: 0;
  /* Usunięcie ewentualnego tła sekcji Hydrogen. */
  background: transparent;
}
#g-showcase .g-container {
  /* Pełna szerokość zamiast ograniczonego kontenera. */
  width: 100%;
  /* Usunięcie maksymalnej szerokości Gantry. */
  max-width: none;
}
#g-showcase .g-grid, #g-showcase .g-block {
  /* Usunięcie marginesów mogących tworzyć białe szczeliny. */
  margin: 0;
}
#g-showcase .g-content {
  /* Usunięcie standardowego paddingu particle. */
  padding: 0;
  /* Usunięcie standardowego marginesu particle. */
  margin: 0;
}
/* ============================================================
   H-01 — KONTENER Z TEKSTEM
   ============================================================ */
.faustyna-hero__content {
  /* Tekst znajduje się nad tłem i gradientem. */
  position: relative;
  z-index: 2;
  /* Ograniczenie szerokości tekstu, aby nie nachodził na kościół. */
  max-width: 720px;
  /* Elastyczny odstęp od lewej krawędzi.

       minimum: 28px,
       wartość zależna od szerokości ekranu: 6vw,
       maksimum: 110px. */
  padding-left: clamp(28px, 6vw, 110px);
  /* Zabezpieczenie przed prawą krawędzią. */
  padding-right: 24px;
  /* Odstępy pionowe wewnątrz Hero. */
  padding-top: 55px;
  padding-bottom: 55px;
}
/* ============================================================
   H-01 — MAŁA ETYKIETA „PARAFIA W SZCZECINIE”
   ============================================================ */
.faustyna-hero__eyebrow {
  /* Ikona oraz tekst w jednym rzędzie. */
  display: inline-flex;
  /* Wyrównanie ikony i tekstu w pionie. */
  align-items: center;
  /* Odstęp pomiędzy ikoną a tekstem. */
  gap: 10px;
  /* Usunięcie domyślnego marginesu u góry. */
  margin-top: 0;
  /* Odstęp przed głównym nagłówkiem. */
  margin-bottom: 22px;
  /* Odstęp wewnątrz zielonej kapsułki. */
  padding: 9px 16px;
  /* Zielone tło etykiety. */
  background-color: #2f7568;
  /* Biały kolor tekstu. */
  color: #ffffff;
  /* Bardzo mocne zaokrąglenie tworzące kapsułkę. */
  border-radius: 999px;
  /* Rozmiar tekstu. */
  font-size: 0.82rem;
  /* Pogrubienie tekstu. */
  font-weight: 600;
  /* Delikatny odstęp pomiędzy literami. */
  letter-spacing: 0.04em;
  /* Wyświetlenie tekstu wielkimi literami. */
  text-transform: uppercase;
  /* Dyskretny cień. */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
/* Rozmiar ikony kościoła. */
.faustyna-hero__eyebrow i {
  font-size: 0.92rem;
}
/* ============================================================
   H-01 — GŁÓWNY NAGŁÓWEK
   ============================================================ */
.faustyna-hero__title {
  /* Usunięcie domyślnego marginesu u góry. */
  margin-top: 0;
  /* Odstęp pod nagłówkiem. */
  margin-bottom: 20px;
  /* Elastyczna wielkość czcionki.

       minimum: 2.65rem,
       wartość elastyczna: 4.7vw,
       maksimum: 4.4rem. */
  font-size: clamp(2.65rem, 4.7vw, 4.4rem);
  /* Zwarte odstępy między wierszami. */
  line-height: 1.03;
  /* Pogrubienie nagłówka. */
  font-weight: 700;
  /* Delikatne zbliżenie liter. */
  letter-spacing: -0.025em;
  /* Biały kolor nagłówka. */
  color: #ffffff;
  /* Cień poprawiający czytelność. */
  text-shadow: 0 3px 22px rgba(0, 0, 0, 0.48);
}
/* ============================================================
   H-01 — ZŁOTA LINIA POD NAGŁÓWKIEM

   Jeżeli zechcesz ją usunąć, możesz zmienić:
   background-color: $hero-gold;

   na:
   background-color: transparent;
   ============================================================ */
.faustyna-hero__title::after {
  /* Pusty element dekoracyjny. */
  content: "";
  /* Umożliwia ustawienie szerokości i wysokości. */
  display: block;
  /* Szerokość złotej kreski. */
  width: 64px;
  /* Grubość złotej kreski. */
  height: 3px;
  /* Odstęp od nagłówka. */
  margin-top: 21px;
  /* Kolor złotego akcentu. */
  background-color: #c9a85c;
  /* Zaokrąglenie końców kreski. */
  border-radius: 999px;
}
/* ============================================================
   H-01 — PODTYTUŁ
   ============================================================ */
.faustyna-hero__lead {
  /* Usunięcie marginesu u góry. */
  margin-top: 0;
  /* Odstęp przed przyciskami. */
  margin-bottom: 30px;
  /* Ograniczenie szerokości tekstu. */
  max-width: 620px;
  /* Elastyczny rozmiar tekstu. */
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  /* Wygodna wysokość wiersza. */
  line-height: 1.5;
  /* Lekko złamana biel. */
  color: rgba(255, 255, 255, 0.94);
  /* Cień poprawiający czytelność. */
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}
/* ============================================================
   H-01 — KONTENER PRZYCISKÓW
   ============================================================ */
.faustyna-hero__actions {
  /* Przyciski w jednym rzędzie. */
  display: flex;
  /* Możliwość przejścia przycisku do kolejnej linii. */
  flex-wrap: wrap;
  /* Odstęp pomiędzy przyciskami. */
  gap: 14px;
}
/* ============================================================
   H-01 — WSPÓLNE USTAWIENIA PRZYCISKÓW
   ============================================================ */
.faustyna-hero__button {
  /* Ikona i napis w jednym rzędzie. */
  display: inline-flex;
  /* Wyrównanie zawartości w pionie. */
  align-items: center;
  /* Wyśrodkowanie zawartości. */
  justify-content: center;
  /* Odstęp pomiędzy ikoną i napisem. */
  gap: 10px;
  /* Minimalna wysokość przycisku. */
  min-height: 52px;
  /* Odstępy wewnętrzne. */
  padding: 12px 22px;
  /* Delikatne zaokrąglenie rogów. */
  border-radius: 6px;
  /* Rozmiar tekstu. */
  font-size: 0.9rem;
  /* Pogrubienie tekstu. */
  font-weight: 600;
  /* Odstęp pomiędzy literami. */
  letter-spacing: 0.025em;
  /* Wielkie litery. */
  text-transform: uppercase;
  /* Usunięcie podkreślenia linku. */
  text-decoration: none;
  /* Uwzględnienie obramowania i paddingu w szerokości. */
  box-sizing: border-box;
  /* Płynne efekty po najechaniu. */
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
/* Rozmiar ikon w przyciskach. */
.faustyna-hero__button i {
  font-size: 1.02rem;
}
/* ============================================================
   H-01 — GŁÓWNY ZIELONY PRZYCISK
   ============================================================ */
.faustyna-hero__button--primary {
  /* Zielone tło. */
  background-color: #2f7568;
  /* Zielone obramowanie. */
  border: 2px solid #2f7568;
  /* Biały tekst. */
  color: #ffffff;
  /* Delikatny cień. */
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.23);
}
/* Efekt po najechaniu kursorem lub użyciu klawiatury. */
.faustyna-hero__button--primary:hover, .faustyna-hero__button--primary:focus {
  /* Ciemniejszy zielony. */
  background-color: #245b52;
  /* Ciemniejsze obramowanie. */
  border-color: #245b52;
  /* Biały tekst pozostaje bez zmian. */
  color: #ffffff;
  /* Niewielkie uniesienie przycisku. */
  transform: translateY(-2px);
  /* Mocniejszy cień. */
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.29);
  /* Bez podkreślenia. */
  text-decoration: none;
}
/* ============================================================
   H-01 — PRZEZROCZYSTY PRZYCISK
   ============================================================ */
.faustyna-hero__button--outline {
  /* Lekko ciemne, prawie przezroczyste tło. */
  background-color: rgba(0, 0, 0, 0.18);
  /* Jasne obramowanie. */
  border: 2px solid rgba(255, 255, 255, 0.88);
  /* Biały tekst. */
  color: #ffffff;
  /* Lekkie rozmycie zdjęcia pod przyciskiem. */
  backdrop-filter: blur(3px);
}
/* Efekt po najechaniu. */
.faustyna-hero__button--outline:hover, .faustyna-hero__button--outline:focus {
  /* Białe tło. */
  background-color: #ffffff;
  /* Białe obramowanie. */
  border-color: #ffffff;
  /* Ciemnozielony tekst. */
  color: #245b52;
  /* Niewielkie uniesienie. */
  transform: translateY(-2px);
  /* Delikatny cień. */
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.25);
  /* Bez podkreślenia. */
  text-decoration: none;
}
/* ============================================================
   H-01 — TABLETY I MNIEJSZE LAPTOPY

   Zakres do szerokości 960 px.
   Używana grafika:
   /images/hero/Hero_tablet.webp
   ============================================================ */
@media only all and (max-width: 960px) {
  /* ========================================================
       FOTOGRAFIA HERO DLA TABLETÓW
       ======================================================== */
  .faustyna-hero {
    /* Wysokość Hero na tabletach. */
    min-height: 560px;
  }
  .faustyna-hero::before {
    /* Osobna grafika przygotowana dla tabletów. */
    background-image: url('../../../../images/hero/Hero_tablet.webp');
    /* Cała wysokość fotografii pozostaje widoczna. */
    background-size: auto 100%;
    /* Zdjęcie wyrównane do prawej strony. */
    background-position: right center;
  }
  .faustyna-hero::after {
    /* Na tablecie przyciemniamy większą część fotografii. */
    background: linear-gradient(90deg, rgba(7, 13, 11, 0.96) 0%, rgba(7, 13, 11, 0.88) 38%, rgba(7, 13, 11, 0.58) 62%, rgba(7, 13, 11, 0.14) 100%);
  }
  .faustyna-hero__content {
    /* Odstępy poziome na tabletach. */
    padding-left: 40px;
    padding-right: 40px;
    /* Nieco mniejsze odstępy pionowe. */
    padding-top: 48px;
    padding-bottom: 48px;
    /* Ograniczenie szerokości tekstu. */
    max-width: 650px;
  }
  .faustyna-hero__title {
    /* Nieco mniejszy nagłówek na tabletach. */
    font-size: clamp(2.45rem, 6vw, 3.8rem);
  }
}
/* ============================================================
   H-01 — TELEFONY

   Zakres do szerokości 600 px.
   Używana grafika:
   /images/hero/Hero_mobile.webp
   ============================================================ */
@media only all and (max-width: 600px) {
  /* ========================================================
       FOTOGRAFIA HERO DLA TELEFONÓW
       ======================================================== */
  .faustyna-hero {
    /* Wysokość Hero na telefonach. */
    min-height: 540px;
  }
  .faustyna-hero::before {
    /* Pionowa fotografia przygotowana dla telefonów. */
    background-image: url('../../../../images/hero/Hero_mobile.webp');
    /* Fotografia wypełnia wysokość Hero bez deformowania. */
    background-size: auto 100%;
    /* Wyśrodkowanie pionowej fotografii. */
    background-position: center center;
  }
  .faustyna-hero::after {
    /* Na telefonie gradient działa głównie pionowo. */
    background: linear-gradient(180deg, rgba(7, 13, 11, 0.48) 0%, rgba(7, 13, 11, 0.68) 44%, rgba(7, 13, 11, 0.92) 100%);
  }
  .faustyna-hero__content {
    /* Mniejsze odstępy od boków ekranu. */
    padding-left: 22px;
    padding-right: 22px;
    /* Odstępy pionowe na telefonie. */
    padding-top: 44px;
    padding-bottom: 44px;
    /* Pełna dostępna szerokość. */
    max-width: none;
  }
  .faustyna-hero__eyebrow {
    /* Mniejszy tekst etykiety. */
    font-size: 0.72rem;
    /* Mniejsze odstępy wewnątrz etykiety. */
    padding: 8px 13px;
    /* Mniejszy odstęp pod etykietą. */
    margin-bottom: 18px;
  }
  .faustyna-hero__title {
    /* Rozmiar nagłówka odpowiedni dla telefonu. */
    font-size: clamp(2rem, 9.7vw, 2.85rem);
    /* Nieco luźniejsze wiersze. */
    line-height: 1.06;
  }
  .faustyna-hero__title::after {
    /* Krótsza złota linia na telefonie. */
    width: 54px;
    /* Mniejszy odstęp od nagłówka. */
    margin-top: 18px;
  }
  .faustyna-hero__lead {
    /* Mniejszy podtytuł. */
    font-size: 1rem;
    /* Mniejszy odstęp przed przyciskami. */
    margin-bottom: 25px;
  }
  .faustyna-hero__actions {
    /* Przyciski jeden pod drugim. */
    flex-direction: column;
    /* Wykorzystanie całej szerokości. */
    align-items: stretch;
    /* Mniejszy odstęp między przyciskami. */
    gap: 12px;
  }
  .faustyna-hero__button {
    /* Pełna szerokość przycisku. */
    width: 100%;
    /* Mniejszy tekst przycisku. */
    font-size: 0.86rem;
  }
}
/* ============================================================
   H-01 — MAŁE TELEFONY

   Dodatkowa korekta dla bardzo wąskich ekranów.
   ============================================================ */
@media only all and (max-width: 390px) {
  .faustyna-hero {
    /* Nieco większa wysokość, aby cała treść się zmieściła. */
    min-height: 560px;
  }
  .faustyna-hero__title {
    /* Mniejszy nagłówek na bardzo wąskich ekranach. */
    font-size: 1.95rem;
  }
  .faustyna-hero__content {
    /* Mniejsze odstępy od boków. */
    padding-left: 18px;
    padding-right: 18px;
  }
}
/* ============================================================
   H-01 — DOSTĘPNOŚĆ

   System może mieć włączone ograniczenie animacji.
   W takim przypadku wyłączamy płynne efekty przycisków.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .faustyna-hero__button {
    /* Wyłączenie animacji przejścia. */
    transition: none;
  }
}
/* =========================================================================

Wersja V06

===========================================================================*/
/* ============================================================
   N-01 — HEADER + NAVIGATION
   PIERWSZA WERSJA STYLU MENU

   Ten fragment zmienia wygląd głównego paska nawigacji.
   Nie zmienia układu Gantry ani pozycji menu.
   ============================================================ */
/* ============================================================
   1. GŁÓWNA SEKCJA NAWIGACJI
   ============================================================ */
#g-navigation {
  /* --------------------------------------------------------
       KOLOR TŁA PASKA MENU

       To podstawowy ciemnozielony kolor nagłówka.
       Można go później zmienić w jednym miejscu.
       -------------------------------------------------------- */
  background-color: #234f47;
  /* --------------------------------------------------------
       KOLOR TEKSTU W PASKU

       Biały kolor jest wartością bazową dla napisów i ikon.
       -------------------------------------------------------- */
  color: #ffffff;
  /* --------------------------------------------------------
       DELIKATNY CIEŃ

       Oddziela menu od Hero i poprawia czytelność granicy.
       -------------------------------------------------------- */
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  /* --------------------------------------------------------
       WARSTWA

       Dzięki temu menu pozostaje nad Hero i rozwijanymi
       elementami strony.
       -------------------------------------------------------- */
  position: relative;
  z-index: 20;
}
/* ============================================================
   2. WEWNĘTRZNY KONTENER NAWIGACJI
   ============================================================ */
#g-navigation .g-container {
  /* Pełna szerokość dostępnego kontenera Gantry. */
  width: 100%;
  /* Maksymalna szerokość treści menu.

       Dzięki temu menu nie rozciąga się nadmiernie na ekranach
       2K i 4K.

       Możliwe wartości:
       1200px — bardziej zwarte,
       1320px — wartość proponowana,
       1440px — szerszy układ. */
  max-width: 1320px;
  /* Wyśrodkowanie kontenera. */
  margin-left: auto;
  margin-right: auto;
}
/* ============================================================
   3. USUNIĘCIE ZBĘDNYCH ODSTĘPÓW GANTRY
   ============================================================ */
#g-navigation .g-content {
  /* Mniejsze marginesy niż w standardowym Hydrogen. */
  margin: 0;
  /* Wysokość paska wynika głównie z tego paddingu.

       Pierwsza wartość = góra/dół.
       Druga wartość = lewa/prawa. */
  padding: 12px 18px;
}
/* ============================================================
   4. LOGO
   ============================================================ */
#g-navigation .g-logo {
  /* Logo zachowuje prawidłowe proporcje. */
  display: inline-flex;
  /* Wyrównanie logo w pionie względem menu. */
  align-items: center;
  /* Usunięcie podkreślenia linku logo. */
  text-decoration: none;
}
#g-navigation .g-logo img {
  /* Maksymalna wysokość obecnego logo.

       Jeżeli logo będzie za duże:
       zmniejsz np. do 54px.

       Jeżeli będzie za małe:
       zwiększ np. do 70px. */
  max-height: 62px;
  /* Automatyczna szerokość zachowuje proporcje obrazu. */
  width: auto;
  /* Obraz nie wychodzi poza dostępne miejsce. */
  max-width: 100%;
  /* Usunięcie ewentualnej przerwy pod obrazem. */
  display: block;
}
/* ============================================================
   5. GŁÓWNE MENU
   ============================================================ */
#g-navigation .g-main-nav {
  /* Wyrównanie menu do prawej strony. */
  margin-left: auto;
}
#g-navigation .g-main-nav .g-toplevel {
  /* Menu jako elastyczny rząd. */
  display: flex;
  /* Wyrównanie wszystkich pozycji w pionie. */
  align-items: center;
  /* Delikatny odstęp między pozycjami. */
  gap: 4px;
}
/* ============================================================
   6. LINKI GŁÓWNEGO POZIOMU MENU
   ============================================================ */
#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container {
  /* --------------------------------------------------------
       ODSTĘPY WEWNĄTRZ POZYCJI MENU

       Pierwsza wartość = góra/dół.
       Druga wartość = lewa/prawa.
       -------------------------------------------------------- */
  padding: 16px 13px;
  /* Biały kolor tekstu z lekkim zmiękczeniem. */
  color: rgba(255, 255, 255, 0.92);
  /* Rozmiar napisów menu. */
  font-size: 0.92rem;
  /* Umiarkowane pogrubienie. */
  font-weight: 600;
  /* Delikatny odstęp między literami. */
  letter-spacing: 0.02em;
  /* Usunięcie podkreślenia. */
  text-decoration: none;
  /* Potrzebne do narysowania złotej linii pod linkiem. */
  position: relative;
  /* Płynne przejścia kolorów. */
  transition: color 0.22s ease, background-color 0.22s ease;
}
/* ============================================================
   7. ZŁOTA LINIA POD POZYCJĄ MENU
   ============================================================ */
#g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container::after {
  /* Pusty element dekoracyjny. */
  content: "";
  /* Pozycjonowanie względem linku menu. */
  position: absolute;
  /* Odstęp od dolnej krawędzi linku. */
  bottom: 8px;
  /* Wyśrodkowanie linii. */
  left: 50%;
  /* Początkowa szerokość = 0, więc linia jest niewidoczna. */
  width: 0;
  /* Grubość złotej linii. */
  height: 2px;
  /* Kolor złotego akcentu. */
  background-color: #c9a85c;
  /* Zaokrąglone końce. */
  border-radius: 999px;
  /* Przesunięcie środka linii. */
  transform: translateX(-50%);
  /* Płynne pojawienie się linii. */
  transition: width 0.22s ease;
}
/* ============================================================
   8. EFEKT PO NAJECHANIU
   ============================================================ */
#g-navigation .g-main-nav .g-toplevel > li:hover > .g-menu-item-container, #g-navigation .g-main-nav .g-toplevel > li:focus-within > .g-menu-item-container {
  /* Czysta biel po najechaniu. */
  color: #ffffff;
  /* Bardzo subtelne rozjaśnienie tła. */
  background-color: rgba(255, 255, 255, 0.04);
}
#g-navigation .g-main-nav .g-toplevel > li:hover > .g-menu-item-container::after, #g-navigation .g-main-nav .g-toplevel > li:focus-within > .g-menu-item-container::after {
  /* Szerokość linii po najechaniu. */
  width: 38%;
}
/* ============================================================
   9. AKTYWNA POZYCJA MENU
   ============================================================ */
#g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container, #g-navigation .g-main-nav .g-toplevel > li.g-selected > .g-menu-item-container {
  /* Aktywna pozycja ma biały tekst. */
  color: #ffffff;
}
#g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container::after, #g-navigation .g-main-nav .g-toplevel > li.g-selected > .g-menu-item-container::after {
  /* Aktywna pozycja ma stale widoczną złotą linię. */
  width: 42%;
}
/* ============================================================
   10. IKONY I STRZAŁKI ROZWIJANEGO MENU
   ============================================================ */
#g-navigation .g-main-nav .g-menu-item-container .g-menu-parent-indicator {
  /* Odstęp między nazwą i strzałką. */
  margin-left: 6px;
  /* Mniejszy rozmiar strzałki. */
  font-size: 0.72rem;
  /* Lekko przezroczysty kolor. */
  color: rgba(255, 255, 255, 0.72);
}
/* ============================================================
   11. ROZWIJANE PODMENU
   ============================================================ */
#g-navigation .g-main-nav .g-dropdown {
  /* Ciemne tło rozwijanego menu. */
  background-color: #1b4039;
  /* Brak widocznej ramki systemowej. */
  border: 0;
  /* Delikatne zaokrąglenie dolnych rogów. */
  border-radius: 0 0 7px 7px;
  /* Elegancki cień podmenu. */
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  /* Ukrycie elementów wychodzących poza zaokrąglenie. */
  overflow: hidden;
}
#g-navigation .g-main-nav .g-dropdown .g-menu-item-container {
  /* Odstępy wewnątrz pozycji podmenu. */
  padding: 12px 18px;
  /* Jasny kolor tekstu. */
  color: rgba(255, 255, 255, 0.9);
  /* Nieco mniejszy tekst niż w menu głównym. */
  font-size: 0.88rem;
  /* Płynna zmiana koloru i tła. */
  transition: color 0.2s ease, background-color 0.2s ease;
}
#g-navigation .g-main-nav .g-dropdown .g-menu-item-container:hover, #g-navigation .g-main-nav .g-dropdown li:hover > .g-menu-item-container {
  /* Czysta biel po najechaniu. */
  color: #ffffff;
  /* Delikatne zielone podświetlenie. */
  background-color: rgba(255, 255, 255, 0.07);
}
/* ============================================================
   12. POŁĄCZENIE NAWIGACJI Z HERO
   ============================================================ */
#g-navigation + #g-showcase {
  /* Usuwa ewentualny odstęp między menu i Hero. */
  margin-top: 0;
}
/* ============================================================
   13. TABLETY I MNIEJSZE LAPTOPY
   ============================================================ */
@media only all and (max-width: 1100px) {
  #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container {
    /* Mniejsze odstępy, aby menu zmieściło się w jednym rzędzie. */
    padding-left: 9px;
    padding-right: 9px;
    /* Mniejszy tekst. */
    font-size: 0.84rem;
  }
  #g-navigation .g-logo img {
    /* Nieco mniejsze logo. */
    max-height: 56px;
  }
}
/* ============================================================
   14. TELEFONY I MENU MOBILNE

   Nie ingerujemy mocno w Offcanvas.
   Zmieniamy jedynie kolor przycisku otwierającego menu.
   ============================================================ */
@media only all and (max-width: 767px) {
  #g-navigation .g-content {
    /* Mniejsze odstępy na telefonie. */
    padding: 9px 14px;
  }
  #g-navigation .g-logo img {
    /* Mniejsze logo na telefonie. */
    max-height: 50px;
  }
  #g-navigation .g-offcanvas-toggle {
    /* Biały kolor ikony hamburgera. */
    color: #ffffff;
    /* Rozmiar ikony. */
    font-size: 1.5rem;
  }
}
/* ============================================================
   15. DOSTĘPNOŚĆ — OGRANICZENIE ANIMACJI
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container, #g-navigation .g-main-nav .g-toplevel > li > .g-menu-item-container::after, #g-navigation .g-main-nav .g-dropdown .g-menu-item-container {
    /* Wyłączenie animacji dla użytkowników ograniczających ruch. */
    transition: none;
  }
}
/* ============================================================
   N-01 — KOREKTA ODSTĘPÓW I AKTYWNEJ POZYCJI MENU

   Zielone tło nadal dochodzi do górnej krawędzi przeglądarki,
   ale elementy wewnątrz nagłówka otrzymują więcej „oddechu”.
   ============================================================ */
/* ------------------------------------------------------------
   WYŚRODKOWANIE LOGO I MENU W PIONIE
   ------------------------------------------------------------ */
#g-navigation .g-grid {
  /* Logo i menu znajdą się na jednej osi pionowej. */
  align-items: center;
}
/* ------------------------------------------------------------
   ODSTĘP WEWNĄTRZ CAŁEGO PASKA NAWIGACJI

   Pierwsza wartość = góra i dół.
   Druga wartość = lewa i prawa strona.

   10px daje subtelne „światło”, ale nie powiększa nadmiernie
   całego nagłówka.
   ------------------------------------------------------------ */
#g-navigation .g-content {
  padding-top: 10px;
  padding-bottom: 10px;
}
/* ------------------------------------------------------------
   USUNIĘCIE BIAŁEGO TŁA AKTYWNEJ POZYCJI

   Aktywna pozycja będzie rozpoznawalna dzięki złotej linii,
   a nie dużemu białemu prostokątowi.
   ------------------------------------------------------------ */
#g-navigation .g-main-nav .g-toplevel > li.active > .g-menu-item-container, #g-navigation .g-main-nav .g-toplevel > li.g-selected > .g-menu-item-container {
  /* Przezroczyste tło — widoczny pozostaje zielony pasek. */
  background-color: transparent;
  /* Aktywny napis pozostaje biały. */
  color: #ffffff;
}
/* ------------------------------------------------------------
   DELIKATNE TŁO TYLKO PO NAJECHANIU

   Nie dotyczy stale aktywnej pozycji.
   ------------------------------------------------------------ */
#g-navigation .g-main-nav .g-toplevel > li:hover > .g-menu-item-container, #g-navigation .g-main-nav .g-toplevel > li:focus-within > .g-menu-item-container {
  /* Bardzo lekkie rozjaśnienie zielonego tła. */
  background-color: rgba(255, 255, 255, 0.05);
}
/* ============================================================
   F-02 — KARTY POD HERO
   WSPÓLNY WYGLĄD DLA:
   - Ogłoszenia
   - Ważne
   - Historia parafii

   Klasa "home-card" została przypisana w Gantry:
   Layout → Module Position → Block → CSS Classes

   Ten fragment odpowiada WYŁĄCZNIE za wygląd całych kart.
   Nie zmienia treści modułów Joomla.
   ============================================================ */
/* ============================================================
   1. WSPÓLNY WYGLĄD WSZYSTKICH TRZECH KART
   ============================================================ */
.home-card {
  /* --------------------------------------------------------
       KOLOR TŁA KARTY

       #ffffff = czysta biel.

       Jeżeli później będziemy chcieli delikatnie cieplejsze tło,
       możemy użyć np.:
       #fffdf8
       -------------------------------------------------------- */
  background-color: #ffffff;
  /* --------------------------------------------------------
       ZAOKRĄGLENIE ROGÓW

       Większa wartość = bardziej zaokrąglona karta.

       16px — obecna propozycja
       10px — bardziej klasycznie
       20px — bardziej miękko/nowocześnie
       -------------------------------------------------------- */
  border-radius: 16px;
  /* --------------------------------------------------------
       ODSTĘP WEWNĄTRZ KARTY

       Tworzy przestrzeń pomiędzy treścią a krawędzią kafelka.
       -------------------------------------------------------- */
  padding: 30px;
  /* --------------------------------------------------------
       WYSOKOŚĆ

       Dzięki height: 100% karta może wykorzystać całą wysokość
       swojego bloku Gantry.

       Później dopracujemy wyrównanie wszystkich trzech kart.
       -------------------------------------------------------- */
  height: 100%;
  /* Ważne przy paddingu i wysokości — zapobiega zwiększaniu
       rzeczywistych wymiarów elementu ponad zadany rozmiar. */
  box-sizing: border-box;
  /* --------------------------------------------------------
       DELIKATNA RAMKA

       Jest praktycznie niewidoczna, ale pomaga oddzielić
       białą kartę od bardzo jasnego tła sekcji.
       -------------------------------------------------------- */
  border: 1px solid rgba(36, 91, 82, 0.08);
  /* --------------------------------------------------------
       CIEŃ KARTY

       Bardzo subtelny — zależy nam na elegancji,
       nie na efekcie "unoszących się pudełek".
       -------------------------------------------------------- */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  /* --------------------------------------------------------
       ANIMACJA PO NAJECHANIU MYSZĄ

       transform = lekkie uniesienie,
       box-shadow = delikatne pogłębienie cienia.
       -------------------------------------------------------- */
}
/* ============================================================
   2. EFEKT PO NAJECHANIU NA KARTĘ
   ============================================================ */
.home-card:hover {
  /* Karta przesuwa się o 4px do góry. */
  transform: translateY(-4px);
  /* Cień staje się trochę mocniejszy. */
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.11);
  border-color: rgba(47, 117, 104, 0.18);
  /* Delikatne podkreślenie zielonym akcentem. */
}
/* ============================================================
   3. KARTA "WAŻNE"

   Na razie wyróżniamy ją tylko bardzo subtelnie.
   Nie robimy osobnego mocnego koloru tła.

   Jeżeli później uznamy, że jest zbyt mało widoczna,
   możemy dodać np. złoty pasek lub cieplejsze tło.
   ============================================================ */
.home-card--wazne {
  /* Delikatnie cieplejsze tło niż pozostałe karty. */
  background-color: #fffdf8;
  /* Nieco cieplejsza ramka nawiązująca do złotego akcentu. */
  border-color: rgba(201, 168, 92, 0.2);
}
/* ============================================================
   4. ODSTĘPY CAŁEJ SEKCJI FEATURE

   Dotyczy sekcji znajdującej się bezpośrednio pod Hero.
   ============================================================ */
#g-feature {
  /* Jasne, neutralne tło całej sekcji. */
  background-color: #f7f6f2;
  /* Odstęp nad i pod kartami.

       Pierwsza wartość = góra/dół.
       Druga wartość = lewa/prawa.
       -------------------------------------------------------- */
  padding: 48px 0;
}
/* ============================================================
   5. ODSTĘPY POMIĘDZY KARTAMI

   Gantry posiada własne marginesy bloków.
   Tutaj nadajemy im bardziej kontrolowany odstęp.
   ============================================================ */
#g-feature .home-card {
  /* Mały odstęp poziomy, aby karty nie stykały się ze sobą. */
  /*margin-left: 10px;
    margin-right: 10px; */
}
/* ============================================================
   6. TABLETY
   ============================================================ */
@media only all and (max-width: 960px) {
  .home-card {
    /* Nieco mniejszy padding na tabletach. */
    padding: 24px;
    /* Mniejsze zaokrąglenie. */
    border-radius: 14px;
  }
  #g-feature {
    /* Mniejszy pionowy odstęp sekcji. */
    padding-top: 36px;
    padding-bottom: 36px;
  }
}
/* ============================================================
   7. TELEFONY
   ============================================================ */
@media only all and (max-width: 600px) {
  .home-card {
    /* Mniejsze odstępy wewnątrz kart. */
    padding: 22px;
    /* Na telefonie nie potrzebujemy efektu "unoszenia",
           ponieważ nie ma klasycznego kursora myszy. */
    transform: none;
  }
  .home-card:hover {
    /* Wyłączenie przesunięcia karty na małych ekranach. */
    transform: none;
  }
  #g-feature {
    /* Mniejsze odstępy całej sekcji na telefonie. */
    padding-top: 26px;
    padding-bottom: 26px;
  }
  #g-feature .home-card {
    /* Większy odstęp pionowy między kartami,
           gdy będą układały się jedna pod drugą. */
    margin-top: 10px;
    margin-bottom: 10px;
    /* Usuwamy dodatkowe marginesy poziome. */
    margin-left: 0;
    margin-right: 0;
  }
}
/* ============================================================
   8. DOSTĘPNOŚĆ — OGRANICZENIE ANIMACJI

   Jeżeli użytkownik ma w systemie włączone ograniczenie ruchu,
   wyłączamy animowane przejścia.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .home-card {
    transition: none;
  }
}
/*=====  dopisek dla ogłoszenia  =================*/
/* ============================================================
   F-03 — KAFELEK "OGŁOSZENIA"
   USUNIĘCIE WCIĘCIA LISTY
   ============================================================ */
.home-card--ogloszenia ul.mod-articlescategory {
  /* Usuwa domyślny margines listy Joomla. */
  margin: 0;
  /* Usuwa domyślne wcięcie listy od lewej strony. */
  padding-left: 0;
  /* Usuwa znaczniki listy, jeżeli Joomla/przeglądarka je doda. */
  list-style: none;
}
/* Każdy pojedynczy wpis ogłoszenia. */
.home-card--ogloszenia ul.mod-articlescategory > li {
  /* Brak dodatkowego wcięcia. */
  padding-left: 0;
  /* Odstęp między kolejnymi ogłoszeniami. */
  margin: 0 0 12px 0;
}
/* Link z tytułem ogłoszenia. */
.home-card--ogloszenia .mod-articles-category-title {
  /* Link może wykorzystywać całą dostępną szerokość. */
  display: block;
  /* Komfortowa wysokość wiersza. */
  line-height: 1.4;
}
/*============   Zmiany dla powiększenia tytułu Ważne i usuwamy czytaj dalej ==============*/
/* ============================================================
   F-03 — DOPRACOWANIE KART "WAŻNE" I "HISTORIA PARAFII"
   ============================================================ */
/* ============================================================
   1. KARTA "WAŻNE" — TYTUŁ ARTYKUŁU
   ============================================================ */
.home-card--wazne .mod-articles-category-title {
  /* Większy tytuł, aby od razu było wiadomo,
       jaka informacja jest obecnie najważniejsza. */
  font-size: 1.25rem;
  /* Mocniejsze podkreślenie hierarchii. */
  font-weight: 700;
  /* Nieco ciemniejszy kolor niż zwykłe linki. */
  color: #245b52;
  /* Bardziej zwarta wysokość wiersza. */
  line-height: 1.3;
  /* Odstęp pod tytułem artykułu. */
  margin-bottom: 14px;
  /* Usuwamy klasyczne podkreślenie linku. */
  text-decoration: none;
}
/* Efekt po najechaniu na tytuł artykułu. */
.home-card--wazne .mod-articles-category-title:hover, .home-card--wazne .mod-articles-category-title:focus {
  /* Ciemniejszy zielony po najechaniu. */
  color: #1b4039;
  /* Nadal bez podkreślenia. */
  text-decoration: none;
}
/* ============================================================
   2. HISTORIA PARAFII — UKRYCIE "CZYTAJ DALEJ"
   ============================================================ */
/* Joomla może generować link "czytaj dalej"
   w kilku różnych klasach, dlatego podajemy kilka selektorów. */
.home-card--historia .readmore, .home-card--historia .readmore-link, .home-card--historia .mod-articles-category-readmore {
  /* Link nie będzie widoczny.
       Docelowo cała karta będzie klikalna. */
  display: none;
}
/* ============================================================
   F-04 — MNIEJSZY ODSTĘP MIĘDZY HERO A KARTAMI
   ============================================================ */
#g-feature {
  /* Było wcześniej 48px.
       Zmniejszamy odstęp nad kartami, aby sekcja była
       bardziej zwarta i bliżej Hero. */
  padding-top: 28px;
}
/* ============================================================
   F-04 — DOPRACOWANIE SEKCJI FEATURE

   Sekcja zawiera trzy karty:
   - Ogłoszenia
   - Ważne
   - Historia parafii

   Poniższy kod:
   1. zmniejsza odstęp od Hero,
   2. wyrównuje wysokości kart,
   3. dodaje złoty akcent pod nagłówkami.
   ============================================================ */
/* ============================================================
   1. ODSTĘP MIĘDZY HERO A KARTAMI
   ============================================================ */
#g-feature {
  /* Wcześniej było 48px.
       Zmniejszamy górny odstęp, aby karty były wizualnie
       bardziej związane z Hero. */
  padding-top: 28px;
  /* Na dole zostawiamy więcej przestrzeni.
       Będzie ona oddzielać Feature od następnej sekcji. */
  padding-bottom: 48px;
}
/* ============================================================
   2. RÓWNA WYSOKOŚĆ TRZECH KART
   ============================================================ */
#g-feature .g-grid {
  /* Gantry używa tutaj Flexboxa.
       stretch sprawia, że wszystkie trzy bloki w jednym rzędzie
       otrzymują wysokość najwyższego z nich. */
  align-items: stretch;
}
#g-feature .home-card {
  /* Każda karta staje się kontenerem elastycznym. */
  display: flex;
  /* Zawartość układamy pionowo. */
  flex-direction: column;
  /* Karta wykorzystuje całą wysokość przydzieloną przez grid. */
  align-self: stretch;
  /* Nie ustawiamy sztywnej wysokości w pikselach.
       Jeżeli treści przybędzie, karta może naturalnie urosnąć. */
  height: auto;
}
#g-feature .home-card > .g-content {
  /* Wewnętrzny kontener Gantry rozciąga się na pełną
       wysokość swojej karty. */
  flex: 1;
  /* Pozwala później lepiej sterować położeniem zawartości. */
  display: flex;
  /* Treść pozostaje ułożona pionowo. */
  flex-direction: column;
}
/* ============================================================
   3. NAGŁÓWKI KART

   Z HTML wiemy już na pewno, że Gantry generuje:

   <h3 class="g-title">...</h3>

   Dlatego możemy bezpiecznie użyć klasy .g-title.
   ============================================================ */
#g-feature .home-card .g-title {
  /* Potrzebne do prawidłowego działania elementu dekoracyjnego. */
  position: relative;
  /* Usuwamy niepotrzebny górny margines. */
  margin-top: 0;
  /* Odstęp od treści znajdującej się poniżej nagłówka. */
  margin-bottom: 34px;
  /* Rozmiar nagłówków trzech kart. */
  font-size: 1.45rem;
  /* Umiarkowane pogrubienie.
       Nagłówki mają być wyraźne, ale nie konkurować z Hero. */
  font-weight: 600;
  /* Ciemny, neutralny kolor tekstu. */
  color: #333333;
}
/* ============================================================
   4. ZŁOTA KRESKA POD NAGŁÓWKIEM

   Jest to ten sam motyw wizualny, którego używamy w Hero.
   ============================================================ */
#g-feature .home-card .g-title::after {
  /* Tworzymy pusty element dekoracyjny. */
  content: "";
  /* Musi być blokiem, aby otrzymał szerokość i wysokość. */
  display: block;
  /* Długość złotej kreski. */
  width: 48px;
  /* Grubość kreski. */
  height: 2px;
  /* Odstęp między napisem a kreską. */
  margin-top: 14px;
  /* Kolor złoty używany również w Hero. */
  background-color: #c9a85c;
  /* Delikatnie zaokrąglone końcówki. */
  border-radius: 999px;
}
/* ============================================================
   5. KARTA "WAŻNE"

   Zachowujemy jej lekko cieplejszy charakter.
   ============================================================ */
#g-feature .home-card--wazne {
  /* Bardzo subtelne ciepłe tło. */
  background-color: #fffdf8;
  /* Delikatna złota ramka.
       Jest ledwo zauważalna — karta nie powinna być krzykliwa. */
  border-color: rgba(201, 168, 92, 0.2);
}
/* ============================================================
   6. TELEFONY

   Na telefonie karty będą układały się jedna pod drugą,
   więc nie próbujemy utrzymywać jednakowej wysokości.
   ============================================================ */
@media only all and (max-width: 600px) {
  #g-feature {
    /* Mniejszy odstęp od Hero na telefonie. */
    padding-top: 20px;
    /* Mniejszy odstęp pod sekcją. */
    padding-bottom: 30px;
  }
  #g-feature .home-card {
    /* Każda karta może mieć naturalną wysokość wynikającą
           z ilości swojej treści. */
    height: auto;
  }
  #g-feature .home-card .g-title {
    /* Nieco mniejszy nagłówek na telefonie. */
    font-size: 1.3rem;
    /* Mniejszy odstęp od zawartości. */
    margin-bottom: 26px;
  }
}
/* ============================================================
   M-01 — TECHNICZNE ŹRÓDŁA TREŚCI DLA MODALA MSZY
   Moduły pozostają w HTML, ale nie są widoczne na stronie.
   ============================================================ */
.modal-msze-source {
  display: none;
}
/* ============================================================
   M-02 — MODAL "PORZĄDEK MSZY"

   Ten fragment odpowiada za wygląd i pozycję okna modalnego.
   Samą treść modala pobiera JavaScript z modułów Joomla.
   ============================================================ */
/* ============================================================
   1. GŁÓWNY KONTENER MODALA
   ============================================================ */
.msze-modal {
  /* Modal przykrywa całe okno przeglądarki. */
  position: fixed;
  /* Rozciąga modal na cały ekran. */
  inset: 0;
  /* Modal znajduje się ponad resztą strony. */
  z-index: 9999;
  /* Układ centrujący okno modalne. */
  display: flex;
  /* Wyśrodkowanie poziome. */
  justify-content: center;
  /* Wyśrodkowanie pionowe. */
  align-items: center;
  /* Odstęp od krawędzi ekranu na małych urządzeniach. */
  padding: 24px;
  /* Uwzględnia padding w szerokości. */
  box-sizing: border-box;
}
/* ============================================================
   2. CIEMNE TŁO ZA MODALEM
   ============================================================ */
.msze-modal__backdrop {
  /* Warstwa przykrywająca całą stronę. */
  position: absolute;
  inset: 0;
  /* Przyciemnienie tła.
       Im większa ostatnia wartość, tym ciemniej. */
  background-color: rgba(0, 0, 0, 0.58);
  /* Delikatne rozmycie strony pod spodem. */
  backdrop-filter: blur(2px);
}
/* ============================================================
   3. OKNO MODALNE
   ============================================================ */
.msze-modal__window {
  /* Okno musi być nad przyciemnieniem. */
  position: relative;
  z-index: 2;
  /* Maksymalna szerokość modala. */
  width: min(560px, 100%);
  /* Jasne, lekko ciepłe tło. */
  background-color: #fffdf8;
  /* Zaokrąglone rogi. */
  border-radius: 16px;
  /* Delikatna złota ramka. */
  border: 1px solid rgba(201, 168, 92, 0.25);
  /* Cień unoszący modal nad stroną. */
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
  /* Odstęp wewnątrz okna. */
  padding: 38px 34px 32px 34px;
  /* Ograniczenie wysokości na małych ekranach. */
  max-height: 85vh;
  /* Gdy treści będzie dużo, modal dostanie przewijanie. */
  overflow-y: auto;
  /* Wszystko liczone razem z paddingiem. */
  box-sizing: border-box;
}
/* ============================================================
   4. PRZYCISK ZAMKNIĘCIA
   ============================================================ */
.msze-modal__close {
  /* Przycisk w prawym górnym rogu. */
  position: absolute;
  top: 14px;
  right: 16px;
  /* Usuwamy domyślne tło przycisku. */
  background: transparent;
  /* Bez ramki. */
  border: 0;
  /* Wielkość znaku ×. */
  font-size: 2rem;
  /* Kolor przycisku. */
  color: #245b52;
  /* Kursor wskazuje interaktywność. */
  cursor: pointer;
  /* Linia ma być zwarta. */
  line-height: 1;
}
/* Efekt po najechaniu. */
.msze-modal__close:hover, .msze-modal__close:focus {
  /* Ciemniejszy zielony. */
  color: #1b4039;
}
/* ============================================================
   5. TREŚĆ MODALA
   ============================================================ */
.msze-modal__content {
  /* Tekst wyśrodkowany. */
  text-align: center;
  /* Kolor głównego tekstu. */
  color: #333333;
}
/* Tytuł modułu Joomla, np. "Msze porządek niedzielny". */
.msze-modal__content .g-title {
  /* Rozmiar nagłówka. */
  font-size: 1.6rem;
  /* Pogrubienie. */
  font-weight: 700;
  /* Zielony kolor nagłówka. */
  color: #245b52;
  /* Odstęp pod nagłówkiem. */
  margin-bottom: 22px;
}
/* Złota kreska pod tytułem. */
.msze-modal__content .g-title::after {
  content: "";
  display: block;
  width: 52px;
  height: 2px;
  margin: 14px auto 0 auto;
  background-color: #c9a85c;
  border-radius: 999px;
}
/* Akapity z godzinami lub opisem. */
.msze-modal__content p {
  /* Czytelny rozmiar tekstu. */
  font-size: 1.08rem;
  /* Komfortowa wysokość wiersza. */
  line-height: 1.6;
  /* Odstępy między akapitami. */
  margin: 8px 0;
}
/* Treść porządku Mszy — wyrównanie do lewej */
.msze-modal__content .mod-custom {
  text-align: left;
  max-width: 360px;
  margin-left: auto;
  margin-right: auto;
}
/* ============================================================
   6. TELEFONY
   ============================================================ */
@media only all and (max-width: 600px) {
  .msze-modal {
    /* Mniejszy odstęp od krawędzi ekranu. */
    padding: 14px;
  }
  .msze-modal__window {
    /* Mniejsze paddingi na telefonie. */
    padding: 34px 22px 26px 22px;
    /* Nieco mniejsze zaokrąglenie. */
    border-radius: 13px;
  }
  .msze-modal__content .g-title {
    /* Mniejszy tytuł na telefonie. */
    font-size: 1.4rem;
  }
}
/* ============================================================
   M-03 — TECHNICZNE ŹRÓDŁO TREŚCI DLA MODALA TRANSMISJI
   ============================================================ */
.modal-transmisja-source {
  display: none;
}
/* ============================================================
   HERO — TRANSMISJA NA ŻYWO
   Czytelny tekst po najechaniu
   ============================================================ */
.faustyna-hero__button--outline:hover, .faustyna-hero__button--outline:focus {
  color: #245b52;
}
.faustyna-hero__button--outline:hover i, .faustyna-hero__button--outline:focus i, .faustyna-hero__button--outline:hover span, .faustyna-hero__button--outline:focus span {
  color: #245b52;
}
/* ============================================================
   STRONA GŁÓWNA — NASZA PATRONKA
   Sekcja pod trzema kafelkami:
   zdjęcie po lewej, tekst po prawej
   ============================================================ */
/* Główny układ sekcji */
.faustyna-patronka {
  display: flex;
  align-items: center;
  gap: 70px;
  /* Maksymalna szerokość całej sekcji */
  max-width: 1120px;
  /* Wyśrodkowanie sekcji na stronie */
  margin: 0 auto;
  /* Odstęp góra/dół oraz po bokach */
  padding: 50px 30px 60px;
}
/* ------------------------------------------------------------
   ZDJĘCIE
   ------------------------------------------------------------ */
.faustyna-patronka__image {
  /* Zdjęcie zajmuje mniejszą część sekcji */
  flex: 0 0 260px;
}
.faustyna-patronka__image img {
  display: block;
  /* Zdjęcie dopasowane do szerokości swojej kolumny */
  width: 100%;
  height: auto;
  /* Bardzo delikatne zaokrąglenie */
  border-radius: 4px;
}
/* ------------------------------------------------------------
   CZĘŚĆ TEKSTOWA
   ------------------------------------------------------------ */
.faustyna-patronka__content {
  flex: 1;
  max-width: 560px;
}
/* ------------------------------------------------------------
   MAŁY NAGŁÓWEK — NASZA PATRONKA
   ------------------------------------------------------------ */
.faustyna-patronka__eyebrow {
  /* Odstęp przed głównym tytułem:
       Święta Siostra Faustyna Kowalska. */
  margin-bottom: 14px;
  /* Powiększony napis, aby był wyraźniej widoczny,
       ale nadal pozostawał mniejszy od głównego tytułu. */
  font-size: 1.2rem;
  /* Lekko pogrubiona czcionka. */
  font-weight: 600;
  /* Rozstrzelenie wielkich liter. */
  letter-spacing: 0.12em;
  /* Zieleń używana w projekcie. */
  color: #2f8f83;
}
/* Główny tytuł */
.faustyna-patronka__title {
  margin: 0;
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: 1.1;
  font-weight: 600;
  color: #333333;
}
/* Złota kreska — ten sam motyw co w pozostałych sekcjach */
.faustyna-patronka__line {
  width: 52px;
  height: 2px;
  margin: 24px 0;
  background: #c9a447;
}
/* Tekst zajawki */
.faustyna-patronka__lead {
  max-width: 520px;
  margin: 0 0 28px;
  font-size: 1.05rem;
  line-height: 1.7;
  color: #555555;
}
/* Link do pełnego artykułu */
.faustyna-patronka__link {
  display: inline-block;
  font-weight: 600;
  text-decoration: none;
  color: #2f8f83;
  transition: transform 0.2s ease, color 0.2s ease;
}
/* Delikatny ruch linku po najechaniu */
.faustyna-patronka__link:hover, .faustyna-patronka__link:focus {
  color: #245b52;
  transform: translateX(4px);
}
/* ============================================================
   TABLET / TELEFON
   Zdjęcie przechodzi nad tekst
   ============================================================ */
@media (max-width: 767px) {
  .faustyna-patronka {
    flex-direction: column;
    align-items: flex-start;
    gap: 35px;
    padding: 50px 24px 60px;
  }
  .faustyna-patronka__image {
    /* Usuwamy stałą szerokość kolumny z desktopu */
    flex: none;
    /* Zdjęcie nie będzie zbyt szerokie na telefonie */
    width: min(100%, 260px);
  }
  .faustyna-patronka__content {
    max-width: 100%;
  }
}
/* ============================================================
   H-04 — GALERIA NA STRONIE GŁÓWNEJ

   Moduł Joomla:
   Klasa modułu: home-gallery

   Zadanie:
   - prezentacja 3 najnowszych galerii,
   - trzy kolumny na dużych ekranach,
   - jednakowy rozmiar miniaturek niezależnie od proporcji
     zdjęć źródłowych,
   - dwa kafelki w rzędzie na tabletach,
   - jeden kafelek na telefonach.
   ============================================================ */
/* ------------------------------------------------------------
   NAGŁÓWEK SEKCJI — OSTATNIE GALERIE
   ------------------------------------------------------------ */
.home-gallery > .g-title {
  /* Wielkość nagłówka całej sekcji galerii. */
  font-size: 1.65rem;
  /* Kolor zgodny z głównymi nagłówkami strony. */
  color: #2f2f2f;
  /* Usuwamy zbędny górny margines. */
  margin-top: 0;
  /* Odstęp pomiędzy nagłówkiem a złotą kreską. */
  margin-bottom: 18px;
}
/* Złota kreska pod nagłówkiem. */
.home-gallery > .g-title::after {
  /* Pseudo-element musi mieć treść, aby był widoczny. */
  content: "";
  /* Kreska znajduje się w osobnym wierszu. */
  display: block;
  /* Szerokość złotej kreski. */
  width: 52px;
  /* Grubość kreski. */
  height: 2px;
  /* Kolor złotego akcentu. */
  background: #c7a24b;
  /* Odstęp kreski od napisu. */
  margin-top: 14px;
}
/* ------------------------------------------------------------
   LISTA GALERII
   Joomla generuje tutaj element <ul>.
   Zamieniamy standardową listę na siatkę.
   ------------------------------------------------------------ */
.home-gallery .mod-articles-items {
  /* Trzy równe kolumny na komputerze. */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Odstęp pomiędzy poszczególnymi galeriami. */
  gap: 28px;
  /* Usuwamy standardowe parametry listy <ul>. */
  list-style: none;
  /* Odstęp między nagłówkiem sekcji a galeriami. */
  margin: 28px 0 0;
  padding: 0;
}
/* ------------------------------------------------------------
   POJEDYNCZA GALERIA
   ------------------------------------------------------------ */
.home-gallery .mod-articles-items > li {
  /* Usunięcie ewentualnych marginesów Joomla. */
  margin: 0;
  padding: 0;
}
/* ------------------------------------------------------------
   OBRAZ GALERII
   ------------------------------------------------------------ */
.home-gallery .mod-articles-image {
  /* Stałe proporcje wszystkich miniaturek.
       Dzięki temu pionowe i poziome zdjęcia tworzą
       jeden równy rząd. */
  aspect-ratio: 1.6;
  /* Wszystko wystające poza prostokąt ukrywamy. */
  overflow: hidden;
  /* Delikatnie zaokrąglone narożniki. */
  border-radius: 8px;
  /* Usunięcie domyślnych marginesów elementu figure. */
  margin: 0;
}
/* Właściwy plik graficzny. */
.home-gallery .mod-articles-image img {
  /* Zdjęcie zajmuje cały prostokąt. */
  width: 100%;
  height: 100%;
  /* Najważniejsza właściwość:
       fotografia jest kadrowana, ale NIE deformowana. */
  object-fit: cover;
  /* Kadrowanie zaczynamy od środka fotografii. */
  object-position: center center;
  /* Usunięcie niewielkiej szczeliny charakterystycznej
       dla obrazów wyświetlanych jako inline. */
  display: block;
}
/* ------------------------------------------------------------
   TYTUŁ GALERII
   ------------------------------------------------------------ */
.home-gallery .mod-articles-title {
  /* Odstęp pomiędzy zdjęciem a tytułem. */
  margin: 16px 0 0;
  /* Wielkość tytułu. */
  font-size: 1.08rem;
  /* Czytelna wysokość wiersza przy dłuższych tytułach. */
  line-height: 1.35;
  /* Rezerwujemy miejsce na dwie linie tytułu,
       dzięki czemu wszystkie zdjęcia zaczynają się
       na tej samej wysokości. */
  min-height: 2.7em;
}
/* ------------------------------------------------------------
   TABLETY
   ------------------------------------------------------------ */
@media only all and (max-width: 960px) {
  .home-gallery .mod-articles-items {
    /* Na tablecie dwa elementy w rzędzie. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
}
/* ------------------------------------------------------------
   TELEFONY
   ------------------------------------------------------------ */
@media only all and (max-width: 600px) {
  .home-gallery .mod-articles-items {
    /* Na telefonie galerie jedna pod drugą. */
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
/* ============================================================
   H-05 — STOPKA / KONTAKT
   Trzy kolumny na desktopie, jedna pod drugą na telefonie.
   ============================================================ */
.faustyna-footer-contact {
  /* Trzy równe kolumny. */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  /* Odstęp pomiędzy kolumnami. */
  gap: 48px;
  /* Maksymalna szerokość całej sekcji. */
  max-width: 1120px;
  /* Wyśrodkowanie. */
  margin: 0 auto;
  /* Odstępy wewnętrzne. */
  padding: 50px 30px;
}
/* ------------------------------------------------------------
   POJEDYNCZA KOLUMNA
   ------------------------------------------------------------ */
.faustyna-footer-contact__column {
  min-width: 0;
}
/* Nagłówki: Parafia / Kontakt / Kancelaria */
.faustyna-footer-contact__column h3 {
  margin: 0 0 18px;
  font-size: 1.3rem;
  font-weight: 600;
  color: #2f2f2f;
}
/* Tekst w stopce */
.faustyna-footer-contact__column p {
  margin: 0 0 12px;
  line-height: 1.6;
}
/* Linki, np. e-mail */
.faustyna-footer-contact__column a {
  color: #2f8f83;
  text-decoration: none;
}
.faustyna-footer-contact__column a:hover, .faustyna-footer-contact__column a:focus {
  color: #245b52;
}
/* ============================================================
   TELEFONY
   ============================================================ */
@media only all and (max-width: 700px) {
  .faustyna-footer-contact {
    /* Kolumny układają się pionowo. */
    grid-template-columns: 1fr;
    gap: 30px;
    padding: 40px 24px;
  }
}
/* ============================================================
   H-05 — KOLORY STOPKI

   Ciemne tło nawiązujące do sekcji Hero.
   Jasne teksty zapewniają odpowiedni kontrast.
   ============================================================ */
/* ------------------------------------------------------------
   TŁO CAŁEJ SEKCJI FOOTER
   ------------------------------------------------------------ */
#g-footer {
  /* Ciemny zielono-grafitowy kolor nawiązujący do Hero. */
  background: #101916;
  /* Domyślny jasny kolor tekstu w stopce. */
  color: #d9dfdc;
}
/* ------------------------------------------------------------
   NAGŁÓWKI
   Parafia / Kontakt / Kancelaria
   ------------------------------------------------------------ */
#g-footer .faustyna-footer-contact__column h3 {
  /* Nagłówki wyraźnie jaśniejsze od zwykłego tekstu. */
  color: #ffffff;
}
/* ------------------------------------------------------------
   ZWYKŁY TEKST
   ------------------------------------------------------------ */
#g-footer .faustyna-footer-contact__column p {
  /* Lekko złamana biel — łagodniejsza niż czysta biel. */
  color: #d9dfdc;
}
/* ------------------------------------------------------------
   LINKI
   Adres strony oraz e-mail.
   ------------------------------------------------------------ */
#g-footer .faustyna-footer-contact__column a {
  /* Jaśniejsza wersja zieleni używanej na stronie.
       Na ciemnym tle będzie lepiej widoczna. */
  color: #62b8aa;
  text-decoration: none;
}
/* Efekt po najechaniu myszką. */
#g-footer .faustyna-footer-contact__column a:hover, #g-footer .faustyna-footer-contact__column a:focus {
  /* Jeszcze jaśniejsza zieleń. */
  color: #8bd0c5;
}
/* ------------------------------------------------------------
   COPYRIGHT
   Dolny pasek stopki.
   ------------------------------------------------------------ */
#g-footer .g-copyright {
  /* Delikatnie przygaszony tekst. */
  color: #aeb8b4;
}
/* ============================================================
   H-06 — SUBFEATURE
   Zmniejszenie szarego paska pomiędzy sekcją
   "Nasza Patronka" a stopką.

   Subfeature zawiera techniczne moduły wykorzystywane
   jako źródła treści dla okien modalnych.
   ============================================================ */
#g-subfeature {
  /* Zmniejszamy pionową wysokość szarego separatora. */
  padding-top: 8px;
  padding-bottom: 8px;
}
/*# sourceMappingURL=custom_49.css.map */