/* ==========================================================================
   FSE adjustments — override dla natywnych bloków Gutenberg.
   NIE ruszaj assets/style.css z makiety (łatwy re-sync). Tu tylko fixy bloków.
   ========================================================================== */

/* Skip-link (WCAG 2.4.1) — niewidoczny aż do fokusu klawiaturą (Tab). Cel: #main. */
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
}
.skip-link:focus {
	left: 1rem;
	top: 1rem;
	width: auto;
	height: auto;
	padding: 0.75rem 1.25rem;
	background: var(--ink);
	color: var(--beige);
	text-decoration: none;
	border-radius: var(--radius-sm);
}

/* Query loop — grid trzymaj na kontenerze (.wp-block-post-template = <ul>),
   <li>.wp-block-post jako komórki. NIE display:contents (psuje a11y listy). */
.wp-block-post-template {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* :where() zeruje specyficzność gołych bloków, żeby custom klasy makiety
   (.hero__title, .eyebrow) zawsze wygrywały, a gołe bloki dostały fallback. */
:where(.wp-block-heading),
:where(.wp-block-post-title) {
	font-family: var(--wp--preset--font-family--heading, "Frank Ruhl Libre", Georgia, serif);
}

/* Hero foto: wp:image z klasą .hero__media (box 4:5). Wymuś wypełnienie boxa —
   core .wp-block-image img daje height:auto (równa specyficzność → bump 2 klasami,
   wygrywa niezależnie od kolejności ładowania CSS). Reset *{margin:0} + zerowanie tu. */
.hero__media.wp-block-image { margin: 0; }
.hero__media.wp-block-image img { width: 100%; height: 100%; object-fit: cover; }

/* ==========================================================================
   F5 — natywny wp:button (Etap 2: przyciski edytowalne przez klienta).
   PUŁAPKA: gdyby na WRAPPERZE (.wp-block-button) dać makietowe .btn/.btn-primary,
   makieta pomalowałaby wrapper ORAZ link → podwójne tło i podwójny padding (za duży
   przycisk). Dlatego wrapper dostaje NEUTRALNĄ klasę .cta-btn (makieta jej nie zna),
   a cały wygląd .btn/.btn-primary odtwarzamy na linku (.wp-block-button__link).
   Wartości = za .btn/.btn-primary z assets/style.css → przy re-sync zsynchronizuj tu.
   ========================================================================== */
.wp-block-button.cta-btn > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 1.02rem;
	line-height: 1;
	padding: 0.95rem 1.6rem;
	border-radius: var(--radius-pill);
	border: 2px solid transparent;
	background: var(--gold);
	color: var(--ink);
	box-shadow: var(--shadow-sm);
	transition: transform 0.2s var(--ease), background-color 0.2s var(--ease),
		box-shadow 0.2s var(--ease), color 0.2s var(--ease);
}
.wp-block-button.cta-btn > .wp-block-button__link:hover {
	background: #BC9038;
	color: var(--ink);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
.wp-block-button.cta-btn > .wp-block-button__link:focus-visible {
	outline: 3px solid var(--gold-deep);
	outline-offset: 3px;
}

/* Strzałka tylko na CTA hero (.cta-btn--arrow) — natywny link nie trzyma inline
   SVG (treść = edytowalny tekst), więc odtwarzamy ją maską CSS w kolorze tekstu. */
.wp-block-button.cta-btn--arrow > .wp-block-button__link::after {
	content: "";
	width: 1.1em;
	height: 1.1em;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14M13%206l6%206-6%206'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2.2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M5%2012h14M13%206l6%206-6%206'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* F5 wariant: przycisk ghost (makieta .btn-ghost) — ta sama baza co .cta-btn, nadpisane tylko
   tło/kolor/ramka (transparent / ink / beige-line; hover gold-deep). Wrapper: `cta-btn cta-btn--ghost`. */
.wp-block-button.cta-btn--ghost > .wp-block-button__link {
	background: transparent;
	color: var(--ink);
	border-color: var(--beige-line);
	box-shadow: none;
}
.wp-block-button.cta-btn--ghost > .wp-block-button__link:hover {
	background: transparent;
	border-color: var(--gold-deep);
	color: var(--gold-deep);
	box-shadow: none;
}

/* Wycentruj BOX akapitu w centrowanych kontekstach. Makieta robiła to inline (`margin:auto`);
   bazowy `p` ma max-width:68ch, więc bez auto-marginu box „ucieka" w lewo na szerokich ekranach
   (text-center centruje tylko tekst W boxie, nie sam box; h2 bez max-width centruje się pełną
   szerokością → rozjazd). Dotyczy pasa CTA (.text-center) i wyśrodkowanego nagłówka sekcji
   (.section-head.center — m.in. eyebrow jako <p>). Mobile: container < 68ch → bez efektu, OK. */
.text-center p,
.section-head.center p { margin-inline: auto; }

/* Eyebrow jako blok Paragraph (<p>) zamiast makietowego <span>: zabij stray
   margin-top z reguł .section-head p / .page-head p (makieta liczyła na span, nie p). */
.section-head .eyebrow,
.page-head .eyebrow { margin-top: 0; }

/* price-item__desc był <span> w makiecie; jako blok <p> łapie bazowe p{max-width:68ch}
   → zawijał się do 2 wierszy mimo miejsca w flex-rowie. Zdejmij limit (Etap 3). */
.price-item__desc { max-width: none; }

/* ==========================================================================
   wp:table (Etap 3, cennik) — klasa makiety `.price-table` ląduje na <figure> (nie <table>):
   - block-props makiety (`border`, `border-radius`) malują RAMKĘ na figure → zdejmujemy ją tu
     (decyzja Marcina 2026-06-05: bez obramowania, tylko linie wierszy);
   - reguły `.price-table th/td` z makiety to selektory potomka → działają na komórki;
   - core `.wp-block-table` dokłada pełne ramki komórek (`td,th{border:1px}`) ORAZ grubą linię
     pod nagłówkiem (`thead{border-bottom:3px}`) → zbijamy oba poniżej.
   ========================================================================== */
.wp-block-table.price-table { margin: 0; border: 0; border-radius: 0; }
.wp-block-table.price-table table {
	width: 100%;
	border-collapse: collapse;
	background: var(--white);
	border: none;
}
.wp-block-table.price-table thead { border-bottom: 0; }
.wp-block-table.price-table th,
.wp-block-table.price-table td {
	text-align: left;
	padding: 0.85rem 1.2rem;
	border: none;
	border-bottom: 1px solid var(--beige-line);
}
.wp-block-table.price-table th { font-family: 'Inter', sans-serif; background: var(--beige-2); }
.wp-block-table.price-table tr:last-child td { border-bottom: none; }
.wp-block-table.price-table th:last-child,
.wp-block-table.price-table td:last-child { text-align: right; }
.wp-block-table.price-table td:last-child { font-weight: 700; color: var(--gold-ink); }

/* ==========================================================================
   Galerie sezonowe (Etap 4, oferta-2026-2027) — CPT „galeria" renderowany przez
   Query Loop → Treść wpisu. Każdy sezon to OSOBNY <div.wp-block-query.season-loop>,
   więc makietowy selektor `.season + .season` (rodzeństwo) NIE łapie — odstęp między
   sekcjami odtwarzamy na sąsiadujących pętlach. Plus reset wrapperów pętli (li/ul)
   i wymuszenie wypełnienia kwadratowych kafli (core .wp-block-image daje img{height:auto},
   co psuje aspect-ratio 1/1 z makiety).
   ========================================================================== */
.season-loop + .season-loop { margin-top: clamp(3rem, 7vw, 5rem); }

/* Reset wrapperów Query Loop / wpisu (li), by nie dokładały marginesów ani bulletów. */
.season-loop .wp-block-post,
.season-loop .wp-block-post-content { margin: 0; padding: 0; list-style: none; }

/* Kafle galerii: wp:image z klasą .gallery__item renderuje <figure>. Zdejmij margines
   figure i wymuś wypełnienie kwadratu (bump 2 klasami → wygrywa nad core niezależnie
   od kolejności ładowania CSS — ten sam wzorzec co .hero__media). */
.gallery__item.wp-block-image { margin: 0; }
.gallery__item.wp-block-image img { width: 100%; height: 100%; object-fit: cover; }

/* Proste gridy (wiosenna/letnia) = natywny blok Galeria `wp:gallery`. Powód: blok Galeria
   trzyma zdjęcia W SOBIE (nie da się dodać kafla poza grupę, jak przy osobnych wp:image →
   full-width bug), więc Inka dodaje zdjęcia przyciskiem, kilka naraz, bez ryzyka. Świąteczna
   ZOSTAJE na wp:image (bespoke 2-col, art-directed) — patrz reguły .gallery__item wyżej.
   Blok Galeria domyślnie układa flexem → przebijamy na grid makiety; specyficzność
   .wp-block-gallery.gallery.has-nested-images (0,3,0) > core (0,2,0). Kafle to gołe
   .wp-block-image (bez .gallery__item) → kwadrat 1:1 i kadrowanie dajemy selektorem potomka,
   dzięki czemu nowe zdjęcia Inki NIE wymagają żadnej klasy. Wartości = makieta .gallery. */
.wp-block-gallery.gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.7rem;
}
@media (min-width: 768px) {
	.wp-block-gallery.gallery.has-nested-images { grid-template-columns: repeat(3, 1fr); gap: 1rem; }
}
@media (min-width: 1025px) {
	.wp-block-gallery.gallery.has-nested-images { grid-template-columns: repeat(4, 1fr); }
}
.wp-block-gallery.gallery.has-nested-images .wp-block-image {
	margin: 0;
	width: auto;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--beige-2);
	box-shadow: var(--shadow-sm);
}
.wp-block-gallery.gallery.has-nested-images .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--ease);
}
.wp-block-gallery.gallery.has-nested-images .wp-block-image:hover img { transform: scale(1.05); }

