/* =====================================================================
   PAGE HERO VX - shared (template-parts/page-hero-vx.php). Loaded via child_crawl_has_page_hero()
   ===================================================================== */

/* ---------- PAGE HERO ROOT ---------- */
/* Figma 1328:1227 | card 1380 wide, height snapped to whole rows (9 on desktop) | grid 19 cols (mobile 12), cell 72.63×59.37 (ratio .8175), anchored to card bottom | head 1.528×1.583 cells | blocks clipped by .vx-abt-hero__clip so extra content (search dropdown) can overflow the card */
:root{--vx-abt-hero-bg:#080808;--vx-abt-hero-line:#262626;--vx-abt-hero-grid:#181818;--vx-abt-hero-cell:rgba(86,0,123,.5);--vx-abt-hero-cell-accent:rgba(125,2,178,.5);--vx-abt-hero-cell-flash:var(--vx-violet-500);--vx-abt-hero-head:var(--vx-grad-end);--vx-abt-hero-cols:12;--vx-abt-hero-cw:calc(100cqw / var(--vx-abt-hero-cols));--vx-abt-hero-rh:calc(var(--vx-abt-hero-cw) * .8175);--vx-abt-hero-rows:9;--vx-abt-hero-base:8;--vx-abt-hero-board:40;--vx-abt-hero-head-w:1.528;--vx-abt-hero-head-h:1.583;--vx-abt-hero-dim:.48;--vx-abt-hero-pad-top:clamp(4.5rem,2.7083rem + 7.963vw,9.875rem);--vx-abt-hero-pad-bottom:clamp(3rem,2.3333rem + 2.963vw,5rem);--vx-abt-hero-pad-x:clamp(1rem,.8333rem + .7407vw,1.5rem);--vx-abt-hero-gap:clamp(.75rem,.5833rem + .7407vw,1.25rem);--vx-abt-hero-text-w:945px;--vx-abt-hero-text-lh:1.39;--vx-abt-hero-title-ls:-0.06em;--vx-abt-hero-text-ls:-0.03em;--vx-abt-hero-blink:.6s;--vx-abt-hero-pulse:3s}

/* ---------- PAGE HERO ---------- */
.vx-abt-hero .vx-container{container-type:inline-size}
.vx-abt-hero__card{position:relative;isolation:isolate;box-sizing:border-box;display:flex;flex-direction:column;align-items:center;min-height:calc(var(--vx-abt-hero-rh) * var(--vx-abt-hero-rows) + 2px);padding:var(--vx-abt-hero-pad-top) var(--vx-abt-hero-pad-x) var(--vx-abt-hero-pad-bottom);background:var(--vx-abt-hero-bg);border:1px solid var(--vx-abt-hero-line);border-radius:var(--vx-radius-card);overflow:visible;text-align:center}
.vx-abt-hero__clip{position:absolute;inset:0;z-index:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.vx-abt-hero__board{position:absolute;right:0;bottom:0;left:0;z-index:0;height:calc(var(--vx-abt-hero-rh) * var(--vx-abt-hero-board));background-image:repeating-linear-gradient(to right,var(--vx-abt-hero-grid) 0 1px,transparent 1px var(--vx-abt-hero-cw)),repeating-linear-gradient(to bottom,var(--vx-abt-hero-grid) 0 1px,transparent 1px var(--vx-abt-hero-rh));pointer-events:none}
.vx-abt-hero__cell,.vx-abt-hero__head{position:absolute;top:calc(100% - var(--vx-abt-hero-rh) * var(--vx-abt-hero-base));left:0;transform:translate3d(calc(var(--c) * var(--vx-abt-hero-cw)),calc(var(--r) * var(--vx-abt-hero-rh)),0)}
.vx-abt-hero__cell{width:var(--vx-abt-hero-cw);height:var(--vx-abt-hero-rh);background:var(--vx-abt-hero-cell)}
.vx-abt-hero__cell--accent{background:var(--vx-abt-hero-cell-accent)}
.vx-abt-hero__cell.is-clear{animation:vx-abt-blink var(--vx-abt-hero-blink) steps(1,end)}
.vx-abt-hero__head{width:calc(var(--vx-abt-hero-cw) * var(--vx-abt-hero-head-w));height:calc(var(--vx-abt-hero-rh) * var(--vx-abt-hero-head-h));background:var(--vx-abt-hero-head)}
.vx-abt-hero--dim .vx-abt-hero__cell,.vx-abt-hero--dim .vx-abt-hero__head{opacity:var(--vx-abt-hero-dim)}
.vx-abt-hero__content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%}
.vx .vx-abt-hero__title{margin:0;letter-spacing:var(--vx-abt-hero-title-ls)}
.vx .vx-abt-hero__text{max-width:var(--vx-abt-hero-text-w);margin:var(--vx-abt-hero-gap) 0 0;line-height:var(--vx-abt-hero-text-lh);letter-spacing:var(--vx-abt-hero-text-ls)}

/* PAGE HERO: animation states (class added by about-hero-vx.js) */
.vx-abt-hero.is-live .vx-abt-hero__cell,.vx-abt-hero.is-live .vx-abt-hero__head{will-change:transform}
.vx-abt-hero.is-live .vx-abt-hero__head{animation:vx-abt-pulse var(--vx-abt-hero-pulse) ease-in-out infinite}
@keyframes vx-abt-blink{0%,34%,67%{background:var(--vx-abt-hero-cell-flash)}17%,50%,84%,100%{background:var(--vx-abt-hero-cell)}}
@keyframes vx-abt-pulse{50%{opacity:.6}}

/* PAGE HERO: tablet + desktop (19-column board as in Figma, first line on its own row) */
@media (min-width:768px){
:root{--vx-abt-hero-cols:19}
.vx-abt-hero__text-lead{display:block}
}