/* ==========================================================================
   Visiting Apartments — komponenty treści
   design-spec.md §5.4 (split), §5.11 (silnik), §5.12 (hero), §6 (strony)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Sekcje — rytm pionowy
   -------------------------------------------------------------------------- */

.va-content .wp-block-post-content > * { margin-block: 0; }
.va-content .wp-block-post-content > * + * { margin-top: var(--va-section-gap); }
.va-content .wp-block-post-content > .va-hero + * { margin-top: var(--va-section-gap); }

/* Nagłówek strony z wciętą drugą linią: „VISITING APARTMENTS / – TWÓJ WROCŁAW…” */
.va-indent {
	display: inline-block;
	padding-left: 44px;
}

/* Etykieta sekcji (wersaliki w rozmiarze tekstu) */
.va-label {
	margin: 0 0 24px;
	font-size: var(--va-fs-base);
	letter-spacing: var(--va-ls-caps);
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Zdjęcia (blok Okładka bez nakładki = edytowalne zdjęcie o stałej proporcji)
   -------------------------------------------------------------------------- */

.va-figure.wp-block-cover {
	min-height: 0 !important;
	padding: 0;
	margin-inline: 0;
	overflow: hidden;
	aspect-ratio: 3 / 4;
	background: var(--va-surface);
}
.va-figure .wp-block-cover__inner-container { display: none; }
.va-figure .wp-block-cover__background { display: none; }
.va-figure .wp-block-cover__image-background {
	transition: transform var(--va-t-slow) var(--va-ease);
}
.va-figure.va-figure--45 { aspect-ratio: 4 / 5; }
.va-figure.va-figure--32 { aspect-ratio: 3 / 2; }
.va-figure--wide { width: 100%; }

/* --------------------------------------------------------------------------
   Split: tekst | zdjęcie  (.va-split, --reverse)
   Kolumna zdjęcia ma stałą szerokość, więc tekst w wariancie odwróconym
   startuje dokładnie tam, gdzie zdjęcie w wariancie zwykłym.
   -------------------------------------------------------------------------- */

.va-split {
	--va-split-media: clamp(320px, 32%, 440px);
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--va-split-media);
	column-gap: 40px;
	align-items: start;
}
.va-split > * { margin: 0; min-width: 0; }

.va-split__text {
	max-width: var(--va-measure-narrow);
}
.va-split__text > * { margin-block: 0; }
.va-split__text > * + * { margin-top: 24px; }
.va-split__text > .va-gap-lg { margin-top: 48px; }

.va-split__media > * { margin-block: 0; }
.va-split__media > * + * { margin-top: 40px; }

/* Wariant odwrócony: duże zdjęcie po lewej, tekst w prawej kolumnie, wyśrodkowany w pionie */
.va-split--reverse { align-items: center; }
.va-split--reverse > .va-split__media { grid-column: 1; grid-row: 1; max-width: 430px; width: 100%; }
.va-split--reverse > .va-split__text { grid-column: 2; grid-row: 1; }

/* Wariant „szerokie zdjęcie” (strona główna) */
.va-split--wide { --va-split-media: clamp(360px, 46%, 600px); }
.va-split--wide > .va-split__text { max-width: 400px; }

/* --------------------------------------------------------------------------
   Wiersz CTA: tekst + przycisk
   -------------------------------------------------------------------------- */

.va-cta-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 24px 64px;
}
.va-cta-row > * { margin: 0; }
.va-cta-row__text { max-width: 440px; }
.va-cta-row__text > * { margin-block: 0; }
.va-cta-row__text > * + * { margin-top: 16px; }
.va-cta-row .wp-block-buttons { margin: 0; }

/* Bloki Przyciski z edytora */
.wp-block-buttons { gap: 16px; }
.wp-block-button.is-style-solid .wp-block-button__link,
.wp-block-button.va-btn-solid .wp-block-button__link {
	background: var(--va-contrast);
	color: #fff;
}
.wp-block-button.is-style-solid .wp-block-button__link:hover,
.wp-block-button.va-btn-solid .wp-block-button__link:hover {
	background: var(--va-contrast-hover);
	border-color: var(--va-contrast-hover);
}
.wp-block-button.va-btn-block,
.wp-block-button.va-btn-block .wp-block-button__link { width: 100%; }

