/* AKO-AREK - arkusz stylów 2026 */

@font-face {
	font-family: 'Archivo';
	src: url('/fonts/archivo-var.woff2') format('woff2');
	font-weight: 400 800;
	font-stretch: 62% 100%;
	font-style: normal;
	font-display: swap;
}

:root {
	--grafit: #22231f;
	--grafit-2: #3d3e37;
	--szary: #66655c;
	--beton: #eceae4;
	--beton-2: #e2dfd7;
	--linia: #d6d3c8;
	--oliwka: #857a42;
	--oliwka-ciemna: #5a5226;
	--czerwien: #a3161c;
	--czerwien-ciemna: #84111a;
	--bialy: #fff;

	--max: 1240px;
	--pad: clamp(1rem, 4vw, 2.5rem);
	--naglowek-h: 76px;
	--font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--naglowek-h) + 1rem); }
body {
	margin: 0;
	background: var(--bialy);
	color: var(--grafit);
	font-family: var(--font);
	font-size: 1.0625rem;
	line-height: 1.6;
	font-stretch: 100%;
	font-variant-numeric: lining-nums;
	text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: var(--oliwka-ciemna); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--czerwien); }
:focus-visible { outline: 3px solid var(--oliwka); outline-offset: 2px; }
address { font-style: normal; }

