/**
 * Landing „Laserowe usuwanie przebarwień” — warstwa wspólna.
 *
 * Zawiera wyłącznie to, co współdzielą bloki `acf/laser-*`:
 * tokeny, reset kontenera Astry, siatkę sekcji i prymitywy
 * (etykieta, nagłówek, tekst, przycisk, akordeon, karuzela).
 * Style konkretnej sekcji należą do blocks/laser-<nazwa>/style.css.
 */

/* --- 1. Tokeny --- */

/* Tokeny trafiają też na korzeń każdego bloku, żeby sekcje wyglądały
   tak samo w edytorze, gdzie body nie ma klasy .anm-laser-page. */
.anm-laser-page,
.editor-styles-wrapper,
.anm-ls-section,
.anm-ls-band {
	--ls-bg: #f7f7f5;
	--ls-ink: #0a0a0a;
	--ls-ink-soft: #3a3a38;
	--ls-ink-muted: #45453f;
	--ls-ink-faint: #5c5c56;
	--ls-paper: #ffffff;
	--ls-paper-alt: #f0f0ec;
	--ls-accent: #92d4f6;
	--ls-accent-soft: #e6f4fc;
	--ls-link: #17698c;
	--ls-gold: #e8a33d;
	--ls-light: #f2f2ef;

	--ls-line: rgba(10, 10, 10, 0.16);
	--ls-line-soft: rgba(10, 10, 10, 0.12);
	--ls-line-strong: rgba(10, 10, 10, 0.28);
	--ls-line-dark: rgba(255, 255, 255, 0.14);
	--ls-on-dark: rgba(255, 255, 255, 0.78);
	--ls-on-dark-soft: rgba(255, 255, 255, 0.68);
	--ls-on-dark-faint: rgba(255, 255, 255, 0.62);

	--ls-font-serif: "Playfair Display", Georgia, serif;
	--ls-font-sans: "Hanken Grotesk", system-ui, sans-serif;
	--ls-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

	--ls-max: 1440px;
	--ls-gutter: clamp(20px, 2.4vw, 40px);
	--ls-section-y: clamp(48px, 5.4vw, 104px);
	--ls-radius: 8px;
	--ls-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- 2. Reset kontenera motywu nadrzędnego --- */

/* Makieta liczy szerokości od krawędzi obramowania (`*{box-sizing:border-box}`).
   Deklarujemy to lokalnie, bo w edytorze bloków resetu motywu nadrzędnego nie ma,
   a bez niego kontener 1440 px rośnie o wewnętrzne marginesy i siatki się łamią.
   `:where()` zeruje specyficzność, więc bloki nadal mogą to nadpisać. */
:where(.anm-ls-section, .anm-ls-band, .anm-ls-subnav),
:where(.anm-ls-section, .anm-ls-band, .anm-ls-subnav) *,
:where(.anm-ls-section, .anm-ls-band, .anm-ls-subnav) *::before,
:where(.anm-ls-section, .anm-ls-band, .anm-ls-subnav) *::after {
	box-sizing: border-box;
}

html:has(.anm-laser-page) {
	scroll-behavior: smooth;
	scroll-padding-top: 150px;
}

.anm-laser-page,
.anm-laser-page .site-content {
	background-color: #f7f7f5;
}

.anm-laser-page.ast-separate-container #primary,
.anm-laser-page.ast-separate-container .ast-article-single,
.anm-laser-page .site-content > .ast-container,
.anm-laser-page .entry-content {
	background: transparent;
	margin: 0;
	padding: 0;
	max-width: none;
	width: 100%;
}

.anm-laser-page .entry-content {
	font-family: var(--ls-font-sans);
	-webkit-font-smoothing: antialiased;
}

.anm-laser-page .entry-content > * {
	margin-block: 0;
}

/* --- 3. Siatka sekcji ---
 *
 * Każdy blok deklaruje jedną z dwóch ról na swoim elemencie głównym:
 *   .anm-ls-section — sekcja w kontenerze (tło strony, podwójny margines boczny),
 *   .anm-ls-band    — pas pełnej szerokości z własnym tłem.
 * Rytm pionowy liczy warstwa wspólna, bloki nie ustawiają własnego padding-block.
 */

.anm-ls-shell {
	position: relative;
	width: 100%;
	max-width: var(--ls-max);
	margin-inline: auto;
	padding-inline: var(--ls-gutter);
}

.anm-ls-section {
	position: relative;
	padding-block: 0 var(--ls-section-y);
}

.anm-ls-section > .anm-ls-shell {
	padding-inline: calc(var(--ls-gutter) * 2);
}

.anm-ls-section:first-child,
.anm-ls-band + .anm-ls-section {
	padding-top: var(--ls-section-y);
}

.anm-ls-band {
	position: relative;
	width: 100%;
}

.anm-ls-band > .anm-ls-shell {
	padding-block: var(--ls-section-y);
}

.anm-ls-band--dark {
	background: var(--ls-ink);
}

.anm-ls-band--accent {
	background: var(--ls-accent);
}

/* --- 4. Prymitywy typograficzne --- */

.anm-ls-label {
	margin: 0;
	flex: 0 0 auto;
	font: 500 11.5px/1 var(--ls-font-mono);
	letter-spacing: 0.16em;
	color: var(--ls-ink);
}

.anm-ls-label--on-dark {
	color: var(--ls-on-dark-faint);
}

.anm-ls-label--block {
	display: block;
	margin-bottom: 26px;
}

.anm-ls-heading {
	margin: 0;
	font-family: var(--ls-font-serif);
	font-weight: 400;
	font-size: clamp(30px, 3.2vw, 48px);
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--ls-ink);
	text-wrap: pretty;
}