/* Świąteczna 2-col (oferta-2026-2027 + portfolio) — od 2026-06-08 to DWA edytowalne bloki Galeria
   `wp:gallery .gallery-split__col` obok siebie (wcześniej bespoke wp:image; flip na self-service:
   Inka sama dodaje zdjęcia w każdej kolumnie — lewa = jasne tła, prawa = ciemne). Wrapper
   `.gallery-split` (wp:group) trzyma 2 kolumny gridem z makiety. Każda kolumna to teraz blok Galeria,
   który domyślnie układa flexem → przebijamy na grid jak makietowy `.gallery-split__col`; specyficzność
   `.wp-block-gallery.gallery-split__col.has-nested-images` (0,3,0) > core (0,2,0). `align-content:start`
   jest NOŚNE: krótsza kolumna pakuje kafle u góry, pusta przestrzeń zostaje na dole (wymóg Marcina).
   Kafle to gołe .wp-block-image (jak wiosenna) → 1:1 i kadrowanie selektorem potomka, nowe zdjęcia Inki
   bez żadnej klasy. */
.wp-block-gallery.gallery-split__col.has-nested-images {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.7rem;
	align-content: start;
}
@media (min-width: 768px) {
	.wp-block-gallery.gallery-split__col.has-nested-images { grid-template-columns: 1fr 1fr; gap: 1rem; }
}
.wp-block-gallery.gallery-split__col.has-nested-images .wp-block-image {
	margin: 0;
	width: auto;
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-sm);
	overflow: hidden;
	background: var(--beige-2);
	box-shadow: var(--shadow-sm);
}
.wp-block-gallery.gallery-split__col.has-nested-images .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s var(--ease);
}
.wp-block-gallery.gallery-split__col.has-nested-images .wp-block-image:hover img { transform: scale(1.05); }

