/* ==========================================================================
   TESTIMONI + TEASER — tabs, image/video testimonial cards, lightbox, and the
   click-to-play YouTube facade shared by the teaser section and video
   testimonials.

   Loaded on the front page (teaser + testimoni sections) and on the
   /testimoni page template. Depends on ui.css tokens and the existing
   .tcard/.hgrid system — this file only adds what those do not cover.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Teaser section
   ------------------------------------------------------------------------ */
.teaser-frame { max-width: 860px; margin: var(--sp-7) auto 0; }

/* --------------------------------------------------------------------------
   YouTube click-to-play facade (teaser + video testimonials)
   ------------------------------------------------------------------------ */
.ytfacade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  border: 0; border-radius: var(--r-lg); background-color: var(--c-teal-deep);
  background-size: cover; background-position: center; cursor: pointer; padding: 0;
  overflow: hidden; }
.ytfacade::after { content: ""; position: absolute; inset: 0;
  background: rgba(11, 31, 38, .25); transition: background var(--dur) var(--ease); }
.ytfacade:hover::after { background: rgba(11, 31, 38, .4); }
.ytfacade-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--r-pill);
  background: #fff; color: var(--c-teal-deep); z-index: 1; }
.ytfacade-play svg { margin-left: 3px; }

.ytfacade + iframe,
iframe.ytfacade-embed { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); border: 0; }

/* When JS swaps the <button> for an <iframe>, the iframe inherits no class —
   give any bare iframe that lands where a facade was the same shape. */
.teaser-frame iframe,
.tcard-video iframe { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--r-lg); border: 0; display: block; }

/* --------------------------------------------------------------------------
   Testimonial tabs
   ------------------------------------------------------------------------ */
.testi-tabs { display: flex; justify-content: center; gap: var(--sp-2); flex-wrap: wrap;
  margin-top: var(--sp-7); }
.testi-tab { border: 1px solid var(--c-line); border-radius: var(--r-pill); background: var(--c-canvas);
  padding: 8px 18px; font-family: inherit; font-size: var(--fs-sm); font-weight: 700;
  color: var(--c-muted); cursor: pointer; }
.testi-tab:hover { border-color: var(--c-turquoise-300); color: var(--c-turquoise-700); }
.testi-tab[aria-selected="true"] { background: var(--c-teal-deep); border-color: var(--c-teal-deep); color: #fff; }
.testi-panel[hidden] { display: none; }
.testi-panel .testi-grid { margin-top: var(--sp-7); }
.testi-more { margin-top: var(--sp-7); text-align: center; }

/* --------------------------------------------------------------------------
   Image + video testimonial cards (text variant is the pre-existing .tcard)
   ------------------------------------------------------------------------ */
.tcard-image, .tcard-video { padding: 0; overflow: hidden; }
.tcard-shot-btn { display: block; width: 100%; border: 0; padding: 0; margin: 0;
  background: none; cursor: zoom-in; }
.tcard-shot { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tcard-video .ytfacade { border-radius: 0; }
.tcard-caption { padding: var(--sp-4); font-size: 0.9375rem; line-height: var(--lh-body); color: var(--c-ink-2); }

/* --------------------------------------------------------------------------
   Image lightbox
   ------------------------------------------------------------------------ */
.testi-lightbox { border: 0; border-radius: var(--r-lg); padding: 0; max-width: min(90vw, 900px);
  max-height: 90vh; background: transparent; }
.testi-lightbox::backdrop { background: rgba(11, 31, 38, .8); }
.testi-lightbox img { display: block; max-width: 100%; max-height: 90vh; border-radius: var(--r-lg); }
.testi-lightbox-close { position: absolute; top: var(--sp-3); right: var(--sp-3);
  display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-pill);
  border: 0; background: rgba(11, 31, 38, .6); color: #fff; font-size: 1.5rem; line-height: 1;
  cursor: pointer; }