/* flip-card runtime.css — 3D flip card (click/drag/flick, spring snap,
   tilt, glare, depth shadow). Vars are set inline by runtime.js. */

.ms-flip-card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding: 2.5rem 1rem;
  perspective: 1200px;
}

.ms-flip-card .flip-card {
  --fc-w: 340px;
  --fc-h: 480px;
  --fc-radius: 22px;
  --fc-bg: #C85A32;
  --fc-ink: #F7EFE3;
  --fc-accent: #E5A93C;
  --fc-shadow: #000000;
  --fc-shadow-o: 0.45;
  --fc-glare: 0.22;
  --fc-gx: 50%;
  --fc-gy: 50%;
  --fc-sheen: 0;
  --fc-media-h: 42%;
  --fc-title-size: 1.4rem;
  --fc-desc-size: 0.95rem;
  --fc-cta-bg: #E5A93C;
  --fc-cta-ink: #1c1109;

  position: relative;
  display: inline-block;
  width: min(var(--fc-w), 92vw);
  max-width: 100%;
  height: var(--fc-h);
  max-height: min(640px, 70dvh);
  border-radius: var(--fc-radius);
  outline: none;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
  font-family: inherit;
  text-align: left;
}

.ms-flip-card .flip-card[data-axis="x"] { touch-action: pan-x; }

.ms-flip-card .flip-card[data-draggable] { cursor: grab; }

.ms-flip-card .flip-card[data-dragging] { cursor: grabbing; }

.ms-flip-card .flip-card[data-disabled] {
  cursor: default;
  opacity: 0.6;
}

.ms-flip-card .flip-card__shadow {
  position: absolute;
  inset: 12% 9% -5%;
  border-radius: var(--fc-radius);
  background: color-mix(in srgb, var(--fc-shadow) calc(var(--fc-shadow-o) * 100%), transparent);
  filter: blur(22px);
  pointer-events: none;
  transform: scaleX(var(--fc-shadow-scale, 1));
  opacity: var(--fc-shadow-alpha, 1);
}

.ms-flip-card .flip-card[data-axis="x"] .flip-card__shadow {
  transform: scaleY(var(--fc-shadow-scale, 1));
}

.ms-flip-card .flip-card__rotor {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

.ms-flip-card .flip-card__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: var(--fc-radius);
  background: var(--fc-bg);
  color: var(--fc-ink);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
}

.ms-flip-card .flip-card__face img { -webkit-user-drag: none; }

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

.ms-flip-card .flip-card[data-axis="x"] .flip-card__face--back { transform: rotateX(180deg); }

.ms-flip-card .flip-card__glare {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle farthest-side at var(--fc-gx, 50%) var(--fc-gy, 50%),
    rgba(255, 255, 255, var(--fc-glare)) 0%,
    rgba(255, 255, 255, calc(var(--fc-glare) * 0.76)) 12%,
    rgba(255, 255, 255, calc(var(--fc-glare) * 0.5)) 26%,
    rgba(255, 255, 255, calc(var(--fc-glare) * 0.28)) 42%,
    rgba(255, 255, 255, calc(var(--fc-glare) * 0.12)) 60%,
    rgba(255, 255, 255, calc(var(--fc-glare) * 0.04)) 78%,
    rgba(255, 255, 255, 0) 100%
  );
  opacity: var(--fc-sheen, 0);
  pointer-events: none;
}

/* Reduced motion: crossfade instead of the 3D rotor. */
.ms-flip-card .flip-card[data-fade] .flip-card__face {
  transform: none;
  opacity: 0;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
  transition: opacity 200ms ease;
}

.ms-flip-card .flip-card[data-fade="front"] .flip-card__face--front,
.ms-flip-card .flip-card[data-fade="back"] .flip-card__face--back { opacity: 1; }

.ms-flip-card .flip-card[data-axis="x"][data-fade] .flip-card__face--back { transform: none; }

/* ---- card copy ---- */

.ms-flip-card .fc-media {
  flex: 0 0 var(--fc-media-h);
  min-height: calc(var(--fc-media-h) - 4%);
  background: color-mix(in srgb, var(--fc-shadow) 18%, var(--fc-bg));
}

.ms-flip-card .fc-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ms-flip-card .fc-body {
  flex: 1;
  padding: clamp(1rem, 4vw, 1.35rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  position: relative;
  z-index: 1;
}

.ms-flip-card .fc-kicker {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--fc-ink) 65%, transparent);
}

.ms-flip-card .fc-title {
  font-size: var(--fc-title-size);
  font-weight: 650;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin: 0;
}

.ms-flip-card .fc-text {
  font-size: var(--fc-desc-size);
  line-height: 1.55;
  color: color-mix(in srgb, var(--fc-ink) 88%, transparent);
  margin: 0;
}

.ms-flip-card .fc-hint {
  margin-top: auto;
  font-size: 0.72rem;
  color: color-mix(in srgb, var(--fc-ink) 45%, transparent);
}

.ms-flip-card .fc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.65rem;
  padding: 0.65rem 1.1rem;
  border: 0;
  border-radius: 999px;
  background: var(--fc-cta-bg);
  color: var(--fc-cta-ink);
  font-family: inherit;
  font-weight: 650;
  font-size: 0.88rem;
  text-decoration: none;
  width: fit-content;
  max-width: 100%;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

.ms-flip-card .fc-cta:hover,
.ms-flip-card .fc-cta:focus-visible {
  text-decoration: none;
  filter: brightness(1.05);
}

.ms-flip-card .flip-card:focus-visible {
  outline: 2px solid var(--fc-accent);
  outline-offset: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .ms-flip-card .flip-card__rotor { will-change: auto; }
}