/*
 * Autoplay Video Gallery
 *
 * Responsive grid for the Media Gallery "images" field.
 * Supports both standalone galleries and galleries embedded in content.
 */

/*
 * Make standalone Media Gallery pages wider in Olivero.
 * This rule does not affect ordinary content pages.
 */
body.path-media-gallery .main-content__container {
  width: 100%;
  max-width: 1500px;
}

/*
 * Drupal may put field__items on the same element as field--name-images,
 * or use field__items as a child element. Support both structures.
 */
.field--name-images.field__items,
.field--name-images > .field__items {
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 340px), 1fr)
  );
  gap: clamp(1rem, 2vw, 1.75rem);
  align-items: stretch;
  width: 100%;
}

/* Each referenced video becomes a card. */
.field--name-images.field__items > .field__item,
.field--name-images > .field__items > .field__item {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(15, 23, 42, 0.12);
  border-radius: 16px;
  background: #000;
  box-shadow:
    0 5px 14px rgba(15, 23, 42, 0.10),
    0 16px 34px rgba(15, 23, 42, 0.10);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease;
}

/* Hover effect on desktop. */
.field--name-images.field__items > .field__item:hover,
.field--name-images > .field__items > .field__item:hover {
  transform: translateY(-4px);
  box-shadow:
    0 9px 20px rgba(15, 23, 42, 0.14),
    0 22px 44px rgba(15, 23, 42, 0.14);
}

/* Remove extra Drupal field spacing inside each card. */
.field--name-images .media,
.field--name-images .field,
.field--name-images .field__item {
  margin: 0;
}

/* Make all HTML5 videos responsive and equal in shape. */
.field--name-images video {
  display: block;
  width: 100% !important;
  max-width: 100%;
  height: auto !important;
  aspect-ratio: 16 / 9;
  border: 0;
  background: #000;
  object-fit: contain;
}

/* Also support remote-video iframe output. */
.field--name-images iframe,
.field--name-images .media-oembed-content {
  display: block;
  width: 100% !important;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
}

/* Tablet layout. */
@media (max-width: 900px) {
  .field--name-images.field__items,
  .field--name-images > .field__items {
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(100%, 280px), 1fr)
    );
    gap: 1rem;
  }
}

/* Mobile layout: one video per row. */
@media (max-width: 600px) {
  .field--name-images.field__items,
  .field--name-images > .field__items {
    grid-template-columns: 1fr;
    gap: 0.875rem;
  }

  .field--name-images.field__items > .field__item,
  .field--name-images > .field__items > .field__item {
    border-radius: 10px;
  }
}

/* Accessibility: disable animation when requested by the visitor. */
@media (prefers-reduced-motion: reduce) {
  .field--name-images.field__items > .field__item,
  .field--name-images > .field__items > .field__item {
    transition: none;
  }

  .field--name-images.field__items > .field__item:hover,
  .field--name-images > .field__items > .field__item:hover {
    transform: none;
  }
}

/*
 * Compact gallery override:
 * smaller videos with an almost-zero gap.
 */
.field--name-images.field__items,
.field--name-images > .field__items {
  grid-template-columns: repeat(auto-fill, minmax(240px, 320px));
  gap: 2px;
  justify-content: center;
  align-items: start;
}

/* Compact card appearance. */
.field--name-images.field__items > .field__item,
.field--name-images > .field__items > .field__item {
  border-radius: 4px;
  border-width: 1px;
  box-shadow: none;
}

/* Disable the floating hover effect for the compact layout. */
.field--name-images.field__items > .field__item:hover,
.field--name-images > .field__items > .field__item:hover {
  transform: none;
  box-shadow: none;
}

/* Keep every video at the same 16:9 ratio. */
.field--name-images video {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  object-fit: contain;
}

/* Mobile: use the available screen width. */
@media (max-width: 600px) {
  .field--name-images.field__items,
  .field--name-images > .field__items {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/*
 * Embedded Media Gallery:
 * Hide the gallery title and description only when the gallery
 * is embedded through Entity Embed.
 *
 * The standalone Media Gallery page will keep its title and description.
 */

/* Hide the embedded Gallery title. */
.embedded-entity[data-embed-button="media_gallery"] > h2,
.embedded-entity[data-embed-button="media_gallery"] .media-gallery__title,
.embedded-entity[data-embed-button="media_gallery"] .media-gallery-title,
.embedded-entity[data-embed-button="media_gallery"] .field--name-title,

.embedded-entity[data-entity-type="media_gallery"] > h2,
.embedded-entity[data-entity-type="media_gallery"] .media-gallery__title,
.embedded-entity[data-entity-type="media_gallery"] .media-gallery-title,
.embedded-entity[data-entity-type="media_gallery"] .field--name-title,

[data-entity-type="media_gallery"][data-embed-button="media_gallery"] > h2,
[data-entity-type="media_gallery"][data-embed-button="media_gallery"] .media-gallery__title,
[data-entity-type="media_gallery"][data-embed-button="media_gallery"] .media-gallery-title,
[data-entity-type="media_gallery"][data-embed-button="media_gallery"] .field--name-title {
  display: none !important;
}

/* Hide the embedded Gallery description. */
.embedded-entity[data-embed-button="media_gallery"] .field--name-description,
.embedded-entity[data-entity-type="media_gallery"] .field--name-description,
[data-entity-type="media_gallery"][data-embed-button="media_gallery"]
.field--name-description {
  display: none !important;
}

/* Remove extra spacing around the embedded Gallery. */
.embedded-entity[data-embed-button="media_gallery"],
.embedded-entity[data-entity-type="media_gallery"],
[data-entity-type="media_gallery"][data-embed-button="media_gallery"] {
  margin-block: 0;
}

/* Remove spacing before the video grid. */
.embedded-entity[data-embed-button="media_gallery"] .field--name-images,
.embedded-entity[data-entity-type="media_gallery"] .field--name-images,
[data-entity-type="media_gallery"][data-embed-button="media_gallery"]
.field--name-images {
  margin-block: 0;
}