/* css/fonts.css */
/* latin-ext */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("https://agnespiaseczna.pl/wp-content/themes/agnes/assets/css/../fonts/libre-baskerville-italic-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;
}
/* latin */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("https://agnespiaseczna.pl/wp-content/themes/agnes/assets/css/../fonts/libre-baskerville-italic-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;
}
/* latin-ext */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://agnespiaseczna.pl/wp-content/themes/agnes/assets/css/../fonts/libre-baskerville-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;
}
/* latin */
@font-face {
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://agnespiaseczna.pl/wp-content/themes/agnes/assets/css/../fonts/libre-baskerville-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;
}
/* latin-ext */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://agnespiaseczna.pl/wp-content/themes/agnes/assets/css/../fonts/quicksand-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;
}
/* latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("https://agnespiaseczna.pl/wp-content/themes/agnes/assets/css/../fonts/quicksand-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;
}
/* latin-ext */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://agnespiaseczna.pl/wp-content/themes/agnes/assets/css/../fonts/quicksand-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;
}
/* latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("https://agnespiaseczna.pl/wp-content/themes/agnes/assets/css/../fonts/quicksand-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;
}
/* latin-ext */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://agnespiaseczna.pl/wp-content/themes/agnes/assets/css/../fonts/quicksand-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;
}
/* latin */
@font-face {
  font-family: 'Quicksand';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("https://agnespiaseczna.pl/wp-content/themes/agnes/assets/css/../fonts/quicksand-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;
}

/* css/base.css */
/**
 * Projekt: Agnes Piaseczna - strona WWW
 * Autor: KamikStudio - Patryk Dariusz Kowalski (ps. Kamik)
 * Web: https://kamikstudio.pl
 * Email: biuro@kamikstudio.pl
 * Data: 2026-09-27
 * Wersja: 1.0
 * Opis: Tokeny, reset, typografia i siatka (design system Figma "Agnes Piaseczna")
 *       Progi: mobile < 768, tablet 768-1279, desktop >= 1280 (projekt 1440).
 */

:root {
	--primary: #b13061;
	/* Primary do małego tekstu na jasnym różu (kontrast WCAG AA 4.5:1). */
	--primary-dark: #9a2853;
	--accent: #f594b2;
	--secondary: #ffd2dd;
	--background: #ffedf3;
	--text: #1e1e1e;
	--white: #fff;
	--gray-25: #fcfcfd;
	--disabled-bg: #dedede;
	--disabled-text: #787878;

	--shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	--radius-s: 6px;
	--radius: 12px;
	--radius-l: 24px;

	--font-heading: "Libre Baskerville", Georgia, serif;
	--font-text: "Quicksand", system-ui, sans-serif;

	/* Skala typografii: mobile (390) jako baza, desktop w media query. */
	--fs-h1: 32px;
	--fs-h2: 24px;
	--fs-h3: 18px;
	--fs-text: 16px;
	--fs-text-big: 18px;
	--fs-label: 14px;
	--fs-large: 140px;

	--container: 1280px;
	--gutter: 20px;
	--section-gap: 80px;
}

@media (min-width: 768px) {
	:root {
		--gutter: 32px;
	}
}

@media (min-width: 1280px) {
	:root {
		--fs-h1: 40px;
		--fs-h2: 32px;
		--fs-h3: 24px;
		--fs-text: 18px;
		--fs-text-big: 24px;
		--fs-label: 16px;
		--fs-large: 240px;
		--gutter: 80px;
		--section-gap: 120px;
	}
}

/* Reset ------------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

:where(body, h1, h2, h3, h4, p, ul, ol, figure, blockquote) {
	margin: 0;
}

/* Atrybut hidden zawsze wygrywa z display komponentów (np. .btn { display: inline-flex }). */
[hidden] {
	display: none !important;
}

:where(ul[class], ol[class]) {
	padding: 0;
	list-style: none;
}

img,
svg,
video {
	display: block;
	max-width: 100%;
}

img {
	height: auto;
}

button,
input,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

a {
	color: inherit;
	text-decoration: none;
}

/* Tło strony: biel + tekstura papieru (80%) + różowa warstwa 40% ----------- */

html {
	background: var(--white);
	scroll-behavior: smooth;
}

body {
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: var(--font-text);
	font-weight: 500;
	font-size: var(--fs-text);
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

/* Warstwy tła przypięte do okna: tekstura nie ma szwu przy powtarzaniu
   na długich podstronach (w Figmie jest rozciągnięta na całą ramkę). */
body::before,
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

body::before {
	background: url("https://agnespiaseczna.pl/wp-content/themes/agnes/assets/css/../img/tlo-papier.webp") center / cover no-repeat;
	opacity: 0.8;
}

body::after {
	background: rgba(255, 210, 221, 0.4);
}

.site-main {
	flex: 1;
	/* Ozdobniki (plamy, kropki) mogą wystawać za krawędź - nie poszerzają strony. */
	overflow-x: clip;
}

/* Typografia ------------------------------------------------------------- */

.h1,
.h2 {
	font-family: var(--font-heading);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.h1 {
	font-size: var(--fs-h1);
}

.h2 {
	font-size: var(--fs-h2);
}

.h1 em,
.h2 em {
	font-style: italic;
}

.h3,
.label-heading {
	font-family: var(--font-text);
	font-weight: 700;
	font-size: var(--fs-h3);
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.text-big {
	font-size: var(--fs-text-big);
}

.text-label {
	font-size: var(--fs-label);
}

.text-semibold {
	font-weight: 600;
}

.text-bold,
strong,
b {
	font-weight: 700;
}

.text-large {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: var(--fs-large);
	line-height: 1;
	letter-spacing: 0.02em;
}

.text-primary,
.em-primary em {
	color: var(--primary);
}

.prose > * + * {
	margin-top: 1.5em;
}

/* Siatka ----------------------------------------------------------------- */

.container {
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
}

.section {
	position: relative;
	padding-block: calc(var(--section-gap) / 2);
}

/* Dostępność ------------------------------------------------------------- */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: 16px;
	top: -100px;
	z-index: 100;
	padding: 12px 24px;
	background: var(--white);
	color: var(--primary);
	font-weight: 700;
	border-radius: var(--radius);
}

.skip-link:focus {
	top: 16px;
}

/* Fokus dwukolorowy: biały pierścień + obwódka Primary - widoczny na jasnym i na różowym tle. */
:focus-visible {
	outline: 3px solid var(--primary);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--white);
}

::selection {
	background: var(--secondary);
	color: var(--text);
}

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

/* css/components.css */
/**
 * Projekt: Agnes Piaseczna - strona WWW
 * Autor: KamikStudio - Patryk Dariusz Kowalski (ps. Kamik)
 * Web: https://kamikstudio.pl
 * Email: biuro@kamikstudio.pl
 * Data: 2026-09-27
 * Wersja: 1.0
 * Opis: Komponenty wspólne: przyciski, lista z sercami, karty, slider, opinie
 */

/* Przyciski (Figma: Button - Primary / Secondary / Tertiary) -------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 24px;
	border-radius: var(--radius);
	font-family: var(--font-text);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	white-space: nowrap;
	transition: background-color 0.16s ease, color 0.16s ease, border-color 0.16s ease, transform 0.16s ease;
}

.btn--primary {
	background: var(--primary);
	color: var(--white);
}

.btn--primary:hover {
	background: var(--primary-dark);
}

.btn--light {
	background: var(--background);
	color: var(--text);
}

.btn--light:hover {
	background: var(--white);
}

.btn--secondary {
	border: 2px solid var(--primary);
	color: var(--primary);
	padding-block: 10px;
}

.btn--secondary:hover {
	background: var(--primary);
	color: var(--white);
}

.btn--secondary-light {
	border: 2px solid var(--background);
	color: var(--background);
	padding-block: 10px;
}

.btn--secondary-light:hover {
	background: var(--background);
	color: var(--primary);
}

.btn--disabled,
.btn[aria-disabled="true"] {
	background: var(--disabled-bg);
	color: var(--disabled-text);
	pointer-events: none;
}

.btn--link,
.btn--link-light {
	padding: 0;
	border-radius: var(--radius-s);
	color: var(--primary);
}

.btn--link-light {
	color: var(--background);
}

.btn--link:hover .btn__arrow,
.btn--link-light:hover .btn__arrow {
	transform: translateX(4px);
}

.btn--arrow-left .btn__arrow {
	transform: scaleX(-1);
}

.btn--arrow-left:hover .btn__arrow {
	transform: scaleX(-1) translateX(4px);
}

.btn__arrow {
	flex: none;
	transition: transform 0.16s ease;
}

@media (max-width: 767px) {
	.btn {
		white-space: normal;
		text-align: center;
	}
}

/* Ikony ------------------------------------------------------------------ */

.icon--right {
	transform: rotate(-90deg);
}

.heart {
	flex: none;
	object-fit: contain;
}

/* Lista punktowana z sercami (np. "uczysz się angielskiego od lat, ale...") */

.heart-list {
	display: grid;
	gap: 16px;
}

.heart-list li {
	display: grid;
	grid-template-columns: 24px 1fr;
	align-items: center;
	gap: 16px;
}

/* Nagłówek sekcji: mały nadtytuł + H2 ----------------------------------- */

.eyebrow {
	display: block;
	font-weight: 700;
	font-size: var(--fs-h3);
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.eyebrow--small {
	font-size: 16px;
}

@media (min-width: 1280px) {
	.eyebrow--small {
		font-size: 18px;
	}
}

.section-head {
	display: grid;
	gap: 12px;
}

/* Karta (tło Secondary + cień z design systemu) ------------------------- */

.card {
	position: relative;
	padding: 24px;
	border-radius: var(--radius-l);
	background: var(--background);
	box-shadow: var(--shadow);
}

/* Nawigacja slidera (Figma: Nawigacja slider) --------------------------- */

.slider-nav {
	display: flex;
	gap: 12px;
}

.slider-nav__btn {
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--primary);
	color: var(--white);
	transition: background-color 0.16s ease, transform 0.16s ease;
}

.slider-nav__btn:hover {
	transform: scale(1.07);
}

.slider-nav__btn:disabled {
	background: var(--disabled-bg);
	color: var(--disabled-text);
	cursor: default;
	transform: none;
}

.slider-nav__btn--prev .icon {
	transform: rotate(90deg);
}

.slider-nav__btn--next .icon {
	transform: rotate(-90deg);
}

/* Tor slidera: przewijanie poziome ze snapem, bez paska ------------------ */

.slider-track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
}

.slider-track::-webkit-scrollbar {
	display: none;
}

.slider-track > * {
	flex: none;
	scroll-snap-align: start;
}

/* Cele dotykowe min. 44 x 44 px (WCAG 2.2, standard KamikStudio) bez zmiany wyglądu:
   niewidoczne powiększenie obszaru kliknięcia wokół małych linków i ikon. */
.main-nav__link,
.main-nav__toggle,
.dropdown__link,
.site-footer__links a,
.site-footer__heading,
.site-footer__cookies,
.btn--link,
.btn--link-light,
.social a {
	position: relative;
}

.main-nav__link::after,
.main-nav__toggle::after,
.dropdown__link::after,
.site-footer__links a::after,
.site-footer__heading::after,
.site-footer__cookies::after,
.btn--link::after,
.btn--link-light::after,
.social a::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: max(100% + 8px, 44px);
	height: max(100%, 44px);
	transform: translate(-50%, -50%);
}