.anm-ls-heading--on-dark {
	color: var(--ls-light);
}

.anm-ls-subheading {
	margin: 0;
	font-family: var(--ls-font-serif);
	font-weight: 400;
	font-size: clamp(23px, 2vw, 32px);
	line-height: 1.16;
	letter-spacing: -0.01em;
	color: var(--ls-ink);
	text-wrap: pretty;
}

/* Nagłówek sekcji: tytuł po lewej, etykieta po prawej (box-22 w makiecie). */
.anm-ls-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
}

.anm-ls-head > .anm-ls-heading {
	flex: 1 1 380px;
	max-width: 520px;
}

.anm-ls-text {
	font-size: clamp(14.5px, 1vw, 15.5px);
	line-height: 1.75;
	color: var(--ls-ink-soft);
	text-wrap: pretty;
}

.anm-ls-text--justify {
	text-align: justify;
}

.anm-ls-text--on-dark {
	color: var(--ls-on-dark);
}

.anm-ls-callout {
	margin: 26px 0 0;
	padding: 18px 22px;
	background: var(--ls-paper-alt);
	border-left: 2px solid var(--ls-accent);
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--ls-ink-soft);
	text-wrap: pretty;
}

.anm-ls-stars {
	margin: 0;
	font: 600 13px/1 var(--ls-font-sans);
	letter-spacing: 0.14em;
	color: var(--ls-gold);
}

/* --- 5. Przyciski --- */

.anm-ls-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 26px;
	border: 0;
	border-radius: var(--ls-radius);
	background: var(--ls-ink);
	color: #fff;
	font: 600 14.5px/1 var(--ls-font-sans);
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: opacity 0.25s var(--ls-ease);
}

.anm-ls-btn:hover,
.anm-ls-btn:focus-visible {
	color: #fff;
	opacity: 0.86;
}

.anm-ls-btn--accent {
	background: var(--ls-accent);
	color: var(--ls-ink);
}

.anm-ls-btn--accent:hover,
.anm-ls-btn--accent:focus-visible {
	color: var(--ls-ink);
}

.anm-ls-btn--ghost {
	background: rgba(255, 255, 255, 0.86);
	border: 1px solid rgba(10, 10, 10, 0.18);
	color: var(--ls-ink);
}

.anm-ls-btn--ghost:hover,
.anm-ls-btn--ghost:focus-visible {
	color: var(--ls-ink);
}

.anm-ls-btn--quiet {
	background: transparent;
	color: #fff;
	padding: 0;
}

.anm-ls-btn--lg {
	min-height: 54px;
	padding: 0 30px;
	font-size: 15px;
}

.anm-laser-page :where(a, button).anm-ls-btn:focus-visible,
.anm-laser-page .anm-ls-acc__toggle:focus-visible {
	outline: 2px solid var(--ls-link);
	outline-offset: 3px;
}

/* --- 6. Akordeon ---
 *
 * Kontrakt: [data-anm-ls-accordion] > .anm-ls-acc__item,
 * w każdym .anm-ls-acc__toggle[aria-expanded] + .anm-ls-acc__panel[id].
 * Obsługa: assets/js/laser.js.
 */

.anm-ls-acc__item + .anm-ls-acc__item {
	border-top: 1px solid var(--ls-line);
}

.anm-ls-acc__item:last-child {
	border-bottom: 1px solid var(--ls-line);
}

.anm-ls-acc__toggle {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 24px;
	min-height: 56px;
	padding: 26px 0;
	background: transparent;
	border: 0;
	text-align: left;
	font-family: var(--ls-font-sans);
	cursor: pointer;
}

/* Przełącznik jest elementem <button>, więc motyw nadrzędny dokłada mu własne
   tło i cień w stanach interakcji. Zerujemy je — akordeon ma reagować samym
   obrotem ikony, a obrys zostaje na :focus-visible. */
