/* Parafia MB Uzdrowienie Chorych w Tarnowskich Górach – szablon responsywny (SmodCMS 3.x)
   Wersja 2026. Przepisany od nowa na podstawie arkusza (C) 2007-2008 Tworcy.pl
   oraz dopasowania layoutu przez Krzysztofa Gawliczka.
   Układ: CSS Grid + media queries, bez obrazków tła (tylko czysty CSS). */

:root {
	--bordo-950: #2a0911;
	--bordo-900: #3f0c19;
	--bordo-800: #5c1226;
	--bordo-700: #7b1830;
	--bordo-600: #9a1f3c;
	--red: #c0273f;
	--red-soft: #f7e9eb;
	--gold: #c8a15a;
	--ink: #2b2427;
	--muted: #6e5f64;
	--line: #e8dcde;
	--paper: #ffffff;
	--page: #f6f1f0;
	--radius: 14px;
	--shell: 1260px;
	--bar-h: 52px;
	/* boczny margines: min. 16px, na szerokich ekranach wyśrodkowuje całość */
	--pad: max(16px, calc((100% - var(--shell)) / 2));
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: 64px;
}

body {
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink);
	background: var(--page);
}

a { color: var(--bordo-600); }
a img { border: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

img.foto {
	padding: 3px;
	border: 1px solid var(--line);
	background: #fff;
	border-radius: 4px;
}

p.hr { width: 90%; height: 1px; display: block; background: var(--line); margin: 0 auto; }
.fl { float: left; margin-right: 10px; }
.fr { float: right; }
.right { text-align: right; }

/* ------------------------------------------------------------------ */
/* SIATKA STRONY                                                       */
/* ------------------------------------------------------------------ */

#main {
	position: relative;
	display: grid;
	grid-template-columns: var(--pad) 250px minmax(0, 1fr) 290px var(--pad);
	grid-template-areas:
		"bar   bar     bar     bar  bar"
		"head  head    head    head head"
		"tick  tick    tick    tick tick"
		".     menu    content side .";
	align-items: start;
}

#txt { display: contents; }   /* #menu i #content trafiają bezpośrednio do siatki */

.skip {
	position: absolute;
	left: -9999px;
	top: 0;
}
.skip:focus {
	left: 12px;
	top: 12px;
	z-index: 100;
	background: #fff;
	color: var(--bordo-800);
	padding: .5rem 1rem;
	border-radius: 8px;
}

/* ------------------------------------------------------------------ */
/* PASEK NARZĘDZI (rozmiar czcionki, przycisk menu)                    */
/* ------------------------------------------------------------------ */

#topmenu {
	grid-area: bar;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 12px;
	min-height: 40px;
	padding: 4px var(--pad);
	background: var(--bordo-950);
	color: #e6d3d8;
	font-size: .85rem;
	position: relative;
	z-index: 50;
}

#change { display: flex; align-items: center; gap: 4px; }
.aaa { display: inline-flex; align-items: center; gap: 6px; }
.at { margin-right: 4px; }

#change button {
	font: inherit;
	font-weight: 700;
	line-height: 1;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 8px;
	min-width: 34px;
	height: 32px;
	padding: 0 8px;
	cursor: pointer;
}
#change button:hover { background: rgba(255, 255, 255, .14); }
#change .as { font-size: 12px; }
#change .am { font-size: 15px; }
#change .al { font-size: 19px; }

#menu-toggle {
	display: none;
	align-items: center;
	gap: .6rem;
	font: inherit;
	font-weight: 600;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 999px;
	padding: .4rem 1rem .4rem .85rem;
	cursor: pointer;
}
#menu-toggle[aria-expanded="true"] { background: rgba(255, 255, 255, .18); }
#menu-toggle .bars {
	width: 18px;
	height: 14px;
	background:
		linear-gradient(#fff, #fff) 0 0 / 100% 2px no-repeat,
		linear-gradient(#fff, #fff) 0 50% / 100% 2px no-repeat,
		linear-gradient(#fff, #fff) 0 100% / 100% 2px no-repeat;
}

/* ------------------------------------------------------------------ */
/* NAGŁÓWEK                                                            */
/* ------------------------------------------------------------------ */

#head {
	grid-area: head;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	padding: clamp(18px, 3.4vw, 34px) var(--pad);
	background:
		radial-gradient(120% 160% at 100% 0%, rgba(192, 39, 63, .35), transparent 55%),
		linear-gradient(135deg, var(--bordo-900) 0%, var(--bordo-700) 60%, var(--bordo-600) 100%);
	color: #fff;
	box-shadow: inset 0 -3px 0 rgba(200, 161, 90, .75);
}

#head h1 {
	flex: 1;
	min-width: 0;
	display: block;
	visibility: visible;
	width: auto;
	height: auto;
	font-size: 1rem;
	font-weight: 400;
	color: #fff;
}

