/* Expertise card stack — original Skiper17 visual language, paired utility.
   The four model tiles keep their original dimensions, padding, chrome, and
   internal animation. Desktop changes only the outer utility: two original
   cards share each frame, then the second pair rises over the first. */

.hvo-cardstack {
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  padding: var(--_sizes---fixed--small);
  border-radius: var(--_sizes---fixed--xlarge);
  background-color: var(--bg-color--bg-primary);
}

/* Mobile / no-JS fallback: the original cards stay in document flow. */
.hvo-cardstack-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  width: 100%;
}

.hvo-cardstack-card {
  width: 100%;
}

/* The models are the visual. Do not place a second card surface behind them. */
.section_expertise .expertise_card.hvo-cardstack-card {
  background-color: transparent;
  box-shadow: none;
}

.section_expertise .expertise_card.hvo-cardstack-card::before {
  content: none;
}

/* Phones (Mena 2026-09-01): the template zeroes .card-padding-medium under
   768px, leaving each card title 12px under its animation while 48px of air
   sits below the copy block. 2.25rem restores balance: 12 + 36 = 48px above
   the title, matching the 48px underneath. Measured at 375px emulation. */
@media (max-width: 767px) {
  .hvo-cardstack-card > .card-padding-medium {
    padding-top: 2.25rem;
  }

  /* Round 3 (Mena 2026-09-01): with the section boundary under the last card
     collapsed, 48px above its title read as mismatched — "move it back up
     for the last one". The last card keeps the template's original tight
     title; the first three keep the 48px balance. */
  .hvo-cardstack-card:last-child > .card-padding-medium {
    padding-top: 0;
  }
}

/* These controls belonged to the removed mobile Swiper. */
.section_expertise .arrows_wrap.is-expertise {
  display: none !important;
}

@media (min-width: 992px) {
  /* Two untouched 30rem card stages, the template's native .75rem gap, and
     the panel's native .75rem padding on both sides. */
  .hvo-cardstack {
    max-width: calc(60rem + (3 * var(--_sizes---fixed--small)));
  }

  /* Static 2x2 fallback for no-JS, reduced motion, and short screens. */
  .hvo-cardstack-wrap {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--_sizes---fixed--small);
  }

  .hvo-cardstack.is-stack-stage {
    display: block;
    min-height: 0;
  }

  .hvo-cardstack-wrap.is-stack {
    position: relative;
    display: block;
    height: var(--stack-h, 32rem);
    overflow: hidden;
    border-radius: 0.75rem;
  }

  .hvo-cardstack-wrap.is-stack > .hvo-cardstack-card {
    position: absolute;
    top: 0;
    bottom: 0;
    width: calc(50% - (var(--_sizes---fixed--small) / 2));
    height: 100%;
    margin: 0;
    will-change: transform;
    transform-origin: center center;
    backface-visibility: hidden;
  }

  /* MASK (Mena 2026-08-18). Transparent cards meant the rising pair never
     covered the receding pair — for most of the transition both pairs
     rendered at once as an unmasked collage (pair 1's tilted headline and
     video sitting on top of pair 2's tiles). The sheet is painted in the
     PANEL's own colour, so unlike the reverted 2026-08-12 white-frame
     rework it introduces no visible new card surface: it only occludes.
     --bg-color--bg-primary is #f2f2f2 light / #1a1a1a dark, both exactly
     the .hvo-cardstack panel colour. Gated to .is-stack so the mobile /
     reduced-motion / no-JS 2x2 fallback is untouched. */
  .hvo-cardstack-wrap.is-stack > .hvo-cardstack-card {
    background-color: var(--bg-color--bg-primary);
  }

  /* ONE SHEET, NOT TWO HALF-CARDS (Codex review 2026-08-18). Both cards of
     a pair recede about the SAME point — the wrap's centre — instead of
     each about its own centre, so the scale/rotate reads as one sheet
     receding rather than two independently tilted halves. Each card's
     origin is offset by half the inter-card gap toward the wrap centre. */
  .hvo-cardstack-wrap.is-stack > .hvo-cardstack-card:nth-child(odd) {
    left: 0;
    transform-origin: calc(100% + (var(--_sizes---fixed--small) / 2)) center;
  }

  .hvo-cardstack-wrap.is-stack > .hvo-cardstack-card:nth-child(even) {
    right: 0;
    transform-origin: calc(var(--_sizes---fixed--small) / -2) center;
  }

  .hvo-cardstack-wrap.is-stack > .hvo-cardstack-card:nth-child(-n + 2) {
    z-index: 1;
  }

  .hvo-cardstack-wrap.is-stack > .hvo-cardstack-card:nth-child(n + 3) {
    z-index: 2;
  }

  /* Lead with the reason, then show the supporting model — on BOTH pairs
     (Mena 2026-08-18). Previously only pair 1 was copy-first, so the
     composition flipped halfway through the transition and pair 2's
     headlines landed at the very bottom of the panel (measured: title top
     at y=834 in a 900px viewport, description clipped by the fold).
     Copy-first on all four keeps one composition throughout and lifts the
     second pair's copy clear of the bottom edge. */
  .hvo-cardstack-wrap.is-stack
    > .hvo-cardstack-card
    > .card-padding-medium {
    order: -1;
  }

  /* Preserve the original stack's flex sizing. Inner model dimensions remain
     owned by the four original expertise tile stylesheets. */
  .hvo-cardstack-wrap.is-stack > .hvo-cardstack-card,
  .hvo-cardstack-wrap.is-stack > .hvo-cardstack-card > .visual {
    height: 100%;
  }
}