/* ===
3 Column Layout
=== */

/* Desktop horizontal layout */
.image-trio-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin: 50px auto;
}

.image-trio-container img {
  width: 30%;
  height: auto;
  object-fit: cover;
}

/* Mobile vertical layout */
@media (max-width: 768px) {
  .image-trio-container {
    flex-direction: column;
  }

  .image-trio-container img {
    width: 100%; 
    margin-bottom: 20px; /* Adds space between the stacked images */
  }

  /* Removes the extra margin from the last image so it sits flush */
  .image-trio-container img:last-child {
    margin-bottom: 0;
  }
}

/* =========================
   Slideshow (clean + accessible, video-style sizing)
   ========================= */

.slideshow-card .skip-slideshow {
  display: inline-block;
  margin-bottom: 0.75rem;
  text-decoration: underline;
}

/* Slideshow media area */
.slide-figure {
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #000;
  padding: 0.75rem 0;
  border-radius: 6px;
  overflow: hidden;
  min-height: 260px;
}

/* Slideshow image sized like your video card: ~75% of card */
.slide-image {
  display: block;
  width: 75%;
  max-width: 1000px;
  max-height: 70vh;
  height: auto;
  object-fit: contain;
}

/* One control bar under the slideshow */
.slideshow-controls {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.75rem;
}

/* Optional fallback block if JS disabled */
.ss-noscript {
  margin-top: 1rem;
}

/* Screen-reader-only helper (ONLY keep if you don't already have it) */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================
   Slideshow: keep SR text accessible but not visible
   ========================= */

.slideshow-card .ss-status,
.slideshow-card .ss-hint {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* =========================
   Slideshow: screen-reader browseable image strip (hidden visually)
   ========================= */

.ss-a11y-strip {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.ss-a11y-strip ul,
.ss-a11y-strip li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Slideshow live region: hide visually, keep for screen readers */
.slideshow-card .ss-live {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}