#head h1 a {
	display: flex;
	align-items: center;
	gap: clamp(14px, 2.4vw, 24px);
	color: #fff;
	text-decoration: none;
}

/* znak: krzyż kamiliański (dolne ramię dłuższe) w białym kole */
#head .mark {
	flex: none;
	width: clamp(48px, 7vw, 72px);
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		linear-gradient(var(--red), var(--red)) 50% 82.3% / 20% 88% no-repeat,
		linear-gradient(var(--red), var(--red)) 50% 40.3% / 63% 20% no-repeat,
		#fff;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .22);
}

#head .titles { display: block; min-width: 0; }
#head .t1 {
	display: block;
	font-size: clamp(.7rem, 1.5vw, .88rem);
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .85;
}
#head .t2 {
	display: block;
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(1.3rem, 3.6vw, 2.4rem);
	line-height: 1.15;
	margin: .12em 0;
}
#head .t3 {
	display: block;
	font-size: clamp(.9rem, 1.8vw, 1.15rem);
	opacity: .9;
}

/* zdjęcie kościoła w nagłówku – plik: layout/kamilianietg/images/kosciol.jpg (do czasu wgrania widać ramkę zastępczą) */
#head .photo {
	position: relative;
	flex: none;
	height: clamp(110px, 13vw, 170px);
	aspect-ratio: 16 / 10;
	border-radius: 12px;
	overflow: hidden;
	border: 3px solid rgba(255, 255, 255, .85);
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100' fill='none' stroke='white' stroke-opacity='.65' stroke-width='1.6' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M10 88H150M48 88V38L65 16L82 38V88M65 16V6M61 10H69M82 88V60H138V88M82 60L110 46L138 60M60 88V76a5 5 0 0 1 10 0V88M94 80v-9a4 4 0 0 1 8 0v9M118 80v-9a4 4 0 0 1 8 0v9'/%3E%3C/svg%3E") center 42% / 62% no-repeat,
		linear-gradient(160deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04));
	box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
}
#head .photo::after {
	content: "zdjęcie kościoła";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 8px;
	text-align: center;
	font-size: .68rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
}
#head .photo img {
	position: absolute;
	z-index: 1;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ------------------------------------------------------------------ */
/* PASEK Z DATĄ I IMIENINAMI (przewijany skryptem add/scroller.js)     */
/* ------------------------------------------------------------------ */

#winieta {
	grid-area: tick;
	padding: 0 var(--pad);
	background: #fbf3f2;
	border-bottom: 1px solid var(--line);
}
#winieta > a { display: none; }

#imieniny { width: 100%; margin: 0; padding: 0; }
#scroller {
	width: 100%;
	height: 40px;
	overflow: hidden;
	white-space: nowrap;
	position: relative;
}
#imieniny-in {
	width: 100%;
	padding-top: 9px;
	font-weight: bold;
}
#scroller div.imieniny {
	width: 100%;
	color: var(--bordo-800);
	font-size: .95rem;
	padding: 0 4px 0 2px;
	position: relative;
}
/* niewidoczne „wypełnienie” (podkreślniki #000002) z imiennik.php */
#scroller .imieniny span[style*="000002"] { color: transparent !important; }

/* ------------------------------------------------------------------ */
/* MENU GŁÓWNE                                                         */
/* ------------------------------------------------------------------ */

#menu {
	grid-area: menu;
	margin: 24px 24px 24px 0;
	padding: 8px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 1px 2px rgba(60, 12, 25, .06);
}

