/* ══════════════════════════════════════════════════════════════
   Vertical Accordion Hero — Qorvo-style v6 (faithful port)
   Structure & paint order:
     .vah-heroes (overflow hidden, height H)
       .vah-panel   (tab bar, in-flow, z-index 1 — ALWAYS above images)
         .vah-transparency (absolute tint, opacity ladder 0.3..0.7)
         .vah-panel-title  (relative — above the tint)
       .vah-panel-body (image slide, H tall, margins create the stack)
   Open body j:  mt = -(t·j), mb = -((N-j)·t)  → image fills 0..H,
   tabs 1..j stack at top, tabs j+1..N stack flush at the bottom.
   ══════════════════════════════════════════════════════════════ */

.vah-hero-carousel {
  position: relative;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  background: #fff;
  font-family: inherit;
}

.vah-hero-carousel,
.vah-hero-carousel * {
  box-sizing: border-box;
}

.vah-heroes {
  position: relative;
  width: 100%;
  /* --vah-h-live: JS-maintained live height (scales with width so banner
     art is never side-cropped); falls back to the fixed --vah-h. */
  height: var(--vah-h-live, var(--vah-h, 540px));
  overflow: hidden;
}

/* ── Tab bars (Qorvo .panel) ── */

.vah-panel {
  position: relative;
  z-index: 3; /* CRITICAL: tabs always paint above the slide images AND the
                slide text layer (.vah-inner is z-index 2 and would otherwise
                cover the stacked tab titles with its full-height hit box) */
  height: var(--vah-tab, 29px);
  cursor: pointer;
  overflow: hidden;
  /* No background: tint must show the image (or page bg) through it. */
}

.vah-panel .vah-transparency {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--vah-tab-tint, #1a1a2e);
  opacity: var(--vah-ladder, 0.5);
  transition: opacity 0.3s ease-in-out;
}

/* Active tab: tint vanishes, title floats over the image. */
.vah-panel.vah-is-current .vah-transparency {
  opacity: 0;
}

.vah-panel-title {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0;
  width: 80%;
  max-width: var(--vah-cw, 1121px);
  margin: 0 auto;
}

.vah-panel-title h4 {
  margin: 0;
  padding-top: 18px;
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: 0.01em;
}

/* Tab title links: inherit tab typography, behave as links. */
.vah-panel-title a.vah-tab-link {
  color: inherit;
  text-decoration: none;
}

.vah-panel-title a.vah-tab-link:hover {
  text-decoration: underline;
}

/* ── Slide bodies (Qorvo .panel-body) ── */

.vah-panel-body {
  position: relative;
  height: var(--vah-h-live, var(--vah-h, 540px));
  color: #fff;
  overflow: hidden;
  display: none;
}

.vah-panel-body.vah-is-open {
  display: block;
}

.vah-zoom-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-color: #222;
  transform: scale(1) rotate(0.1deg);
  transform-origin: 50% 50%;
  transition: transform var(--vah-zoom-dur, 1500ms) linear;
}

/* Intro zoom reveal (first panel only): 3.3x → 1x. */
.vah-intro .vah-zoom-background {
  transform: scale(3.3) rotate(0.1deg);
}

.vah-intro .vah-zoom-background.vah-scale {
  transform: scale(1) rotate(0.1deg);
}

/* Intro text is hidden until the zoom lands (Qorvo: h2 @2.5s, tagline @3s). */
.vah-intro .vah-panel-heading,
.vah-intro .vah-panel-tagline,
.vah-intro .vah-panel-btn {
  display: none;
}

.vah-intro.vah-heading-in .vah-panel-heading {
  display: block;
  animation: vah-fade-in 0.4s ease both;
}

.vah-intro.vah-text-in .vah-panel-tagline,
.vah-intro.vah-text-in .vah-panel-btn {
  display: block;
  animation: vah-fade-in 0.6s ease both;
}

@keyframes vah-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.vah-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--vah-overlay, rgba(0, 0, 0, 0.2));
  z-index: 0;
}

.vah-inner {
  position: relative;
  z-index: 2;
  height: 100%;
  width: 80%;
  max-width: var(--vah-cw, 1121px);
  margin: 0 auto;
}

.vah-tagline-container {
  padding: 60px 0;
  max-width: 640px;
}

.vah-panel-heading {
  margin: 0 0 14px;
  font-size: 38px;
  line-height: 1.1em;
  font-weight: 400;
  text-transform: none;
  color: var(--vah-heading, #ffffff);
}

.vah-panel-tagline {
  margin: 0 0 22px;
  font-size: 18px;
  line-height: 1.5em;
  color: var(--vah-tagline, rgba(255, 255, 255, 0.9));
}

.vah-hero-carousel .vah-panel-btn {
  display: inline-block;
  padding: 10px 22px;
  background: var(--vah-btn-bg, #e85d2c);
  color: var(--vah-btn-text, #ffffff);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: filter 0.2s ease;
}

.vah-hero-carousel .vah-panel-btn:hover {
  filter: brightness(1.12);
  color: var(--vah-btn-text, #ffffff);
}

.vah-btn-arrow {
  margin-left: 6px;
  font-size: 15px;
}

/* Dark-text theme (Qorvo .light-bg slides). */
.vah-text-dark .vah-panel-heading { color: #1a1a1a; }
.vah-text-dark .vah-panel-tagline { color: rgba(0, 0, 0, 0.75); }

/* ── Controls (Qorvo: black squares bottom-right) ── */

.vah-controller,
.vah-collapse {
  position: absolute;
  right: 0;
  z-index: 99;
  width: 25px;
  height: 25px;
  background: #000;
  color: #e5e5e5;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 13px;
  line-height: 25px;
  text-align: center;
  font-family: sans-serif;
}

.vah-controller {
  bottom: 25px; /* stacks flush atop the collapse button (Qorvo) */
}

.vah-collapse {
  bottom: 0;
  transition: transform 0.3s ease;
}

/* Qorvo rotates the collapse chevron 180° when open. */
.vah-collapse.vah-open-btn {
  transform: rotate(-180deg);
}

.vah-controller:hover,
.vah-collapse:hover {
  color: #fff;
}

/* ── Responsive ── */

@media (max-width: 980px) {
  .vah-panel-heading { font-size: 28px; }
  .vah-tagline-container { padding: 40px 20px; }
  .vah-inner, .vah-panel-title { width: 100%; max-width: 100%; }
  .vah-panel-title { padding: 0 16px; }
}

@media (max-width: 767px) {
  /* When scaling is on, --vah-h-live (JS, floored at --vah-min-h) wins;
     legacy 320px applies only when scaling is off. */
  .vah-heroes { height: var(--vah-h-live, 320px); }
  .vah-panel-body { height: var(--vah-h-live, 320px); }
  .vah-panel-heading { font-size: 22px; }
  .vah-panel-tagline { font-size: 15px; }
  .vah-tagline-container { padding: 24px 16px; }
  .vah-panel-title h4 { font-size: 13px; }
}