/* Blog Hero CardSwap — pile entière visible, stage au contenu */

.blog-hero-card-swap {
  /* React Bits–scale cards that fit a compact hero.
     Fan vars must cover 2× GSAP slot distance + skewY spill (top-left). */
  --bhcs-card-w: min(100%, 19.5rem);
  --bhcs-card-h: 14.5rem;
  --bhcs-fan-x: 4rem;
  --bhcs-fan-y: 5.25rem;
  --bhcs-skew-pad: 1.35rem;
  --bhcs-drop: 2.5rem;
  --bhcs-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  width: 100%;
  height: auto;
}

@media (min-width: 640px) {
  .blog-hero-card-swap {
    --bhcs-card-w: min(100%, 24rem);
    --bhcs-card-h: 17.5rem;
    --bhcs-fan-x: 4.75rem;
    --bhcs-fan-y: 6rem;
    --bhcs-skew-pad: 1.5rem;
  }
}

@media (min-width: 960px) {
  .blog-hero-card-swap {
    --bhcs-card-w: min(100%, 29rem);
    --bhcs-card-h: 21.5rem;
    --bhcs-fan-x: 5.75rem;
    --bhcs-fan-y: 7rem;
    --bhcs-skew-pad: 1.75rem;
    --bhcs-drop: 2.75rem;
  }
}

@media (min-width: 1200px) {
  .blog-hero-card-swap {
    --bhcs-card-w: min(100%, 32rem);
    --bhcs-card-h: 23.5rem;
    --bhcs-fan-x: 6.5rem;
    --bhcs-fan-y: 8rem;
    --bhcs-skew-pad: 2rem;
  }
}

/*
  Viewport sized to fit the resting stack (card + fan offsets + skew).
  Extra left/top padding prevents the back card (Analyses) from being clipped.
  Bottom padding absorbs the drop exit without cropping the idle pile.
*/
.blog-hero-card-swap__viewport {
  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    calc(var(--bhcs-fan-y) + var(--bhcs-skew-pad))
    calc(var(--bhcs-fan-x) + 0.75rem)
    calc(var(--bhcs-drop) + 0.5rem)
    calc(var(--bhcs-skew-pad) + 0.5rem);
  /* Clip only deep drop; resting stack stays inside the padding box */
  overflow: hidden;
  border-radius: 0.25rem;
}

.blog-hero-card-swap__container {
  position: relative;
  width: var(--bhcs-card-w);
  height: var(--bhcs-card-h);
  flex: 0 0 auto;
  perspective: 1000px;
  transform-style: preserve-3d;
  overflow: visible;
}

.blog-hero-card-swap__card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.36);
  background: #070d18;
  overflow: hidden;
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.5),
    0 8px 20px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.09);
  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  pointer-events: none;
  user-select: none;
}

.blog-hero-card-swap__chrome {
  position: relative;
  z-index: 3;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.25rem;
  padding: 0.4rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: linear-gradient(180deg, rgba(22, 32, 52, 0.98), rgba(10, 16, 28, 0.95));
}

.blog-hero-card-swap__chrome-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #fff;
  flex-shrink: 0;
}

.blog-hero-card-swap__chrome-label {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: rgba(248, 250, 252, 0.94);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blog-hero-card-swap__body {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

.blog-hero-card-swap__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.blog-hero-card-swap__media.is-error {
  opacity: 0;
}

.blog-hero-card-swap__fallback {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 55% 40%, rgba(72, 79, 138, 0.42), transparent 65%),
    linear-gradient(145deg, #0b1424, #07101f);
}

.blog-hero-card-swap__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 60%, rgba(7, 16, 31, 0.2) 100%);
}

@media (max-width: 759px) {
  .blog-hero-card-swap {
    --bhcs-card-w: min(100%, 20rem);
    --bhcs-card-h: 14.75rem;
    --bhcs-fan-x: 3.5rem;
    --bhcs-fan-y: 4.75rem;
    --bhcs-skew-pad: 1.25rem;
    --bhcs-drop: 2rem;
  }
}

.blog-hero-card-swap.is-reduced .blog-hero-card-swap__viewport {
  overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
  .blog-hero-card-swap__card {
    will-change: auto;
  }
}

/* Proportions grand écran : cadre et rôles typographiques fluides. */

@media (min-width: 1600px) {
 .blog-hero-card-swap {
  --bhcs-card-w: min(100%, clamp(32rem, calc(12rem + 20vw), 60rem));
  --bhcs-card-h: clamp(23.5rem, calc(10rem + 13.5vw), 43rem);
  --bhcs-fan-x: clamp(6.5rem, calc(2rem + 4.5vw), 12rem);
  --bhcs-fan-y: clamp(8rem, calc(3rem + 5vw), 15rem);
 }
 .blog-hero-card-swap__chrome-label { font-size: var(--fs-small); }
 .blog-hero-card-swap__chrome { min-height: 2.5em; }
}