#menu h2.menutitle {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

#menu ul, #menu li { list-style: none; }

#menu a {
	display: block;
	padding: .6rem .8rem;
	border-radius: 8px;
	color: var(--ink);
	text-decoration: none;
	font-size: .95rem;
	line-height: 1.3;
}
#menu a:hover { background: var(--red-soft); color: var(--bordo-700); }
#menu li li a { margin-left: 14px; font-size: .9rem; }

#menu li.current > a { background: var(--bordo-700); color: #fff; font-weight: 600; }
#menu li.current > a:hover { background: var(--bordo-800); color: #fff; }

#menu li.separator { height: 1px; margin: 8px 8px; background: var(--line); }
#menu li.separator span { display: none; }

/* ------------------------------------------------------------------ */
/* TREŚĆ                                                               */
/* ------------------------------------------------------------------ */

#content {
	grid-area: content;
	min-width: 0;
	margin: 24px 0;
	padding: clamp(18px, 3.2vw, 38px);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 1px 2px rgba(60, 12, 25, .06);
	/* domyślny rozmiar; przyciski A A A (wielkosc()) nadpisują go stylem inline */
	font-size: 12pt;
	line-height: 1.65;
	text-align: left;
	overflow-wrap: break-word;
	hyphens: auto;
}

#content > br { display: none; }

#content h1 {
	position: relative;
	margin: 1.5em 0 .7em;
	padding-bottom: .45em;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.75em;
	font-weight: 400;
	line-height: 1.2;
	color: var(--bordo-800);
	border-bottom: 2px solid var(--red-soft);
}
#content h1::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 56px;
	height: 2px;
	background: var(--red);
}
#content > h1:first-of-type { margin-top: 0; }

#content h2 {
	margin: 1.5em 0 .5em;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.4em;
	font-weight: 400;
	line-height: 1.25;
	color: var(--bordo-700);
}
#content h3 {
	margin: 1.5em 0 .4em;
	font-size: 1.15em;
	line-height: 1.3;
	color: var(--bordo-700);
}
#content h4 {
	margin: 1.2em 0 .3em;
	font-size: 1em;
	color: var(--muted);
}

#content p { margin: 0 0 .8em; }
#content ul, #content ol { margin: 0 0 1em 1.3em; padding-left: .7em; }
#content ul { list-style-type: square; }
#content li { margin: .35em 0; }
#content a { text-underline-offset: .15em; }
#content a:hover { color: var(--red); }

#content img { max-width: 100%; height: auto; }
#content iframe { max-width: 100%; }
#content iframe[src*="youtube"], #content iframe[src*="youtu.be"] {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
}
#content table { border-collapse: collapse; max-width: 100%; }
#content td, #content th { padding: .35em .6em; vertical-align: top; }
#content input[type="text"], #content input[type="email"], #content textarea { max-width: 100%; }

#print { text-align: right; margin: 14px 0 0; }
#print img { opacity: .75; }
#print img:hover { opacity: 1; }

/* ------------------------------------------------------------------ */
/* PRAWA KOLUMNA: wyszukiwarka + liturgia dnia                         */
/* ------------------------------------------------------------------ */

#prawa { grid-area: side; min-width: 0; margin: 24px 0 24px 24px; }

#search { margin: 0 0 16px; padding: 0; width: auto; height: auto; font-size: 1rem; }
#search form { display: flex; }
#search input[type="text"] {
	flex: 1;
	min-width: 0;
	font: inherit;
	font-size: .95rem;
	color: var(--ink);
	background: #fff;
	border: 1px solid var(--line);
	border-right: 0;
	border-radius: 999px 0 0 999px;
	padding: .6rem .5rem .6rem 1rem;
	width: auto;
	margin: 0;
}
#search button {
	flex: none;
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	color: #fff;
	background: var(--bordo-700);
	border: 0;
	border-radius: 0 999px 999px 0;
	padding: 0 1.1rem;
	cursor: pointer;
}
#search button:hover { background: var(--bordo-800); }