/* css/opinie.css */
/**
 * Projekt: Agnes Piaseczna - strona WWW
 * Autor: KamikStudio - Patryk Dariusz Kowalski (ps. Kamik)
 * Web: https://kamikstudio.pl
 * Email: biuro@kamikstudio.pl
 * Data: 2026-09-27
 * Wersja: 1.0
 * Opis: Sekcja Opinie (template-parts/sections/opinie.php)
 */

.opinie {
	padding-block: 80px;
	overflow-x: clip;
}

.opinie__inner {
	display: grid;
	gap: 80px;
}

.opinie__intro {
	display: grid;
	gap: 40px;
	align-content: center;
	justify-items: start;
}

.opinie__text {
	display: grid;
	gap: 24px;
}

.opinie__title .mobile-em {
	font-style: italic;
	color: var(--primary);
}

.opinie__title em {
	color: var(--primary);
}

.opinie__slider {
	position: relative;
	display: grid;
	gap: 54px;
	justify-items: end;
	min-width: 0;
}

.opinie__blob {
	position: absolute;
	left: -73px;
	top: -141px;
	width: 514px;
	max-width: none;
	pointer-events: none;
	z-index: -1;
}

.opinie__track {
	width: 100%;
	margin-right: calc(-1 * var(--gutter));
	padding-right: var(--gutter);
	scroll-padding-inline: 0;
}

