/* Zenesis v2 — "Structured Frameworks" banner.
   Layout, content, colours and typography are set in Elementor / Site Settings.
   This file adds the layer stack (photo → gradient → content), the photo treatment,
   the scroll reveal and parallax. States are set by fw.js. */

.zn-fw {
	--zn-ease-out: cubic-bezier(.16, 1, .3, 1);
	position: relative; isolation: isolate;
}
.zn-fw p:last-child { margin-bottom: 0; }
/* title shares the Client Logos heading treatment (gold bar + H3 + gold hairline) */

/* ── Layers ── */
.zn-fw > .zn-fw__media {
	z-index: 0; scale: 1.06; transform-origin: 62% 45%; will-change: transform;
	filter: grayscale(.35) contrast(1.05);   /* calmer, more editorial photo */
}
.zn-fw > .zn-fw__shade { position: absolute; inset: 0; width: auto; height: auto; min-height: 0; margin: 0; pointer-events: none; z-index: 1; }
.zn-fw > .zn-fw__content { position: relative; z-index: 2; }

/* tablet and up: photo fills the banner behind the text (oversized for the parallax) */
@media (min-width: 768px) {
	.zn-fw > .zn-fw__media { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; min-height: 0; margin: 0; }
}

/* ── Scroll reveal (armed by fw.js; without JS everything is visible) ── */
.zn-fw.is-armed > .zn-fw__media { clip-path: inset(0 100% 0 0); scale: 1.18; }
.zn-fw.is-armed > .zn-fw__shade { opacity: 0; }
.zn-fw.is-armed .zn-fw__accent { scale: 1 0; transform-origin: 50% 0; }
.zn-fw.is-armed .zn-fw__rule { scale: 0 1; transform-origin: 0 50%; }
.zn-fw.is-armed .zn-fw-rv { opacity: 0; translate: 0 28px; }

.zn-fw.is-in > .zn-fw__media {
	clip-path: inset(0 0 0 0); scale: 1.06;
	transition: clip-path 1.6s var(--zn-ease-out), scale 2.4s var(--zn-ease-out);
}
.zn-fw.is-in > .zn-fw__shade { opacity: 1; transition: opacity 1.2s ease .2s; }
.zn-fw.is-in .zn-fw__accent { scale: 1 1; transition: scale 1s var(--zn-ease-out) .35s; }
.zn-fw.is-in .zn-fw__rule { scale: 1 1; transition: scale 1.8s var(--zn-ease-out) .8s; }
.zn-fw.is-armed .zn-fw-rv.is-in {
	opacity: 1; translate: 0 0;
	transition: opacity 1s ease, translate 1.2s var(--zn-ease-out);
	transition-delay: var(--zn-d, 0s);
}

@media (prefers-reduced-motion: reduce) {
	.zn-fw > .zn-fw__media { scale: 1; translate: none !important; }
}

/* ════════ Framework index (zn-fw__intro beside zn-fw__index) ════════
   Desktop: the section fills the screen under the header (min-height only, so it grows rather than clips on short
   screens); intro on the left, a frosted panel with all six frameworks — grouped by category — on the right.
   Row: number · name + subtitle · the framework's letters / numbers · arrow. The name's link covers the row.
   Hover / focus: the row warms with a gold wash, its marks light up in turn, the arrow fills gold; the other rows recede. */
.elementor .e-con.zn-fw__index {
	border: 1px solid var(--e-global-color-zn_line_dark);
	-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
	box-shadow: 0 40px 80px -48px rgb(0 0 0 / .6);
}
.zn-fw__cat .elementor-heading-title { display: flex; align-items: center; gap: 16px; }
.zn-fw__cat .elementor-heading-title::after { content: ""; flex: 1; height: 1px; background: var(--e-global-color-zn_gold_line); }

.elementor .zn-fw__list > .e-con.zn-fw__item { position: relative; isolation: isolate; border-bottom: 1px solid var(--e-global-color-zn_line_dark); transition: opacity .45s ease; }
.elementor .zn-fw__list > .e-con.zn-fw__item:last-child { border-bottom: 0; }
.elementor .zn-fw__list > .e-con.zn-fw__item::before { /* gold wash, sweeps in from the left */
	content: ""; position: absolute; inset: 0 -12px; z-index: -1; pointer-events: none;
	background: linear-gradient(90deg, rgb(200 164 93 / .14), rgb(200 164 93 / 0) 85%);
	clip-path: inset(0 100% 0 0); transition: clip-path .6s var(--zn-ease-out);
}
.zn-fw__item > .zn-fw__num { flex: none; min-width: 2ch; }
.zn-fw__item > .zn-fw__num .elementor-heading-title { line-height: 1; font-variant-numeric: tabular-nums; opacity: .85; transition: opacity .4s ease; }
.elementor .zn-fw__item > .e-con.zn-fw__txt { --position: static; position: static; min-width: 0; }
.elementor .zn-fw__txt > .elementor-widget.zn-fw__name { position: static; } /* so the link below covers the row, not just the title */
.zn-fw__name .elementor-heading-title, .zn-fw__name .elementor-heading-title a { line-height: 1.3; transition: color .4s ease; }
.zn-fw__name a::after { content: ""; position: absolute; inset: 0; z-index: 2; } /* the whole row is the link */
.zn-fw__name a:focus-visible { outline: none; }
.zn-fw__item:has(.zn-fw__name a:focus-visible) { outline: 2px solid var(--e-global-color-primary); outline-offset: 2px; }
.zn-fw__sub .elementor-heading-title { line-height: 1.5; }