#prawydol {
	min-height: 0;
	padding: 18px;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 1px 2px rgba(60, 12, 25, .06);
	font-size: .95rem;
	line-height: 1.5;
}
#prawydol br { display: none; }
#prawydol a { color: var(--bordo-600); }
#prawydol a.more {
	display: inline-block;
	margin-top: .6rem;
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	float: none;
	position: static;
}
#prawydol a.more:hover { color: var(--red); text-decoration: underline; }

.www_edycja_pl h5 { margin: 0 0 .4rem; font-size: 1rem; }
.www_edycja_pl img { display: block; max-width: 100%; height: auto; margin: 0 0 .3rem; }
.www_edycja_pl p, .www_edycja_pl blockquote { margin: 0 0 1rem; }
.www_edycja_pl p.p_czytanie { margin-bottom: 0; }
.www_edycja_pl blockquote {
	padding-left: 12px;
	border-left: 3px solid var(--red);
	font-style: italic;
}
.p_imieniny, .n_imieniny { display: none; }
cite { display: block; text-align: right; font-style: normal; color: var(--muted); font-size: .9em; margin-top: .3em; }

/* ------------------------------------------------------------------ */
/* STOPKA                                                              */
/* ------------------------------------------------------------------ */

#footer {
	padding: 28px var(--pad);
	background: var(--bordo-950);
	box-shadow: inset 0 3px 0 rgba(200, 161, 90, .75);
	color: #cdb6bc;
	font-size: .88rem;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
}
#footer p { margin: 0; }
#footer ul { list-style-type: none; }
#footer a { color: #cdb6bc; text-decoration: underline; text-underline-offset: .15em; }
#footer a:hover { color: #fff; }

/* ------------------------------------------------------------------ */
/* MODUŁY CMS (aktualności, wyszukiwarka, mapa strony, logowanie…)     */
/* ------------------------------------------------------------------ */

div.info { color: var(--red); font-weight: bold; margin: 5px 0; }

#niushome, #nius { margin: 20px 0 10px; font-size: .95em; }
#niushome p, #nius p { margin: 0; line-height: 1.4; }
#niushome .date, #nius .date { color: var(--muted); font-size: .9em; }
#niushome .intro, #nius .intro,
#niushome .intro2, #nius .intro2 {
	background: #fbf7f6;
	padding: 12px 14px;
	border-left: 3px solid var(--red);
	border-radius: 6px;
	margin: 0 0 14px;
}
#niushome .intro2, #nius .intro2 { background: #f6eeed; }
#niushome a.more, #nius a.more {
	float: right;
	margin-top: 6px;
	color: var(--bordo-600);
	font-size: .9em;
	font-weight: bold;
	text-decoration: none;
}
#niushome h2.newstitle, #nius h2.newstitle { visibility: hidden; height: 0; }

#lata, #searchresultinfo, #next {
	width: 100%;
	margin: 8px 0;
	padding: 8px 12px;
	background: var(--red-soft);
	border: 1px solid var(--line);
	border-radius: 8px;
	font-weight: bold;
}
#lata { text-align: center; }
#next { text-align: right; }
#searchresultinfo b { color: var(--red); }
.znalazl { color: var(--bordo-700); font-weight: bold; background-color: #fff3b8; }
div.searchresultshow { margin: 5px 0; padding: 7px 0; border-bottom: 1px solid var(--line); }
div.searchresultshow a { color: var(--ink); text-decoration: none; }
div.searchresultshow a:hover { text-decoration: underline; }

#sitemap ul { margin: 5px 0 0 1.4em; list-style: square; }
#sitemap ul li.noico { list-style: none; }
#sitemap a { text-decoration: none; }

#divlogin, #divregister {
	background: #fbf7f6;
	padding: 20px 14px 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
}
#divlogin fieldset, #divregister fieldset { border: 0; }
#divlogin dl dt, #divregister dl dt { width: auto; height: auto; text-align: left; font-weight: bold; margin-top: 10px; }
#divlogin dl dd, #divregister dl dd { position: static; height: auto; padding-left: 0; }
#divlogin input.go, #divregister input.go { width: auto; }
#divregister input { max-width: 100%; }
#divregister ul { margin: 0 0 0 25px; }
#divconfig td input { margin: 3px 0; background: #ff00ff; width: 10px; }