.opinion {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 302px;
	padding: 24px;
	border-radius: var(--radius-l);
	background: url("https://agnespiaseczna.pl/wp-content/themes/agnes/assets/css/../img/karta-opinii.webp") left bottom / 100% auto no-repeat;
}

.opinion__quote {
	font-weight: 600;
	font-size: 18px;
}

.opinion__author {
	margin-top: auto;
	font-size: 16px;
}

@media (min-width: 1280px) {
	.opinie {
		padding-block: 120px;
	}

	.opinie__inner {
		grid-template-columns: 519px minmax(0, 1fr);
		gap: 133px;
	}

	.opinie__title .mobile-em {
		font-style: normal;
		color: inherit;
	}

	.opinie__title em {
		color: inherit;
	}

	.opinie__blob {
		left: -112px;
		top: -284px;
		width: 788px;
	}

	.opinie__track {
		/* Karty wychodzą do prawej krawędzi okna jak w projekcie. */
		width: calc(100% + (100vw - var(--container)) / 2);
		margin-right: calc(-1 * (100vw - var(--container)) / 2);
		padding-right: 0;
	}
}

/* css/header.css */
/**
 * Projekt: Agnes Piaseczna - strona WWW
 * Autor: KamikStudio - Patryk Dariusz Kowalski (ps. Kamik)
 * Web: https://kamikstudio.pl
 * Email: biuro@kamikstudio.pl
 * Data: 2026-09-27
 * Wersja: 1.0
 * Opis: Nagłówek (Figma: DESKTOP Header, TABLET Header, [MOBILE] Header,
 *       Menu rozwijane *, Menu rozwijane HAMBURGER *)
 */

