/*
Theme Name: Parafia Rzymskokatolicka Najświętszej Maryi Panny Matki Miłosierdzia w Warszawie
Theme URI: https://www.stegny.marianie.pl
Description: Motyw zaprojektowany i wykonany na wyłączność dla Parafii Rzymskokatolickiej Najświętszej Maryi Panny Matki Miłosierdzia w Warszawie (Warszawa-Stegny, Zgromadzenie Księży Marianów). Układ magazynu parafialnego: aktualności i ogłoszenia duszpasterskie, porządek Mszy Świętych i grafik posług, strony wspólnot, transmisje, eTaca. Ułatwienia dostępu (powiększanie tekstu, wysoki kontrast), czcionki na serwerze parafii bez połączeń z usługami zewnętrznymi, wzmocnione zabezpieczenia. Projekt i wykonanie: wlepszastrone.pl.
Author: wlepszastrone.pl
Author URI: https://wlepszastrone.pl
Version: 1.0.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: starter-wls-block
*/

/* --- FONTY (self-hosting, RODO: zero połączeń do Google) ---
   Licencja SIL Open Font License.
   Zakresy latin + latin-ext, bo bez latin-ext znikają polskie znaki. */

@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url( 'assets/fonts/cormorant-garamond-600-latin-ext.woff2' ) format( 'woff2' );
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Cormorant Garamond';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url( 'assets/fonts/cormorant-garamond-600-latin.woff2' ) format( 'woff2' );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url( 'assets/fonts/inter-300-latin-ext.woff2' ) format( 'woff2' );
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url( 'assets/fonts/inter-300-latin.woff2' ) format( 'woff2' );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( 'assets/fonts/inter-400-latin-ext.woff2' ) format( 'woff2' );
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( 'assets/fonts/inter-400-latin.woff2' ) format( 'woff2' );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url( 'assets/fonts/inter-600-latin-ext.woff2' ) format( 'woff2' );
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url( 'assets/fonts/inter-600-latin.woff2' ) format( 'woff2' );
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*
   ZASADA: tutaj trafiają WYŁĄCZNIE detale, których nie da się wyrazić
   w theme.json. Kolory, typografia, odstępy i przyciski należą do theme.json.
   ⚠️ W tym pliku NIE MA ANI JEDNEGO !important. Jeśli kiedyś się pojawi,
   to znaczy, że coś nadpisuje nasze style i trzeba znaleźć przyczynę,
   a nie dokładać siły. To jest miara zdrowia tego motywu.
*/

/* ===================== KAFLE ===================== */

.wls-kafel {
	border: 1px solid var(--wp--preset--color--linia);
	border-radius: 14px;
	height: 100%;
	box-shadow: 0 14px 34px rgba( 22, 36, 63, 0.07 );
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wls-kafel:hover {
	transform: translateY( -6px );
	box-shadow: 0 26px 60px rgba( 22, 36, 63, 0.13 );
}

.wls-kafel ul {
	list-style: none;
	padding-left: 0;
	margin-bottom: 16px;
}

.wls-kafel li {
	display: flex;
	flex-direction: column;
	margin-bottom: 10px;
}

.wls-kafel li:last-child {
	margin-bottom: 0;
}

.wls-kafel li + li {
	padding-top: 10px;
	border-top: 1px dashed var(--wp--preset--color--linia);
}

.wls-kafel strong {
	display: block;
	margin-bottom: 2px;
	color: var(--wp--preset--color--tekst-2);
	font-size: 0.74rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
}

.wls-kafel h2,
.wls-kafel h3 {
	margin-bottom: 14px;
}

.wls-kafel a {
	font-size: 0.88rem;
	font-weight: 600;
}

.wls-kafel a::after {
	content: " →";
	white-space: nowrap;
}

/* Kwadratowa ikona u góry kafla (#46). Na jasnych kaflach granatowy kwadrat
   z białą ikoną; na wyróżnionym (ciemne tło) odwracamy na złoto z granatem,
   żeby ikona nie zniknęła w tle. */
.wls-kafel > .wls-kafel-ikona {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	/* WordPress dla dzieci layoutu constrained wymusza margin-inline: auto
	   z !important (centrowanie). Ikona ma stać przy lewej krawędzi, więc to
	   jedyny przypadek w tym pliku, gdzie odbijamy core jego własną bronią. */
	margin: 0 auto 18px 0 !important;
	background: var(--wp--preset--color--tlo-soft-2);
	color: var(--wp--preset--color--granat);
}

.wls-kafel-ikona svg {
	width: 26px;
	height: 26px;
	display: block;
}

.wls-kafel--wyrozniony .wls-kafel-ikona {
	background: rgba( 255, 255, 255, 0.14 );
	color: #fff;
}

/* Kafel wyróżniony: ciemne tło */

.wls-kafel--wyrozniony {
	background: linear-gradient( 160deg, var(--wp--preset--color--granat-2), var(--wp--preset--color--granat) );
	border: none;
}

/*
 * Wyliczamy poziomy nagłówka jawnie (h2, h3, h4), a nie tylko ten, którego
 * akurat używamy. Nagłówek kafla przeszedł kiedyś z `h3` na `h2` ze względu
 * na hierarchię strony i reguła celująca w sam `h3` przestała działać —
 * granatowy tytuł wylądował na granatowym tle i zniknął.
 */

.wls-kafel--wyrozniony h2,
.wls-kafel--wyrozniony h3,
.wls-kafel--wyrozniony h4,
.wls-kafel--wyrozniony li,
.wls-kafel--wyrozniony p,
.wls-kafel--wyrozniony a {
	color: #fff;
}

.wls-kafel--wyrozniony strong {
	color: var(--wp--preset--color--zloto-jasny);
}

.wls-kafel--wyrozniony li + li {
	border-top-color: rgba( 255, 255, 255, 0.18 );
}

/* Ikony kafli: kwadratowe, w kolorze akcentu, z białą ikoną w środku (#46).
   Znaczniki wstawia wzorzec godziny-otwarcia jako inline SVG (span .wls-kafel-ikona),
   dzięki czemu ikona dziedziczy kolor przez currentColor. Dawny okrągły ::before
   z plików assets/icons/*.svg został zastąpiony. */

/* ===================== HERO ===================== */

.wls-hero {
	position: relative;
	overflow: hidden;
}

.wls-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient( 120deg, rgba( 16, 26, 46, 0.88 ) 0%, rgba( 20, 33, 58, 0.74 ) 48%, rgba( 31, 51, 92, 0.5 ) 100% );
	pointer-events: none;
}

.wls-hero > * {
	position: relative;
	z-index: 2;
}

.wls-hero .wp-block-cover__inner-container {
	max-width: 1180px;
	width: 100%;
	margin: 0 auto;
	padding: 84px 24px 134px;
	text-align: left;
}

/* ⚠️ Hero używa układu PRZEPŁYWOWEGO (layout type: default), nie ograniczonego.
   Powód: dla układu ograniczonego WordPress generuje dzieciom
   `margin-left: auto !important`, przez co element z własnym max-width
   sam się centruje i nie da się go wyrównać do lewej bez własnego !important.
   Szerokość kontenera trzymamy tutaj (max-width 1180px), a nie w atrybucie bloku. */

.wls-hero h1 {
	color: #fff;
	max-width: 820px;
	margin-bottom: 22px;
}

.wls-hero .wls-kicker {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--wp--preset--color--zloto-jasny);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 3px;
	text-transform: uppercase;
	margin-bottom: 20px;
}

.wls-hero .wls-kicker::before {
	content: "";
	width: 42px;
	height: 2px;
	flex: none;
	background: var(--wp--preset--color--zloto);
}

.wls-hero .wls-lead {
	color: rgba( 255, 255, 255, 0.88 );
	font-size: 1.12rem;
	max-width: 620px;
	margin-bottom: 34px;
}

.wls-hero .wp-block-buttons {
	justify-content: flex-start;
}

/* Warianty przycisków. Bazowy kształt i rozmiar: theme.json (elements.button) */

.wls-btn-zloty .wp-block-button__link {
	background-image: linear-gradient( 135deg, var(--wp--preset--color--zloto), var(--wp--preset--color--zloto-jasny) );
	color: #2a2208;
	box-shadow: 0 8px 20px rgba( 194, 153, 47, 0.35 );
}

.wls-btn-zloty .wp-block-button__link:hover {
	box-shadow: 0 12px 28px rgba( 194, 153, 47, 0.5 );
}

.wls-btn-przezroczysty .wp-block-button__link {
	background-color: rgba( 255, 255, 255, 0.12 );
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, 0.55 );
}

.wls-btn-przezroczysty .wp-block-button__link:hover {
	background-color: rgba( 255, 255, 255, 0.22 );
}

.wls-hero .wp-block-button__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* Kafle wchodzą na hero. Selektor sąsiadujący, więc wzorzec użyty
   samodzielnie zachowuje normalny odstęp. */

.wls-hero + .wls-kafle {
	margin-top: -64px;
	position: relative;
	z-index: 5;
}

@media ( max-width: 781px ) {
	.wls-hero .wp-block-cover__inner-container {
		padding: 56px 20px 96px;
	}

	.wls-hero .wls-kicker {
		letter-spacing: 1px;
		font-size: 0.7rem;
	}

	.wls-hero + .wls-kafle {
		margin-top: -48px;
	}
}

/* ===================== NAGŁÓWEK ===================== */

.wls-navbar {
	box-shadow: 0 4px 14px rgba( 22, 36, 63, 0.15 );
	padding-block: 8px;
}

.wls-navbar .wls-logo img {
	height: 42px;
	width: auto;
	display: block;
}

/* Odnośniki menu: białe, ze złotą kreską wjeżdżającą przy najechaniu */
.wls-navbar .wp-block-navigation-item__content,
.wls-navbar .wp-block-navigation-item__content:visited {
	color: #fff;
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 0.3px;
	padding: 6px 0;
	position: relative;
	white-space: nowrap;
	text-decoration: none;
	transition: color 0.2s ease;
}

.wls-navbar .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 2px;
	background: var(--wp--preset--color--zloto);
	transition: width 0.25s ease;
}

.wls-navbar .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--zloto-jasny);
}

.wls-navbar .wp-block-navigation-item__content:hover::after {
	width: 100%;
}

.wls-navbar-cta .wp-block-button__link {
	padding: 8px 20px;
	font-size: 0.86rem;
}

/* Skrócona marka widoczna dopiero w przyklejonym pasku (klasa is-stuck z
   naglowek.js). Poza tym stanem winieta niesie nazwę, więc marki nie ma
   w układzie — nav zostaje wyśrodkowany między pustym lewym marginesem a CTA. */
.wls-navbar-brand {
	display: none;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	color: #fff;
	white-space: nowrap;
}

.wls-navbar.is-stuck .wls-navbar-brand {
	display: flex;
	animation: wls-brand-in 0.25s ease both;
}

@keyframes wls-brand-in {
	from { opacity: 0; transform: translateX( -6px ); }
	to   { opacity: 1; transform: none; }
}

.wls-navbar-brand-logo {
	height: 38px;
	width: auto;
	display: block;
	flex: 0 0 auto;
}

.wls-navbar-brand-txt {
	display: flex;
	flex-direction: column;
	line-height: 1.18;
}

.wls-navbar-brand-txt strong {
	font-size: 0.86rem;
	font-weight: 600;
	letter-spacing: 0.3px;
	color: #fff;
}

.wls-navbar-brand-txt small {
	font-size: 0.7rem;
	color: rgba( 255, 255, 255, 0.72 );
}

.wls-navbar-brand:hover .wls-navbar-brand-txt strong {
	color: var( --wp--preset--color--zloto-jasny );
}

@media ( prefers-reduced-motion: reduce ) {
	.wls-navbar.is-stuck .wls-navbar-brand { animation: none; }
}

/* W stanie przyklejonym pasek mieści markę PO LEWEJ + pełne menu + CTA w jednej
   linii, więc menu i marka są nieco ciaśniejsze niż w winiecie: mniejszy odstęp
   między pozycjami, mniejszy font i brak zawijania. Poza stanem stuck menu
   wraca do normalnych rozmiarów (winieta daje mu całą szerokość). */
.wls-navbar.is-stuck .wp-block-navigation__container {
	gap: 16px;
	flex-wrap: nowrap;
}

.wls-navbar.is-stuck .wp-block-navigation-item__content {
	font-size: 0.82rem;
}

/* Odstęp między marką a menu — bez niego nazwa parafii stykała się z pierwszą
   pozycją („…StegnyOgłoszenia"). */
.wls-navbar.is-stuck .wls-navbar-brand {
	margin-right: 28px;
}

.wls-navbar.is-stuck .wls-navbar-brand-logo { height: 34px; }

.wls-navbar.is-stuck .wls-navbar-brand-txt strong { font-size: 0.8rem; }

.wls-navbar.is-stuck .wls-navbar-brand-txt small { font-size: 0.66rem; }

/* Przycisk menu na telefonie: biały, żeby był widoczny na granacie */
.wls-navbar .wp-block-navigation__responsive-container-open,
.wls-navbar .wp-block-navigation__responsive-container-close {
	color: #fff;
}

/* Pasek nawigacji przykleja się do góry okna.
   ⚠️ position: sticky MUSI być na elemencie <header> części szablonu,
   nie na grupie w środku. Element przyklejony nie może wyjść poza swojego
   rodzica, a rodzic miał dokładnie wysokość paska — więc pasek wyjeżdżał
   ze stroną. Wykryte przy pilocie 17.08.2026. */

/*
 * Dwie miary nagłówka, trzymane w jednym miejscu, bo obie zależą od tej samej
 * rzeczy — wysokości winiety:
 *   --wls-naglowek-nad-paskiem — topbar i winieta razem (to, co odjeżdża),
 *   --wls-pasek-wysokosc       — sam pasek nawigacji (to, co zostaje przyklejone
 *                                i o co trzeba odsunąć skok do kotwicy).
 * Po zmianie wysokości logo w winiecie poprawiamy tylko te dwie liczby.
 */

:root {
	--wls-naglowek-nad-paskiem: 178px;
	--wls-pasek-wysokosc: 72px;
}

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	/* Ujemna wartość = wysokość topbara i winiety. Dzięki temu przy przewijaniu
	   wyjeżdżają one poza ekran, a przyklejony zostaje sam pasek nawigacji.
	   Sticky nie może wyjść poza rodzica, więc musi siedzieć tutaj, nie na pasku. */
	top: calc( -1 * var( --wls-naglowek-nad-paskiem, 178px ) );
	z-index: 50;
}

/* ===================== TOPBAR ===================== */

.wls-topbar {
	font-size: 0.8rem;
	padding-block: 7px;
}

.wls-topbar p {
	margin: 0;
}

.wls-topbar a {
	color: rgba( 255, 255, 255, 0.78 );
	transition: color 0.2s ease;
}

.wls-topbar a:hover {
	color: var(--wp--preset--color--zloto-jasny);
}

.wls-topbar-social {
	gap: 18px;
}

.wls-topbar-tools {
	gap: 16px;
}

/* Ułatwienia dostępu */

.wls-a11y {
	display: flex;
	align-items: center;
	gap: 4px;
}

.wls-a11y-btn {
	background: rgba( 255, 255, 255, 0.1 );
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
	border-radius: 5px;
	cursor: pointer;
	font: inherit;
	font-size: 0.72rem;
	line-height: 1;
	padding: 5px 8px;
	transition: background 0.2s ease;
}

.wls-a11y-btn:hover {
	background: rgba( 255, 255, 255, 0.24 );
}

.wls-a11y-btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.wls-a11y-btn[ data-wls-contrast ] {
	font-size: 0.85rem;
}

/* Szukajka w topbarze */

.wls-topbar .wls-search {
	margin: 0;
}

.wls-topbar .wp-block-search__input {
	border: 1px solid rgba( 255, 255, 255, 0.2 );
	background: rgba( 255, 255, 255, 0.96 );
	color: var(--wp--preset--color--tekst);
	border-radius: 5px;
	padding: 5px 10px;
	font-size: 0.8rem;
	width: 150px;
}

.wls-topbar .wp-block-search__button {
	background: var(--wp--preset--color--zloto);
	color: #2a2208;
	border: none;
	border-radius: 5px;
	padding: 4px 10px;
}

/* ===================== WINIETA ===================== */

.wls-masthead {
	text-align: center;
	padding: 24px 0 20px;
}

.wls-masthead .wls-masthead-logo {
	margin: 0 auto 6px;
}

.wls-masthead .wls-masthead-logo img {
	height: 74px;
	width: auto;
}

.wls-masthead .wls-masthead-name a,
.wls-masthead .wls-masthead-name {
	font-family: 'Cormorant Garamond', Georgia, serif;
	font-weight: 700;
	color: var(--wp--preset--color--granat);
	font-size: clamp( 1.5rem, 3vw, 2.4rem );
	line-height: 1.12;
	letter-spacing: 0.3px;
	text-decoration: none;
	display: block;
	max-width: 780px;
	margin: 0 auto;
}

.wls-masthead .wls-masthead-sub {
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--wp--preset--color--tekst-2);
	font-weight: 600;
	margin-top: 4px;
}

/* ===================== WYSOKI KONTRAST ===================== */

body.wls-hc main,
body.wls-hc main p,
body.wls-hc main li,
body.wls-hc main h1,
body.wls-hc main h2,
body.wls-hc main h3 {
	color: #000;
}

body.wls-hc main .wls-kafel {
	background: #fff;
	border-color: #000;
}

body.wls-hc main a {
	text-decoration: underline;
}