.zn-fw__marks > .zn-fw__mark {
	--k: 0;
	display: flex; align-items: center; justify-content: center; width: 22px; height: 22px;
	border: 1px solid var(--e-global-color-zn_gold_line); border-radius: 50%;
	transition: background-color .35s ease, border-color .35s ease;
}
.zn-fw__marks > .zn-fw__mark .elementor-heading-title { font-size: 9px; line-height: 1; letter-spacing: 0; transition: color .35s ease; }
.zn-fw__marks > .zn-fw__mark:nth-child(2) { --k: 1; }
.zn-fw__marks > .zn-fw__mark:nth-child(3) { --k: 2; }
.zn-fw__marks > .zn-fw__mark:nth-child(4) { --k: 3; }
.zn-fw__marks > .zn-fw__mark:nth-child(5) { --k: 4; }
.zn-fw__marks > .zn-fw__mark:nth-child(6) { --k: 5; }
.zn-fw__marks > .zn-fw__mark:nth-child(7) { --k: 6; }
.zn-fw__marks > .zn-fw__mark:nth-child(8) { --k: 7; }

.zn-fw__item > .zn-fw__go { flex: none; }
.zn-fw__go .elementor-icon-wrapper { line-height: 0; }
.zn-fw__go .elementor-icon {
	display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
	border: 1px solid var(--e-global-color-zn_line_dark); border-radius: 50%;
	transition: background-color .4s ease, border-color .4s ease;
}
.zn-fw__go .elementor-icon svg { transition: translate .5s var(--zn-ease-out), fill .4s ease; }

.elementor .zn-fw__list > .e-con.zn-fw__item:is(:hover, :focus-within)::before { clip-path: inset(0 0 0 0); }
.zn-fw__item:is(:hover, :focus-within) > .zn-fw__num .elementor-heading-title { opacity: 1; }
body .elementor .zn-fw__item:is(:hover, :focus-within) .zn-fw__name .elementor-heading-title,
body .elementor .zn-fw__item:is(:hover, :focus-within) .zn-fw__name .elementor-heading-title a { color: var(--e-global-color-primary); }
.zn-fw__item:is(:hover, :focus-within) .zn-fw__marks > .zn-fw__mark { background-color: var(--e-global-color-primary); border-color: var(--e-global-color-primary); transition-delay: calc(var(--k) * 60ms); }
body .elementor .zn-fw__item:is(:hover, :focus-within) .zn-fw__mark .elementor-heading-title { color: var(--e-global-color-secondary); transition-delay: calc(var(--k) * 60ms); }
.zn-fw__item:is(:hover, :focus-within) .zn-fw__go .elementor-icon { background-color: var(--e-global-color-primary); border-color: var(--e-global-color-primary); }
.zn-fw__item:is(:hover, :focus-within) .zn-fw__go .elementor-icon svg { translate: 3px 0; fill: var(--e-global-color-secondary); }
@media (hover: hover) {
	.zn-fw__index:has(.zn-fw__item:hover) .e-con.zn-fw__item:not(:hover) { opacity: .55; }
}

/* desktop: one screen under the header; spacing follows the screen height so all six fit from ~700px tall */
@media (min-width: 1025px) {
	body .elementor .e-con.zn-fw {
		--min-height: max(560px, calc(100svh - var(--zn-hdr-hc, 80px)));
		--padding-top: clamp(32px, 6svh, 96px); --padding-bottom: clamp(32px, 6svh, 96px);
	}
	body .elementor .zn-fw__list > .e-con.zn-fw__item { --padding-top: clamp(8px, 1.5svh, 20px); --padding-bottom: clamp(8px, 1.5svh, 20px); }
	body .elementor .e-con.zn-fw__index { --padding-top: clamp(20px, 3.2svh, 40px); --padding-bottom: clamp(20px, 3.2svh, 40px); --gap: clamp(18px, 3.2svh, 32px); --row-gap: clamp(18px, 3.2svh, 32px); }
}
/* below 1440px the marks give way to the text (keeps names and subtitles on fewer lines) */
@media (max-width: 1439px) {
	.zn-fw__item > .zn-fw__marks { display: none; }
}
@media (max-width: 1024px) {
	.zn-fw__item > .zn-fw__num .elementor-heading-title { min-width: 2ch; }
}
@media (max-width: 767px) {
	.zn-fw__go .elementor-icon { width: 36px; height: 36px; }
	.elementor .zn-fw__list > .e-con.zn-fw__item::before { inset: 0 -8px; }
}

/* reveal: the index rows rise in after the intro */
.zn-fw.is-armed .zn-fw__item.zn-fw-rv { translate: 0 18px; }

@media (prefers-reduced-motion: reduce) {
	.zn-fw__item::before, .zn-fw__item, .zn-fw__mark, .zn-fw__go .elementor-icon, .zn-fw__go .elementor-icon svg { transition: none !important; }
}