.site-header {
	position: relative;
	z-index: 50;
}

.site-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	padding: 24px var(--gutter);
	background: var(--primary);
	border-radius: 0 0 var(--radius-l) var(--radius-l);
	color: var(--white);
}

.site-header__logo {
	flex: none;
}

.logo-vertical {
	display: none;
}

.logo-horizontal {
	width: 200px;
	height: 48px;
}

.main-nav,
.site-header__cta {
	display: none;
}

/* Hamburger -------------------------------------------------------------- */

.burger {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	border-radius: var(--radius);
	background: var(--background);
	color: var(--text);
}

.burger__close,
.burger[aria-expanded="true"] .burger__open {
	display: none;
}

.burger[aria-expanded="true"] .burger__close {
	display: block;
}

.burger[aria-expanded="true"] .burger__angle {
	transform: rotate(180deg);
}

/* Tablet: logo pionowe, część menu w belce, reszta w hamburgerze -------- */

@media (min-width: 768px) {
	.logo-vertical {
		display: block;
		width: 88px;
		height: 46px;
	}

	.logo-horizontal {
		display: none;
	}

	.main-nav {
		display: block;
	}

	.main-nav__item:not(.is-tablet) {
		display: none;
	}

}

/* Menu w belce (tablet + desktop) --------------------------------------- */

.main-nav__list {
	display: flex;
	align-items: center;
	gap: 24px;
}

.main-nav__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
}

.main-nav__link {
	display: block;
	font-size: 18px;
	color: var(--white);
	white-space: nowrap;
	transition: opacity 0.16s ease;
}

.main-nav__link:hover {
	opacity: 0.85;
}

.main-nav__item.is-current > .main-nav__link {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 1px;
}

.main-nav__toggle {
	display: grid;
	place-items: center;
	color: var(--white);
}

.main-nav__toggle .icon {
	transition: transform 0.16s ease;
}

.main-nav__item.is-open .main-nav__toggle .icon {
	transform: rotate(180deg);
}

.dropdown {
	position: absolute;
	top: calc(100% + 36px);
	left: -20px;
	display: none;
	flex-direction: column;
	gap: 20px;
	min-width: max-content;
	padding: 24px 20px;
	background: var(--background);
	border-radius: 0 0 var(--radius-l) var(--radius-l);
	box-shadow: var(--shadow);
}

/* Mostek, żeby kursor nie gubił menu między belką a panelem. */
.dropdown::before {
	content: "";
	position: absolute;
	inset: -36px 0 100% 0;
}

.main-nav__item.is-open .dropdown {
	display: flex;
}

.dropdown li + li {
	padding-top: 20px;
	border-top: 1px solid var(--primary);
}

.dropdown__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 600;
	font-size: 18px;
	color: var(--text);
}

.dropdown__link:hover,
.dropdown__link[aria-current="page"] {
	color: var(--primary);
}

/* Desktop: pełne menu + CTA, bez hamburgera ----------------------------- */

@media (min-width: 1280px) {
	.site-header__bar {
		justify-content: center;
		padding: 24px;
	}

	.main-nav__item:not(.is-tablet) {
		display: flex;
	}

	.site-header__cta {
		display: inline-flex;
	}

	.burger,
	.mobile-menu {
		display: none !important;
	}

	.main-nav__item.has-dropdown:hover .dropdown,
	.main-nav__item.has-dropdown:focus-within .dropdown {
		display: flex;
	}
}

@media (min-width: 1280px) and (max-width: 1400px) {
	.site-header__bar,
	.main-nav__list {
		gap: 18px;
	}

	.main-nav__link {
		font-size: 17px;
	}
}