@media ( max-width: 781px ) {
	.wls-topbar-tools {
		gap: 10px;
	}

	.wls-topbar .wp-block-search__input {
		width: 110px;
	}
}

/* ===================== STOPKA ===================== */

.wls-footer h3 {
	color: #fff;
	line-height: 1.25;
	margin-bottom: 12px;
}

.wls-footer .wls-footer-head {
	color: var(--wp--preset--color--zloto-jasny);
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	font-weight: 600;
	font-family: var(--wp--preset--font-family--tekst);
	margin-bottom: 12px;
}

.wls-footer p {
	color: rgba( 255, 255, 255, 0.78 );
	line-height: 1.75;
}

.wls-footer a {
	color: rgba( 255, 255, 255, 0.9 );
	text-decoration: none;
}

.wls-footer a:hover {
	color: var(--wp--preset--color--zloto-jasny);
	text-decoration: underline;
}

.wls-footer .wls-footer-crest {
	margin-top: 18px;
}

.wls-footer .wls-footer-nav a {
	line-height: 2.1;
}

/* Dolny pasek: cienka linia i mniejszy tekst */

.wls-footer-bottom {
	border-top: 1px solid rgba( 255, 255, 255, 0.12 );
	padding-block: 16px;
}

.wls-footer-bottom p {
	color: rgba( 255, 255, 255, 0.6 );
	margin: 0;
	font-size: 0.8rem;
}

.wls-footer-bottom a {
	color: rgba( 255, 255, 255, 0.75 );
}

/* ===================== AKTUALNOŚCI ===================== */

.wls-aktualnosci .wls-sekcja-head {
	border-bottom: 2px solid var(--wp--preset--color--granat);
	padding-bottom: 16px;
	margin-bottom: 34px;
}

/*
 * Nadlinia sekcji — drobny tekst wersalikami.
 *
 * ⚠️ Kolor `zloto` (#c2992f) ma na białym tle kontrast 2.66, a na tle kremowym
 * 2.40. Wymóg WCAG dla zwykłego tekstu to 4.5. Do TEKSTU na jasnym tle służy
 * więc osobny odcień `zloto-tekst` (#81661f, kontrast 4.5 – 5.5 na wszystkich
 * naszych jasnych tłach). Jasne złoto zostaje tam, gdzie jest DEKORACJĄ:
 * kreski, obramowania, tła przycisków — tam próg kontrastu nie obowiązuje.
 *
 * Na ciemnym tle nadlinia dostaje wariant `--jasny` (kontrast 8.06 na granacie).
 */

.wls-eyebrow {
	font-size: 0.76rem;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 600;
	color: var(--wp--preset--color--zloto-tekst);
	margin-bottom: 6px;
}

.wls-aktualnosci h2 {
	font-size: clamp( 2rem, 4vw, 2.9rem );
	margin: 0;
}

/* Plakietka kategorii */

.wls-chip a,
.wls-chip {
	display: inline-block;
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	text-decoration: none;
	color: var(--wp--preset--color--granat);
	background: var(--wp--preset--color--tlo-soft-2);
	border-radius: 20px;
	padding: 3px 10px;
}

.wls-meta {
	font-size: 0.78rem;
	color: var(--wp--preset--color--tekst-2);
	margin: 8px 0 6px;
}

/* Materiał wyróżniony */

.wls-lead-story {
	border: 1px solid var(--wp--preset--color--linia);
	border-radius: 14px;
	padding: 26px 28px;
	margin-bottom: 26px;
	background: var(--wp--preset--color--tlo);
	box-shadow: 0 14px 34px rgba( 22, 36, 63, 0.06 );
}

.wls-lead-story .wls-lead-title {
	font-size: clamp( 1.8rem, 3vw, 2.4rem );
	margin: 8px 0 12px;
}

.wls-lead-story .wls-lead-title a {
	text-decoration: none;
	color: var(--wp--preset--color--granat);
}

/* Dwie karty */

.wls-karty {
	margin-bottom: 26px;
}

.wls-karty .wp-block-post {
	border: 1px solid var(--wp--preset--color--linia);
	border-radius: 12px;
	padding: 20px;
	background: var(--wp--preset--color--tlo);
}

.wls-karty h3 {
	font-size: 1.2rem;
	margin: 0 0 8px;
}

.wls-karty h3 a {
	text-decoration: none;
	color: var(--wp--preset--color--granat);
}

/* Gęsty strumień */

.wls-strumien-head {
	font-size: 0.78rem;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	font-family: var(--wp--preset--font-family--tekst);
	color: var(--wp--preset--color--tekst-2);
	border-bottom: 1px solid var(--wp--preset--color--linia);
	padding-bottom: 10px;
	margin-bottom: 6px;
}

.wls-strumien-item {
	gap: 14px;
	padding: 11px 0;
	border-bottom: 1px dashed var(--wp--preset--color--linia);
}

.wls-strumien-item .wls-meta {
	margin: 0;
	white-space: nowrap;
	min-width: 62px;
}

.wls-strumien-title {
	font-size: 1.3rem;
	margin: 0;
	font-family: var(--wp--preset--font-family--naglowki);
	font-weight: 600;
	line-height: 1.2;
}

.wls-strumien-title a {
	text-decoration: none;
	color: var(--wp--preset--color--tekst);
}

.wls-strumien-title a:hover {
	color: var(--wp--preset--color--blekit);
}

/* Panel boczny */

.wls-widget {
	border: 1px solid var(--wp--preset--color--linia);
	border-radius: 14px;
	padding: 22px 24px;
	margin-bottom: 22px;
	background: var(--wp--preset--color--tlo);
}

.wls-widget h4 {
	font-size: 1.5rem;
	margin: 0 0 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--wp--preset--color--zloto);
}

.wls-widget-kicker {
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	font-weight: 600;
	color: var(--wp--preset--color--zloto-tekst);
	margin: 0 0 4px;
}

.wls-widget--ogloszenia h5 a {
	color: var(--wp--preset--color--granat);
	text-decoration: none;
}

.wls-widget--ogloszenia .wp-block-post-excerpt,
.wls-widget--ogloszenia .wp-block-post-excerpt p,
.wls-widget--ogloszenia p {
	font-size: 0.92rem;
	line-height: 1.55;
}

.wls-widget--ogloszenia h5 {
	font-size: 1rem;
}

/* Data tygodnia liturgicznego nad ogłoszeniami — błękitna, jak we wzorcu. */
.wls-widget--ogloszenia .wls-widget-data {
	color: var(--wp--preset--color--blekit);
	font-weight: 600;
	font-size: 0.82rem;
	margin: 0 0 10px;
}

/* Przycisk „Pobierz biuletyn PDF" na całą szerokość karty. */
.wls-biuletyn-pdf {
	margin-top: 4px;
}

.wls-biuletyn-pdf .wp-block-button,
.wls-biuletyn-pdf .wp-block-button__link {
	width: 100%;
}

.wls-biuletyn-pdf .wp-block-button__link {
	text-align: center;
}

/* Odnośnik „Archiwum biuletynów →" pod przyciskiem. */
.wls-widget-link {
	margin: 12px 0 0;
}

.wls-widget-link a {
	font-size: 0.86rem;
	font-weight: 600;
	color: var(--wp--preset--color--granat);
	text-decoration: none;
}

.wls-widget-link a:hover {
	color: var(--wp--preset--color--blekit);
}

.wls-liturgia-ramka {
	width: 100%;
	height: 460px;
	border: 0;
	display: block;
}

.wls-widget--rss ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.wls-widget--rss li {
	padding: 11px 0 11px 26px;
	position: relative;
	border-bottom: 1px solid var(--wp--preset--color--linia);
	font-size: 0.92rem;
}

.wls-widget--rss li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 13px;
	width: 13px;
	height: 13px;
	background: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23c2992f' d='M8.4 2h3.2v6.4H18v3.2h-6.4V18H8.4v-6.4H2V8.4h6.4z'/%3E%3C/svg%3E" ) no-repeat center / contain;
}

.wls-widget--rss li:last-child {
	border-bottom: none;
}

.wls-widget--rss a {
	text-decoration: none;
	color: var(--wp--preset--color--tekst);
}

.wls-widget--rss a:hover {
	color: var(--wp--preset--color--blekit);
}

.wls-widget--rss .wp-block-rss__item-publish-date {
	display: block;
	font-size: 0.74rem;
	color: var(--wp--preset--color--tekst-2);
}

.wls-widget-nota {
	font-size: 0.78rem;
	color: var(--wp--preset--color--tekst-2);
	margin: 12px 0 0;
}

@media ( max-width: 781px ) {
	.wls-strumien-item {
		flex-wrap: wrap;
		gap: 6px;
	}

	.wls-liturgia-ramka {
		height: 420px;
	}
}

/* ===================== NAGŁÓWEK SEKCJI (wspólny) ===================== */

/*
 * Domyślny nagłówek sekcji: wyśrodkowany, ze złotą kreską pod tytułem.
 * Aktualności mają własny, magazynowy wariant (do lewej, z linią pod całością)
 * i nadpisują tę regułę wyższą specyficznością, bez `!important`.
 */

.wls-sekcja-head {
	text-align: center;
	margin-bottom: 54px;
}

/*
 * Zwezenie naglowka do 660 px z podwyzszona specyficznoscia: uklad "constrained"
 * WordPressa nadaje dzieciom wlasny max-width regula o tej samej wadze co
 * pojedyncza klasa, wiec bez drugiej klasy w selektorze przegralibysmy remis.
 */

.wls-sekcja .wls-sekcja-head,
.wls-partnerzy .wls-sekcja-head {
	max-width: 660px;
}

.wls-sekcja-head h2 {
	position: relative;
	padding-bottom: 18px;
	font-size: clamp( 2rem, 4vw, 2.9rem );
	margin: 0;
}

.wls-sekcja-head h2::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX( -50% );
	width: 56px;
	height: 2px;
	background: linear-gradient( 90deg, var(--wp--preset--color--zloto), var(--wp--preset--color--zloto-jasny) );
}

.wls-sekcja-lead {
	color: var(--wp--preset--color--tekst-2);
	margin-top: 12px;
	font-size: 1.05rem;
}

.wls-eyebrow--jasny {
	color: var(--wp--preset--color--zloto-jasny);
}

/* Wariant magazynowy w aktualnościach — do lewej, bez kreski pod tytułem */

.wls-aktualnosci .wls-sekcja-head {
	text-align: left;
	max-width: none;
	margin-bottom: 34px;
}

.wls-aktualnosci .wls-sekcja-head h2::after {
	content: none;
}

/* Przycisk z obrysem — trzeci wariant obok złotego i przezroczystego */

.wls-btn-obrys .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--granat);
	border: 1.5px solid var(--wp--preset--color--linia);
}

.wls-btn-obrys .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--blekit);
	color: var(--wp--preset--color--blekit);
}

/* ===================== WSPÓLNOTY ===================== */

.wls-wspolnoty-siatka {
	gap: 18px;
}

.wls-wsp-kafel {
	background: var(--wp--preset--color--tlo);
	border: 1px solid var(--wp--preset--color--linia);
	border-radius: 12px;
	padding: 22px 20px;
	min-height: 92px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-family: var(--wp--preset--font-family--naglowki);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--granat);
	margin: 0;
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.wls-wsp-kafel:hover {
	background: var(--wp--preset--color--granat);
	color: var(--wp--preset--color--tlo);
	transform: translateY( -4px );
	box-shadow: 0 14px 34px rgba( 22, 36, 63, 0.16 );
}

/* ===================== CZYTELNIA ===================== */

/*
 * Siatka czytelni ma wlasna szerokosc 900 px — miedzy contentSize (760) a
 * wideSize (1180). Zadna z gotowych szerokosci bloku jej nie da, wiec ustawiamy
 * ja CSS-em i dokladamy druga klase do selektora: regula rdzenia dla ukladu
 * "constrained" siedzi w :where(), czyli ma wage jednej klasy, i przegrywa.
 */

.wls-sekcja .wls-czytelnia-siatka {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.wls-czyt-karta {
	gap: 22px;
	background: var(--wp--preset--color--tlo);
	border: 1px solid var(--wp--preset--color--linia);
	border-top: 3px solid transparent;
	border-radius: 14px;
	padding: 24px;
	height: 100%;
	box-shadow: 0 14px 34px rgba( 22, 36, 63, 0.06 );
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-top-color 0.25s ease;
}

.wls-czyt-karta:hover {
	transform: translateY( -6px );
	border-top-color: var(--wp--preset--color--zloto);
	box-shadow: 0 22px 48px rgba( 22, 36, 63, 0.14 );
}

.wls-czyt-okladka {
	flex: 0 0 104px;
	margin: 0;
}

.wls-czyt-okladka img {
	width: 104px;
	height: auto;
	display: block;
	border-radius: 8px;
	box-shadow: 0 6px 16px rgba( 22, 36, 63, 0.18 );
}

.wls-czyt-tresc {
	flex: 1 1 auto;
	min-width: 0;
}

.wls-czyt-tresc h3 {
	font-size: 1.45rem;
	margin: 0 0 8px;
}

.wls-czyt-tresc p {
	color: var(--wp--preset--color--tekst-2);
	font-size: 0.96rem;
	margin: 0 0 16px;
}

/* ===================== TRANSMISJE ===================== */

.wls-transmisje {
	background: linear-gradient( 160deg, var(--wp--preset--color--granat), var(--wp--preset--color--granat-2) );
	color: var(--wp--preset--color--tlo);
}

.wls-transmisje h2 {
	color: var(--wp--preset--color--tlo);
	font-size: clamp( 2rem, 4vw, 2.8rem );
	margin: 0 0 16px;
}

.wls-transmisje-tekst p {
	color: rgba( 255, 255, 255, 0.82 );
	font-size: 1.05rem;
}

/*
 * Ekran jest atrapą, więc proporcje 16:9 trzyma `aspect-ratio`, a nie sztuczka
 * z paddingiem — nie ma tu żadnego obrazu, który sam narzuciłby wysokość.
 */

.wls-ekran {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 9;
	background-color: #0c1322;
	background-size: cover;
	background-position: center;
	border: 1px solid rgba( 255, 255, 255, 0.14 );
	border-radius: 14px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 26px 60px rgba( 0, 0, 0, 0.4 );
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Przyciemnienie, żeby przycisk play i podpis były czytelne na każdym zdjęciu */

.wls-ekran::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( to bottom, rgba( 12, 19, 34, 0.35 ), rgba( 12, 19, 34, 0.55 ) );
}

.wls-ekran:hover {
	transform: translateY( -3px );
	box-shadow: 0 32px 70px rgba( 0, 0, 0, 0.5 );
}

.wls-ekran:hover .wls-ekran-play {
	transform: scale( 1.08 );
	background: rgba( 194, 153, 47, 1 );
}

.wls-ekran:focus-visible {
	outline: 3px solid var(--wp--preset--color--zloto-jasny);
	outline-offset: 3px;
}

/* Napisy nad przyciemnieniem */

.wls-ekran-live,
.wls-ekran-play,
.wls-ekran-podpis {
	position: relative;
	z-index: 1;
}

.wls-ekran-live {
	position: absolute;
	top: 16px;
	left: 16px;
	margin: 0;
	display: flex;
	align-items: center;
	gap: 7px;
	background: rgba( 220, 38, 38, 0.9 );
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 1px;
	padding: 5px 11px;
	border-radius: 30px;
}

.wls-ekran-live::before {
	content: "";
	width: 8px;
	height: 8px;
	background: #fff;
	border-radius: 50%;
	animation: wls-puls 1.6s infinite;
}

@keyframes wls-puls {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.3; }
}

/* Szanujemy ustawienie systemowe: brak ruchu = brak migającej kropki */

@media ( prefers-reduced-motion: reduce ) {
	.wls-ekran-live::before {
		animation: none;
	}
}

.wls-ekran-play {
	margin: 0;
	font-size: 2.6rem;
	line-height: 1;
	color: #fff;
	width: 86px;
	height: 86px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba( 194, 153, 47, 0.92 );
	border-radius: 50%;
	padding-left: 8px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.4 );
	transition: transform 0.25s ease, background 0.25s ease;
}

.wls-ekran-podpis {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	margin: 0;
	padding: 14px 18px;
	font-size: 0.82rem;
	color: rgba( 255, 255, 255, 0.78 );
	background: linear-gradient( to top, rgba( 0, 0, 0, 0.75 ), transparent );
	text-align: center;
}

/* ===================== eTACA ===================== */

.wls-etaca {
	background:
		linear-gradient( 135deg, rgba( 194, 153, 47, 0.12 ), rgba( 47, 107, 212, 0.08 ) ),
		var(--wp--preset--color--tlo-soft-2);
}

.wls-etaca h2 {
	font-size: clamp( 2rem, 4vw, 2.8rem );
	margin: 0 0 16px;
}

.wls-etaca-tekst p {
	color: var(--wp--preset--color--tekst-2);
	font-size: 1.05rem;
}

.wls-konta {
	background: var(--wp--preset--color--tlo);
	border: 1px solid var(--wp--preset--color--linia);
	border-radius: 14px;
	padding: 30px 32px;
	box-shadow: 0 14px 34px rgba( 22, 36, 63, 0.08 );
}

.wls-konta-head {
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	margin: 0 0 18px;
	color: var(--wp--preset--color--tekst-2);
	font-family: var(--wp--preset--font-family--tekst);
	font-weight: 600;
}

.wls-konto {
	margin: 0 0 16px;
	font-size: 0.95rem;
	color: var(--wp--preset--color--tekst);
}