#userinfo { margin: 25px 20px 10px; color: var(--muted); font-size: .9em; }
.podpis { color: #000; font-size: 12px; text-align: right; font-style: italic; margin: 10px; }

/* nakładka dla zalogowanego edytora (grafiki z katalogu images) */
#edytorski {
	background-image: url(../images/polzero.png);
	position: absolute;
	top: 90px;
	left: 25px;
	color: #fff;
	width: 250px;
	padding: 9px;
}
#searcherr {
	margin: 0;
	padding: 0 5px 0 10px;
	font-size: .9em;
	width: 224px;
	height: 31px;
	background-image: url(../images/searchbg.gif);
	background-repeat: no-repeat;
}
#searcherr img { margin: 0; position: relative; top: 5px; right: -10px; }
#searcherr input {
	font-size: .9em;
	color: #555;
	background: #fff;
	border: solid 1px #000;
	padding: 3px;
	width: 160px;
	margin: 0;
}

/* GALERIA – siatka kart. Każde wydarzenie to jeden <div class="album">, nagłówki lat to <h3>.
   Ten sam wygląd ma lista z modułu galerii (.galeria-grid) - patrz modules/gallery/style.css.
   Nowe wydarzenie = dopisanie jednego bloku .album pod właściwym rokiem. */
:is(#galeria, .galeria-grid) {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 20px;
	align-items: start;
}
:is(#galeria, .galeria-grid) > h3 {
	grid-column: 1 / -1;
	margin: 1.4em 0 0;
	padding-bottom: .3em;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 1.4em;
	font-weight: 400;
	letter-spacing: .02em;
	color: var(--bordo-700);
	border-bottom: 2px solid var(--red-soft);
}
:is(#galeria, .galeria-grid) > h3:first-child { margin-top: .4em; }
:is(#galeria, .galeria-grid) .album {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(60, 12, 25, .06);
	transition: box-shadow .2s ease, transform .2s ease;
}
:is(#galeria, .galeria-grid) .album:hover { box-shadow: 0 8px 22px rgba(60, 12, 25, .16); transform: translateY(-2px); }
:is(#galeria, .galeria-grid) .album > a {
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--red-soft);
}
:is(#galeria, .galeria-grid) .album img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .35s ease;
}
:is(#galeria, .galeria-grid) .album:hover img { transform: scale(1.05); }
:is(#galeria, .galeria-grid) .album h4 {
	margin: 0;
	padding: 12px 14px 14px;
	font-size: .88em;
	font-weight: 600;
	line-height: 1.35;
	text-align: left;
	color: var(--ink);
}
:is(#galeria, .galeria-grid) .album h4 a { color: inherit; text-decoration: none; }
:is(#galeria, .galeria-grid) .album h4 a:hover { color: var(--red); text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
	:is(#galeria, .galeria-grid) .album, :is(#galeria, .galeria-grid) .album img { transition: none; }
	:is(#galeria, .galeria-grid) .album:hover, :is(#galeria, .galeria-grid) .album:hover img { transform: none; }
}

/* wersja do druku (druk.php) */
body.druk {
	background: #fff;
	color: #000;
	background-image: url(../images/zero.gif);
	background-repeat: no-repeat;
	text-align: center;
	margin-bottom: 25px;
}
#dodruku { max-width: 700px; padding: 15px; text-align: left; }
#dodruku p { margin-bottom: 9px; }
#dodruku ul, #dodruku ol { margin: 0 0 10px 30px; }
#drukujemy { width: 580px; float: right; }
#drukujemylogo { width: 90px; }
#drukstopka { text-align: right; border-top: 1px solid #000; margin-top: 30px; padding-top: 10px; }

/* ------------------------------------------------------------------ */
/* TABLET: menu i prawa kolumna jedna pod drugą, treść obok            */
/* ------------------------------------------------------------------ */

@media (max-width: 1099px) {
	#main {
		grid-template-columns: var(--pad) 240px minmax(0, 1fr) var(--pad);
		grid-template-areas:
			"bar  bar     bar     bar"
			"head head    head    head"
			"tick tick    tick    tick"
			".    menu    content ."
			".    side    content .";
		grid-template-rows: auto auto auto auto 1fr;
	}
	#menu { margin: 24px 20px 20px 0; }
	#prawa { margin: 0 20px 24px 0; }
}

/* ------------------------------------------------------------------ */
/* TELEFON: jedna kolumna, menu rozwijane z paska                      */
/* ------------------------------------------------------------------ */

@media (max-width: 759px) {
	:root { --pad: 16px; }

	#main {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"bar" "head" "tick" "menu" "search" "content" "side";
		grid-template-rows: none;
	}

	#topmenu {
		position: sticky;
		top: 0;
		height: var(--bar-h);
		justify-content: space-between;
		box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
	}
	html.js #menu-toggle { display: inline-flex; }
	#change .at { display: none; }
	#change button { min-width: 40px; height: 36px; }

	#head .t1 { letter-spacing: .1em; }
	#head .photo { display: none; }
	#scroller { height: 38px; }

	/* menu: z JavaScriptem – panel pod paskiem; bez JS – zwykła lista pod nagłówkiem */
	#menu { margin: 16px; }
	html.js #menu { display: none; }
	html.js.menu-open #menu {
		display: block;
		position: fixed;
		z-index: 40;
		top: var(--bar-h);
		left: 0;
		right: 0;
		margin: 0;
		max-height: calc(100vh - var(--bar-h));
		max-height: calc(100dvh - var(--bar-h));
		overflow-y: auto;
		overscroll-behavior: contain;
		border-radius: 0 0 var(--radius) var(--radius);
		box-shadow: 0 14px 30px rgba(0, 0, 0, .3);
	}
	#menu a { padding: .8rem .9rem; }

	/* wyszukiwarka nad treścią, liturgia dnia pod treścią */
	#prawa { display: contents; }
	#search { grid-area: search; margin: 16px 16px 0; }
	#prawydol { grid-area: side; margin: 0 16px 24px; }

	#content { margin: 16px 12px; border-radius: 12px; }

	/* stopka: elementy jeden pod drugim, wyśrodkowane */
	#footer { flex-direction: column; justify-content: center; text-align: center; gap: 6px; }
	#footer .sep { display: none; }
	#footer .f-addr { display: block; }

	#content ul, #content ol { margin-left: .4em; }
	#content .fl, #content .fr { float: none; margin: 0 0 1em; }
	#content img[style*="float"], #content img[align] {
		float: none !important;
		display: block;
		margin: .6em auto !important;
	}
	#content table { display: block; overflow-x: auto; }
	:is(#galeria, .galeria-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	:is(#galeria, .galeria-grid) .album h4 { padding: 9px 10px 11px; font-size: .8em; }
}

@media (max-width: 380px) {
	#head .mark { display: none; }
}

/* ------------------------------------------------------------------ */
/* PRZYCISK „ZADZWOŃ” – tylko urządzenia dotykowe o małym ekranie      */
/* ------------------------------------------------------------------ */

#callbtn { display: none; }

@media (pointer: coarse) and (hover: none) and (max-width: 960px) {
	#callbtn {
		position: fixed;
		right: 16px;
		bottom: 16px;
		z-index: 8000;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 54px;
		height: 54px;
		border: 2px solid #fff;
		border-radius: 50%;
		background: #1f9d4d;
		box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
		-webkit-tap-highlight-color: transparent;
	}
	#callbtn:active { background: #17803d; }
	#callbtn svg { width: 28px; height: 28px; display: block; }
}

/* ------------------------------------------------------------------ */
/* DRUK                                                                */
/* ------------------------------------------------------------------ */

@media print {
	#callbtn, #head .photo, #topmenu, #menu, #prawa, #winieta, #footer, #print, .skip { display: none !important; }
	body { background: #fff; }
	#main { display: block; }
	#head { background: none; color: #000; padding: 0 0 10px; box-shadow: none; }
	#head h1 a, #head .t1, #head .t2, #head .t3 { color: #000; }
	#head .mark { display: none; }
	#content { border: 0; box-shadow: none; padding: 0; margin: 0; font-size: 11pt; }
}