/* Utility: pionowe wyśrodkowanie kolumn gridu. Makieta używała inline `align-items:center`
   (m.in. sekcja „Zdjęcia grupowe" — bez tego ramka cennika rozciąga się na wysokość wyższej
   kolumny section-head). Jako blok grupy nie ma tego wprost → reużywalna klasa. */
.items-center { align-items: center; }

/* ==========================================================================
   Portfolio (Etap 7) — filtr sezonowy. Render = 4× Query Loop (te same wpisy CPT co
   oferta-2026-2027, SSOT), każdy z klasą `gallery-section gallery-section--<slug>`.
   Filtr (vanilla, main.js) działa na CAŁYCH sekcjach, nie na pojedynczych kaflach jak
   płaska makieta — bo świąteczna zostaje 2-col 1:1 (model B: wpis = galeria). Style
   `.filters/.filter-btn/.gallery/.gallery-split` są już w makietowym style.css.
   ========================================================================== */
.gallery-section.is-hidden { display: none; }

/* Po odfiltrowaniu pierwsza widoczna sekcja może dziedziczyć margines z `.season-loop + .season-loop`
   (jej poprzednik to ukryta sekcja, wciąż w DOM → `+` łapie). Zerujemy go; scope `.gallery-portfolio`
   daje specyficzność (0,3,0) > (0,2,0) reguły rodzeństwa, niezależnie od kolejności w pliku. */
.gallery-portfolio .gallery-section.is-first-visible { margin-top: 0; }

