/* Before/after flip cards — the homepage "Why incase exists" stories.
   The front is the "before" (what happened); the back is the brown
   "after" (with incase). Flip is driven by aria-pressed on the card
   button, so it stays keyboard-accessible and CSP-safe (no inline
   expressions — the behavior lives in the flipCard Alpine.data component).

   The two faces share one CSS-grid cell, so the card sizes itself to the
   taller face — no fixed heights, no clipped copy. */

.flip-card {
  perspective: 1600px;
  -webkit-tap-highlight-color: transparent;
}

.flip-card__inner {
  display: grid;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.flip-card[aria-pressed="true"] .flip-card__inner {
  transform: rotateY(180deg);
}

.flip-card__face {
  grid-area: 1 / 1;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card__face--back {
  transform: rotateY(180deg);
}

/* Honor reduced-motion: swap instantly instead of spinning in 3D. */
@media (prefers-reduced-motion: reduce) {
  .flip-card__inner {
    transition: none;
  }
}