/* Fokus na różowej belce: biała obwódka (Primary zlewałaby się z tłem). */
.site-header__bar :focus-visible {
	outline-color: var(--white);
}

.site-header__bar .btn--light:focus-visible,
.burger:focus-visible {
	outline-color: var(--white);
	outline-offset: 3px;
}

/* css/mobile-menu.css */
/**
 * Projekt: Agnes Piaseczna - strona WWW
 * Autor: KamikStudio - Patryk Dariusz Kowalski (ps. Kamik)
 * Web: https://kamikstudio.pl
 * Email: biuro@kamikstudio.pl
 * Data: 2026-09-27
 * Wersja: 1.0
 * Opis: Panel menu hamburgera (Figma: Menu rozwijane HAMBURGER TABLET / MOBILE)
 */

.mobile-menu {
	position: absolute;
	top: 100%;
	right: var(--gutter);
	width: calc(100% - 2 * var(--gutter));
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	padding: 32px;
	background: var(--background);
	border-radius: 0 0 var(--radius-l) var(--radius-l);
	box-shadow: var(--shadow);
}

.mobile-menu[hidden] {
	display: none;
}

.mobile-menu__list {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

.mobile-menu__item + .mobile-menu__item {
	padding-top: 20px;
	border-top: 1px solid var(--primary);
}

.mobile-menu__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-weight: 600;
	font-size: 18px;
	color: var(--text);
}

.mobile-menu__toggle[aria-expanded="true"] .icon {
	transform: rotate(0deg);
}

.mobile-menu__sub {
	display: grid;
	gap: 12px;
	padding: 16px 0 0 16px;
}

.mobile-menu__sub[hidden] {
	display: none;
}

.mobile-menu__sub a {
	font-weight: 500;
}

.mobile-menu__sub a:hover,
.mobile-menu__link:hover {
	color: var(--primary);
}

.social {
	display: flex;
	gap: 24px;
}

.social a {
	display: block;
	transition: transform 0.16s ease;
}

.social a:hover {
	transform: translateY(-2px);
}

@media (min-width: 768px) {
	.mobile-menu {
		width: 281px;
	}

	.mobile-menu__item.is-tablet {
		display: none;
	}

	.mobile-menu__item.is-tablet + .mobile-menu__item,
	.mobile-menu__item:first-child {
		padding-top: 0;
		border-top: 0;
	}

	.mobile-menu__item.is-tablet ~ .mobile-menu__item:not(.is-tablet) {
		padding-top: 20px;
		border-top: 1px solid var(--primary);
	}
}

/* css/footer.css */
/**
 * Projekt: Agnes Piaseczna - strona WWW
 * Autor: KamikStudio - Patryk Dariusz Kowalski (ps. Kamik)
 * Web: https://kamikstudio.pl
 * Email: biuro@kamikstudio.pl
 * Data: 2026-09-27
 * Wersja: 1.0
 * Opis: Stopka (Figma: Stopka, TABLET stopka, MOBILE Stopka)
 */

.site-footer {
	margin-top: 80px;
	background: var(--primary);
	border-radius: var(--radius-l) var(--radius-l) 0 0;
	color: var(--white);
}

.site-footer__inner {
	display: flex;
	flex-direction: column;
	gap: 40px;
	width: min(100% - 2 * var(--gutter), var(--container));
	margin-inline: auto;
	padding-block: 32px;
}

.site-footer__cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.site-footer__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 32px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--gray-25);
}

.site-footer__line {
	width: 100%;
	height: 0;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--white);
}

.site-footer__grid {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.site-footer__logo {
	display: block;
}

.site-footer__logo .logo-vertical {
	display: none;
}

.site-footer__logo .logo-horizontal {
	display: block;
	width: 301px;
	height: 72px;
}

.site-footer__about {
	max-width: 410px;
	font-size: 16px;
	margin-top: -24px;
}

.site-footer__heading {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	font-weight: 700;
	font-size: 18px;
	color: var(--white);
}

.site-footer__heading .icon {
	transition: transform 0.16s ease;
}

.site-footer__heading[aria-expanded="true"] .icon {
	transform: rotate(180deg);
}

.site-footer__links {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin-top: 16px;
	font-size: 16px;
}

.site-footer__col--oferta .site-footer__links[hidden],
.site-footer__col--formalnosci .site-footer__links[hidden] {
	display: none;
}

.site-footer__links a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.site-footer__bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	font-size: 18px;
	text-align: center;
}

/* Tablet ----------------------------------------------------------------- */