/* --------------------------------------------------------------------------
   HERO strony głównej (blok Okładka .va-hero)
   Wychodzi poza kolumnę treści: na całą szerokość okna (także pod sidebarem)
   i na całą wysokość (także pod paskiem REZERWUJ).
   -------------------------------------------------------------------------- */

.va-hero.wp-block-cover {
	--va-hero-offset: calc(var(--va-sidebar-w) + var(--va-gutter));
	position: relative;
	box-sizing: border-box;
	width: 100vw;
	max-width: none;
	height: calc(100vh + 6px);
	height: calc(100svh + 6px); /* +6px = zapas z margin-top */
	min-height: 640px !important;
	margin-left: calc(-1 * var(--va-hero-offset));
	margin-top: calc(-1 * (var(--va-top) + var(--va-btn-h) + 9px + 48px + 6px)); /* +6px zapasu na zaokrąglenia */
	padding: 0;
	align-items: flex-start;
	justify-content: flex-start;
	color: var(--va-on-photo);
}
.va-hero .wp-block-cover__background {
	opacity: 1 !important;
	background: linear-gradient(to bottom, rgba(20, 20, 20, .22) 0%, rgba(20, 20, 20, 0) 45%) !important;
}
.va-hero .wp-block-cover__inner-container {
	box-sizing: border-box;
	width: auto;
	max-width: calc(var(--va-content-w) + var(--va-hero-offset));
	margin: 0;
	padding: var(--va-top) 48px 0 var(--va-hero-offset);
	color: var(--va-on-photo);
}
.va-hero .wp-block-cover__inner-container > * { margin-block: 0; }

.va-hero__title.wp-block-heading,
.va-hero h1 {
	display: flex;
	align-items: center;
	min-height: var(--va-btn-h);
	margin: 0;
	padding-right: 220px; /* miejsce na REZERWUJ z paska */
	color: var(--va-on-photo);
	font-size: var(--va-fs-large);
	font-weight: 300;
	line-height: 1.05;
	letter-spacing: .01em;
	text-transform: none;
}
.va-hero__lead {
	max-width: var(--va-measure-narrow);
	margin-top: 72px !important;
	color: var(--va-on-photo);
	text-shadow: 0 1px 12px rgba(0, 0, 0, .12);
}

