/* ==========================================================================
   Related Videos (Featured + Small list) - Playable iframes + fixed separators
   ========================================================================== */

.related-videos {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Common: remove default spacing that can break alignment */
.related-videos .field {
  margin: 0;
}

.related-videos .media {
  max-width: 100%;
}

/* If Views/theme adds borders per row or inserts <hr>, remove them inside this block */
.related-videos .views-row,
.related-videos .views-row:not(:last-child) {
  border: 0 !important;
}
.related-videos hr {
  display: none;
}

/* --------------------------------------------------------------------------
   Featured (first item)
   -------------------------------------------------------------------------- */

/* IMPORTANT: No border here to avoid "double border" with the next item */
.related-videos__featured {
  border-bottom: 0;
  padding-bottom: 0;
}

.related-videos__featured .field--name-field-video-url,
.related-videos__featured .field--name-field-media-oembed-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
}

/* Make iframe fill the 16:9 box perfectly */
.related-videos__featured iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Title spacing under featured video */
.related-videos__featured .field--name-name,
.related-videos__featured .field--name-title {
  margin-top: 10px;
  font-weight: 600;
  line-height: 1.25;
}

/* Date under title (if present) */
.related-videos__featured .field--name-authored-on,
.related-videos__featured .field--name-created {
  margin-top: 4px;
  font-size: 0.875rem;
  opacity: 0.75;
}

/* --------------------------------------------------------------------------
   Small items (2nd, 3rd...)
   -------------------------------------------------------------------------- */

/* Use ONLY border-top on the small items as separators */
.related-videos__item {
  padding-top: 12px;
  border-top: 1px solid rgba(0,0,0,.12);
}

/* Remove the separator on the FIRST small item (right after featured)
   to avoid the "double border" feeling. */
.related-videos__item:first-of-type {
  border-top: 0;
  padding-top: 0;
}

/* Layout: video left, text right */
.related-videos__item .media {
  display: grid;
  grid-template-columns: 140px 1fr;
  column-gap: 12px;
  row-gap: 6px;
  align-items: start;
}

/* Left column: keep a perfect 16:9 box */
.related-videos__item .field--name-field-video-url,
.related-videos__item .field--name-field-media-oembed-video {
  position: relative;
  width: 140px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 8px;
}

/* Fill box with playable iframe */
.related-videos__item iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Right column: title */
.related-videos__item .field--name-name,
.related-videos__item .field--name-title {
  font-weight: 600;
  line-height: 1.2;
}

/* Ensure title/date land in right column */
.related-videos__item .field--name-name,
.related-videos__item .field--name-title,
.related-videos__item .field--name-authored-on,
.related-videos__item .field--name-created {
  grid-column: 2;
}

/* Put title row first, date row second */
.related-videos__item .field--name-name,
.related-videos__item .field--name-title {
  grid-row: 1;
}

.related-videos__item .field--name-authored-on,
.related-videos__item .field--name-created {
  grid-row: 2;
  font-size: 0.875rem;
  opacity: 0.75;
}

/* Force the video field to stay on the left */
.related-videos__item .field--name-field-video-url,
.related-videos__item .field--name-field-media-oembed-video {
  grid-column: 1;
  grid-row: 1 / span 2;
}

/* --------------------------------------------------------------------------
   Responsive tweaks
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
  .related-videos__item .media {
    grid-template-columns: 120px 1fr;
  }

  .related-videos__item .field--name-field-video-url,
  .related-videos__item .field--name-field-media-oembed-video {
    width: 120px;
  }
}