@media (min-width: 768px) {
	.site-footer__inner {
		padding-block: 40px 48px;
	}

	.site-footer__cta {
		flex-direction: row;
		justify-content: space-between;
	}

	.site-footer__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 40px 24px;
	}

	.site-footer__brand {
		grid-column: 1 / -1;
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"about logo"
			"social logo";
		gap: 32px;
		padding-bottom: 40px;
		border-bottom: 1px solid var(--white);
	}

	.site-footer__about {
		grid-area: about;
		margin-top: 0;
	}

	.site-footer__brand .social {
		grid-area: social;
	}

	.site-footer__logo {
		grid-area: logo;
		align-self: center;
	}

	.site-footer__logo .logo-horizontal {
		display: none;
	}

	.site-footer__logo .logo-vertical {
		display: block;
		width: 220px;
		height: auto;
	}

	.site-footer__col--formalnosci {
		order: 1;
	}

	.site-footer__col--oferta {
		order: 2;
	}

	.site-footer__col--kontakt {
		order: 3;
	}

	.site-footer__heading {
		font-size: 24px;
		pointer-events: none;
	}

	.site-footer__heading .icon {
		display: none;
	}

	.site-footer__links {
		margin-top: 32px;
	}

	.site-footer__col--formalnosci .site-footer__links {
		gap: 9px;
	}

	.site-footer__col--oferta .site-footer__links[hidden],
	.site-footer__col--formalnosci .site-footer__links[hidden] {
		display: flex;
	}
}

/* Desktop ---------------------------------------------------------------- */

@media (min-width: 1280px) {
	.site-footer {
		margin-top: 120px;
	}

	.site-footer__inner {
		padding-block: 32px;
	}

	.site-footer__cta {
		align-items: center;
	}

	.site-footer__title {
		font-size: 40px;
	}

	.site-footer__grid {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.site-footer__brand {
		display: flex;
		flex-direction: column;
		width: 410px;
		gap: 24px;
		padding-bottom: 0;
		border-bottom: 0;
	}

	.site-footer__logo {
		align-self: flex-start;
	}

	.site-footer__logo .logo-vertical {
		width: 162px;
		height: 86px;
	}

	.site-footer__about,
	.site-footer__links {
		font-size: 18px;
	}

	.site-footer__links {
		margin-top: 24px;
	}

	.site-footer__col--oferta {
		order: 1;
	}

	.site-footer__col--kontakt {
		order: 2;
	}

	.site-footer__col--formalnosci {
		order: 3;
	}

	.site-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
	}
}

.site-footer__cookies {
	color: var(--white);
	text-align: left;
}

.site-footer__cookies:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Fokus na różowym tle stopki: biała obwódka. */
.site-footer :focus-visible {
	outline-color: var(--white);
}

/* css/pages/kontakt/01-wstep.css */
/**
 * Projekt: Agnes Piaseczna - strona WWW
 * Autor: KamikStudio - Patryk Dariusz Kowalski (ps. Kamik)
 * Web: https://kamikstudio.pl
 * Email: biuro@kamikstudio.pl
 * Data: 2026-09-27
 * Wersja: 1.0
 * Opis: Kontakt (Figma: DESKTOP/Kontakt, MOBILE/Kontakt)
 */

.page-kontakt {
	--kontakt-overlap: 252px;
	padding-bottom: 79px;
}

/* Układ: karta z danymi nachodzi na różową kolumnę z formularzem ---------- */

.kontakt {
	padding-top: 35px;
}

/* Karta z danymi kontaktowymi ------------------------------------------- */

.kontakt-dane {
	position: relative;
	z-index: 1;
	display: grid;
	gap: 48px;
	margin-inline: var(--gutter);
	padding: 48px 24px;
	border-radius: var(--radius-l);
	background: var(--primary);
	color: var(--white);
}

.kontakt-dane__intro {
	display: grid;
	gap: 16px;
}

.kontakt-dane__title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.kontakt-dane__contact {
	display: grid;
	gap: 24px;
}

.kontakt-dane__subtitle {
	font-weight: 700;
	font-size: 18px;
	line-height: 1.5;
	letter-spacing: 0.02em;
}

.kontakt-dane__list {
	display: grid;
	gap: 16px;
}

.kontakt-dane__list li {
	display: flex;
	align-items: center;
	gap: 16px;
}

.kontakt-dane__list img {
	flex: none;
}

.kontakt-dane__list a {
	overflow-wrap: anywhere;
}

.kontakt-dane__list a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kontakt-dane__social {
	display: grid;
	justify-items: center;
	gap: 24px;
	padding: 32px 24px;
	border-radius: var(--radius-l);
	background: var(--white);
	box-shadow: var(--shadow);
	color: #000;
}