.wls-konto strong {
	color: var(--wp--preset--color--granat);
}

/* ===================== RODZINA MARIAŃSKA ===================== */

.wls-partnerzy {
	background: var(--wp--preset--color--tlo-soft);
	border-top: 1px solid var(--wp--preset--color--linia);
}

.wls-partnerzy .wls-eyebrow {
	margin-bottom: 28px;
}

.wls-partner {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 132px;
	height: 100%;
	margin: 0;
	padding: 14px 18px;
	background: var(--wp--preset--color--tlo);
	border: 1px solid var(--wp--preset--color--linia);
	border-radius: 12px;
	transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.wls-partner:hover {
	border-color: var(--wp--preset--color--blekit);
	transform: translateY( -4px );
	box-shadow: 0 14px 34px rgba( 22, 36, 63, 0.1 );
}

.wls-partner img {
	max-height: 108px;
	max-width: 100%;
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}

/* ===================== WYSOKI KONTRAST — NOWE SEKCJE ===================== */

body.wls-hc main .wls-wsp-kafel,
body.wls-hc main .wls-czyt-karta,
body.wls-hc main .wls-konta,
body.wls-hc main .wls-partner {
	background: #fff;
	border-color: #000;
}

/* ===================== ZWĘŻENIE EKRANU ===================== */

@media ( max-width: 781px ) {
	.wls-czytelnia-siatka .wp-block-column,
	.wls-etaca .wp-block-column,
	.wls-transmisje .wp-block-column {
		flex-basis: 100%;
	}

	.wls-czyt-karta {
		flex-wrap: wrap;
	}

	.wls-sekcja-head {
		margin-bottom: 36px;
	}

	.wls-konta {
		padding: 24px 22px;
	}
}

/* ===================== SZABLONY: ARCHIWUM, WYSZUKIWARKA, WPIS ===================== */

/* Granatowa belka nad listą wpisów i nad pojedynczym wpisem */

.wls-naglowek-archiwum h1,
.wls-naglowek-wpisu h1 {
	color: var(--wp--preset--color--tlo);
	font-size: clamp( 1.9rem, 3.6vw, 2.8rem );
	margin: 0;
}

.wls-naglowek-archiwum .wp-block-term-description {
	color: rgba( 255, 255, 255, 0.8 );
	margin-top: 12px;
	max-width: 720px;
}

.wls-naglowek-wpisu .wls-meta {
	color: rgba( 255, 255, 255, 0.72 );
	margin: 12px 0 0;
}

/* Archiwum: etykieta kategorii jako nakładka w lewym górnym rogu miniatury
   (wybór użytkownika — jak na stronie wzorcowej). Wyrwana z flow treści, więc
   data i tytuł zaczynają się od samej góry obok zdjęcia. */
.wls-lista-item {
	position: relative;
}

/* Treść wpisu na liście wyrównana do lewej: layout constrained wcinał datę
   i tytuł auto-marginesem (~68px), przez co chip stał lewej od nich. Zerujemy
   margines poziomy, żeby plakietka, data i tytuł miały jedną lewą krawędź. */
.wls-lista-tresc > * {
	margin-left: 0 !important;
	margin-right: 0 !important;
	max-width: 100% !important;
}

.wls-naglowek-wpisu .wls-chip {
	display: block;
	width: fit-content;
	/* Chip jako nadlinia nad WYŚRODKOWANYM tytułem — cały nagłówek wpisu
	   (chip, tytuł, data) trzyma jedną, wyśrodkowaną oś. */
	margin: 0 auto 14px;
}

.wls-naglowek-wpisu {
	text-align: center;
}

/* Duże pole wyszukiwania w belce wyników */

.wls-search-duza {
	max-width: 520px;
	margin-top: 20px;
}

.wls-search-duza .wp-block-search__input {
	border: 1px solid rgba( 255, 255, 255, 0.3 );
	background: rgba( 255, 255, 255, 0.12 );
	color: var(--wp--preset--color--tlo);
	border-radius: 8px;
	padding: 10px 14px;
}

.wls-search-duza .wp-block-search__input::placeholder {
	color: rgba( 255, 255, 255, 0.6 );
}

.wls-search-duza .wp-block-search__button {
	background: var(--wp--preset--color--zloto);
	color: var(--wp--preset--color--granat);
	border: none;
	border-radius: 8px;
	padding: 10px 20px;
	font-weight: 600;
}

/* Lista wpisów — jedna karta na wpis */

.wls-lista .wp-block-post {
	margin-bottom: 22px;
}

.wls-lista-item {
	border: 1px solid var(--wp--preset--color--linia);
	border-left: 3px solid var(--wp--preset--color--zloto);
	border-radius: 12px;
	padding: 24px 26px;
	background: var(--wp--preset--color--tlo);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.wls-lista-item:hover {
	transform: translateY( -3px );
	box-shadow: 0 16px 36px rgba( 22, 36, 63, 0.09 );
}

.wls-lista-item h2 {
	font-size: clamp( 1.3rem, 2.2vw, 1.7rem );
	margin: 0 0 10px;
}

.wls-lista-item h2 a {
	text-decoration: none;
	color: var(--wp--preset--color--granat);
}

.wls-lista-item h2 a:hover {
	color: var(--wp--preset--color--blekit);
}

.wls-lista-item p {
	color: var(--wp--preset--color--tekst-2);
	margin: 0;
}

/* Stronicowanie */

.wls-paginacja {
	gap: 10px;
	margin-top: 34px;
}

.wls-paginacja a,
.wls-paginacja span {
	text-decoration: none;
	padding: 7px 13px;
	border: 1px solid var(--wp--preset--color--linia);
	border-radius: 8px;
	color: var(--wp--preset--color--granat);
	font-size: 0.9rem;
}

.wls-paginacja .current {
	background: var(--wp--preset--color--granat);
	border-color: var(--wp--preset--color--granat);
	color: var(--wp--preset--color--tlo);
}

/* Treść wpisu */

.wls-wpis-obraz img {
	border-radius: 14px;
}

.wls-wpis-tresc h2 {
	margin-top: 34px;
}

.wls-wpis-tresc h3 {
	margin-top: 26px;
}

.wls-wpis-tresc blockquote {
	border-left: 3px solid var(--wp--preset--color--zloto);
	padding-left: 20px;
	font-family: var(--wp--preset--font-family--naglowki);
	font-size: 1.25rem;
	font-style: italic;
	color: var(--wp--preset--color--granat);
}

/* Przejście do sąsiednich wpisów */

.wls-wpis-nawigacja {
	gap: 18px;
}

.wls-wpis-nawigacja .post-navigation-link-previous,
.wls-wpis-nawigacja .post-navigation-link-next {
	font-size: 0.92rem;
	max-width: 46%;
}

.wls-wpis-nawigacja a {
	text-decoration: none;
	color: var(--wp--preset--color--granat);
}

.wls-wpis-nawigacja a:hover {
	color: var(--wp--preset--color--blekit);
}

@media ( max-width: 781px ) {
	.wls-wpis-nawigacja .post-navigation-link-previous,
	.wls-wpis-nawigacja .post-navigation-link-next {
		max-width: 100%;
	}
}

/* ===================== KOTWICE A PRZYKLEJONY PASEK ===================== */

/*
 * Menu prowadzi do kotwic na stronie głównej (#msze, #wspolnoty, #czytelnia…).
 * Bez odsunięcia cel wjeżdża pod przyklejony pasek nawigacji i użytkownik
 * ląduje w połowie nagłówka sekcji.
 *
 * `scroll-margin-top` załatwia to na poziomie przeglądarki — działa tak samo
 * przy kliknięciu, przy skoku z klawiatury i przy wejściu z zewnętrznego
 * odnośnika z kotwicą. Obejścia w JavaScripcie zwykle łapią tylko kliknięcie.
 *
 * Wartość: wysokość samego paska nawigacji (winieta i topbar odjeżdżają w górę).
 */

.wp-site-blocks [id].wp-block-group {
	scroll-margin-top: var( --wls-pasek-wysokosc, 72px );
}

/* Płynne przewijanie, ale nie wbrew ustawieniu systemowemu */

@media ( prefers-reduced-motion: no-preference ) {
	html {
		scroll-behavior: smooth;
	}
}

.wls-strumien-wiecej {
	margin-top: 26px;
}

/* ===================== PODSTRONY TREŚCIOWE ===================== */

.wls-naglowek-strony h1 {
	color: var(--wp--preset--color--tlo);
	font-size: clamp( 1.9rem, 3.6vw, 2.8rem );
	margin: 0;
}

.wls-strona-tresc h2 {
	font-size: clamp( 1.5rem, 2.6vw, 2rem );
	margin-top: 46px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--wp--preset--color--linia);
}

.wls-strona-tresc h3 {
	font-size: 1.35rem;
	margin-top: 32px;
	color: var(--wp--preset--color--granat-2);
}

.wls-strona-tresc h4 {
	font-family: var(--wp--preset--font-family--tekst);
	font-size: 0.82rem;
	text-transform: uppercase;
	letter-spacing: 1.4px;
	color: var(--wp--preset--color--tekst-2);
	margin-top: 26px;
}

.wls-strona-tresc p,
.wls-strona-tresc li {
	line-height: 1.75;
}

.wls-strona-tresc ul,
.wls-strona-tresc ol {
	padding-left: 1.15em;
}

.wls-strona-tresc li {
	margin-bottom: 8px;
}

/* Tabele godzin i grafików — muszą się zwijać na telefonie, a nie rozpychać strony */

.wls-strona-tresc .wp-block-table {
	overflow-x: auto;
}

.wls-strona-tresc table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.95rem;
}

.wls-strona-tresc th {
	background: var(--wp--preset--color--granat);
	color: var(--wp--preset--color--tlo);
	text-align: left;
	font-family: var(--wp--preset--font-family--tekst);
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 11px 14px;
}

.wls-strona-tresc td {
	border-bottom: 1px solid var(--wp--preset--color--linia);
	padding: 11px 14px;
	vertical-align: top;
}

.wls-strona-tresc tbody tr:nth-child( even ) td {
	background: var(--wp--preset--color--krem);
}

/* Ramka na informację wyróżnioną (dane kontaktowe, ostrzeżenia, telefony zaufania) */

.wls-ramka {
	background: var(--wp--preset--color--tlo-soft);
	border: 1px solid var(--wp--preset--color--linia);
	border-left: 3px solid var(--wp--preset--color--zloto);
	border-radius: 12px;
	padding: 24px 26px;
	margin: 30px 0;
}

.wls-ramka > :first-child {
	margin-top: 0;
}

.wls-ramka > :last-child {
	margin-bottom: 0;
}

.wls-ramka h3,
.wls-ramka h4 {
	margin-top: 0;
}

.wls-ramka--pilne {
	background: #fdf3f3;
	border-left-color: #c0392b;
}

/* Lista dokumentów do sakramentu — wyraźniejsza niż zwykły punktor */

.wls-dokumenty li {
	margin-bottom: 10px;
}

/* Wizytówka osoby: nazwisko plus funkcja */

.wls-osoby {
	list-style: none;
	padding-left: 0;
}

.wls-osoby li {
	padding: 10px 0;
	border-bottom: 1px dashed var(--wp--preset--color--linia);
}

.wls-osoby strong {
	color: var(--wp--preset--color--granat);
}

@media ( max-width: 781px ) {
	.wls-strona-tresc h2 {
		margin-top: 34px;
	}

	.wls-ramka {
		padding: 20px 18px;
	}
}

/* ===================== ROZWIJANE PODMENU ===================== */

/*
 * Pasek nawigacji jest granatowy i dziedziczy biały tekst. Rozwijane podmenu
 * WordPress rysuje na własnym, jasnym tle — bez tej sekcji wychodzi biały tekst
 * na białym tle. Ustawiamy kolory jawnie na kontenerze podmenu, żeby nie zależeć
 * od dziedziczenia z paska.
 */

.wls-navbar .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--tlo);
	border: 1px solid var(--wp--preset--color--linia);
	border-top: 3px solid var(--wp--preset--color--zloto);
	border-radius: 0 0 10px 10px;
	box-shadow: 0 18px 40px rgba( 22, 36, 63, 0.22 );
	min-width: 248px;
	padding: 6px 0;
}

.wls-navbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--tekst);
	display: block;
	padding: 9px 20px;
	font-size: 0.9rem;
}

.wls-navbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--blekit);
	background: var(--wp--preset--color--krem);
}

/* Złota kreska spod pozycji paska nie ma sensu w rozwijanej liście */

.wls-navbar .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	content: none;
}

/* Strzałka przy pozycji rozwijanej — biała jak reszta paska */

.wls-navbar .wp-block-navigation__submenu-icon {
	color: currentColor;
	fill: currentColor;
}

/*
 * Menu mobilne: WordPress otwiera je jako nakładkę na pełny ekran, na własnym
 * jasnym tle. Odnośniki muszą wtedy zmienić kolor na ciemny, inaczej znikają.
 */

.wls-navbar .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--wp--preset--color--tlo);
	padding: 28px 24px;
}

.wls-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wls-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--granat);
	font-size: 1.05rem;
	padding: 10px 0;
}

.wls-navbar .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: none;
	box-shadow: none;
	padding-left: 16px;
}

.wls-navbar .wp-block-navigation__responsive-container-close,
.wls-navbar .wp-block-navigation__responsive-container-open {
	color: currentColor;
}

/* Kafel wspólnoty jest teraz odnośnikiem — cała jego powierzchnia ma być klikalna */

.wls-wsp-kafel a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

.wls-wsp-wiecej {
	margin-top: 30px;
}

/* Spis wspólnot na początku strony działu */

.wls-spis p {
	line-height: 2;
	font-size: 0.95rem;
}

.wls-wsp-dane {
	margin-bottom: 34px;
}

/* Spis albumów galerii */

.wls-galeria {
	list-style: none;
	padding-left: 0;
}

.wls-galeria li {
	padding: 11px 0;
	border-bottom: 1px dashed var(--wp--preset--color--linia);
}

.wls-galeria a {
	text-decoration: none;
	color: var(--wp--preset--color--granat);
	font-weight: 500;
}

.wls-galeria a:hover {
	color: var(--wp--preset--color--blekit);
}

.wls-galeria-data {
	color: var(--wp--preset--color--tekst-2);
	font-size: 0.85rem;
	white-space: nowrap;
}

/* ===================== ZDJĘCIA WYRÓŻNIAJĄCE ===================== */

/*
 * Wpisy przeniesione z Bloggera mają zdjęcia w bardzo różnych proporcjach —
 * od plakatów w pionie po panoramy. Kadrowanie przez `aspectRatio` na bloku
 * plus `object-fit: cover` daje równe karty niezależnie od tego, co redaktor
 * wgra następnym razem.
 */

.wls-lead-obraz {
	margin-bottom: 18px;
}

.wls-lead-obraz img,
.wls-karta-obraz img,
.wls-lista-obraz img {
	border-radius: 10px;
	object-fit: cover;
	width: 100%;
}

.wls-karta-obraz {
	margin-bottom: 14px;
}

/* Lista wpisów: miniatura obok treści */

.wls-lista-item {
	gap: 22px;
	align-items: flex-start;
}

.wls-lista-obraz {
	flex: 0 0 200px;
	max-width: 200px;
	margin: 0;
}

.wls-lista-tresc {
	flex: 1 1 auto;
	min-width: 0;
}

.wls-lista-tresc > :first-child {
	margin-top: 0;
}

/* Wpis bez zdjęcia nie może zostawiać dziury po miniaturze */

.wls-lista-item > .wls-lista-obraz:empty {
	display: none;
}

/* Zdjęcia w treści wpisu */

.wls-wpis-zdjecie img {
	border-radius: 12px;
}

.wls-wpis-tresc .wp-block-image {
	margin-top: 26px;
	margin-bottom: 26px;
}

/* Osadzone filmy z YouTube w treści wpisu — proporcje 16:9 na każdym ekranie */

.wls-wpis-tresc iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: 12px;
	display: block;
}

@media ( max-width: 781px ) {
	.wls-lista-item {
		flex-wrap: wrap;
		gap: 14px;
	}

	.wls-lista-obraz {
		flex-basis: 100%;
		max-width: 100%;
	}
}

/* Grafik dyżurów: wąska pierwsza kolumna z godziną, reszta na nazwiska */

.wls-grafik td:first-child {
	white-space: nowrap;
	font-weight: 600;
	color: var(--wp--preset--color--granat);
	width: 1%;
}

.wls-grafik {
	margin-bottom: 30px;
}

/* ===================== OGNISKOWANIE KLAWIATURĄ ===================== */

/*
 * Osoba poruszająca się po stronie tabulatorem musi widzieć, gdzie jest.
 * Domyślny obrys przeglądarki bywa niewidoczny na ciemnym tle i znika, gdy
 * jakikolwiek arkusz ustawi `outline: none`.
 *
 * `:focus-visible` zamiast `:focus` — obrys pokazuje się przy nawigacji
 * klawiaturą, a nie po kliknięciu myszą. Dwa obrysy jeden na drugim (ciemny
 * i jasny) dają widoczność na każdym tle, bez dobierania koloru do sekcji.
 */