.anm-laser-page .anm-ls-acc__toggle {
	box-shadow: none;
}

.anm-laser-page .anm-ls-acc__toggle:hover,
.anm-laser-page .anm-ls-acc__toggle:active,
.anm-laser-page .anm-ls-acc__toggle:focus {
	background: transparent;
	box-shadow: none;
}

.anm-ls-acc__item:first-child > .anm-ls-acc__toggle {
	padding-top: 0;
}

.anm-ls-acc__q {
	max-width: 520px;
	font-family: var(--ls-font-serif);
	font-weight: 400;
	font-size: clamp(19px, 1.55vw, 25px);
	line-height: 1.3;
	color: var(--ls-ink);
}

.anm-ls-acc__icon {
	flex: 0 0 auto;
	position: relative;
	width: 22px;
	height: 22px;
	margin-top: 5px;
	transition: transform 0.45s var(--ls-ease);
}

.anm-ls-acc__icon::before,
.anm-ls-acc__icon::after {
	content: "";
	position: absolute;
	background: var(--ls-ink);
}

.anm-ls-acc__icon::before {
	top: 10.5px;
	left: 0;
	width: 22px;
	height: 1.3px;
}

.anm-ls-acc__icon::after {
	left: 10.5px;
	top: 0;
	width: 1.3px;
	height: 22px;
}

.anm-ls-acc__toggle[aria-expanded="true"] .anm-ls-acc__icon {
	transform: rotate(45deg);
}

.anm-ls-acc__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.45s var(--ls-ease);
}

.anm-ls-acc__panel.is-open {
	grid-template-rows: 1fr;
}

/* Bezpośrednie dziecko panelu wyznacza wysokość toru siatki. Jego treść jest
   przycinana, ale pionowy padding leży poza przycinanym pudełkiem i nie zwija
   się do zera — dlatego odstępy trzymamy wewnątrz .anm-ls-acc__inner. */
.anm-ls-acc__panel > * {
	min-height: 0;
	padding-block: 0;
	overflow: hidden;
}

/* --- 7. Karuzela ---
 *
 * Kontrakt: [data-anm-ls-scroller] na torze przewijania,
 * [data-anm-ls-scroll="prev|next"] na przyciskach w tej samej sekcji.
 * Obsługa: assets/js/laser.js.
 */

.anm-ls-scroller {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	-ms-overflow-style: none;
	overscroll-behavior-x: contain;
}

.anm-ls-scroller::-webkit-scrollbar {
	width: 0;
	height: 0;
}

.anm-ls-scroller > * {
	scroll-snap-align: start;
}

.anm-ls-scroll-btn {
	width: 48px;
	height: 48px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 1px solid var(--ls-line-strong);
	border-radius: 4px;
	color: var(--ls-ink);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.25s var(--ls-ease);
}

.anm-ls-scroll-btn:hover {
	background: rgba(10, 10, 10, 0.06);
}

.anm-ls-scroll-btn[disabled] {
	opacity: 0.35;
	cursor: default;
}

/* Grupa oznaczona przez laser.js jako nieprzewijalna (wszystkie karty widoczne)
   ukrywa strzałki — inaczej zostają dwa wyblakłe, nieklikalne kwadraty. */
[data-anm-ls-scroll-group].is-static .anm-ls-scroll-btn {
	display: none;
}

/* --- 8. Obrazy --- */

.anm-ls-figure {
	position: relative;
	overflow: hidden;
	border-radius: var(--ls-radius);
	background: var(--ls-paper-alt);
}

.anm-ls-figure > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --- 9. Redukcja ruchu --- */

@media (prefers-reduced-motion: reduce) {
	html:has(.anm-laser-page) {
		scroll-behavior: auto;
	}

	.anm-laser-page .anm-ls-acc__panel,
	.anm-laser-page .anm-ls-acc__icon,
	.anm-laser-page .anm-ls-btn {
		transition: none;
	}
}

/* --- 10. Sekcja opinii (wspólny blok acf/patient-reviews) --- */

/* Blok ustawia tylko biały tekst i liczy na ciemne tło strony. Landing jest
   jasny, więc tło dokładamy tutaj — kolor z projektu Figma (1:520). */
/* Sekcje laserowe mają padding tylko od dołu, a rytm po pasie pełnej szerokości
   domyka reguła .anm-ls-band + .anm-ls-section. Blok opinii nie jest bandem,
   więc następna sekcja przylegała do niego bez odstępu — dokładamy go tutaj. */
.anm-laser-page .anm-patient-reviews {
	background: #030303;
	margin-bottom: var(--ls-section-y);
}