.kontakt-dane__social-title {
	font-weight: 700;
	text-align: center;
}

/* Kolumna z formularzem ------------------------------------------------- */

.kontakt-form-col {
	display: grid;
	gap: 40px;
	margin: calc(-1 * var(--kontakt-overlap)) calc(var(--gutter) - 10px) 0;
	padding: calc(var(--kontakt-overlap) + 64px) 20px 40px;
	border-radius: 32px;
	background: var(--secondary);
	/* Kotwica #formularz ląduje na nagłówku, nie pod kartą z danymi. */
	scroll-margin-top: calc(-1 * var(--kontakt-overlap) + 24px);
}

.kontakt-form-col__head {
	display: grid;
	gap: 8px;
}

.kontakt-form-col__title {
	text-wrap: wrap;
}

.kontakt-form {
	display: grid;
	gap: 48px;
}

.kontakt-form__fields {
	display: grid;
	gap: 32px;
}

.kontakt-form__field {
	display: grid;
	gap: 8px;
}

.kontakt-form__label {
	font-weight: 700;
}

.kontakt-form__control {
	display: block;
	width: 100%;
	min-height: 45px;
	padding: 12px 24px;
	border: 0;
	border-radius: var(--radius);
	background: var(--background);
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--text);
}

.kontakt-form__control::placeholder {
	color: #6b6b6b; /* w projekcie #bbb - za niski kontrast (WCAG AA) */
	opacity: 1;
}

textarea.kontakt-form__control {
	min-height: 66px;
	resize: vertical;
}

.kontakt-form__field.is-invalid .kontakt-form__control {
	box-shadow: inset 0 0 0 2px var(--primary);
}

.kontakt-form__select {
	position: relative;
}

.kontakt-form__select select {
	padding-right: 54px;
	appearance: none;
	cursor: pointer;
}

.kontakt-form__select select:has(option[value=""]:checked) {
	color: #6b6b6b; /* w projekcie #bbb - za niski kontrast (WCAG AA) */
}

.kontakt-form__select option {
	color: var(--text);
}

.kontakt-form__angle {
	position: absolute;
	right: 24px;
	top: 50%;
	transform: translateY(-50%);
	color: #787878;
	pointer-events: none;
}

.kontakt-form__error {
	font-weight: 600;
	font-size: 14px;
	color: var(--primary);
}

.kontakt-form__submit {
	width: 100%;
	/* Etykieta mieści się w jednej linii na 390 jak w projekcie. */
	padding-inline: 4px;
	color: var(--background);
}

/* Pole-pułapka dla botów: poza ekranem, niedostępne z klawiatury. */
.kontakt-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Komunikaty po wysłaniu ------------------------------------------------- */

.kontakt-form__status:not(:has(*)) {
	display: none;
}

.kontakt-form__status:focus {
	outline: none;
}

.kontakt-form__message {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 24px;
	border-radius: var(--radius);
	background: var(--background);
}

.kontakt-form__message--error {
	font-weight: 600;
	color: var(--primary);
}

.kontakt-form__message-title {
	font-weight: 700;
	font-size: 18px;
	color: var(--primary);
}

.kontakt-form-col > .btn {
	justify-self: start;
}

/* Mapa ------------------------------------------------------------------ */

.kontakt-mapa {
	padding-top: 67px;
	/* Kropki wychodzą poza ekran - przycięte tutaj, bez poziomego scrolla. */
	overflow-x: clip;
}

.kontakt-mapa__inner {
	display: grid;
	justify-items: center;
	gap: 24px;
}

.kontakt-mapa__title {
	text-align: center;
}

.kontakt-mapa__media {
	position: relative;
	width: min(100%, 726px);
	padding-block: 16px;
}

.kontakt-mapa__map {
	position: relative;
	width: 100%;
}

.kontakt-mapa__dots {
	display: none;
}

/* css/pages/kontakt/02-cta.css */
/**
 * Projekt: Agnes Piaseczna - strona WWW
 * Autor: KamikStudio - Patryk Dariusz Kowalski (ps. Kamik)
 * Web: https://kamikstudio.pl
 * Email: biuro@kamikstudio.pl
 * Data: 2026-09-27
 * Wersja: 1.0
 * Opis: kontakt - część 2/2 (kolejność ładowania = numer pliku).
 */

/* CTA ------------------------------------------------------------------- */

.kontakt-cta {
	padding-top: 67px;
}