.wp-site-blocks a:focus-visible,
.wp-site-blocks button:focus-visible,
.wp-site-blocks input:focus-visible,
.wp-site-blocks select:focus-visible,
.wp-site-blocks textarea:focus-visible,
.wp-site-blocks [tabindex]:focus-visible {
	outline: 3px solid var(--wp--preset--color--blekit-jasny);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Drugi obrys pod spodem — gwarantuje widoczność na jasnym tle */

.wp-site-blocks a:focus-visible,
.wp-site-blocks button:focus-visible {
	box-shadow: 0 0 0 5px rgba( 22, 36, 63, 0.55 );
}

/* Odnośnik „przejdź do treści" — widoczny dopiero po naciśnięciu tabulatora */

.wls-pomin-do-tresci {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 22px;
	background: var(--wp--preset--color--granat);
	color: var(--wp--preset--color--tlo);
	text-decoration: none;
	border-radius: 0 0 10px 0;
	font-weight: 600;
}

.wls-pomin-do-tresci:focus {
	left: 0;
}

/*
 * Kotwica celu dla tego odnośnika nie może wjechać pod przyklejony pasek —
 * ten sam problem, co przy kotwicach sekcji.
 */

.wp-site-blocks main:focus {
	outline: none;
	scroll-margin-top: var( --wls-pasek-wysokosc, 72px );
}

/* ===================== FORMULARZ KONTAKTOWY ===================== */

.wls-formularz {
	max-width: 720px;
	margin: 0 auto;
	background: var(--wp--preset--color--tlo);
	border: 1px solid var(--wp--preset--color--linia);
	border-radius: 14px;
	padding: 34px 36px;
	box-shadow: 0 14px 34px rgba( 22, 36, 63, 0.07 );
}

.wls-formularz-legenda {
	font-size: 0.82rem;
	color: var(--wp--preset--color--tekst-2);
	margin: 0 0 22px;
}

.wls-formularz-wiersz {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 22px;
}

.wls-pole {
	margin: 0 0 18px;
}

.wls-pole label {
	display: block;
	font-family: var(--wp--preset--font-family--tekst);
	font-size: 0.82rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.8px;
	color: var(--wp--preset--color--tekst-2);
	margin-bottom: 7px;
}

.wls-pole input[type="text"],
.wls-pole input[type="email"],
.wls-pole input[type="tel"],
.wls-pole select,
.wls-pole textarea {
	width: 100%;
	font-family: var(--wp--preset--font-family--tekst);
	font-size: 1rem;
	color: var(--wp--preset--color--tekst);
	background: var(--wp--preset--color--krem);
	border: 1px solid var(--wp--preset--color--linia);
	border-radius: 10px;
	padding: 12px 14px;
	transition: border-color 0.2s ease, background 0.2s ease;
}

.wls-pole input[type="text"]:hover,
.wls-pole input[type="email"]:hover,
.wls-pole input[type="tel"]:hover,
.wls-pole select:hover,
.wls-pole textarea:hover {
	border-color: var(--wp--preset--color--tekst-2);
}

.wls-pole input:focus,
.wls-pole select:focus,
.wls-pole textarea:focus {
	background: var(--wp--preset--color--tlo);
	border-color: var(--wp--preset--color--blekit);
}

.wls-pole textarea {
	resize: vertical;
	min-height: 150px;
	line-height: 1.6;
}

/* Zgoda: pole wyboru obok tekstu, etykieta klikalna na całej długości */

.wls-pole--zgoda label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 11px;
	align-items: start;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 400;
	font-size: 0.92rem;
	color: var(--wp--preset--color--tekst);
	line-height: 1.55;
	cursor: pointer;
}

.wls-pole--zgoda input {
	width: 19px;
	height: 19px;
	margin-top: 2px;
	accent-color: var(--wp--preset--color--granat);
}

.wls-formularz-nota {
	font-size: 0.84rem;
	color: var(--wp--preset--color--tekst-2);
	margin: 0 0 24px;
}

/*
 * Pole pułapka na boty. Nie używamy `display: none` — część automatów pomija
 * pola ukryte tą własnością. Wypychamy je poza ekran i odbieramy z kolejności
 * tabulatora, więc człowiek nigdy na nie nie trafi, a bot owszem.
 */