/* Pasek REZERWUJ i sidebar, gdy leżą na zdjęciu hero */
.va-over-hero .va-topbar { background: transparent; }
.va-over-hero .va-topbar__inner { border-bottom-color: rgba(244, 241, 236, .7); }
.va-over-hero .va-topbar__cta { background: #EEEAE5; }
.va-over-hero .va-topbar__cta:hover { background: var(--va-contrast); color: var(--va-base); }

@media (min-width: 1024px) {
	.va-over-hero .va-sidebar {
		background: rgba(230, 225, 219, .55);
		-webkit-backdrop-filter: blur(6px);
		backdrop-filter: blur(6px);
		transition: padding-top var(--va-t-slow) var(--va-ease), background-color var(--va-t-slow) var(--va-ease);
	}
}

/* Strona główna: bez paddingu nad treścią (hero zaczyna się od samej góry) */
.va-is-home .va-content { overflow: visible; }
html, body { overflow-x: clip; }

/* --------------------------------------------------------------------------
   Dokumenty: Regulamin, Polityka prywatności
   -------------------------------------------------------------------------- */

.va-legal { max-width: 760px; }
.va-legal > * { margin-block: 0; }
.va-legal > * + * { margin-top: 24px; }
.va-legal > h2 { margin-top: 64px; }
.va-legal > h2:first-child { margin-top: 0; }
.va-legal ul { padding-left: 1.2em; }

.va-legal-list {
	list-style: none;
	counter-reset: va-legal;
	margin-inline: 0;
	padding: 0;
}
.va-legal > h2 + .va-legal-list { margin-top: 32px; }
.va-legal-list > li {
	position: relative;
	counter-increment: va-legal;
	padding-left: 40px;
}
.va-legal-list > li + li { margin-top: 24px; }
.va-legal-list > li::before {
	content: counter(va-legal) ".";
	position: absolute;
	left: 0;
	top: 0;
}

/* --------------------------------------------------------------------------
   Dane kontaktowe
   -------------------------------------------------------------------------- */

.va-contact-details { margin: 0; }
.va-contact-details__list {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	text-transform: uppercase;
	letter-spacing: var(--va-ls-caps);
}
.va-contact-details__list li + li { margin-top: 4px; }
.va-contact-details__list a { text-decoration: none; }
.va-contact-details__list a:hover { text-decoration: underline; color: var(--va-contrast); }

/* --------------------------------------------------------------------------
   Silnik rezerwacji (ramka) — §5.11
   -------------------------------------------------------------------------- */

.va-booking {
	box-sizing: border-box;
	min-height: 480px;
	border: 1px solid var(--va-contrast);
	background: #fff;
}
.va-booking__fallback {
	padding: 64px 40px;
	text-align: center;
}
.va-booking__fallback p { max-width: var(--va-measure-text); margin-inline: auto; }

/* Komunikat dla administratora (np. brak konfiguracji) */
.va-admin-note {
	padding: 16px 20px;
	border: 1px dashed var(--va-line);
	font-size: var(--va-fs-small);
	color: var(--va-contrast);
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 1023px) {
	.va-split,
	.va-split--reverse {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 40px;
	}
	.va-split--reverse > .va-split__media,
	.va-split--reverse > .va-split__text { grid-column: 1; grid-row: auto; }
	.va-split__text { max-width: var(--va-measure-text); }
	.va-split__media { max-width: 520px; }

	.va-hero.wp-block-cover {
		--va-hero-offset: var(--va-page-pad);
		height: calc(100svh - var(--va-mbar-h));
		min-height: 520px !important;
		margin-top: -32px; /* padding .va-content na mobile */
	}
	.va-hero .wp-block-cover__inner-container {
		max-width: none;
		padding: 48px var(--va-page-pad) 0;
	}
	.va-hero__title.wp-block-heading,
	.va-hero h1 { padding-right: 0; }
	.va-hero__lead { margin-top: 32px !important; }

	.va-legal-list > li { padding-left: 32px; }
	.va-booking { min-height: 360px; margin-inline: calc(-1 * var(--va-page-pad)); border-inline: 0; }
}

/* Notka dla redaktora nie rozpycha układu odstępem sekcji */
.va-content .wp-block-post-content > .va-admin-note + *,
.va-admin-note + * { margin-top: 40px !important; }

/* --------------------------------------------------------------------------
   Prasa — siatka publikacji (design-spec §5.9)
   -------------------------------------------------------------------------- */

.va-content .wp-block-post-content > .va-press { max-width: none; }
.va-press {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 40px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.va-press__item { margin: 0; }
.va-press__link {
	display: block;
	color: var(--va-contrast);
	text-decoration: none;
}
.va-press__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--va-surface);
}
.va-press__media img {
	display: block;
	width: 100%;
	height: 100%;
	transition: transform var(--va-t-slow) var(--va-ease);
}
.va-press__media--online img { object-fit: cover; }
.va-press__media--print { padding: 14% 17%; box-sizing: border-box; }
.va-press__media--print img {
	object-fit: contain;
	filter: drop-shadow(0 6px 14px rgba(20, 20, 20, .14));
}
.va-press__ph {
	padding: 16px;
	color: var(--va-muted);
	font-size: 11px;
	letter-spacing: var(--va-ls-caps);
	text-transform: uppercase;
	text-align: center;
}
.va-press__cap {
	display: flex;
	flex-direction: column;
	margin-top: 16px;
	font-size: var(--va-fs-small);
	line-height: 1.4;
}
a.va-press__link:hover .va-press__media img { transform: scale(1.03); }
a.va-press__link:hover .va-press__cap { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1439px) { .va-press { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1279px) { .va-press { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 639px)  { .va-press { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; } }