/* AluPro - FAQ "Od pomyslu do dzialajacego masztu" (shortcode [alupro_faq], inc/faq-maszt.php) */

.ax-faq2 {
	--ax-navy: var(--wp--preset--color--secondary, #0E151F);
	--ax-blue: var(--wp--preset--color--primary, #0D6EFD);
	--ax-grey: var(--wp--preset--color--tertiary, #6C6C77);
	--ax-line: #D9D9D9;
	--ax-hdr: 170px;
	color: var(--ax-grey);
}

/* --- hero --- */
/* pelna szerokosc: hero wychodzi poza boczny odstep .wp-site-blocks (--wp--custom--spacing--outer) */
.ax-faq2-hero {
	margin-left: calc(var(--wp--custom--spacing--outer, 30px) * -1);
	margin-right: calc(var(--wp--custom--spacing--outer, 30px) * -1);
	background-color: var(--ax-navy);
	background-image:
		linear-gradient(90deg, rgba(14, 21, 31, .94) 0%, rgba(14, 21, 31, .78) 50%, rgba(14, 21, 31, .5) 100%),
		var(--ax-hero-img, none);
	background-size: cover;
	background-position: center 40%;
	padding: clamp(56px, 8vw, 120px) clamp(20px, 6vw, 150px) 44px;
	display: flex; flex-direction: column; gap: 18px;
}
.ax-faq2-eyebrow { margin: 0; color: var(--ax-blue); font-size: 14px; font-weight: 600; letter-spacing: 3px; }
.ax-faq2-title { margin: 0; color: #fff; font-size: clamp(36px, 5vw, 64px); font-weight: 500; line-height: 1.08; }
.ax-faq2-sub { margin: 0; color: #b9bec7; font-size: 18px; max-width: 640px; }
.ax-faq2-search { position: relative; max-width: 640px; margin-top: 10px; }
.ax-faq2-search input {
	width: 100%; box-sizing: border-box; height: 56px; padding: 0 130px 0 22px;
	border-radius: 28px; border: 1px solid #2a3442; background: #151e2b; color: #fff; font: inherit; font-size: 17px;
	transition: border-color .2s, background-color .2s;
}
.ax-faq2-search input::placeholder { color: #7d8591; }
.ax-faq2-search input:focus { outline: none; border-color: var(--ax-blue); background: #182334; }
.ax-faq2-count { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); color: #7d8591; font-size: 14px; }
.ax-faq2-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ax-faq2-chips a {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 22px;
	border: 1px solid #2a3442; color: #d9dde3; text-decoration: none; font-size: 15px;
	transition: background-color .2s, border-color .2s, color .2s;
}
.ax-faq2-chips a span { color: var(--ax-blue); font-weight: 600; font-variant-numeric: tabular-nums; }
.ax-faq2-chips a:hover, .ax-faq2-chips a.is-current { background: var(--ax-blue); border-color: var(--ax-blue); color: #fff; }
.ax-faq2-chips a:hover span, .ax-faq2-chips a.is-current span { color: #fff; }

/* --- uklad: maszt + etapy --- */
.ax-faq2-body {
	display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(24px, 4vw, 64px);
	padding: 56px clamp(20px, 6vw, 120px) 96px; max-width: 1480px; margin: 0 auto; box-sizing: border-box;
}
.ax-faq2-mast {
	position: sticky; top: calc(var(--ax-hdr) + 24px);
	height: calc(100vh - var(--ax-hdr) - 72px); max-height: 760px; min-height: 420px;
	display: flex; align-items: stretch; gap: 18px;
}
.ax-faq2-mast svg { height: 100%; width: auto; aspect-ratio: 140 / 720; flex: 0 0 auto; overflow: visible; display: block; }

/* lista etapow obok masztu */
.ax-mast-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.ax-mast-list a {
	display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 10px;
	color: #9aa0a9; text-decoration: none; font-size: 15px; line-height: 1.3; transition: color .3s, background-color .3s;
}
.ax-mast-list span { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ax-line); transition: color .3s; }
.ax-mast-list .is-built a { color: var(--ax-navy); }
.ax-mast-list .is-built span { color: var(--ax-navy); }
.ax-mast-list .is-current a { color: var(--ax-blue); background: rgba(13, 110, 253, .07); }
.ax-mast-list .is-current span { color: var(--ax-blue); }
.ax-mast-list a:hover { color: var(--ax-blue); }

/* fazy budowy masztu */
.ax-ph { opacity: 0; transition: opacity .5s; }
.ax-ph.is-built { opacity: 1; }
.ax-ground { stroke: var(--ax-line); stroke-width: 2; }
/* 01 plan */
.ax-plan { fill: none; stroke: var(--ax-navy); stroke-opacity: .28; stroke-width: 1.2; stroke-dasharray: 3 5; transition: stroke .4s, stroke-opacity .4s; }
.ax-ph1.is-current .ax-plan { stroke: var(--ax-blue); stroke-opacity: .7; }
/* 02 dokument + piecztka */
.ax-doc rect { fill: #fff; stroke: var(--ax-grey); stroke-width: 1.2; }
.ax-doc line { stroke: #c4c8ce; stroke-width: 1.2; }
.ax-stamp circle, .ax-stamp path { fill: none; stroke: var(--ax-blue); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ax-stamp { transform-box: fill-box; transform-origin: center; transform: rotate(-14deg); opacity: 0; }
.ax-ph2.is-built .ax-stamp { animation: ax-stamp .5s cubic-bezier(.3, 1.4, .5, 1) .35s both; }
@keyframes ax-stamp { from { opacity: 0; transform: rotate(-30deg) scale(1.9); } to { opacity: 1; transform: rotate(-14deg) scale(1); } }
/* 03 fundament + pasy */
.ax-found { fill: #c9cdd3; transform-box: fill-box; transform-origin: top; transform: scaleY(0); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.ax-ph3.is-built .ax-found { transform: none; }
.ax-bolt { stroke: var(--ax-navy); stroke-width: 2; }
.ax-m { fill: none; stroke: var(--ax-navy); stroke-linecap: round; stroke-dasharray: var(--l) var(--l); stroke-dashoffset: var(--l); transition: stroke .4s; }
.is-built > .ax-m { animation: ax-weld .9s cubic-bezier(.6, .05, .3, 1) var(--d, 0s) both; }
.ax-ph3.is-current .ax-m, .ax-ph4.is-current .ax-m { stroke: var(--ax-blue); }
@keyframes ax-weld { from { stroke-dashoffset: var(--l); } to { stroke-dashoffset: 0; } }
/* 04 iskry spawania */
.ax-spark { fill: #FFB020; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ax-ph4.is-built .ax-spark { animation: ax-spark .5s ease-out var(--d, 0s) both; }
@keyframes ax-spark { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1.4); } 100% { opacity: 0; transform: scale(.6); } }
/* 05 anteny + sygnal */
.ax-ant { fill: var(--ax-navy); }
.ax-ph5.is-current .ax-ant { fill: var(--ax-blue); }
.ax-sig { fill: none; stroke: var(--ax-blue); stroke-width: 1.5; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ax-ph5.is-built .ax-sig { animation: ax-sig 2.4s ease-out .4s 3; }
.ax-ph5.is-built .ax-sig:nth-of-type(2) { animation-delay: .8s; }
.ax-ph5.is-built .ax-sig:nth-of-type(3) { animation-delay: 1.2s; }
@keyframes ax-sig { 0% { opacity: 0; transform: scale(.6); } 30% { opacity: .7; } 100% { opacity: 0; transform: scale(1.3); } }

/* --- etapy i karty --- */
.ax-stage { scroll-margin-top: calc(var(--ax-hdr) + 20px); margin-bottom: 72px; }
.ax-stage[hidden] { display: none; }
.ax-stage-head { display: flex; gap: 20px; align-items: baseline; margin-bottom: 28px; border-top: 1px solid var(--ax-line); padding-top: 22px; }
.ax-stage-num { font-size: 44px; font-weight: 600; color: var(--ax-blue); line-height: 1; font-variant-numeric: tabular-nums; }
.ax-stage-head h2 { margin: 0 0 6px; font-size: clamp(26px, 3vw, 38px); font-weight: 500; color: var(--ax-navy); }
.ax-stage-head p { margin: 0; font-size: 16px; }
.ax-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.ax-card[hidden] { display: none; }
.ax-card a {
	display: flex; flex-direction: column; height: 100%; background: #fff; border-radius: 20px; overflow: hidden;
	text-decoration: none; color: inherit; box-shadow: 0 2px 8px rgba(14, 21, 31, .06);
	transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s cubic-bezier(.2, .7, .2, 1);
}
.ax-card a:hover, .ax-card a:focus-visible { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(14, 21, 31, .12); }
.ax-card a:focus-visible { outline: 3px solid var(--ax-blue); outline-offset: 3px; }
.ax-card-img { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: #eef1f5; }
.ax-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.ax-card a:hover .ax-card-img img { transform: scale(1.05); }
.ax-card-body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.ax-card-tags { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ax-blue); }
.ax-card-body h3 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 500; color: var(--ax-navy); }
.ax-card-ex { margin: 0; font-size: 15px; line-height: 1.6; flex-grow: 1; }
.ax-card-more { font-size: 15px; font-weight: 500; color: var(--ax-blue); }
.ax-faq2-empty { font-size: 18px; }

/* wejscie kart (skrypt nadaje .ax-js-faq na kontenerze) */
.ax-js-faq .ax-card { opacity: 0; transform: translateY(24px); transition: opacity .6s ease-out, transform .7s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.ax-js-faq .ax-card.is-in { opacity: 1; transform: none; }

/* --- waskie ekrany: maszt znika, etapy jako przyklejony pasek --- */
@media (max-width: 900px) {
	.ax-faq2-body { grid-template-columns: minmax(0, 1fr); padding-top: 32px; }
	.ax-faq2-mast { display: none; }
	.ax-faq2-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
	.ax-js-faq .ax-faq2-chips { position: sticky; top: var(--ax-hdr); z-index: 5; background: var(--ax-navy); margin: 0 -20px; padding: 10px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.is-built > .ax-m { animation: none; stroke-dashoffset: 0; }
	.ax-ph2.is-built .ax-stamp { animation: none; opacity: 1; }
	.ax-ph4.is-built .ax-spark { animation: none; }
	.ax-found { transition: none; }
	.ax-js-faq .ax-card { opacity: 1; transform: none; transition: none; }
	.ax-ph5.is-built .ax-sig { animation: none; }
	.ax-card a, .ax-card-img img { transition: none; }
}