/* ============================================================
   p9: MASTER /printer — style strony (tylko uzupełnienia base.css;
   komponenty wspólne wfm-* są w assets/css/master/base.css).
   ============================================================ */

/* ---------- 1. hero: nowe zdjęcie od klienta (uwagi 1.09, „hero printers.png") ----------
   Kadr 1915x821 — drukarka WallArtist Plus+ po prawej, czerń z fioletową poświatą
   po lewej; proporcja prawie równa scenie hero (1920x837), więc na desktopie
   cover nie ucina maszyny. Osobne zachowanie na trzech szerokościach:
   desktop  — cover, tekst na wygaszonej lewej połowie;
   tablet   — jak desktop, ale kolumna tekstu do 56% i scena rośnie z treścią;
   mobile   — osobny pionowy kadr (hero-printer-2026-mob.jpg) jako obraz NAD
              treścią (bez tekstu na zdjęciu), z dolnym wygaszeniem do czerni. */
.wfm-phero .wf-phero__stage {
	position: relative;
	height: auto; /* main.css (≥721) ustawia sztywne 837 jednostek — tu scena rośnie z treścią */
	min-height: calc(837 * var(--u, 1px));
	background-color: #000;
	background-image: var(--wf-bg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	align-items: center;
}
@media (min-width: 721px) {
	.wfm-phero .wf-phero__stage::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.5) 32%, rgba(0, 0, 0, 0.08) 54%, transparent 68%);
		pointer-events: none;
	}
	.wfm-phero .wf-phero__inner { position: relative; z-index: 1; }
	.wfm-phero .wf-phero__title,
	.wfm-phero .wf-phero__sub,
	.wfm-phero .wfm-phero__desc { max-width: min(620px, 54%); }
}
@media (min-width: 721px) and (max-width: 1024px) {
	.wfm-phero .wf-phero__stage { min-height: 0; padding: 56px 0; background-position: 74% center; }
	.wfm-phero .wf-phero__stage::after {
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.7) 40%, rgba(0, 0, 0, 0.2) 60%, transparent 72%);
	}
	.wfm-phero .wf-phero__inner { gap: 24px; }
	.wfm-phero .wf-phero__title { font-size: clamp(30px, 5vw, 44px); }
	.wfm-phero .wf-phero__title,
	.wfm-phero .wf-phero__sub,
	.wfm-phero .wfm-phero__desc { max-width: 52%; }
	.wfm-phero .wfm-phero__desc { font-size: 15px; }
}
@media (max-width: 720px) {
	.wfm-phero .wf-phero__stage {
		flex-direction: column;
		align-items: stretch;
		min-height: 0;
		padding: 0 0 44px;
		background-image: none;
	}
	/* Zdjęcie jako osobny blok nad treścią — bez tekstu na maszynie. */
	.wfm-phero .wf-phero__stage::before {
		content: "";
		display: block;
		width: 100%;
		aspect-ratio: 1 / 1;
		background: #000 var(--wf-bg-mob, var(--wf-bg)) center 38% / cover no-repeat;
		-webkit-mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
		mask-image: linear-gradient(180deg, #000 68%, transparent 100%);
	}
	.wfm-phero .wf-phero__stage::after { content: none; }
	.wfm-phero .wf-phero__inner { position: relative; z-index: 1; margin-top: -56px; padding-top: 0; gap: 22px; }
	.wfm-phero__desc { font-size: 16px; }
}
.wfm-phero__desc { max-width: 620px; color: #d9d5e3; font-size: 18px; line-height: 1.6; }
/* Uwagi 21.08: wielkości tekstów hero jak na Homepage (mniejszy podtytuł). */
.wfm-phero .wf-phero__sub { font-size: 20px; }
.wfm-herochecks { padding: 22px 0; background: var(--black); border-bottom: 1px solid var(--stroke); }
.wfm-herochecks__list { justify-content: space-between; align-items: center; }
.wfm-herochecks__list li { font-weight: 600; }
.wfm-herochecks__list li img { width: 22px; height: 22px; margin-top: 0; }
.wfm-herochecks__list span { color: var(--white); }

/* ---------- 2. Explore WallArtist: animacja 360° + akordeon ----------
   Uwagi 21.08: proporcje 40% (drukarka) / 60% (akordeon); media sticky.
   Uwagi 1.09: animacja producenta (GIF z białym tłem) przygotowana jako
   animowany WebP z przezroczystością (tło wycięte klatka po klatce), więc
   drukarka stoi bezpośrednio na ciemnej stronie — bez białego prostokąta.
   Pod maszyną fioletowa poświata i cień-elipsa; górna krawędź masztu (ucięta
   w materiale źródłowym) wygaszona maską. Wariant --tile (fallback: MP4 lub
   zdjęcie z białym tłem) zachowuje wcześniejszy jasny kafel z gradientem. */
.wfm-explore__grid {
	display: grid;
	grid-template-columns: minmax(0, 40fr) minmax(0, 60fr);
	gap: 48px;
	align-items: start;
}
.wfm-explore__media {
	position: sticky;
	top: 120px;
	display: flex;
	justify-content: center;
	align-items: flex-end;
	padding: 8px 0 24px;
}
.wfm-explore__media::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 110%;
	height: 96%;
	transform: translate(-50%, -46%);
	background: radial-gradient(ellipse 48% 62% at 50% 60%, rgba(109, 66, 216, 0.5) 0%, rgba(109, 66, 216, 0.2) 42%, transparent 72%);
	filter: blur(8px);
	pointer-events: none;
}
.wfm-explore__media::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 6px;
	width: 84%;
	height: 11%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse at center, rgba(169, 119, 232, 0.55) 0%, rgba(169, 119, 232, 0.12) 55%, transparent 72%);
	filter: blur(10px);
	pointer-events: none;
}
.wfm-explore__media img,
.wfm-explore__media video {
	position: relative;
	z-index: 1;
	width: auto;
	max-width: 100%;
	max-height: min(76vh, 760px);
	display: block;
	-webkit-mask-image: linear-gradient(180deg, transparent 0, #000 10%);
	mask-image: linear-gradient(180deg, transparent 0, #000 10%);
}
/* Fallback: materiał z białym tłem (MP4 / zdjęcie) — jasny kafel wtopiony w kompozycję. */
.wfm-explore__media--tile {
	display: block;
	padding: 0;
	border: 1px solid rgba(169, 119, 232, 0.45);
	border-radius: var(--corner);
	overflow: hidden;
	background: radial-gradient(ellipse 90% 80% at 50% 38%, #ffffff 0%, #f6f2fd 46%, #e8dffa 72%, #d3c2f0 100%);
	box-shadow: 0 24px 70px rgba(109, 66, 216, 0.35);
}
.wfm-explore__media--tile::before { content: none; }
.wfm-explore__media--tile::after {
	inset: 0;
	width: auto;
	height: auto;
	transform: none;
	filter: none;
	background: radial-gradient(ellipse 78% 70% at 50% 42%, rgba(19, 12, 37, 0) 55%, rgba(19, 12, 37, 0.14) 80%, rgba(19, 12, 37, 0.42) 100%);
}
.wfm-explore__media--tile img,
.wfm-explore__media--tile video { width: 100%; max-height: none; mix-blend-mode: multiply; -webkit-mask-image: none; mask-image: none; }
.wfm-explore__side { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.wfm-explore__side > p { color: #d9d5e3; }
.wfm-explore__side .wfm-acc { width: 100%; }
.wfm-acc__body p { margin: 0; }
.wfm-acc__body p + p { margin-top: 12px; }
.wfm-explore__cta {
	width: 100%;
	padding: 26px 30px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
	border-left: 3px solid var(--roz);
}
.wfm-explore__cta p { color: #d9d5e3; }

/* ---------- 3. głowice (boxy DX7 / i3200-U) ----------
   Uwagi 21.08: boxy bardziej kompaktowe — mniejszy padding i odstępy,
   grafika głowicy po lewej stronie nagłówka zamiast nad treścią. */
.wfm-printhead__box { padding: 24px 28px; gap: 12px; }
.wfm-printhead__box .wfm-printhead__head { display: flex; align-items: center; gap: 16px; }
.wfm-printhead__icon { width: 52px; height: 52px; flex: 0 0 auto; }
.wfm-printhead__box .wf-checklist { gap: 8px; }
.wfm-printhead__box .wf-checklist li img { width: 20px; height: 20px; }
.wfm-box .wfm-box__note { margin-top: auto; align-self: flex-start; }

/* ---------- CTA pod sekcjami (tekst + przycisk, wyśrodkowane) ---------- */
.wfm-secta {
	max-width: 680px;
	margin: 56px auto 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
	text-align: center;
}
.wfm-secta p { color: #d9d5e3; }
.wfm-secta .wf-btn { margin-top: 6px; }
.wfm-secta--tight { margin-top: 40px; }

/* ---------- 6. rozbudowa (Expand Your WallArtist) ----------
   Uwagi 1.09: zdjęcia trzech modułów były przycięte (stała wysokość 220px,
   cover od środka). Teraz każda karta ma tę samą proporcję 4:3 — zdjęcia
   klienta mają proporcje 1.22–1.36, więc kadr cover praktycznie nic nie ucina,
   a wszystkie trzy karty są równorzędne (ta sama wysokość obrazu, ten sam kadr
   na każdej szerokości). */
.wfm-expand .wfm-box__img {
	position: relative;
	aspect-ratio: 4 / 3;
	min-height: 0;
	overflow: hidden;
	background: #05030a;
	border-bottom: 1px solid var(--stroke);
}
/* Obraz pozycjonowany absolutnie — jego naturalna wysokość nie rozpycha
   pudełka 4:3 (min-height:auto w kolumnie flex), więc trzy karty są identyczne. */
.wfm-expand .wfm-box__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.wfm-expand .wfm-box h3 { min-height: 0; }
.wfm-expand__list { gap: 10px; }
.wfm-expand__list li { font-size: 14px; }
.wfm-expand__list li img { width: 20px; height: 20px; }

/* ---------- 7. FAQ ---------- */
.wfm-pfaq__list { max-width: 900px; margin: 0 auto; }

/* ---------- responsive (breakpointy motywu: 1024 / 720) ---------- */
@media (max-width: 1024px) {
	.wfm-explore__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.wfm-explore__media { position: relative; top: auto; }
	.wfm-explore__media img, .wfm-explore__media video { max-height: 520px; }
}
@media (max-width: 720px) {
	.wfm-herochecks__list { flex-direction: column; align-items: flex-start; gap: 10px; }
	.wfm-secta { margin-top: 36px; }
	.wfm-explore__cta { padding: 22px 20px; }
}