.skip-link {
	position: absolute; left: 1rem; top: -100px; z-index: 100;
	background: var(--grafit); color: #fff; padding: .6rem 1rem; text-decoration: none;
}
.skip-link:focus { top: .5rem; color: #fff; }

/* ---------- przyciski ---------- */
.przycisk {
	display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
	min-height: 48px; padding: .7rem 1.3rem;
	font: inherit; font-weight: 650; font-stretch: 86%; font-size: 1.06rem; line-height: 1.2;
	text-decoration: none; cursor: pointer;
	border: 2px solid transparent; border-radius: 2px;
	transition: background-color .15s, color .15s, border-color .15s;
}
.przycisk svg { width: 1.1em; height: 1.1em; fill: currentColor; flex: none; }
.przycisk-glowny { background: var(--czerwien); border-color: var(--czerwien); color: #fff; }
.przycisk-glowny:hover { background: var(--czerwien-ciemna); border-color: var(--czerwien-ciemna); color: #fff; }
.przycisk-drugi { background: transparent; border-color: var(--grafit); color: var(--grafit); }
.przycisk-drugi:hover { background: var(--grafit); color: #fff; }
.przycisk[disabled] { opacity: .6; cursor: progress; }

/* ---------- nagłówek ---------- */
.naglowek {
	position: sticky; top: 0; z-index: 50;
	background: rgba(255,255,255,.97);
	border-bottom: 1px solid var(--linia);
}
.naglowek-wnetrze {
	max-width: var(--max); margin: 0 auto; padding: 0 var(--pad);
	min-height: var(--naglowek-h);
	display: flex; align-items: center; gap: 1rem;
}
.logo { display: block; margin-right: auto; line-height: 0; }
.logo img { display: block; height: 58px; width: auto; }

.menu { display: flex; align-items: center; gap: 1.5rem; }
.menu ul { display: flex; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.menu ul a {
	display: block; padding: .55rem .85rem;
	color: var(--grafit); text-decoration: none;
	font-weight: 600; font-stretch: 82%; font-size: 1.08rem;
}
.menu ul a:hover { color: var(--czerwien); }
.menu ul a[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--czerwien); }
.menu-telefon {
	display: inline-flex; align-items: center; gap: .45rem;
	padding: .45rem .9rem; border: 2px solid var(--czerwien); border-radius: 2px;
	color: var(--czerwien); text-decoration: none;
	font-weight: 700; font-stretch: 82%; font-size: 1.08rem; font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.menu-telefon svg { width: 1em; height: 1em; fill: currentColor; }
.menu-telefon:hover { background: var(--czerwien); color: #fff; }

.menu-przycisk, .telefon-mobile { display: none; }

@media (max-width: 899px) {
	:root { --naglowek-h: 64px; }
	.logo img { height: 42px; }
	.telefon-mobile {
		display: inline-flex; align-items: center; justify-content: center;
		width: 46px; height: 46px; border-radius: 50%;
		background: var(--czerwien); color: #fff;
	}
	.telefon-mobile svg { width: 22px; height: 22px; fill: currentColor; }
	.menu-przycisk {
		display: inline-flex; align-items: center; gap: .5rem;
		height: 46px; padding: 0 .75rem;
		background: none; border: 2px solid var(--grafit); border-radius: 2px;
		font: inherit; font-weight: 650; font-stretch: 85%; color: var(--grafit); cursor: pointer;
	}
	.menu-ikona { position: relative; width: 18px; height: 12px; }
	.menu-ikona::before, .menu-ikona::after, .menu-ikona span {
		content: ''; position: absolute; left: 0; width: 100%; height: 2px; background: currentColor;
		transition: transform .2s, opacity .2s;
	}
	.menu-ikona::before { top: 0; }
	.menu-ikona span { top: 5px; }
	.menu-ikona::after { top: 10px; }
	.menu-przycisk[aria-expanded="true"] .menu-ikona::before { transform: translateY(5px) rotate(45deg); }
	.menu-przycisk[aria-expanded="true"] .menu-ikona span { opacity: 0; }
	.menu-przycisk[aria-expanded="true"] .menu-ikona::after { transform: translateY(-5px) rotate(-45deg); }

	.menu {
		display: none;
		position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; align-items: stretch; gap: 0;
		background: #fff; border-bottom: 1px solid var(--linia);
		box-shadow: 0 18px 30px -18px rgba(34,35,31,.35);
		padding: .5rem var(--pad) 1.25rem;
	}
	.menu.otwarte { display: flex; }
	.menu ul { flex-direction: column; gap: 0; }
	.menu ul li + li { border-top: 1px solid var(--linia); }
	.menu ul a { padding: .9rem 0; font-size: 1.25rem; }
	.menu ul a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--czerwien); padding-left: .9rem; }
	.menu-telefon { margin-top: 1rem; justify-content: center; min-height: 52px; background: var(--czerwien); color: #fff; font-size: 1.2rem; }
	html:not(.js) .menu { display: flex; position: static; box-shadow: none; }
	html:not(.js) .menu-przycisk { display: none; }
}
@media (max-width: 380px) {
	.menu-etykieta { display: none; }
	.logo img { height: 36px; }
}

/* ---------- hero (strona główna) ---------- */
.hero {
	display: grid;
	grid-template-columns:
		[pelna-start] minmax(var(--pad), 1fr)
		[tresc-start] minmax(0, calc(var(--max) * .42 - var(--pad)))
		[podzial] minmax(0, calc(var(--max) * .58 - var(--pad)))
		[tresc-koniec] minmax(var(--pad), 1fr) [pelna-koniec];
	background: var(--beton);
	border-bottom: 1px solid var(--linia);
}
.hero-tekst {
	grid-column: tresc-start / podzial;
	align-self: center;
	padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 3vw, 3rem) clamp(2.5rem, 6vw, 5rem) 0;
}
.hero h1 {
	margin: 0 0 1.25rem;
	font-size: clamp(2.6rem, 1.1rem + 4.3vw, 4.9rem);
	font-weight: 760; font-stretch: 62%;
	line-height: .94; letter-spacing: -.01em;
	text-wrap: balance;
}
.hero-lead { margin: 0 0 2rem; max-width: 34ch; font-size: 1.2rem; line-height: 1.5; color: var(--grafit-2); }
.hero-akcje { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero-mozaika { grid-column: podzial / pelna-koniec; margin: 0; display: flex; flex-direction: column; }
.mozaika-siatka {
	flex: 1;
	display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
	background: #fff; border-left: 4px solid #fff;
}
.mozaika-siatka picture { display: block; overflow: hidden; background: var(--beton-2); }
.mozaika-siatka img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.hero-mozaika figcaption { padding: .55rem 1rem .6rem; background: #fff; font-size: .92rem; }
.hero-mozaika figcaption a { color: var(--grafit-2); }
.hero-mozaika figcaption a:hover { color: var(--czerwien); }

@media (max-width: 899px) {
	.hero { grid-template-columns: [pelna-start tresc-start] 1fr [tresc-koniec pelna-koniec]; }
	.hero-tekst { grid-column: tresc-start / tresc-koniec; padding: 2.25rem var(--pad) 2rem; }
	.hero-mozaika { grid-column: pelna-start / pelna-koniec; }
	.mozaika-siatka { border-left: 0; border-top: 4px solid #fff; }
	.hero-akcje .przycisk { flex: 1 1 14rem; }
}

/* ---------- układ treści ---------- */
.uklad {
	max-width: var(--max); margin: 0 auto;
	padding: clamp(2rem, 5vw, 3.5rem) var(--pad) clamp(3rem, 6vw, 5rem);
	display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}
.uklad-pelny { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 899px) { .uklad { grid-template-columns: minmax(0, 1fr); } }
.tresc:focus { outline: none; }

/* treść z edytora (także stare wpisy z bazy) */
.tresc { max-width: 46rem; overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; }
.tresc h1, .tresc h2, .tresc h3, .tresc .title_big, .tresc table, .tresc a[href^="mailto"] { hyphens: manual; -webkit-hyphens: manual; }
.uklad-pelny .tresc { max-width: 46rem; }
.tresc p, .tresc ul, .tresc ol { margin: 0 0 1.1em; }
.tresc ul { padding-left: 1.2em; list-style: square; }
.tresc li::marker { color: var(--oliwka); }
.tresc li + li { margin-top: .35em; }
.tresc hr { border: 0; border-top: 1px solid var(--linia); margin: 2rem 0; }
.tresc strong, .tresc b, .bold { font-weight: 680; }

.tresc h1, .tytul-strony, .tresc .title_big {
	display: block; margin: 0 0 .35rem;
	font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem);
	font-weight: 740; font-stretch: 64%; line-height: 1.02; letter-spacing: -.005em;
	color: var(--grafit); font-family: var(--font);
	text-wrap: balance;
}
.podtytul-strony, .tresc .title_small {
	display: block; margin: 0 0 1.75rem;
	font-size: 1.2rem; line-height: 1.4; font-weight: 500;
	color: var(--oliwka-ciemna); font-family: var(--font);
}
.tresc .title_big + br, .tresc .title_small + br, .tresc .title_small + br + br { display: none; }
.tresc h2, .tresc .title2 {
	margin: 2rem 0 .6rem;
	font-size: 1.55rem; font-weight: 700; font-stretch: 74%; line-height: 1.15;
	font-family: var(--font); color: var(--grafit);
}
.tresc h3 { margin: 1.6rem 0 .5rem; font-size: 1.2rem; font-weight: 680; font-stretch: 85%; }

.tresc img { max-width: 100%; height: auto !important; }
.tresc div[style*="width"], .tresc p[style*="width"], .tresc span[style*="width"] { max-width: 100%; }
/* stara kolumna treści miała 450 px - takie ramki rozciągamy na całą szerokość */
.tresc div[style*="width: 450px"], .tresc div[style*="width:450px"],
.tresc div[style*="width: 440px"], .tresc div[style*="width:440px"],
.tresc div[style*="width: 430px"], .tresc div[style*="width:430px"] { width: auto !important; }
.tresc table { border-collapse: collapse; overflow-wrap: normal; }
.tresc table[border] td, .tresc table[border] th { border: 1px solid var(--linia); }
.tresc td, .tresc th { padding: .4rem .6rem; vertical-align: top; }
.tabela-przewijana { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 1.2em; }

/* stare rozmiary 9-13 px z edytora - czytelnie na nowym układzie */
.tresc [style*="font-size: 9px"], .tresc [style*="font-size:9px"],
.tresc [style*="font-size: 10px"], .tresc [style*="font-size:10px"],
.tresc [style*="font-size: 11px"], .tresc [style*="font-size:11px"],
.tresc [style*="font-size: 12px"], .tresc [style*="font-size:12px"],
.tresc [style*="font-size: 13px"], .tresc [style*="font-size:13px"],
.tresc .f9, .tresc .f10, .tresc .f11, .tresc .f12, .tresc .f13 { font-size: inherit !important; }
.tresc [style*="font-family"] { font-family: inherit !important; }

.fl, .fleft { float: left; }
.fr, .fright { float: right; }
.clear { clear: both; }
.tresc .fl, .tresc .fleft, .tresc img[align="left"], .tresc img[style*="float: left"], .tresc img[style*="float:left"] { margin: .2rem 1.5rem 1rem 0; }
.tresc .fr, .tresc .fright, .tresc img[align="right"], .tresc img[style*="float: right"], .tresc img[style*="float:right"] { margin: .2rem 0 1rem 1.5rem; }
.alignright { text-align: right; }
.aligncenter { text-align: center; }
.gray, .gray a { color: var(--szary); }
.color_inherit { color: inherit; }
a.none { text-decoration: none; }
.obrazek3, .obrazek4 { border: 1px solid var(--linia); }
.login_button {
	display: inline-block; padding: .5rem 1rem; background: var(--grafit); color: #fff;
	text-decoration: none; font-weight: 600; border-radius: 2px;
}
.login_button:hover { background: var(--czerwien); color: #fff; }

@media (max-width: 599px) {
	.tresc .fl, .tresc .fr, .tresc .fleft, .tresc .fright,
	.tresc img[align], .tresc img[style*="float"] { float: none !important; display: block; margin: 0 0 1rem !important; }
	.tresc div[style*="width"], .tresc p[style*="width"], .tresc [class^="w"] { width: auto !important; }
}

/* ---------- galerie ---------- */
.galeria {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr));
	gap: 6px; margin: 1.75rem 0; clear: both;
}
.galeria a { display: block; background: var(--beton); cursor: zoom-in; line-height: 0; }
.galeria img { display: block; width: 100%; height: auto !important; aspect-ratio: 3 / 2; object-fit: cover; }
.galeria a:hover img { opacity: .88; }
.galeria-certyfikaty { grid-template-columns: repeat(auto-fill, minmax(min(100%, 165px), 1fr)); gap: 1rem; max-width: 560px; }
.galeria-certyfikaty a { background: #fff; border: 1px solid var(--linia); padding: 6px; }
.galeria-certyfikaty img { aspect-ratio: 300 / 424; }

/* ---------- aktualności ---------- */
time { display: block; font-size: .88rem; color: var(--szary); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.news-lista { border-top: 1px solid var(--linia); }
.news-wpis { padding: 1.5rem 0; border-bottom: 1px solid var(--linia); }
.news-wpis h2 { margin: .2rem 0 .5rem; }
.news-wpis h2 a { color: var(--grafit); text-decoration: none; }
.news-wpis h2 a:hover { color: var(--czerwien); }
.news-wpis p { margin: 0 0 .6rem; color: var(--grafit-2); }
.news-pelny time { margin: 1.25rem 0 .4rem; }
.news-pelny .tytul-strony { margin-bottom: 1.25rem; }
.link-powrot, .link-wiecej { font-weight: 620; font-size: .98rem; }

/* ---------- kolumna boczna ---------- */
.boczny { display: grid; gap: 2.5rem; }
.boczny-blok { border-top: 3px solid var(--grafit); padding-top: 1rem; }
.boczny-blok h2 { margin: 0 0 1rem; font-size: 1.3rem; font-weight: 720; font-stretch: 72%; line-height: 1.1; }
.lista-kontakt { list-style: none; margin: 0 0 1rem; padding: 0; }
.lista-kontakt li { margin-bottom: .35rem; }
.lista-kontakt a { color: var(--grafit); text-decoration: none; }
.lista-kontakt a:hover { color: var(--czerwien); text-decoration: underline; }
.tel-duzy { font-size: 1.45rem; font-weight: 720; font-stretch: 78%; font-variant-numeric: tabular-nums; }
.dopisek { color: var(--szary); font-size: .9rem; }
.kontakt-blok address { margin-bottom: .6rem; color: var(--grafit-2); }
.news-skrot { margin-bottom: 1.25rem; }
.news-skrot h3 { margin: .15rem 0 .3rem; font-size: 1.05rem; font-weight: 660; font-stretch: 90%; line-height: 1.3; }
.news-skrot h3 a { color: var(--grafit); text-decoration: none; }
.news-skrot h3 a:hover { color: var(--czerwien); text-decoration: underline; }
.news-skrot p { margin: 0; font-size: .95rem; color: var(--szary); line-height: 1.5; }
@media (max-width: 899px) {
	.boczny { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 2rem; }
}

/* ---------- formularze ---------- */
.formularz { max-width: 36rem; margin: 1.5rem 0 2rem; }
.pole { margin-bottom: 1.1rem; }
.pole label { display: block; margin-bottom: .35rem; font-weight: 620; font-size: .98rem; }
.opcjonalne { font-weight: 400; color: var(--szary); }
.formularz input[type="text"], .formularz input[type="password"], .formularz input[type="email"], .formularz textarea, .formularz select {
	display: block; width: 100%;
	padding: .7rem .8rem; min-height: 48px;
	font: inherit; font-size: 1.05rem; color: var(--grafit);
	background: #fff; border: 1px solid #aeab9f; border-radius: 2px;
}
.formularz textarea { resize: vertical; min-height: 9rem; }
.formularz input:focus, .formularz textarea:focus { outline: 2px solid var(--grafit); outline-offset: 0; border-color: var(--grafit); }
.formularz [aria-invalid="true"] { border-color: var(--czerwien); }
.pole-ukryte { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-status:empty { display: none; }
.form-status { margin: 0 0 1rem; padding: .75rem 1rem; border-left: 4px solid var(--oliwka); background: var(--beton); }
.form-status.blad { border-left-color: var(--czerwien); color: var(--czerwien-ciemna); }
.form-status.ok { border-left-color: #3d6b2f; }
.form-stopka { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; }
.form-info { margin: 0; flex: 1 1 14rem; font-size: .88rem; color: var(--szary); }

/* ---------- stopka ---------- */
.stopka { background: var(--grafit); color: #d4d2c9; font-size: .98rem; }
.stopka a { color: #fff; text-decoration: none; }
.stopka a:hover { color: #fff; text-decoration: underline; }
.stopka-wnetrze {
	max-width: var(--max); margin: 0 auto; padding: 3rem var(--pad) 2rem;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 2rem;
}
.stopka-nazwa { margin: 0 0 .5rem; color: #fff; font-size: 1.2rem; font-weight: 720; font-stretch: 76%; line-height: 1.2; }
.stopka-kontakt, .stopka-menu { display: flex; flex-direction: column; gap: .35rem; align-items: flex-start; }
.stopka-kontakt a:not([href^="mailto"]) { font-size: 1.15rem; font-weight: 650; font-stretch: 82%; font-variant-numeric: tabular-nums; }
.stopka-dol {
	max-width: var(--max); margin: 0 auto; padding: 1rem var(--pad) 1.5rem;
	display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem;
	border-top: 1px solid rgba(255,255,255,.12);
	font-size: .86rem; color: #a5a399;
}
.stopka-dol p { margin: 0; }
.stopka-dol a { color: #cfcdc4; }
/* ---------- podgląd zdjęć ---------- */
.lightbox {
	width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh;
	margin: 0; padding: 0; border: 0; background: transparent; color: #fff;
}
.lightbox::backdrop { background: rgba(22,22,20,.92); }
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox figure { margin: 0; padding: 3.5rem 4rem; text-align: center; }
.lightbox img { display: block; margin: 0 auto; max-width: min(92vw, 1400px); max-height: calc(100vh - 9rem); width: auto; height: auto; background: #333; }
.lightbox-podpis { margin-top: .75rem; font-size: .95rem; color: #ddd; }
.lightbox button {
	position: absolute; width: 52px; height: 52px; border: 0; border-radius: 50%;
	background: rgba(255,255,255,.12); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer;
}
.lightbox button:hover { background: rgba(255,255,255,.25); }
.lightbox-zamknij { top: 1rem; right: 1rem; }
.lightbox-poprz { left: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox-nast { right: 1rem; top: 50%; transform: translateY(-50%); }
.lightbox.pojedyncze .lightbox-poprz, .lightbox.pojedyncze .lightbox-nast { display: none; }
@media (max-width: 599px) {
	.lightbox figure { padding: 4rem .5rem 5rem; }
	.lightbox img { max-width: 100%; }
	.lightbox-poprz, .lightbox-nast { top: auto; bottom: 1rem; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
	.naglowek, .boczny, .stopka-menu, .hero-mozaika { display: none !important; }
	.naglowek { position: static; }
	.uklad { display: block; }
	body { font-size: 11pt; }
}