/* expanding-panel hero (index1.html only)

   The hero is a row of cards. The active one grows to fill the row,
   the rest collapse into narrow strips with a rotated label and a
   plus button. Clicking a strip (or the arrows) expands that panel. */

.hero-deck {
  position: relative;
  height: 100svh;
  padding: calc(var(--header-h) + 14px) 14px 14px;
}

.deck {
  display: flex;
  gap: 10px;
  height: 100%;
}

.deck-panel {
  position: relative;
  flex: 0 1 76px;
  min-width: 0;
  border-radius: var(--radius);
  overflow: hidden;
  filter: brightness(0.55);
  transition: flex-grow 0.65s cubic-bezier(0.65, 0, 0.35, 1), filter 0.45s ease;
}
.deck-panel.is-active { flex-grow: 1; filter: none; }
.deck-panel:not(.is-active):hover { filter: brightness(0.8); }

/* same gradient washes as the classic hero, minus the photography */
.deck-panel[data-theme="overview"] {
  background:
    radial-gradient(1000px 600px at 80% 20%, rgba(153, 232, 20, 0.16), transparent 60%),
    radial-gradient(800px 500px at 15% 80%, rgba(40, 90, 255, 0.18), transparent 60%),
    linear-gradient(180deg, #0e1117 0%, #12151d 100%);
}
.deck-panel[data-theme="dataai"] {
  background:
    radial-gradient(900px 600px at 75% 30%, rgba(0, 200, 255, 0.18), transparent 60%),
    radial-gradient(700px 500px at 20% 75%, rgba(140, 60, 255, 0.16), transparent 60%),
    linear-gradient(180deg, #0e1117 0%, #101427 100%);
}
.deck-panel[data-theme="fintech"] {
  background:
    radial-gradient(900px 600px at 70% 25%, rgba(255, 176, 32, 0.15), transparent 60%),
    radial-gradient(700px 500px at 25% 80%, rgba(153, 232, 20, 0.12), transparent 60%),
    linear-gradient(180deg, #0e1117 0%, #16130e 100%);
}
.deck-panel[data-theme="healthcare"] {
  background:
    radial-gradient(900px 600px at 75% 25%, rgba(64, 224, 170, 0.16), transparent 60%),
    radial-gradient(700px 500px at 20% 80%, rgba(30, 120, 255, 0.14), transparent 60%),
    linear-gradient(180deg, #0e1117 0%, #0e1517 100%);
}

/* collapsed strip: rotated title up top, plus button at the bottom */
.panel-tab {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0 20px;
  transition: opacity 0.3s ease;
}
.deck-panel.is-active .panel-tab { opacity: 0; pointer-events: none; }

.tab-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text);
}
.tab-plus {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1;
  color: var(--text);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.deck-panel:not(.is-active):hover .tab-plus { border-color: var(--accent); background: rgba(153, 232, 20, 0.12); }

/* expanded card content */
.panel-body {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding: 0 min(7vw, 90px);
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.4s ease, transform 0.5s ease;
  pointer-events: none;
}
.deck-panel.is-active .panel-body {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 0.25s; /* let the panel finish widening first */
}
.panel-body .hero-content h1 { font-size: clamp(2rem, 4vw, 3.4rem); }

/* prev/next arrows - hero-deck.js parents these into the open card */
.deck-nav {
  position: absolute;
  right: 30px;
  bottom: 26px;
  z-index: 3;
  display: flex;
  gap: 10px;
}

@media (max-width: 860px) {
  /* no room for the strips on phones - show one card, arrows to switch */
  .deck-panel:not(.is-active) { display: none; }
  .panel-body { padding: 0 22px; }
  .deck-nav { right: 22px; bottom: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .deck-panel, .panel-body, .panel-tab { transition: none; }
}