.wls-pulapka {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.wls-formularz-wyslij {
	margin: 0;
}

.wls-przycisk-zloty {
	font-family: var(--wp--preset--font-family--tekst);
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--wp--preset--color--granat);
	background: linear-gradient( 135deg, var(--wp--preset--color--zloto), var(--wp--preset--color--zloto-jasny) );
	border: none;
	border-radius: 40px;
	padding: 14px 34px;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wls-przycisk-zloty:hover {
	transform: translateY( -2px );
	box-shadow: 0 12px 28px rgba( 194, 153, 47, 0.45 );
}

/* Komunikat o wyniku wysyłki */

.wls-komunikat {
	max-width: 720px;
	margin: 0 auto 22px;
	padding: 16px 20px;
	border-radius: 12px;
	font-size: 0.96rem;
	border-left: 3px solid;
}

.wls-komunikat--ok {
	background: #eef7ef;
	border-left-color: #2f7d3a;
	color: #1e5527;
}

.wls-komunikat--blad {
	background: #fdf3f3;
	border-left-color: #c0392b;
	color: #8f2a1f;
}

@media ( max-width: 781px ) {
	.wls-formularz {
		padding: 26px 20px;
	}

	.wls-formularz-wiersz {
		grid-template-columns: 1fr;
	}
}

/* ===================== MAPA DOJAZDU ===================== */

/*
 * Mapa ładuje się DOPIERO PO KLIKNIĘCIU.
 *
 * Osadzona mapa Google odpytuje serwery Google przy każdym wejściu na stronę,
 * zanim ktokolwiek o cokolwiek poprosi — czyli przekazuje dane odwiedzającego
 * bez jego zgody. Ten sam problem mieliśmy przy fontach i rozwiązaliśmy go
 * tak samo: nic nie ładuje się samo.
 *
 * Po kliknięciu wstawiamy OpenStreetMap, który nie stawia ciasteczek ani nie
 * profiluje. Odnośniki do nawigacji zostają — kliknięcie w nie jest świadomą
 * decyzją użytkownika.
 */

.wls-mapa {
	position: relative;
	border: 1px solid var(--wp--preset--color--linia);
	border-radius: 14px;
	overflow: hidden;
	background: var(--wp--preset--color--tlo-soft-2);
	margin: 26px 0;
}

.wls-mapa-zaslona {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 320px;
	padding: 34px 26px;
	text-align: center;
}

.wls-mapa-zaslona p {
	margin: 0;
	max-width: 460px;
	color: var(--wp--preset--color--tekst-2);
	font-size: 0.93rem;
	line-height: 1.6;
}

.wls-mapa-zaslona strong {
	display: block;
	font-family: var(--wp--preset--font-family--naglowki);
	font-size: 1.3rem;
	color: var(--wp--preset--color--granat);
	margin-bottom: 4px;
}

.wls-mapa iframe {
	display: block;
	width: 100%;
	height: 420px;
	border: 0;
}

.wls-mapa-nawigacja {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	justify-content: center;
	margin: 0 0 6px;
	font-size: 0.9rem;
}

/* ===================== SZLIF WIZUALNY — PARTIA 1 ===================== */

/*
 * Poprawki po obejrzeniu strony na zrzutach ekranu. Każda ma powód, który
 * widać: nierówne kafle, wiszące odnośniki, ostre rogi w morzu zaokrągleń.
 */

/* --- Kafle: odnośnik zawsze przy dolnej krawędzi ---------------------------
 *
 * Trzy kafle mają różną ilość treści, ale równą wysokość (kolumny się
 * rozciągają). Bez tego odnośnik „Grafik mszy" wisiał w połowie karty,
 * a „Kontakt" siedział przy dnie — trzy karty, trzy różne wysokości stopki.
 * Kolumna flex plus `margin-top: auto` na ostatnim akapicie ustawia je w rzędzie.
 */

.wls-kafel {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/*
 * ⚠️ Bez tej jednej linijki nagłówki kafli wyskakują na środek.
 *
 * Układ „constrained" WordPressa nadaje dzieciom `margin-left: auto` oraz
 * `margin-right: auto` — i to z `!important`. Dopóki kafel był blokiem, nie
 * miało to znaczenia. W kolumnie flex element o szerokości własnej treści
 * (nagłówek, lista) zostaje przez te marginesy wyśrodkowany.
 *
 * Nie walczymy z rdzeniem o marginesy — odbieramy im pole do popisu, dając
 * dzieciom pełną szerokość. Wtedy `auto` nie ma czego rozdzielić.
 */

.wls-kafel > * {
	width: 100%;
}

.wls-kafel > p:last-child {
	margin-top: auto;
	padding-top: 18px;
}

/* Odnośnik w kaflu ma być decyzją projektu, nie domyślnym niebieskim linkiem */

.wls-kafel a {
	color: var(--wp--preset--color--granat);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--zloto-deko, #c2992f);
	padding-bottom: 2px;
	transition: color 0.2s ease, border-color 0.2s ease;
}

.wls-kafel a:hover {
	color: var(--wp--preset--color--blekit);
	border-bottom-color: var(--wp--preset--color--blekit);
}

.wls-kafel--wyrozniony a {
	color: var(--wp--preset--color--zloto-jasny);
	border-bottom-color: rgba( 217, 184, 90, 0.5 );
}

.wls-kafel--wyrozniony a:hover {
	color: #fff;
	border-bottom-color: #fff;
}

/* --- Szukajka i przyciski dostępności: zaokrąglenia jak reszta strony ------
 *
 * Wszystko na stronie jest zaokrąglone, a pole wyszukiwania miało ostre rogi
 * i wyglądało jak element wklejony z innego projektu.
 */

.wls-topbar .wp-block-search__inside-wrapper {
	border-radius: 8px;
	overflow: hidden;
	border: 1px solid rgba( 255, 255, 255, 0.18 );
}

.wls-topbar .wp-block-search__input {
	border: none;
	background: rgba( 255, 255, 255, 0.96 );
	padding: 7px 12px;
	font-size: 0.86rem;
}

.wls-topbar .wp-block-search__button {
	border-radius: 0;
	margin: 0;
	padding: 7px 14px;
}

.wls-a11y-btn {
	border-radius: 7px;
}

/* --- Typografia: łamanie wierszy w nagłówkach -----------------------------
 *
 * „Parafia Najświętszej Maryi Panny Matki / Miłosierdzia" łamało się tak, że
 * w drugim wierszu zostawało jedno słowo. `balance` rozkłada wiersze równo.
 */

.wls-masthead-name,
.wls-hero h1,
.wls-sekcja-head h2,
.wls-lead-title,
.wls-naglowek-strony h1,
.wls-naglowek-archiwum h1 {
	text-wrap: balance;
}

.wls-sekcja-lead,
.wls-hero .wls-lead {
	text-wrap: pretty;
}

/* --- Aktualności: karty równej wysokości ----------------------------------
 *
 * Dwie karty pod materiałem wyróżnionym miały różną wysokość, bo jedna ma
 * zdjęcie, a druga nie. W siatce wyglądało to jak usterka.
 */

.wls-karty .wp-block-post {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.wls-karty .wp-block-post > p:last-child {
	margin-bottom: 0;
}

.wls-karty .wls-karta-obraz {
	margin-bottom: 14px;
}

/* Karta bez zdjęcia nie może zostawiać pustego miejsca po obrazku */

.wls-karty .wls-karta-obraz:empty {
	display: none;
}

/* --- Panel boczny: data pod nadlinią, nie nad tytułem ---------------------- */

.wls-widget--ogloszenia h5 {
	font-size: 1.05rem;
	line-height: 1.3;
	margin: 0 0 8px;
}

/* --- Ramka liturgii z Opoki: wtopienie w kartę ---------------------------
 *
 * Treść ramki pochodzi z obcego serwisu i ma własne style, których nie da się
 * zmienić. Można za to poprawić samą ramkę: białe tło i zaokrąglenie sprawiają,
 * że wygląda jak część karty, a nie jak okno wstawione na siłę.
 */

.wls-liturgia-ramka {
	background: #fff;
	border-radius: 10px;
}

/* --- Materiał wyróżniony: mniej agresywne kadrowanie ----------------------
 *
 * Plakaty parafialne są pionowe. Przycinanie ich do panoramy 16:9 ucinało
 * z nich najważniejszą część. Proporcja 3:2 zostawia więcej.
 */

.wls-lead-obraz img {
	aspect-ratio: 3 / 2;
}

/* ===================== TELEFON — ZATRZYMANIE PRZEWIJANIA W BOK ============ */

/*
 * 🔴 Najpoważniejszy błąd wyłapany na zrzucie z szerokości 390 px: strona
 * przewijała się w bok, a treść była ucięta przy prawej krawędzi — podtytuł
 * w winiecie, nadlinia hero, przycisk „Aktualności", szukajka.
 *
 * Przyczyny były dwie i obie trzeba było usunąć:
 *
 *   1. `styles.spacing.padding` w theme.json miał zero po bokach. Na dużym
 *      ekranie nie widać, bo kontener ma swój max-width i margines zostaje.
 *      Na telefonie kontener równa się szerokości ekranu i treść dotyka szkła.
 *      Naprawione w theme.json: `clamp(20px, 5vw, 48px)`.
 *
 *   2. Górny pasek trzymał odnośniki, przyciski dostępności i szukajkę
 *      w jednym rzędzie bez zawijania. Ich najmniejsza możliwa szerokość
 *      przekraczała 390 px, więc **rozpychały cały dokument** — i przez to
 *      ucięta była nie tylko szukajka, ale wszystko poniżej.
 *
 * ⚠️ LEKCJA Z NARZĘDZIA, nie z kodu: Chrome bez okna **nie schodzi z oknem
 * poniżej około 500 px**. Zrzut przy `--window-size=390` pokazuje układ dla
 * 500 px przycięty do 390 — wygląda dokładnie jak przepełnienie, którym nie
 * jest. Szerokość mierzymy stroną pomiarową w ramce 390 px
 * (`narzedzia/pomiar-szerokosci.html`), a nie oglądaniem zrzutu.
 */

/*
 * ⚠️ ŚWIADOMIE NIE MA TU `overflow-x: clip` NA `.wp-site-blocks`.
 *
 * Kusi, bo jednym wierszem „naprawia" przewijanie w bok. W rzeczywistości
 * niczego nie naprawia — chowa treść, która wystaje, i **ukrywa przyszłe
 * usterki**, zamiast pozwolić je zauważyć. Pomiar szerokości (patrz niżej)
 * przestaje wtedy mówić prawdę, bo `scrollWidth` równa się szerokości okna
 * niezależnie od tego, co siedzi w środku.
 *
 * Zamiast tego trzymamy przyczyny w ryzach: `min-width: 0` na dzieciach
 * układów elastycznych, własne przewijanie dla tabel, `max-width` dla obrazów
 * i ramek.
 */

@media ( max-width: 781px ) {

	/* Górny pasek: dwa rzędy zamiast jednego rozpychającego */

	.wls-topbar > .wp-block-group {
		flex-wrap: wrap;
		gap: 10px;
		justify-content: center;
	}

	.wls-topbar-social,
	.wls-topbar-tools {
		flex-wrap: wrap;
		justify-content: center;
	}

	.wls-topbar {
		padding-block: 10px;
	}

	/*
	 * Social (Facebook/YouTube) chowamy — te same odnośniki są w stopce, a na
	 * telefonie topbar ma być jednym zwartym rzędem, nie trzema.
	 */

	.wls-topbar-social {
		display: none;
	}

	/* Przyciski dostępności i szukajka w jednym rzędzie */

	.wls-topbar > .wp-block-group {
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 10px;
	}

	.wls-topbar-tools {
		flex-wrap: nowrap;
		gap: 8px;
		flex: 1 1 auto;
		justify-content: flex-end;
	}

	/* Szukajka zwężona — mieści się obok przycisków, bez rozpychania */

	.wls-topbar .wls-search {
		flex: 1 1 auto;
		max-width: 180px;
		min-width: 0;
	}

	.wls-topbar .wp-block-search__input {
		width: auto;
		flex: 1 1 auto;
		min-width: 0;
		font-size: 0.82rem;
	}

	/* Winieta: mniejsze logo i nazwa, żeby nagłówek nie zjadał pół ekranu */

	.wls-masthead {
		padding-block: 20px;
	}

	.wls-masthead-logo img {
		width: 58px;
		height: auto;
	}

	.wls-masthead-name {
		font-size: 1.45rem;
		line-height: 1.15;
	}

	.wls-masthead-sub {
		font-size: 0.66rem;
		letter-spacing: 1.2px;
	}

	/* Hero: nadlinia bez kreski, bo w dwóch wierszach wygląda jak usterka */

	.wls-hero .wls-kicker::before {
		display: none;
	}

	.wls-hero h1 {
		font-size: clamp( 1.9rem, 8vw, 2.6rem );
	}

	/* Przyciski hero jeden pod drugim, pełna szerokość — łatwiej trafić palcem */

	.wls-hero .wp-block-buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.wls-hero .wp-block-button__link {
		display: block;
		text-align: center;
	}

	/* Kafle: oddech od krawędzi i mniejsze nachodzenie na zdjęcie */

	.wls-kafel {
		padding: 26px 22px;
	}
}

/* --- Bardzo wąskie ekrany (starsze telefony) ------------------------------ */

@media ( max-width: 400px ) {
	.wls-topbar-social {
		display: none;
	}

	.wls-masthead-name {
		font-size: 1.28rem;
	}
}

/* ===================== PRZEPEŁNIENIE W POZIOMIE — NAPRAWA ================= */

/*
 * 🔴 Objaw: na telefonie strona przewijała się w bok, a treść była ucięta przy
 * prawej krawędzi — podtytuł winiety, nadlinia hero, szukajka, tabele.
 *
 * Przyczyna nie była jedna. Elementy w układzie flex i grid mają domyślnie
 * `min-width: auto`, czyli **nie kurczą się poniżej swojej najmniejszej
 * możliwej szerokości**. Długie pole wyszukiwania, szeroka tabela albo
 * rozwijane menu potrafią przez to rozepchnąć cały dokument — i wtedy ucięte
 * jest wszystko, nie tylko winowajca. Stąd mylące poszukiwania: wygląda, jakby
 * psuł się hero, a hero tylko dziedziczy szerokość rozepchniętego rodzica.
 *
 * Lekarstwem jest `min-width: 0` na dzieciach układów elastycznych. To nie jest
 * zaklejanie problemu — to przywrócenie im prawa do zwężenia się.
 */

.wls-topbar .wp-block-group,
.wls-navbar .wp-block-group,
.wls-topbar-social,
.wls-topbar-tools {
	min-width: 0;
}

/* Pole wyszukiwania musi móc się zwęzić razem z paskiem */

.wls-topbar .wls-search,
.wls-topbar .wp-block-search__inside-wrapper,
.wls-topbar .wp-block-search__input {
	min-width: 0;
	max-width: 100%;
}

/*
 * Rozwijane menu: przy zamkniętym menu mobilnym WordPress trzyma pełną listę
 * w kontenerze, który potrafi być szerszy od ekranu.
 */

.wls-navbar .wp-block-navigation__responsive-container:not(.is-menu-open) {
	max-width: 100%;
}

.wls-navbar .wp-block-navigation__submenu-container {
	max-width: calc( 100vw - 32px );
}

/*
 * Tabele: godziny Mszy i grafik dyżurów mają wiersze, które nie zwężą się
 * poniżej najdłuższej komórki. Muszą przewijać się WEWNĄTRZ swojej ramki,
 * a nie rozpychać stronę.
 */

.wls-strona-tresc .wp-block-table,
.wp-block-table {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.wls-strona-tresc table {
	min-width: 0;
}

/* Długie adresy i nazwy własne łamiemy, zamiast pozwolić im rozpychać kolumnę */

.wls-strona-tresc td,
.wls-strona-tresc li,
.wls-strona-tresc p,
.wls-galeria li,
.wls-osoby li {
	overflow-wrap: break-word;
	hyphens: none;
}

/* Hero: zawartość nigdy szersza niż ekran */

.wls-hero .wp-block-cover__inner-container {
	max-width: min( 1180px, 100% );
	min-width: 0;
}

/* Osadzone ramki (mapa, liturgia, filmy) nie mogą wychodzić poza kontener */

.wp-site-blocks iframe {
	max-width: 100%;
}

/* Obrazy — zabezpieczenie na wypadek wgrania czegoś bardzo szerokiego */

.wp-site-blocks img {
	max-width: 100%;
	height: auto;
}

/* ===================== SZLIF WIZUALNY — PARTIA 2 ===================== */

/*
 * Nagłówek sekcji aktualności musi stać na tej samej osi co karty pod nim.
 *
 * Wcześniej był wcięty o ponad dwieście pikseli i jednocześnie SZERSZY od kart
 * — kreska pod tytułem wychodziła poza ich obrys. Składały się na to trzy
 * rzeczy naraz: własny `max-width` nagłówka, `has-global-padding` doklejany
 * przez WordPressa każdej zagnieżdżonej grupie „constrained" oraz marginesy
 * automatyczne rdzenia.
 *
 * Zamiast rozplątywać to regułami o rosnącej specyficzności, ustawiamy jawnie
 * trzy rzeczy: szerokość równą kolumnom, brak własnego paddingu, tekst do lewej.
 * Marginesy automatyczne rdzenia wyśrodkują wtedy nagłówek dokładnie tak samo
 * jak karty — czyli oś sama się zgodzi.
 */

.wls-aktualnosci > .wls-sekcja-head {
	max-width: var( --wp--style--global--wide-size );
	padding-left: 0;
	padding-right: 0;
	text-align: left;
}

/*
 * ⚠️ I DRUGA POŁOWA TEJ SAMEJ PUŁAPKI.
 *
 * Sam nagłówek ma już właściwą szerokość, ale jest grupą o układzie
 * „constrained" — więc rdzeń nadaje JEGO DZIECIOM `max-width` równy szerokości
 * treści (760 px) i marginesy automatyczne. Nadlinia i tytuł były przez to
 * wyśrodkowane wewnątrz nagłówka i wcięte o połowę różnicy: 209 px.
 *
 * Objaw myli, bo kreska pod tytułem szła już poprawnie — więc wyglądało to na
 * błąd wyrównania tekstu, a nie na ograniczenie szerokości dzieci.
 *
 * To ten sam mechanizm, co przy kaflach: nie walczymy z marginesami rdzenia,
 * tylko odbieramy im pole do popisu, dając dzieciom pełną szerokość.
 */

.wls-aktualnosci > .wls-sekcja-head > * {
	max-width: none;
}

/* --- Gęsty strumień: mniej szumu -----------------------------------------
 *
 * Wszystkie osiemdziesiąt dwa wpisy przeniesione z Bloggera mają jedną
 * kategorię, bo Blogger nie miał ani jednej etykiety. Plakietka powtarzająca
 * przy każdym wierszu to samo słowo nie niesie żadnej informacji — zabiera
 * miejsce tytułowi i rozbija rytm listy.
 *
 * W gęstym strumieniu ją chowamy. W kartach i przy materiale wyróżnionym
 * zostaje: tam jest miejsce, a gdy ksiądz zacznie dzielić wpisy na działy,
 * plakietka od razu nabierze sensu.
 */

/*
 * W strumieniu plakietka pełna — z nazwą kategorii i jej kolorem, tak jak przy
 * kartach. Kolor bierze się z klasy `category-{slug}` (sekcja PLAKIETKI KATEGORII
 * wyżej), więc tutaj tylko dopasowujemy rozmiar do zwartej listy.
 */

.wls-strumien-item .wls-chip,
.wls-strumien-item .wls-chip a {
	font-size: 0.66rem;
	padding: 4px 11px;
	flex: 0 0 auto;
	align-self: center;
	white-space: nowrap;
}


.wls-strumien-item {
	gap: 18px;
}

.wls-strumien-item .wls-meta {
	min-width: 86px;
	color: var(--wp--preset--color--tekst-2);
	font-variant-numeric: tabular-nums;
}

.wls-strumien-title {
	font-size: 1.3rem;
}

/* --- Ramka liturgii: bez własnego paska przewijania ----------------------
 *
 * Treść przychodzi z Opoki i ma swoją wysokość. Przy 460 px pojawiał się
 * pasek przewijania wewnątrz karty — wyglądało to jak okno wciśnięte w stronę,
 * a nie jak jej część. Wyższa ramka mieści całość.
 */

.wls-liturgia-ramka {
	height: 540px;
}

/* --- Karta wpisu bez zdjęcia ---------------------------------------------
 *
 * W rzędzie dwóch kart jedna miała zdjęcie, druga nie — i ta bez zdjęcia
 * kończyła się w połowie wysokości sąsiadki, zostawiając pustą białą płachtę.
 * Treść rozkłada się teraz na całą wysokość karty.
 */

.wls-karty .wp-block-post {
	justify-content: flex-start;
}

.wls-karty .wp-block-post > p:last-of-type {
	margin-top: auto;
	padding-top: 12px;
}

/* --- Stopka: herb nie może wisieć samotnie ------------------------------- */

.wls-footer-herb {
	opacity: 0.85;
	margin-top: 6px;
}

/* --- Rytm pionowy sekcji -------------------------------------------------
 *
 * Sekcje miały różne odstępy górne, przez co strona „skakała". Ujednolicamy
 * przez wspólną zmienną — zmiana rytmu całej strony to jedna liczba.
 */

:root {
	--wls-rytm-sekcji: clamp( 56px, 6vw, 88px );
}

.wls-aktualnosci,
.wls-sekcja,
.wls-transmisje,
.wls-etaca,
.wls-partnerzy {
	padding-top: var( --wls-rytm-sekcji );
	padding-bottom: var( --wls-rytm-sekcji );
}

/* ===================== SZLIF WIZUALNY — PARTIA 3 ===================== */

/*
 * Nagłówek „Pozostałe wiadomości" wchodził na dolną krawędź kart nad nim.
 * Odstęp musi być większy niż odstęp między kartami, żeby czytelnie oddzielał
 * dwie różne rzeczy: karty i listę.
 */

/*
 * ⚠️ Musi być z dwiema klasami w selektorze. Rdzeń zeruje górny margines
 * pierwszemu dziecku układu przepływowego regułą o wadze jednej klasy
 * (`:where(.is-layout-flow) > :first-child`), a nagłówek strumienia jest
 * właśnie pierwszym dzieckiem pętli. Przy jednej klasie wychodzi remis
 * i odstęp znika — nagłówek dotyka wtedy dolnej krawędzi kart nad nim.
 */

.wls-strumien > .wls-strumien-head {
	margin-top: 46px;
}

/*
 * Gęsty strumień: data i tytuł stały za daleko od siebie, przez co oko
 * musiało skakać. Data zajmuje tyle, ile potrzebuje, i nie więcej.
 */

.wls-strumien-item .wls-meta {
	min-width: 62px;
}

.wls-strumien-item {
	gap: 16px;
	padding: 9px 0;
}

/*
 * Karta wpisu: zajawka wypełnia środek, a nie zostaje przyklejona do dołu.
 * Pusta biała płachta w karcie bez zdjęcia brała się stąd, że blok „fragment
 * wpisu" milczy, gdy treść nie zaczyna się akapitem — a wpisy z Bloggera
 * zaczynają się plakatem. Zajawki uzupełnia `narzedzia/zajawki.php`.
 */

.wls-karty .wp-block-post > p:last-of-type {
	margin-top: 0;
	padding-top: 0;
}

.wls-karty .wp-block-post-excerpt,
.wls-karty .wp-block-post-excerpt p {
	margin-top: 10px;
	font-size: 0.96rem;
}

.wls-lead-story .wp-block-post-excerpt,
.wls-lead-story .wp-block-post-excerpt p {
	font-size: 0.96rem;
	line-height: 1.6;
}

/* ===================== PASEK NAWIGACJI NA ŚREDNICH EKRANACH ============== */

/*
 * 🔴 Wyłapane na zrzucie przy 950 px: menu łamało się na dwa wiersze,
 * a złoty przycisk dzielił się na „eTac / a".
 *
 * Blok nawigacji WordPressa zwija się w przycisk hamburgera dopiero poniżej
 * 600 px. Między 600 a mniej więcej 1180 px menu jest rozwinięte, ale osiem
 * pozycji plus przycisk nie mieści się w jednym wierszu. Na telefonie tego nie
 * widać, na monitorze też — problem siedzi dokładnie w szerokości tabletu,
 * czyli tam, gdzie mało kto patrzy.
 */

.wls-navbar-cta .wp-block-button__link {
	white-space: nowrap;
}

@media ( min-width: 782px ) and ( max-width: 1180px ) {
	.wls-navbar .wls-nav {
		gap: 16px;
	}

	.wls-navbar .wp-block-navigation-item__content {
		font-size: 0.84rem;
		letter-spacing: 0;
	}

	.wls-navbar-cta .wp-block-button__link {
		padding: 7px 15px;
		font-size: 0.8rem;
	}
}

@media ( min-width: 782px ) and ( max-width: 950px ) {
	.wls-navbar .wls-nav {
		gap: 11px;
	}

	.wls-navbar .wp-block-navigation-item__content {
		font-size: 0.79rem;
	}
}

/* ===================== SZLIF WIZUALNY — PARTIA 4: PRZERWY ================= */

/*
 * 🔴 Białe paski między kolorowymi sekcjami.
 *
 * Sekcje strony głównej (hero, kafle, aktualności, wspólnoty, czytelnia,
 * transmisje, eTaca, partnerzy) to bloki pełnej szerokości ułożone w układzie
 * przepływowym. WordPress wstawia między nie pionowy odstęp (block-gap), przez
 * który prześwituje białe tło strony — stąd jasne paski na styku ciemnych sekcji.
 *
 * Każda sekcja ma własny padding, więc odstępu między nimi nie potrzebujemy
 * wcale. Zerujemy górny margines każdej sekcji poza pierwszą. Sekcje stykają
 * się wtedy krawędziami, a rytm daje ich własny padding.
 */

.wp-block-post-content > * + * {
	margin-block-start: 0;
}

/* Hero i pasek nawigacji: bez szpary nad hero */

.wp-site-blocks > main {
	margin-top: 0;
	padding-top: 0;
}

/* Stopka to osobny blok najwyższego poziomu — WordPress dokłada jej odstęp
   blockGap, przez który prześwitywała biała kreska tła między jasną sekcją
   partnerów a granatową stopką. Zerujemy odstęp, żeby stopka przylegała. */
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/*
 * Kafle godzin wjeżdżają na hero — ta reguła ma wygrać z zerowaniem powyżej,
 * więc zostaje z dwiema klasami w selektorze (wyższa specyficzność).
 */

.wls-hero + .wls-kafle {
	margin-block-start: -64px;
}

/* eTaca i partnerzy: usuwamy podwójny padding i kreskę na styku */

.wls-etaca + .wls-partnerzy {
	border-top: none;
}

.wls-partnerzy {
	padding-top: clamp( 40px, 4vw, 56px );
	padding-bottom: clamp( 110px, 10vw, 160px );
}

/* ===================== PLAKIETKI KATEGORII — KOLORY ================== */

/*
 * Każda kategoria ma własny kolor plakietki. Kolor bierze się z klasy
 * `category-{slug}`, którą WordPress nadaje opakowaniu wpisu — więc plakietka
 * koloruje się sama, bez dopisywania niczego przy każdym wpisie.
 *
 * Wszystkie pary tekst/tło zdają kontrast WCAG AA (5.0–13.7).
 * Domyślny wygląd plakietki (neutralny) zostaje dla kategorii bez własnego koloru.
 */

.category-parafia .wls-chip,
.category-parafia .wls-chip a {
	background: #f7e4e9;
	color: #9c2f4c;
}

.category-wspolnoty .wls-chip,
.category-wspolnoty .wls-chip a {
	background: #e5eefb;
	color: #215bb5;
}

.category-diecezja .wls-chip,
.category-diecezja .wls-chip a {
	background: #f1e9cf;
	color: #7a5e15;
}

.category-miasto .wls-chip,
.category-miasto .wls-chip a {
	background: #dff0e7;
	color: #256b41;
}

.category-ogloszenia .wls-chip,
.category-ogloszenia .wls-chip a,
.category-ogloszenia-duszpasterskie .wls-chip,
.category-ogloszenia-duszpasterskie .wls-chip a {
	background: #eef1f6;
	color: #16243f;
}

/* ===================== ZAŚLEPKA OBRAZU (karty bez zdjęcia) ================
 *
 * Wstawia ją filtr z inc/zaslepka-obrazu.php w miejsce pustego obrazka
 * wyróżniającego. Gradient w kolorze kategorii + jej nazwa, żeby karta bez
 * zdjęcia nie była białą dziurą. Kolory z tej samej palety co plakietki wyżej.
 */
.wls-zaslepka {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	border-radius: 10px;
	text-decoration: none;
	background: linear-gradient( 135deg, #16243f, #33507f );
}

.wls-zaslepka.wls-lead-obraz  { aspect-ratio: 3 / 2; }
.wls-zaslepka.wls-karta-obraz { aspect-ratio: 4 / 3; }

.wls-zaslepka-znak {
	padding: 12px 16px;
	font-family: var( --wp--preset--font-family--naglowki, Georgia, "Times New Roman", serif );
	font-size: clamp( 0.85rem, 1.1rem + 1vw, 1.9rem );
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: rgba( 255, 255, 255, 0.94 );
	overflow-wrap: break-word;
	hyphens: none;
}

.wls-zaslepka:hover { filter: brightness( 1.06 ); }

.wls-zaslepka.category-parafia   { background: linear-gradient( 135deg, #7d2740, #b8496a ); }
.wls-zaslepka.category-wspolnoty { background: linear-gradient( 135deg, #1a4a95, #3f7fd6 ); }
.wls-zaslepka.category-diecezja  { background: linear-gradient( 135deg, #6a5313, #a07d1f ); }
.wls-zaslepka.category-miasto    { background: linear-gradient( 135deg, #1d5535, #348a56 ); }
.wls-zaslepka.category-ogloszenia,
.wls-zaslepka.category-ogloszenia-duszpasterskie { background: linear-gradient( 135deg, #16243f, #33507f ); }

/* ===================== FILTR KATEGORII (pigułki) ==================== */

/*
 * Pigułki pod nagłówkiem aktualności prowadzą do pełnych archiwów kategorii —
 * kliknięcie „Wspólnoty" pokazuje WSZYSTKIE wpisy z tej kategorii, nie wycinek
 * dziewięciu widocznych na stronie głównej. „Wszystko" prowadzi do archiwum
 * ogólnego. Wyglądają jak filtr, działają jak nawigacja.
 *
 * Kolor pod każdą pigułką to kolor jej kategorii — ten sam, co na plakietkach.
 */

.wls-aktualnosci-head {
	align-items: flex-end;
	gap: 20px 28px;
	border-bottom: 2px solid var(--wp--preset--color--granat);
	padding-bottom: 16px;
	margin-bottom: 34px;
}

.wls-aktualnosci-head .wls-aktualnosci-tytul {
	margin: 0;
}

.wls-filtry {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding-bottom: 4px;
}

.wls-filtr {
	display: inline-block;
	font-family: var(--wp--preset--font-family--tekst);
	font-size: 0.82rem;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	padding: 8px 16px;
	border-radius: 40px;
	border: 1px solid var(--wp--preset--color--linia);
	color: var(--wp--preset--color--tekst-2);
	background: var(--wp--preset--color--tlo);
	transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.wls-filtr:hover {
	border-color: var(--wp--preset--color--granat);
	color: var(--wp--preset--color--granat);
}

.wls-filtr--aktywny {
	background: var(--wp--preset--color--granat);
	border-color: var(--wp--preset--color--granat);
	color: var(--wp--preset--color--tlo);
}

.wls-filtr--aktywny:hover {
	color: var(--wp--preset--color--tlo);
}

/* Kolor odpowiadający kategorii przy najechaniu — subtelny sygnał */

.wls-filtr--parafia:hover   { border-color: #9c2f4c; color: #9c2f4c; }
.wls-filtr--wspolnoty:hover { border-color: #215bb5; color: #215bb5; }
.wls-filtr--diecezja:hover  { border-color: #7a5e15; color: #7a5e15; }
.wls-filtr--miasto:hover    { border-color: #256b41; color: #256b41; }

@media ( max-width: 781px ) {
	.wls-aktualnosci-head {
		align-items: flex-start;
	}

	.wls-filtry {
		width: 100%;
	}
}

/* ===================== SZLIF: PLAKIETKI I STRUMIEŃ ================= */

/*
 * Plakietka pod kartą wpisu była rozciągnięta na całą szerokość karty.
 * Plakietka ma obejmować tylko swój tekst — jak etykieta, nie pasek.
 */

.wls-karty .wls-chip,
.wls-lead-story .wls-chip {
	display: inline-block;
	width: auto;
	align-self: flex-start;
}

/*
 * Strumień „Pozostałe wiadomości" — równe kolumny.
 *
 * Przy układzie flex plakietki różnej długości (PARAFIA vs DIECEZJA I WATYKAN)
 * rozpychały datę i tytuł, przez co nic się nie wyrównywało w pionie. Siatka
 * o stałych kolumnach ustawia plakietkę, datę i tytuł w trzech równych osiach.
 */

.wls-strumien-item {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 6px;
	border-bottom: 1px solid var(--wp--preset--color--linia);
}

/* Plakietka o stałej szerokości i wyśrodkowana — jak we wzorcu. Dzięki temu
   data i tytuł stoją w równych osiach niezależnie od długości nazwy kategorii. */
.wls-strumien-item .wls-chip {
	flex: 0 0 auto;
	min-width: 120px;
	text-align: center;
	justify-content: center;
	padding: 0;
}

/* Cały pill klikalny — bez tego link zajmował tylko tekst, a klik w margines
   plakietki nic nie robił (#70). */
.wls-strumien-item .wls-chip a {
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 4px 12px;
	text-align: center;
}

.wls-strumien-item .wls-meta {
	flex: 0 0 auto;
	min-width: 64px;
	margin: 0;
	white-space: nowrap;
	color: var(--wp--preset--color--tekst-2);
	font-variant-numeric: tabular-nums;
}

.wls-strumien-title {
	flex: 1;
	margin: 0;
	min-width: 0;
}

@media ( max-width: 781px ) {
	.wls-strumien-item {
		flex-wrap: wrap;
		gap: 4px 12px;
	}

	.wls-strumien-item .wls-chip {
		min-width: 0;
	}

	.wls-strumien-title {
		flex: 1 1 100%;
	}
}

/* ===================== IKONY SPOŁECZNOŚCIOWE W TOPBARZE ============= */

/*
 * Delikatne ikony Facebooka i YouTube zamiast napisów. Kolor dziedziczy biel
 * z topbara, przygaszona do 70% — mają być obecne, nie krzykliwe.
 */

.wls-topbar-social {
	display: flex;
	align-items: center;
	gap: 14px;
}

.wls-social-ikona {
	display: inline-flex;
	align-items: center;
	color: rgba( 255, 255, 255, 0.7 );
	transition: color 0.18s ease, transform 0.18s ease;
}

.wls-social-ikona:hover {
	color: #fff;
	transform: translateY( -1px );
}

.wls-social-ikona:focus-visible {
	outline: 2px solid var(--wp--preset--color--zloto-jasny);
	outline-offset: 3px;
	border-radius: 3px;
}

/* ===================== POLECANE STRONY (siatka odnośników) ================
 *
 * Siatka odnośników do dzieł mariańskich i przygotowań do sakramentów
 * (wzorzec polecane-strony). auto-fill sam zwija kolumny na wąskim ekranie,
 * więc nie potrzebuje osobnej reguły w media query.
 */
.wls-polecane-siatka {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 250px, 1fr ) );
	gap: 16px;
	margin-top: 34px;
}

.wls-polecany {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 44px 18px 20px;
	position: relative;
	background: var(--wp--preset--color--tlo);
	border: 1px solid var(--wp--preset--color--linia);
	border-radius: 12px;
	text-decoration: none;
	transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
}

.wls-polecany:hover {
	border-color: var(--wp--preset--color--blekit);
	transform: translateY( -3px );
	box-shadow: 0 16px 36px rgba( 22, 36, 63, 0.1 );
}

.wls-polecany-nazwa {
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--wp--preset--color--granat);
}

.wls-polecany-opis {
	font-size: 0.82rem;
	color: var(--wp--preset--color--tekst-2);
}

.wls-polecany::after {
	content: "→";
	position: absolute;
	top: 50%;
	right: 18px;
	transform: translateY( -50% );
	color: var(--wp--preset--color--blekit);
	font-size: 1.1rem;
	transition: transform 0.2s;
}

.wls-polecany:hover::after {
	transform: translate( 4px, -50% );
}

body.wls-hc main .wls-polecany {
	background: #fff;
	border-color: #000;
}


/* ===================== POLE WYBORU W FORMULARZACH ========================
 *
 * Formularze korzystają z klas .wls-formularz / .wls-pole. Tu pole wyboru (select).
 * (Formularz intencji mszalnych usunięty 30.09.2026 — kopia w backup/30.09.)
 */
.wls-pole select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 40px;
	cursor: pointer;
}

/* Trójkącik odtwarzania przed napisem w przycisku „Oglądaj na YouTube" (#56).
   Osobna klasa, żeby nie dotknąć złotego CTA eTaca, który dzieli .wls-btn-zloty. */
.wls-btn-play .wp-block-button__link::before {
	content: "";
	display: inline-block;
	width: 0;
	height: 0;
	margin-right: 10px;
	vertical-align: middle;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent currentColor;
}

/* Materiał wyróżniony: tag „↗ Facebook" w rogu zdjęcia i link „Czytaj dalej →"
   pod zajawką — jak na wzorcu (#52). */
.wls-lead-story {
	position: relative;
}

.wls-lead-fb {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	background: rgba( 255, 255, 255, 0.92 );
	color: #1a4ba0;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.4px;
	padding: 5px 11px;
	border-radius: 30px;
	text-decoration: none;
	box-shadow: 0 4px 12px rgba( 0, 0, 0, 0.12 );
	transition: background 0.2s;
}

.wls-lead-fb:hover {
	background: #fff;
}

.wls-lead-story .wls-czytaj,
.wls-lead-story a.wls-czytaj {
	display: inline-block;
	margin-top: 6px;
	padding: 0;
	border: none;
	background: none;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--wp--preset--color--granat);
	text-decoration: none;
}

.wls-lead-story .wls-czytaj:hover {
	color: var(--wp--preset--color--blekit);
}

/* Nagłówek nazwy parafii w stopce — mniejszy, zgodny ze wzorcem (1.5rem),
   zamiast dużego fluidowego „large". */
.wls-footer-brand h3 {
	font-size: 1.5rem;
	line-height: 1.25;
}

/* ===================== KARTY AKTUALNOŚCI (30.09.2026) ==================== */

/*
 * Uwagi Łukasza do strony głównej: tytuł zawsze wielką literą, tytuł większy,
 * zajawka lżejsza. Wielką literę poprawiamy też w danych (tytuły z Bloggera
 * są pisane małą), a ta reguła pilnuje wpisów, które ksiądz doda sam.
 * Zajawka dostaje Inter 300 — wcześniej 400 było najcieńszą wgraną grubością.
 */

.wp-block-post-title::first-letter,
.wls-strumien-title::first-letter {
	text-transform: uppercase;
}

.wls-karty h3.wp-block-post-title {
	font-size: 1.55rem;
	line-height: 1.2;
	margin: 4px 0 8px;
}

.wls-karty .wp-block-post-excerpt,
.wls-karty .wp-block-post-excerpt p,
.wls-lead-story .wp-block-post-excerpt,
.wls-lead-story .wp-block-post-excerpt p {
	font-weight: 300;
	color: var(--wp--preset--color--tekst-2);
}

/* ===================== KAFEL „NA SKRÓTY” (30.09.2026) ===================== */

/*
 * Czwarty kafel obok godzin, propozycja proboszcza: Komunia, bierzmowanie,
 * ministranci, wydarzenia. W pozycjach listy odnośnik stoi pod etykietą,
 * więc nie może rozciągać się na całą szerokość (podkreślenie ciągnęłoby się
 * do krawędzi kafla).
 */

.wls-kafel--skroty li a {
	align-self: flex-start;
	font-size: 1rem;
}

/*
 * Cztery kolumny mieszczą się dopiero od ~1100 px. Wcześniej WordPress
 * trzyma je w jednym rzędzie aż do 782 px i kafle robią się wąskie jak
 * słupki — w tym przedziale układamy je 2 × 2.
 */

@media ( min-width: 782px ) and ( max-width: 1099px ) {
	.wls-kafle > .wp-block-columns {
		flex-wrap: wrap !important;
	}

	.wls-kafle > .wp-block-columns > .wp-block-column {
		flex: 1 1 calc( 50% - var(--wp--preset--spacing--40) ) !important;
	}
}

/* ===================== OBSZAR PARAFII: WYKAZ ULIC (30.09.2026) ===================== */

.wls-ulice {
	columns: 3 14rem;
	column-gap: 32px;
	padding-left: 1.1em;
}

.wls-ulice li {
	break-inside: avoid;
	margin-bottom: 4px;
}

.wls-mapa--granice {
	margin-top: 8px;
}

/* ===================== MARIANIE — LINKI (30.09.2026) ===================== */

.wls-linki {
	columns: 2 20rem;
	column-gap: 40px;
	padding-left: 1.1em;
}

.wls-linki li {
	break-inside: avoid;
	margin-bottom: 8px;
}

/* ===================== MARKA W PRZYKLEJONYM PASKU (30.09.2026) ===================== */

/*
 * Zamiast „MARIANIE — Warszawa Stegny” + drobnego podpisu: sama pełna nazwa
 * parafii w dwóch równych liniach, krojem nagłówków — jak pomniejszona winieta.
 * Łamanie wyznacza <br> w znaczniku (reszta paska ma white-space: nowrap).
 */

.wls-navbar-brand-txt strong,
.wls-navbar.is-stuck .wls-navbar-brand-txt strong {
	font-family: var(--wp--preset--font-family--naglowki);
	font-size: 1.02rem;
	font-weight: 600;
	letter-spacing: 0.2px;
	line-height: 1.32;
}

/* „Więcej światła” (uwaga Łukasza 30.09): oddech między herbem, nazwą i menu. */
.wls-navbar.is-stuck .wls-navbar-brand {
	gap: 14px;
	margin-right: 44px;
	padding: 4px 0;
}


/*
 * Poniżej 1440 px marka z pełną nazwą + menu + eTaca nie mieszczą się w jednej
 * linii przyklejonego paska (menu wypychało eTaca poza ekran — tak było też
 * przy starej marce). Poniżej 1600 px — także na telefonie — zostaje sam herb;
 * nazwa jest w winiecie. Pełnej nazwy nie skracamy (zasada parafii).
 */
@media ( max-width: 1599px ) {
	.wls-navbar.is-stuck .wls-navbar-brand-txt {
		display: none;
	}

	.wls-navbar.is-stuck .wls-navbar-brand {
		margin-right: 16px;
	}
}

/* 782–959 px: w przyklejonym pasku menu + eTaca wystawały o kilka pikseli. */
@media ( min-width: 782px ) and ( max-width: 959px ) {
	.wls-navbar.is-stuck .wp-block-navigation__container {
		gap: 11px;
	}

	.wls-navbar.is-stuck .wp-block-navigation-item__content {
		font-size: 0.78rem;
	}
}

@media ( min-width: 782px ) and ( max-width: 859px ) {
	.wls-navbar.is-stuck .wp-block-navigation__container {
		gap: 7px;
	}

	.wls-navbar.is-stuck .wp-block-navigation-item__content {
		font-size: 0.74rem;
	}
}


/* ===================== ODSTĘPY W TREŚCI PODSTRON I WPISÓW (30.09.2026) ===================== */

/*
 * Zerowanie `.wp-block-post-content > * + *` (białe paski między sekcjami
 * strony głównej) działało też w treści podstron i wpisów: przyciski i ramki
 * kleiły się do akapitu nad nimi (zgłoszone na stronie Msze: „Grafik na ten
 * tydzień” wisiał między akapitem a ramką bez odstępu). Przywracamy rytm
 * wyłącznie tu — strona główna zostaje bez zmian.
 */

.wls-strona-tresc .wp-block-post-content > .wp-block-buttons,
.wls-wpis-tresc .wp-block-post-content > .wp-block-buttons,
.wls-wpis-tresc > .wp-block-buttons {
	margin-block: 22px 34px;
}

.wls-strona-tresc .wp-block-post-content > .wls-ramka,
.wls-wpis-tresc .wp-block-post-content > .wls-ramka,
.wls-wpis-tresc > .wls-ramka {
	margin-block: 34px;
}

.wls-strona-tresc .wp-block-post-content > .wp-block-table,
.wls-strona-tresc .wp-block-post-content > .wp-block-image,
.wls-strona-tresc .wp-block-post-content > .wp-block-html {
	margin-block: 22px 28px;
}

/* ===================== HAMBURGER DO 781 PX (30.09.2026) ===================== */

/*
 * Blok nawigacji zwija się w hamburger dopiero poniżej 600 px. Między 600 a 781 px
 * pełne menu w przyklejonym pasku (nowrap) wystawało poza ekran razem z eTaca.
 * Przesuwamy próg: do 781 px menu działa jak na telefonie, w obu stanach paska.
 */
@media ( min-width: 600px ) and ( max-width: 781px ) {
	.wls-navbar .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex !important;
	}

	.wls-navbar .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none !important;
	}
}

/* ===================== MENU MOBILNE — NOWY WYGLĄD (30.09.2026) ===================== */

/*
 * Nakładka menu na telefonie: granat jak pasek, herb i pełna nazwa na górze,
 * działy do lewej krojem nagłówków, podstrony wcięte ze złotym akcentem,
 * na dole złoty przycisk eTaca (pozycja menu z klasą wls-nav-etaca, widoczna
 * tylko tutaj). Wcześniej: białe tło i wszystko wyśrodkowane w jednym rozmiarze.
 */

/* eTaca w menu tylko w otwartej nakładce — na desktopie jest osobny przycisk */
.wls-navbar .wls-nav-etaca {
	display: none !important;
}

.wls-navbar .wp-block-navigation__responsive-container.is-menu-open {
	background: linear-gradient( 170deg, var(--wp--preset--color--granat) 0%, var(--wp--preset--color--granat-2) 100% );
	color: #fff;
	padding: 20px 24px 40px;
}

.wls-navbar .is-menu-open .wp-block-navigation__responsive-container-close {
	color: #fff;
	top: 6px;
	right: 0;
	padding: 8px;
}

.wls-navbar .is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

.wls-navbar .is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	padding-top: 0 !important;
	align-items: stretch !important;
}

/* Herb i pełna nazwa na górze nakładki (ozdobnik — czytnik ekranu ma nazwę w nagłówku strony) */
.wls-navbar .is-menu-open .wp-block-navigation__responsive-container-content::before {
	content: "Parafia Rzymskokatolicka Najświętszej Maryi Panny Matki Miłosierdzia w Warszawie";
	display: block;
	padding: 4px 48px 22px 60px;
	margin-bottom: 8px;
	min-height: 52px;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.16 );
	background:
		url( 'assets/img/logo.png' ) 12px 9px / auto 34px no-repeat,
		radial-gradient( circle at 24px 26px, #fff 23px, transparent 24px ) no-repeat;
	font-family: var(--wp--preset--font-family--naglowki);
	font-size: 1.08rem;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	text-align: left;
}

.wls-navbar .is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0 !important;
	align-items: stretch !important;
}

.wls-navbar .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	align-items: stretch !important;
	border-bottom: 1px solid rgba( 255, 255, 255, 0.1 );
}

/* Działy */
.wls-navbar .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 14px 0 !important;
	font-family: var(--wp--preset--font-family--naglowki);
	font-size: 1.45rem !important;
	font-weight: 600;
	line-height: 1.2;
	color: #fff !important;
	text-align: left;
}

/* Podstrony */
.wls-navbar .is-menu-open .wp-block-navigation__submenu-container {
	width: 100%;
	padding: 0 0 12px 14px !important;
	margin: -4px 0 0 2px;
	border-left: 2px solid var(--wp--preset--color--zloto) !important;
	background: transparent !important;
	gap: 0 !important;
}

.wls-navbar .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 7px 0 !important;
	font-family: var(--wp--preset--font-family--tekst);
	font-size: 0.98rem !important;
	font-weight: 400;
	color: rgba( 255, 255, 255, 0.8 ) !important;
	text-align: left;
}

.wls-navbar .is-menu-open .wp-block-navigation-item__content:hover,
.wls-navbar .is-menu-open .wp-block-navigation-item__content:focus {
	color: var(--wp--preset--color--zloto-jasny) !important;
}

/* Bez podkreśleń-animacji z desktopu i bez strzałek rozwijania */
.wls-navbar .is-menu-open .wp-block-navigation-item__content::after,
.wls-navbar .is-menu-open .wp-block-navigation__submenu-icon {
	display: none !important;
}

/* eTaca na dole nakładki */
.wls-navbar .is-menu-open .wls-nav-etaca {
	display: block !important;
	border-bottom: none !important;
	padding-top: 26px;
}

.wls-navbar .is-menu-open .wp-block-navigation__container > .wls-nav-etaca > .wp-block-navigation-item__content {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	padding: 14px 20px !important;
	border-radius: 999px;
	background: linear-gradient( 135deg, var(--wp--preset--color--zloto) 0%, var(--wp--preset--color--zloto-jasny) 100% );
	color: var(--wp--preset--color--granat) !important;
	font-family: var(--wp--preset--font-family--tekst) !important;
	font-size: 1rem !important;
	font-weight: 600;
	text-align: center !important;
}

.wls-navbar .is-menu-open .wp-block-navigation__container > .wls-nav-etaca > .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--granat) !important;
	filter: brightness( 1.05 );
}

/* Podstrony do lewej, przy złotej linii (WordPress domyślnie je centruje) */
.wls-navbar .is-menu-open .wp-block-navigation__submenu-container,
.wls-navbar .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	align-items: flex-start !important;
	text-align: left !important;
}

.wls-navbar .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
	width: 100%;
}


/* ===================== BANER COOKIES (02.10.2026) ===================== */

/*
 * Wzorzec @web: trzy przyciski, panel z Niezbędnymi (zablokowane) i Funkcjonalnymi,
 * na telefonie dwie kolumny i „Akceptuj wszystkie” na całą szerokość.
 * Logika: assets/js/cookies.js, znaczniki: inc/cookies.php.
 */

.wls-cookies {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 99990;
	display: flex;
	justify-content: center;
	pointer-events: none;
}

.wls-cookies[hidden],
.wls-cookies [hidden] {
	display: none !important;
}

.wls-cookies-okno {
	pointer-events: auto;
	width: 100%;
	max-width: 760px;
	box-sizing: border-box;
	padding: 22px 26px;
	border-radius: 14px;
	border-left: 4px solid var(--wp--preset--color--zloto);
	background: var(--wp--preset--color--granat);
	color: #fff;
	box-shadow: 0 18px 50px rgba( 10, 20, 40, 0.35 );
	font-size: 0.92rem;
	line-height: 1.55;
}

.wls-cookies-tytul {
	margin: 0 0 6px;
	font-family: var(--wp--preset--font-family--naglowki);
	font-size: 1.3rem;
	font-weight: 600;
}

.wls-cookies-tekst {
	margin: 0;
	color: rgba( 255, 255, 255, 0.86 );
}

.wls-cookies a {
	color: var(--wp--preset--color--zloto-jasny);
}

.wls-cookies-ustawienia {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba( 255, 255, 255, 0.16 );
}

.wls-cookies-opcja {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	margin: 8px 0;
	color: rgba( 255, 255, 255, 0.86 );
}

.wls-cookies-opcja input {
	margin-top: 4px;
	accent-color: var(--wp--preset--color--zloto);
	width: 18px;
	height: 18px;
	flex: 0 0 auto;
}

.wls-cookies-opcja strong {
	color: #fff;
	margin-right: 4px;
}

.wls-cookies-przyciski {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.wls-cookies-btn {
	padding: 10px 18px;
	border: 1px solid rgba( 255, 255, 255, 0.45 );
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font: inherit;
	font-size: 0.88rem;
	font-weight: 600;
	cursor: pointer;
}

.wls-cookies-btn:hover,
.wls-cookies-btn:focus-visible {
	border-color: #fff;
}

.wls-cookies-btn--zloty {
	border-color: transparent;
	background: linear-gradient( 135deg, var(--wp--preset--color--zloto) 0%, var(--wp--preset--color--zloto-jasny) 100% );
	color: var(--wp--preset--color--granat);
}

@media ( max-width: 600px ) {
	.wls-cookies {
		left: 8px;
		right: 8px;
		bottom: 8px;
	}

	.wls-cookies-okno {
		padding: 18px;
	}

	.wls-cookies-przyciski {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.wls-cookies-btn--zloty {
		grid-column: 1 / -1;
	}
}

@media print {
	.wls-cookies {
		display: none !important;
	}
}

/* ===================== NAGŁÓWEK W JEDNYM RZĘDZIE (02.10.2026) ===================== */

/*
 * Uwaga Łukasza: góra wyglądała „roboczo” — trzy pasy (granatowy z ikonami,
 * duża biała winieta z nazwą na środku, menu) i dużo pustej bieli po bokach.
 * Teraz dwa pasy: jasna winieta w jednym rzędzie (herb + nazwa po lewej,
 * ikony, dostępność i wyszukiwarka po prawej) oraz granatowe menu.
 * Pasek górny .wls-topbar zniknął ze znaczników — jego reguły w tym pliku
 * są martwe, ale nieszkodliwe.
 */

.wls-masthead {
	text-align: left;
	padding: 18px 0 16px;
	border-bottom: 3px solid var(--wp--preset--color--zloto);
	background:
		linear-gradient( 180deg, #fff 0%, var(--wp--preset--color--tlo-soft) 100% );
}

.wls-masthead-rzad {
	gap: 32px;
}

.wls-masthead-marka {
	gap: 18px;
	min-width: 0;
	flex: 1 1 auto;
}

.wls-masthead .wls-masthead-logo {
	margin: 0;
	flex: 0 0 auto;
}

.wls-masthead .wls-masthead-logo img {
	height: 64px;
	width: auto;
}

.wls-masthead-teksty {
	gap: 4px;
	min-width: 0;
	padding-left: 18px;
	border-left: 1px solid var(--wp--preset--color--linia);
}

.wls-masthead .wls-masthead-name a,
.wls-masthead .wls-masthead-name {
	margin: 0;
	max-width: 560px;
	font-size: clamp( 1.3rem, 2.1vw, 1.75rem );
	line-height: 1.15;
	text-align: left;
	text-wrap: balance;
}

.wls-masthead .wls-masthead-sub {
	margin: 2px 0 0;
	font-size: 0.7rem;
	letter-spacing: 1.6px;
	text-align: left;
	color: var(--wp--preset--color--zloto-tekst, var(--wp--preset--color--tekst-2));
}

/* Prawa kolumna: ikony + dostępność w rzędzie, wyszukiwarka pod nimi */
.wls-masthead-narzedzia {
	flex: 0 0 auto;
	gap: 10px;
	align-items: flex-end !important;
}

.wls-masthead-ikony {
	display: flex;
	align-items: center;
	gap: 18px;
}

.wls-masthead .wls-topbar-social {
	display: flex;
	gap: 12px;
}

.wls-masthead .wls-social-ikona {
	color: var(--wp--preset--color--granat);
	opacity: 0.75;
}

.wls-masthead .wls-social-ikona:hover {
	opacity: 1;
	color: var(--wp--preset--color--granat);
}

.wls-masthead .wls-a11y {
	display: flex;
	gap: 4px;
}

.wls-masthead .wls-a11y-btn {
	background: #fff;
	color: var(--wp--preset--color--granat);
	border: 1px solid var(--wp--preset--color--linia);
	padding: 5px 8px;
}

.wls-masthead .wls-a11y-btn:hover {
	background: var(--wp--preset--color--tlo-soft);
	border-color: var(--wp--preset--color--granat);
}

.wls-masthead .wls-a11y-btn:focus-visible {
	outline-color: var(--wp--preset--color--granat);
}

.wls-masthead .wls-search {
	margin: 0;
	width: 260px;
}

.wls-masthead .wp-block-search__inside-wrapper {
	border: 1px solid var(--wp--preset--color--linia);
	border-radius: 999px;
	background: #fff;
	padding: 3px;
}

.wls-masthead .wp-block-search__input {
	border: none;
	background: transparent;
	padding: 6px 14px;
	font-size: 0.85rem;
	color: var(--wp--preset--color--tekst);
	min-width: 0;
}

.wls-masthead .wp-block-search__button {
	margin: 0;
	padding: 6px 12px;
	border: none;
	border-radius: 999px;
	background: var(--wp--preset--color--zloto);
	color: var(--wp--preset--color--granat);
}

/* Tablet: nazwa mniejsza, wyszukiwarka węższa */
@media ( max-width: 1000px ) {
	.wls-masthead .wls-search {
		width: 200px;
	}
}

/* Telefon: marka na górze, narzędzia w rzędzie pod nią */
@media ( max-width: 781px ) {
	.wls-masthead {
		padding: 14px 0 12px;
	}

	.wls-masthead-rzad {
		flex-wrap: wrap !important;
		gap: 12px;
	}

	.wls-masthead-marka {
		gap: 12px;
		flex-basis: 100%;
	}

	.wls-masthead .wls-masthead-logo img {
		height: 48px;
	}

	.wls-masthead-teksty {
		padding-left: 12px;
	}

	.wls-masthead .wls-masthead-name a,
	.wls-masthead .wls-masthead-name {
		font-size: 1.12rem;
	}

	.wls-masthead .wls-masthead-sub {
		font-size: 0.6rem;
		letter-spacing: 1px;
	}

	.wls-masthead-narzedzia {
		flex-basis: 100%;
		flex-direction: row !important;
		flex-wrap: wrap;
		justify-content: space-between !important;
		align-items: center !important;
	}

	.wls-masthead .wls-search {
		width: auto;
		flex: 1 1 160px;
	}
}

@media ( max-width: 400px ) {
	.wls-masthead .wls-topbar-social {
		display: none;
	}
}

/* Baner cookies — mniej inwazyjnie: mała karta w prawym dolnym rogu (uwaga Łukasza 02.10.2026) */
.wls-cookies {
	left: auto;
	right: 20px;
	bottom: 20px;
	justify-content: flex-end;
}

.wls-cookies-okno {
	max-width: 380px;
	padding: 16px 18px;
	font-size: 0.8rem;
	line-height: 1.5;
	border-radius: 12px;
}

.wls-cookies-tytul {
	font-size: 1.05rem;
	margin-bottom: 4px;
}

.wls-cookies-przyciski {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 12px;
}

.wls-cookies-btn {
	padding: 7px 12px;
	font-size: 0.78rem;
}

.wls-cookies-btn--zloty {
	grid-column: 1 / -1;
}

.wls-cookies-opcja {
	font-size: 0.78rem;
}

@media ( max-width: 600px ) {
	.wls-cookies {
		left: 8px;
		right: 8px;
		bottom: 8px;
	}

	.wls-cookies-okno {
		max-width: none;
	}
}

/* Winieta poniżej szerokości kontenera: margines boczny, żeby herb nie dotykał krawędzi */
@media ( max-width: 1240px ) {
	.wls-masthead {
		padding-left: 20px;
		padding-right: 20px;
	}
}

/* Telefon: dostępność i wyszukiwarka w jednym rzędzie */
@media ( max-width: 781px ) {
	.wls-masthead-narzedzia {
		flex-wrap: nowrap !important;
		gap: 10px;
	}

	.wls-masthead-ikony {
		gap: 10px;
		flex: 0 0 auto;
	}

	.wls-masthead .wls-a11y-btn {
		padding: 5px 6px;
	}

	.wls-masthead .wls-search,
	.wls-masthead .wls-search .wp-block-search__inside-wrapper {
		min-width: 0;
		flex: 1 1 auto;
		width: auto;
	}

	.wls-masthead .wp-block-search__input {
		width: 100%;
		padding: 5px 10px;
	}
}

/* Herb w przyklejonym pasku: białe kółko ze złotą obwódką — niebieski herb ginął na granacie
   (uwaga Łukasza 02.10.2026; ten sam zabieg co w menu mobilnym). */
.wls-navbar-brand-logo,
.wls-navbar.is-stuck .wls-navbar-brand-logo {
	box-sizing: border-box;
	width: 38px;
	height: 38px;
	padding: 3px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 2px var(--wp--preset--color--zloto), 0 4px 12px rgba( 0, 0, 0, 0.25 );
	object-fit: contain;
}

/* 782–899 px: w przyklejonym pasku bez herbu — menu i eTaca ledwo się tu mieszczą */
@media ( min-width: 782px ) and ( max-width: 899px ) {
	.wls-navbar.is-stuck .wls-navbar-brand {
		display: none;
	}
}


/* ===================== WSPÓLNOTY: SPIS I PODSTRONY (02.10.2026) ===================== */

/*
 * /wspolnoty/ to spis kart (generuje narzedzia/parafia-stegny/wspolnoty-strony.php),
 * każda wspólnota ma własną podstronę /wspolnoty/{slug}/.
 * Karta bez zdjęcia dostaje granatowy pasek z herbem, żeby siatka była równa.
 */

/* Spis treści nad kartami (17.10.2026): siatka kafelków zamiast kolumn tekstu,
 * złota kropka i strzałka, jedna kolumna na telefonie */
.wls-wsp-spis {
	margin-top: 24px;
	padding: 24px;
	border: 1px solid var(--wp--preset--color--linia);
	border-top: 4px solid var(--wp--preset--color--zloto);
	border-radius: 16px;
	background: var(--wp--preset--color--tlo-soft);
}

.wls-wsp-spis-tytul {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px !important;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--granat);
}

.wls-wsp-spis-tytul::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--wp--preset--color--linia);
}

.wls-wsp-spis-lista {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none;
	font-size: 1rem;
}

.wls-wsp-spis-lista li {
	margin: 0;
	padding: 0;
	line-height: 1.3;
}

.wls-wsp-spis-lista a {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border: 1px solid var(--wp--preset--color--linia);
	border-radius: 10px;
	background: var(--wp--preset--color--tlo);
	color: var(--wp--preset--color--granat);
	font-weight: 500;
	text-decoration: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.wls-wsp-spis-lista a::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--zloto);
}

.wls-wsp-spis-lista a::after {
	content: "›";
	flex: none;
	margin-left: auto;
	font-size: 1.3rem;
	line-height: 1;
	color: var(--wp--preset--color--zloto-tekst);
	transition: transform 0.15s ease;
}

.wls-wsp-spis-lista a:hover,
.wls-wsp-spis-lista a:focus-visible {
	border-color: var(--wp--preset--color--zloto);
	box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.07 );
	transform: translateY( -1px );
}

.wls-wsp-spis-lista a:hover::after,
.wls-wsp-spis-lista a:focus-visible::after {
	transform: translateX( 3px );
}

@media ( min-width: 600px ) {
	.wls-wsp-spis-lista {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@media ( min-width: 900px ) {
	.wls-wsp-spis-lista {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.wls-wsp-spis-lista a,
	.wls-wsp-spis-lista a::after {
		transition: none;
		transform: none !important;
	}
}

.wls-wsp-lista {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 240px, 1fr ) );
	gap: 22px;
	margin-top: 28px;
}

.wls-wsp-lista > * {
	margin: 0 !important;
}

.wls-wsp-karta {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--linia);
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 26px rgba( 22, 36, 63, 0.06 );
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wls-wsp-karta:hover {
	transform: translateY( -4px );
	box-shadow: 0 18px 40px rgba( 22, 36, 63, 0.12 );
}

.wls-wsp-karta > * {
	margin-left: 18px !important;
	margin-right: 18px !important;
}

.wls-wsp-karta-zdjecie,
.wls-wsp-karta--bez-zdjecia::before {
	margin: 0 0 14px !important;
	aspect-ratio: 16 / 10;
}

.wls-wsp-karta-zdjecie img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wls-wsp-karta--bez-zdjecia::before {
	content: "";
	display: block;
	background:
		url( 'assets/img/logo.png' ) center / 64px auto no-repeat,
		linear-gradient( 135deg, var(--wp--preset--color--granat) 0%, var(--wp--preset--color--granat-2) 100% );
	opacity: 1;
}

.wls-wsp-karta h3 {
	margin-top: 0;
	margin-bottom: 6px;
	font-size: 1.3rem;
	line-height: 1.2;
}

.wls-wsp-karta h3 a {
	text-decoration: none;
	color: var(--wp--preset--color--granat);
}

.wls-wsp-karta p {
	margin-top: 0;
	margin-bottom: 8px;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--wp--preset--color--tekst-2);
}

.wls-wsp-karta .wls-wsp-karta-kiedy {
	font-size: 0.8rem;
	color: var(--wp--preset--color--zloto-tekst, var(--wp--preset--color--tekst-2));
	font-weight: 600;
}

.wls-wsp-karta .wls-wsp-karta-wiecej {
	margin-top: auto;
	padding-bottom: 18px;
	padding-top: 6px;
}

.wls-wsp-karta-wiecej a {
	font-weight: 600;
	font-size: 0.88rem;
	text-decoration: none;
	color: var(--wp--preset--color--granat);
	border-bottom: 1px solid var(--wp--preset--color--zloto);
}

.wls-wsp-karta-wiecej a::after {
	content: " →";
}

/* Podstrona wspólnoty */
.wls-wsp-powrot {
	margin-top: 36px !important;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--linia);
	font-size: 0.9rem;
	color: var(--wp--preset--color--tekst-2);
}

/* Karty wspólnot: obrazek zawsze w tej samej ramce 16:10; logotypy pokazujemy w całości */
.wls-wsp-karta-zdjecie {
	overflow: hidden;
	background: var(--wp--preset--color--tlo-soft);
}

.wls-wsp-karta-zdjecie a {
	display: block;
	width: 100%;
	height: 100%;
}

.wls-wsp-karta-zdjecie img {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
	padding: 10px;
	box-sizing: border-box;
}

.wls-wsp-karta--bez-zdjecia::before {
	background:
		url( 'assets/img/logo.png' ) center / 52px auto no-repeat,
		radial-gradient( circle at center, #fff 0 38px, transparent 39px ),
		linear-gradient( 135deg, var(--wp--preset--color--granat) 0%, var(--wp--preset--color--granat-2) 100% );
}

/* ===================== MENU ODDZIELONE OD PASA TYTUŁU (02.10.2026) ===================== */

/*
 * Uwaga Łukasza: granatowe menu i granatowy pas tytułu podstrony zlewały się
 * w jedną plamę. Złota linia pod menu (jak ta nad nim) domyka pasek menu,
 * a pas tytułu dostaje jaśniejszy, cieniowany granat — widać, że to dwie rzeczy.
 */

.wls-navbar {
	border-bottom: 1px solid rgba( 194, 153, 47, 0.45 );
}

.wls-naglowek-strony,
.wls-naglowek-archiwum,
.wls-naglowek-wpisu {
	background:
		radial-gradient( 120% 140% at 85% 0%, rgba( 255, 255, 255, 0.07 ) 0%, transparent 55% ),
		linear-gradient( 180deg, var(--wp--preset--color--granat-2) 0%, var(--wp--preset--color--granat) 100% ) !important;
	box-shadow: inset 0 10px 18px -12px rgba( 0, 0, 0, 0.45 );
}

/* Archiwum: opis kategorii w tej samej kolumnie co tytuł. Własne max-width (720 px)
   sprawiało, że układ WP centrował go inaczej niż tytuł i nadtytuł. */
.wls-naglowek-archiwum .wp-block-term-description {
	max-width: 820px !important; /* = contentSize nagłówka w templates/archive.html */
}

.wls-naglowek-archiwum .wp-block-term-description p {
	margin: 0;
}

/* Stopka: pełna nazwa parafii mniejsza — w wąskiej kolumnie zajmowała cztery linie */
.wls-footer-brand h3,
.wls-footer-brand h3.has-large-font-size {
	font-size: 1.2rem !important;
	line-height: 1.3;
	max-width: 22em;
}

/* Opis archiwum bez własnego wcięcia — w linii z tytułem i nadtytułem */
.wls-naglowek-archiwum .wp-block-term-description {
	padding-left: 0 !important;
	padding-right: 0 !important;
}


/* Nawigacja pod wpisem: mała etykieta („Poprzednie ogłoszenia”) nad wyraźnym tytułem,
   zamiast jednego zlanego zdania (02.10.2026). */
.wls-wpis-nawigacja .wp-block-post-navigation-link a {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	text-decoration: none;
	color: var(--wp--preset--color--granat);
}

.wls-wpis-nawigacja .post-navigation-link-next a {
	align-items: flex-end;
	text-align: right;
}

.wls-wpis-nawigacja .post-navigation-link__label {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--zloto-tekst, var(--wp--preset--color--tekst-2));
}

.wls-wpis-nawigacja .post-navigation-link-previous .post-navigation-link__label::before {
	content: "← ";
}

.wls-wpis-nawigacja .post-navigation-link-next .post-navigation-link__label::after {
	content: " →";
}

.wls-wpis-nawigacja .post-navigation-link__title {
	font-family: var(--wp--preset--font-family--naglowki);
	font-size: 1.15rem;
	font-weight: 600;
	line-height: 1.25;
}

.wls-wpis-nawigacja .wp-block-post-navigation-link a:hover .post-navigation-link__title {
	color: var(--wp--preset--color--blekit);
}

/* ===================== GRAFIKI WE WPISIE NIE WIĘKSZE NIŻ TREŚĆ (02.10.2026) ===================== */

/*
 * Uwaga Łukasza: plakaty były większe od tekstu (obraz wyróżniający szeroki,
 * wysokie plakaty na cały ekran). Teraz: szerokość kolumny tekstu, a wysokość
 * najwyżej ~3/4 ekranu — wysoki plakat nie wypycha treści.
 */
.wls-wpis-obraz,
.wls-wpis-obraz.alignwide {
	max-width: 760px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.wls-wpis-obraz img,
.wls-wpis-zdjecie img {
	display: block;
	width: auto !important;
	max-width: 100%;
	height: auto !important;
	max-height: 75vh;
	margin-left: auto;
	margin-right: auto;
	object-fit: contain;
}

/* Formularz: pola nie najeżdżają na siebie (02.10.2026). Szerokość 100% liczyła się
   bez paddingu i ramki, więc każde pole wychodziło ~30 px poza swoją kolumnę. */
.wls-pole input[type="text"],
.wls-pole input[type="email"],
.wls-pole input[type="tel"],
.wls-pole select,
.wls-pole textarea {
	box-sizing: border-box;
	max-width: 100%;
}

.wls-formularz-wiersz > .wls-pole {
	min-width: 0;
}

/* ===================== TELEFON: MNIEJ POWTÓRZEŃ, MENU BEZ BIAŁEGO PASKA (02.10.2026) ===================== */

/* Podpis pod nazwą w winiecie powtarza nadtytuł hero („Księża Marianie · Warszawa-Stegny”) */
@media ( max-width: 781px ) {
	.wls-masthead .wls-masthead-sub {
		display: none;
	}
}

/*
 * Menu mobilne: przy pierwszym przewinięciu przeglądarka chowa pasek adresu,
 * ekran się wydłuża, a nakładka nie nadążała — spod niej prześwitywało białe tło.
 * Nakładka ma wysokość dużego ekranu (bez paska adresu), a tło strony pod nią
 * przy otwartym menu jest granatowe, więc nic nie prześwituje.
 */
/* Wysokość = widoczna część ekranu (dvh zmienia się razem z paskiem przeglądarki).
   Wcześniej 100lvh: przy widocznym pasku dół menu (przycisk eTaca) chował się pod nim. */
.wls-navbar .wp-block-navigation__responsive-container.is-menu-open {
	box-sizing: border-box;
	height: 100vh;
	height: 100dvh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding-bottom: calc( 80px + env( safe-area-inset-bottom, 0px ) ) !important;
}

html.has-modal-open,
html.has-modal-open body {
	background: var(--wp--preset--color--granat-2);
}

/* Stopka: konta parafii w kolumnie Kontakt (02.10.2026) */
.wls-footer-konta {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid rgba( 255, 255, 255, 0.14 );
	line-height: 1.55;
}

.wls-footer-konta strong {
	display: inline-block;
	margin-bottom: 2px;
	font-size: 0.72rem;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--wp--preset--color--zloto-jasny);
}

.wls-nr-konta {
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.2px;
	color: #fff;
	user-select: all;
}

/* Hero na telefonie: kadr na krzyż i okno fasady — na zdjęciu z placu (IMG_5449)
   są one na środku szerokości (17.10.2026; wcześniej 70% 30% pod stare zdjęcie). */
@media ( max-width: 781px ) {
	.wls-hero .wp-block-cover__image-background {
		object-position: 50% 30% !important;
	}
}

/* Hero na komputerze: CAŁE zdjęcie, bez przybliżania (uwaga Łukasza 17.10.2026).
   Pas hero ma proporcje zdjęcia (3:2), więc object-fit: cover nic nie ucina.
   Nakładka ciemna tylko po lewej, pod tekstem; kościół po prawej zostaje odsłonięty. */
@media ( min-width: 782px ) {
	.wls-hero {
		/* Hero na wysokość ekranu pod nagłówkiem, ale nie wyższy niż całe zdjęcie (2/3 szerokości).
		   Całe zdjęcie na szerokim monitorze było wyższe niż ekran i chowało kafle z Mszami.
		   !important, bo blok ma min-height: 620px wpisane w atrybucie style. */
		min-height: clamp( 620px, calc( 100vh - 190px ), calc( 100vw * 2 / 3 ) ) !important;
	}

	/* Kadr przypięty do góry: krzyż i dach zawsze widoczne, ucina się plac na dole */
	.wls-hero .wp-block-cover__image-background {
		object-position: 50% 0% !important;
	}

	.wls-hero::before {
		background: linear-gradient( 90deg, rgba( 16, 26, 46, 0.86 ) 0%, rgba( 16, 26, 46, 0.62 ) 32%, rgba( 16, 26, 46, 0.18 ) 62%, rgba( 16, 26, 46, 0 ) 85% );
	}
}

/* Pasek na telefonie: bez eTaca (jest na dole nakładki menu), przycisk menu po prawej
   z podpisem „Menu" — same kreski nie dla każdego znaczą „rozwiń" (uwaga Łukasza 17.10.2026). */
@media ( max-width: 781px ) {
	.wls-navbar .wls-navbar-cta {
		display: none !important;
	}

	.wls-navbar .wls-nav {
		margin-left: auto;
	}

	.wls-navbar .wp-block-navigation__responsive-container-open {
		gap: 8px;
		align-items: center;
		padding: 6px 12px 6px 10px;
		border: 1px solid rgba( 255, 255, 255, 0.45 );
		border-radius: 999px;
		color: #fff;
	}

	.wls-navbar .wp-block-navigation__responsive-container-open::after {
		content: "Menu";
		font-size: 0.85rem;
		font-weight: 600;
		letter-spacing: 0.5px;
		line-height: 1;
	}

	.wls-navbar .wp-block-navigation__responsive-container-open:hover {
		border-color: var(--wp--preset--color--zloto);
	}
}

/* Ogłoszenia w panelu bocznym: wyraźne wezwanie do najnowszych ogłoszeń,
   link pod spodem prowadzi do archiwum (uwaga Łukasza 17.10.2026). */
.wls-widget--ogloszenia .wls-ogl-czytaj {
	display: inline-block;
	margin-top: 14px;
	padding: 9px 18px;
	border-radius: 999px;
	background: var(--wp--preset--color--zloto);
	color: var(--wp--preset--color--granat);
	font-size: 0.9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.2s ease;
}

.wls-widget--ogloszenia .wls-ogl-czytaj:hover,
.wls-widget--ogloszenia .wls-ogl-czytaj:focus-visible {
	background: var(--wp--preset--color--zloto-jasny);
}

/* Kafle pod zdjęciem: złota kreska u góry i odrobinę głębszy cień,
   żeby karty odcinały się od białego tła (17.10.2026). */

.wls-kafle .wls-kafel {
	border-top: 3px solid var(--wp--preset--color--zloto);
	box-shadow: 0 18px 40px rgba( 22, 36, 63, 0.11 );
}

.wls-kafle .wls-kafel:hover {
	box-shadow: 0 26px 60px rgba( 22, 36, 63, 0.16 );
}

/* Hero: efekt Ken Burns — zdjęcie powoli się oddala, raz, bez pętli (17.10.2026).
   Punkt zaczepienia u góry, żeby krzyż nie wyjeżdżał poza kadr. */
@media ( prefers-reduced-motion: no-preference ) {
	.wls-hero .wp-block-cover__image-background {
		transform-origin: 50% 0%;
		animation: wls-hero-oddalanie 14s cubic-bezier( 0.25, 0.1, 0.25, 1 ) both;
		will-change: transform;
	}
}

@keyframes wls-hero-oddalanie {
	from { transform: scale( 1.12 ); }
	to   { transform: scale( 1 ); }
}

/* Ogłoszenia w panelu: opis przyklejony do tytułu i wyciszony — z dużym odstępem
   „XXVI Dzień Papieski" wyglądał jak drugi, osobny link (uwaga Łukasza 17.10.2026). */
.wls-widget--ogloszenia .wp-block-post-title {
	margin-bottom: 0;
}

.wls-widget--ogloszenia .wp-block-post-excerpt {
	margin-top: 4px;
	font-size: 0.88rem;
	color: var(--wp--preset--color--tekst-2, #5b6577);
}

.wls-widget--ogloszenia .wp-block-post-excerpt__excerpt {
	margin: 0;
}

.wls-widget--ogloszenia .wls-ogl-czytaj {
	margin-top: 16px;
}

/* Przycisk na całą szerokość karty, link do archiwum wyśrodkowany pod nim —
   wcięty tekst zaokrąglonego przycisku nie zgrywał się z linkiem równanym do lewej. */
.wls-widget--ogloszenia .wls-ogl-czytaj {
	display: block;
	width: auto; /* rdzeń daje read-more width: fit-content */
	text-align: center;
}

.wls-widget--ogloszenia .wls-widget-link {
	margin-top: 12px;
	text-align: center;
}

/* ===================== POWIĘKSZANIE ZDJĘĆ BEZ IKONKI (17.10.2026) ===================== */

/*
 * Uwaga Łukasza: ikonka „Powiększ” wyskakiwała przy najechaniu, a przy zwężonych
 * plakatach stała na środku zdjęcia zamiast w rogu. Klik w zdjęcie powiększa
 * i tak (kursor-lupa to podpowiada); przycisk zostaje dla klawiatury i pokazuje
 * się tylko przy przejściu tabulatorem.
 */
.wp-lightbox-container img {
	cursor: zoom-in;
}

.wp-lightbox-container button.lightbox-trigger {
	opacity: 0 !important;
}

.wp-lightbox-container button.lightbox-trigger:focus-visible {
	opacity: 1 !important;
}

/* ===================== PATRONKA: MATKA MIŁOSIERDZIA (17.10.2026) ===================== */
/*
 * Spokojny pas na granacie między aktualnościami a wspólnotami: obraz Matki Bożej
 * po lewej, krótki tekst po prawej. Klasy bez podwójnego myślnika celowo —
 * w treści strony zapisywanej przez WP-CLI „--" w atrybutach bloku zamienia się
 * w „u002d" (wp_insert_post zdejmuje ukośniki), więc kolory nadajemy tu.
 */

.wls-patronka .wls-eyebrow {
	color: var(--wp--preset--color--zloto-jasny);
}

.wls-patronka h2 {
	position: relative;
	margin: 0 0 22px;
	padding-bottom: 18px;
	font-size: clamp( 2rem, 4vw, 2.9rem );
	color: #fff;
}

.wls-patronka h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 56px;
	height: 2px;
	background: linear-gradient( 90deg, var(--wp--preset--color--zloto), var(--wp--preset--color--zloto-jasny) );
}

.wls-patronka-tekst {
	max-width: 560px;
	font-size: 1.08rem;
	line-height: 1.75;
	color: rgba( 255, 255, 255, 0.86 );
}

.wls-patronka-obraz {
	margin: 0;
	text-align: center;
}

.wls-patronka-obraz img {
	width: 100%;
	max-width: 400px;
	height: auto;
	border-radius: 6px;
	box-shadow: 0 0 0 1px rgba( 217, 184, 90, 0.55 ), 0 0 0 8px rgba( 255, 255, 255, 0.04 ), 0 30px 70px rgba( 0, 0, 0, 0.45 );
}

.wls-patronka-link a {
	display: inline-block;
	margin-top: 8px;
	color: var(--wp--preset--color--zloto-jasny);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 2px;
}

.wls-patronka-link a:hover,
.wls-patronka-link a:focus-visible {
	color: #fff;
}

@media ( max-width: 781px ) {
	.wls-patronka-obraz img {
		max-width: 300px;
	}

	.wls-patronka-kolumny {
		gap: 32px;
	}
}

/* Nawigacja pod wpisem na telefonie: dwie karty jedna pod drugą, obie równane do lewej.
   Wcześniej „Następny wpis" uciekał w prawo, a tytuł zostawał po lewej — tekst skakał
   (uwaga Łukasza 17.10.2026). */
@media ( max-width: 781px ) {
	.wls-wpis-nawigacja {
		flex-direction: column;
		align-items: stretch !important;
		gap: 12px;
	}

	.wls-wpis-nawigacja .wp-block-post-navigation-link a,
	.wls-wpis-nawigacja .post-navigation-link-next a {
		display: flex;
		width: 100%;
		box-sizing: border-box;
		align-items: flex-start;
		text-align: left;
		padding: 14px 18px;
		background: #fff;
		border: 1px solid var(--wp--preset--color--linia);
		border-radius: 12px;
	}

	.wls-wpis-nawigacja .post-navigation-link-previous,
	.wls-wpis-nawigacja .post-navigation-link-next {
		width: 100%;
	}
}

/* Cyfry w krojach nagłówkowych na jednej linii (Cormorant ma domyślnie cyfry nautyczne,
   „2026-2027" skakało w górę i w dół, a łącznik wyglądał na zawieszony). */
h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.wls-wpis-nawigacja .post-navigation-link__title {
	font-variant-numeric: lining-nums;
}

/* Łącznik w nagłówkach z kroju Inter. Cormorant rysuje „-" ukośnie, jak kreskę piórem,
   i „Mini-obóz" wyglądał na przechylony (uwaga Łukasza 17.10.2026). Krój „WLS Lacznik"
   obejmuje tylko łączniki (unicode-range), więc reszta tytułu zostaje w Cormorancie.
   Stoi pierwszy w rodzinie „naglowki" w theme.json. */
@font-face {
	font-family: "WLS Lacznik";
	src: url( "assets/fonts/inter-400-latin.woff2" ) format( "woff2" );
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+002D, U+2010-2011;
}