/* ============================================================
   p9: MASTER — Applications (galeria realizacji z filtrami).
   Tylko braki względem base.css/main.css; komponenty wfm-.
   ============================================================ */

/* ---------- hero: niższy wariant wf-phero ----------
   Uwagi 3.09: tło = zdjęcie realizacji (cover, kadr od dołu — nadruk w kadrze),
   z ciemnym gradientem od lewej pod tekstem; stała, niższa wysokość sceny. */
.wfm-apphero .wf-phero__stage {
	height: auto;
	min-height: 460px;
	align-items: center;
	background-size: cover;
	background-position: center 65%;
}
.wfm-apphero .wf-phero__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.72) 40%, rgba(0, 0, 0, 0.3) 70%, rgba(0, 0, 0, 0.15) 100%),
		linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.55) 100%);
	pointer-events: none;
}
.wfm-apphero .wf-phero__inner { position: relative; z-index: 1; padding: 130px 20px 64px; gap: 28px; }
.wfm-apphero .wf-phero__sub { max-width: 720px; }

/* ---------- galeria: kafel jako button (reset + focus) ---------- */
.wfm-gallery__item { font: inherit; color: inherit; text-align: left; }
.wfm-gallery__item:focus-visible { outline: 2px solid var(--roz); outline-offset: 2px; }

/* ---------- CTA na końcu ---------- */
.wfm-appcta { padding-top: 0; }
.wfm-appcta .wf-sec-head { margin-bottom: 40px; }
.wfm-appcta__btns { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
	.wfm-apphero .wf-phero__stage { min-height: 360px; }
}
@media (max-width: 720px) {
	.wfm-apphero .wf-phero__stage { min-height: 0; }
	.wfm-apphero .wf-phero__inner { padding: 120px 20px 50px; }
	.wfm-appcta__btns { flex-direction: column; align-items: stretch; }
	.wfm-appcta__btns .wf-btn { justify-content: center; }
}