/* Portfolio = płaski katalog jak makieta → ukryj nagłówki sekcji (eyebrow + h2). To TE SAME wpisy CPT
   co oferta-2026-2027 (gdzie nagłówki MAJĄ być) — różnicę robimy override'em CSS per-kontekst, treść
   nagłówka zostaje w DB (SSOT, nie forkujemy wpisu). Etykietą sekcji na portfolio jest aktywny filtr. */
.gallery-portfolio .season__head { display: none; }

/* ==========================================================================
   Kontakt (Etap 8) — formularz FluentForms (ID 3) w prawej kolumnie contact-grid.
   FF renderuje własny markup (.ff-el-*) i ładuje własny CSS (fluentform-public-default).
   Mapujemy go na język makiety (.form z assets/style.css): te same bordery/focus/radius,
   submit = złoty pill jak .cta-btn. Scope `.contact-form-card .fluentform …` (0,3,0) bije
   domyślny CSS FF (≤0,2,0) niezależnie od kolejności ładowania. Klasy zweryfikowane z renderu (M2).
   ========================================================================== */
.contact-form-card {
	background: var(--beige-2);
	border: 1px solid var(--beige-line);
	border-radius: var(--radius);
	padding: clamp(1.4rem, 4vw, 2.2rem);
}
.contact-form-card__title { margin-top: 0; margin-bottom: 1.2rem; }

/* Etykiety pól = .form label z makiety */
.contact-form-card .fluentform .ff-el-input--label label {
	font-family: 'Inter', sans-serif;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--ink);
}
/* Pola tekst/e-mail/textarea = .form input z makiety */
.contact-form-card .fluentform .ff-el-form-control {
	font-family: inherit;
	font-size: 1rem;
	padding: 0.85rem 1rem;
	border: 1.5px solid var(--beige-line);
	border-radius: var(--radius-sm);
	background: var(--white);
	color: var(--ink);
	width: 100%;
	box-shadow: none;
	transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.contact-form-card .fluentform .ff-el-form-control:focus {
	outline: none;
	border-color: var(--gold);
	box-shadow: 0 0 0 3px var(--gold-soft);
}
.contact-form-card .fluentform textarea.ff-el-form-control { resize: vertical; min-height: 130px; }

/* Przycisk „Wyślij" = złoty pill (jak .cta-btn / .btn-primary). FF daje własny kolor → nadpisujemy. */
.contact-form-card .fluentform .ff-btn-submit {
	font-family: 'Inter', sans-serif;
	font-weight: 700;
	font-size: 1.02rem;
	padding: 0.95rem 1.8rem;
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	background: var(--gold);
	color: var(--ink);
	box-shadow: var(--shadow-sm);
	cursor: pointer;
	transition: transform 0.2s var(--ease), background-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.contact-form-card .fluentform .ff-btn-submit:hover {
	background: #BC9038;
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}
.contact-form-card .fluentform .ff-btn-submit:focus-visible {
	outline: 3px solid var(--gold-deep);
	outline-offset: 3px;
}

/* Nawigacja: custom port w wp:html (parts/header.html) — style z makiety (.nav*) działają wprost. */

/* Sticky nav vs belka admina WP (TYLKO zalogowany — body.admin-bar). Belka jest position:fixed
   na desktopie/tablecie, więc sticky `.nav {top:0}` po zjechaniu wjeżdża POD nią → górna połowa
   headera znika za belką. Offset = wysokość belki. ≤600px belka jest position:absolute (scrolluje
   się z treścią) → bez offsetu, dlatego mobile było OK. Goście (brak .admin-bar) nieobjęci →
   produkcja bez zmian. Wartości belki = stałe WP: 32px (≥783px), 46px (601–782px). */
@media screen and (min-width: 783px) {
	.admin-bar .nav { top: 32px; }
}
@media screen and (min-width: 601px) and (max-width: 782px) {
	.admin-bar .nav { top: 46px; }
}

/* Stopka — dolny pasek (© + „Created by"). Makieta używała <span> (dziedziczył jasny `.footer__bottom`
   color #C9B8AA), a FSE renderuje natywne <p>, które łapią bazowe `p { color: var(--ink-2) }` (ciemne) —
   bezpośrednia reguła na elemencie BIJE kolor dziedziczony (wariant F14). Przywróć muted-light wprost na <p>
   (0,1,1 > bazowe p 0,0,1). Link grzes.dev kryje `.footer a` (już jasny), więc tu tylko zwykły tekst. */
.footer__bottom p { color: #C9B8AA; }