/* ==========================================================================
   STAY FREE ENTERPRISE — video testimonial card (2026-07-13)
   A .sf-testimonial variant that plays a client video. Two sources:
     data-video-embed="instagram" + data-ig-permalink  -> official IG embed,
       injected ONLY on click (facade pattern: zero third-party JS at load,
       keeps the board perf budget the audit just restored)
     data-video-src="/assets/video/x.mp4" [+ data-video-poster] -> self-hosted
       <video>, same click-to-play facade.
   Consumes tokens.css only. Consent/watermark rules still come from
   testimonial-card.js — this file never touches compliance behavior.
   ========================================================================== */

.sf-testimonial--video { display: flex; flex-direction: column; }

/* the authored display:flex below would beat the [hidden] UA style, so the
   collapsed state must be explicit or the poster survives its own click */
.sf-testimonial__poster[hidden] { display: none; }

/* ---- the facade poster (a <button>) ---- */
.sf-testimonial__poster {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sf-space-3);
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 0;
  border-radius: var(--sf-radius-md);
  cursor: pointer;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(198, 164, 92, 0.18), transparent 55%),
    linear-gradient(160deg, var(--sf-teal), var(--sf-midnight-teal) 78%);
  color: var(--sf-ivory);
  transition: transform var(--sf-dur-fast) var(--sf-ease-out),
              box-shadow var(--sf-dur-fast) var(--sf-ease-out);
  box-shadow: var(--sf-shadow-soft);
}
.sf-testimonial__poster:hover,
.sf-testimonial__poster:focus-visible {
  transform: translateY(-2px);
  box-shadow: var(--sf-shadow-lift);
}
.sf-testimonial__poster:focus-visible { outline: 2px solid var(--sf-gold); outline-offset: 3px; }

/* faint brand mark behind the play button */
.sf-testimonial__poster-mark {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.14;
  pointer-events: none;
}
.sf-testimonial__poster-mark img { width: 42%; height: auto; }

.sf-testimonial__play {
  position: relative;
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--sf-gold);
  box-shadow: 0 6px 24px rgba(7, 39, 31, 0.45);
}
.sf-testimonial__play::before {
  content: "";
  width: 0; height: 0;
  border-style: solid;
  border-width: 11px 0 11px 18px;
  border-color: transparent transparent transparent var(--sf-midnight-teal);
  margin-left: 4px;
}
.sf-testimonial__poster-label {
  position: relative;
  font-weight: 700;
  font-size: var(--sf-text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sf-gold-300);
}

/* ---- the live embed area (hidden until the poster is clicked) ---- */
.sf-testimonial__embed { width: 100%; }
.sf-testimonial__embed[hidden] { display: none; }
.sf-testimonial__embed iframe,
.sf-testimonial__embed blockquote.instagram-media {
  margin: 0 auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
.sf-testimonial__embed video {
  display: block;
  width: 100%;
  border-radius: var(--sf-radius-md);
  background: var(--sf-midnight-teal);
}

/* the meta row keeps the standard card anatomy under the video */
.sf-testimonial--video .sf-testimonial__meta { margin-top: var(--sf-space-4); }