/*
=============================================================
TRILOGIX INSTITUTE WEBSITE
Phase 17.3 — Compact 3:4 Testimonial Video Grid
Purpose:
- Uses a compact 3:4 display frame for testimonial video cards.
- Shows up to four cards per row on large desktop screens.
- Keeps the frame size stable before, during, and after playback.
- Keeps portrait / 9:16 source videos fully visible during playback.
=============================================================
*/

/*
-------------------------------------------------------------
VIDEO GRID
Large desktop: 4 compact cards per row.
Tablet / smaller desktop: 2 cards per row.
Mobile: 1 centered card per row.
-------------------------------------------------------------
*/
.video-stories .video-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 270px));
  justify-content: center;
  align-items: start;
  gap: clamp(16px, 1.8vw, 24px);
}

/*
-------------------------------------------------------------
COMPACT VIDEO FRAME
The website card uses 3:4 even when the uploaded source is 9:16.
This gives the section a portrait feel without making cards too tall.
-------------------------------------------------------------
*/
.video-stories .inline-video-card {
  width: 100%;
  max-width: 270px;
  aspect-ratio: 3 / 4;
  min-height: 0;
  overflow: hidden;
  margin-inline: auto;
  background: #061a39;
}

.video-stories .inline-video-trigger,
.video-stories .inline-video-player {
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #061a39;
}

/* Poster fills the compact card for a polished thumbnail presentation. */
.video-stories .inline-video-trigger img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: center;
}

/*
Playback preserves the full source video.
A 9:16 source therefore receives subtle letterboxing inside the 3:4 frame
instead of being cropped. Landscape sources are handled the same way.
*/
.video-stories .inline-video-player video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
  background: #061a39;
  border-radius: inherit;
}

/* Prevent legacy testimonial min-heights from changing the fixed frame. */
.video-stories .inline-video-card,
.video-stories .inline-video-trigger,
.video-stories .inline-video-trigger img,
.video-stories .inline-video-player,
.video-stories .inline-video-player video {
  min-height: 0;
}

/*
Medium desktop and tablet: use two wider cards for readability and balance.
*/
@media (max-width: 991.98px) {
  .video-stories .video-grid {
    grid-template-columns: repeat(2, minmax(0, 300px));
    gap: clamp(18px, 3vw, 28px);
  }

  .video-stories .inline-video-card {
    max-width: 300px;
  }
}

/* Mobile: one centered compact portrait card. */
@media (max-width: 599.98px) {
  .video-stories .video-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  .video-stories .inline-video-card {
    width: min(100%, 320px);
    max-width: 320px;
  }
}