.kontakt-cta__box {
	position: relative;
	padding: 40px 20px;
	border-radius: 32px;
	background: var(--background);
}

.kontakt-cta__media {
	display: none;
}

.kontakt-cta__content {
	display: grid;
	justify-items: start;
	gap: 32px;
}

.kontakt-cta__head {
	display: grid;
	gap: 12px;
}

.kontakt-cta__eyebrow {
	font-weight: 700;
	color: var(--accent);
}

.kontakt-cta__title {
	text-wrap: wrap;
}

.kontakt-cta__br {
	display: none;
}

/* Tablet i desktop ------------------------------------------------------- */

@media (min-width: 768px) {
	.kontakt-form__submit {
		justify-self: start;
		width: auto;
		padding-inline: 24px;
	}
}

/* Desktop --------------------------------------------------------------- */

@media (min-width: 1280px) {
	.page-kontakt {
		padding-bottom: 17px;
	}

	.kontakt {
		display: grid;
		grid-template-columns: minmax(0, 408fr) minmax(0, 114fr) minmax(0, 758fr);
		width: min(100% - 2 * var(--gutter), var(--container));
		margin-inline: auto;
		padding-top: 105px;
	}

	.kontakt-dane {
		grid-column: 1 / 3;
		grid-row: 1;
		align-self: start;
		gap: 64px;
		margin: 64px 0 0;
		padding: 48px;
	}

	.kontakt-dane__intro {
		gap: 8px;
	}

	.kontakt-dane__title {
		font-family: var(--font-text);
	}

	.kontakt-dane__subtitle {
		font-size: 24px;
	}

	.kontakt-dane__social-title {
		font-weight: 600;
		font-size: 18px;
	}

	/* Procenty paddingu liczone od szerokości kolumny (872px w projekcie). */
	.kontakt-form-col {
		grid-column: 2 / 4;
		grid-row: 1;
		align-content: center;
		gap: 61px;
		margin: 0;
		padding: 64px 9.75% 64px calc(13.07% + 103px);
		scroll-margin-top: 24px;
	}

	.kontakt-form-col__head,
	.kontakt-form {
		max-width: 567px;
	}

	.kontakt-form__control {
		min-height: 48px;
		font-size: 16px;
	}

	textarea.kontakt-form__control {
		min-height: 48px;
	}

	.kontakt-mapa {
		padding-top: 124px;
	}

	.kontakt-mapa__inner {
		gap: 40px;
	}

	.kontakt-mapa__media {
		padding-block: 0;
	}

	/* Kropki: obraz poziomy obrócony jak w Figmie, wyśrodkowany w ramce z projektu. */
	.kontakt-mapa__dots {
		display: block;
		position: absolute;
		max-width: none;
		pointer-events: none;
	}

	.kontakt-mapa__dots--left {
		left: -631px;
		top: -52px;
		width: 707px;
		height: 305px;
		transform: rotate(90deg);
	}

	.kontakt-mapa__dots--right {
		left: 558px;
		top: 410px;
		width: 850px;
		height: 366px;
		transform: rotate(72deg);
	}

	.kontakt-cta {
		padding-top: 120px;
	}

	.kontakt-cta__box {
		display: flex;
		justify-content: flex-end;
		min-height: 462px;
		padding: 40px 108px 40px 40px;
	}

	.kontakt-cta__media {
		display: block;
	}

	.kontakt-cta__media img {
		position: absolute;
		max-width: none;
		pointer-events: none;
	}

	.kontakt-cta__photo {
		left: 125px;
		top: -38px;
		width: 339px;
		height: 500px;
	}

	.kontakt-cta__hearts--top {
		left: 438px;
		top: -14px;
		width: 168px;
		height: 150px;
	}

	.kontakt-cta__hearts--bottom {
		left: 6px;
		top: 303px;
		width: 149px;
		height: 132px;
		transform: rotate(-19deg);
	}

	.kontakt-cta__content {
		position: relative;
		align-content: center;
		width: 520px;
	}

	.kontakt-cta__br {
		display: inline;
	}
}

/* Klauzula informacyjna RODO pod formularzem (brak w Figmie - wymóg prawny). */
.kontakt-form__rodo {
	font-size: 14px;
	line-height: 1.5;
	color: var(--text);
}

.kontakt-form__rodo a {
	color: var(--primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Kontrast WCAG AA: nadtytuł CTA (Accent na jasnym tle 1,7:1) i link w klauzuli RODO na różowym tle. */
.kontakt-cta__eyebrow {
	color: var(--primary);
}

.kontakt-form__rodo a {
	color: var(--primary-dark);
}