/**
 * Native playlist / grid / carousel card semantic thumbnails.
 * Ratio-controlled media wrappers; object-fit cover cropping.
 * Scoped to Zype catalog roots — no global img rules.
 *
 * OWNERSHIP: resources/css/frontend/catalog_cards.css
 *
 * Shared catalog card contract (Grid + Carousel destination packing):
 *   --zype-card-portrait-width / aspect  → 200×300 logical (2:3)
 *   --zype-card-landscape-width / aspect → 320×180 logical (16:9)
 * Sourced from zype_catalog_layout_dimensions() / fallback assets.
 * Carousel track still may refine poster width via JS within its max.
 * Grid uses CSS Grid auto-fit + minmax(min, 1fr) so tracks fill the content
 * row; cards are width:100% of their track (definite size — never width:auto
 * against absolute <img>, which historically collapsed cards to 0×0).
 */

.zype-playlist-grid-shortcode,
.zype-carousel {
  --zype-card-portrait-width: 200px;
  --zype-card-portrait-aspect-ratio: 2 / 3;
  --zype-card-landscape-width: 320px;
  --zype-card-landscape-aspect-ratio: 16 / 9;
  --zype-card-gap: 0.375rem;
  --zype-catalog-title-font-size: 1.25rem;
  --zype-catalog-title-line-height: 1.3;
  --zype-catalog-title-font-weight: 600;
}

/* Shared catalog section title typography
 * (Grid .playlist-view-title == Carousel .zype-carousel__title).
 * Spacing stays component-owned: Grid title margin; Carousel header margin.
 */
.zype-playlist-grid-shortcode .playlist-view-title,
.zype-carousel .zype-carousel__title {
  margin: 0;
  color: inherit;
  font-size: var(--zype-catalog-title-font-size, 1.25rem);
  line-height: var(--zype-catalog-title-line-height, 1.3);
  font-weight: var(--zype-catalog-title-font-weight, 600);
}

.zype-playlist-grid-shortcode .playlist-view-title {
  margin: 0 0 0.75rem;
}

.zype-playlist-grid-shortcode .playlist-view-title a,
.zype-carousel .zype-carousel__title-link {
  color: inherit;
  text-decoration: none;
}

.zype-playlist-grid-shortcode .zype-grid-video-card__media,
.zype-carousel .zype-grid-video-card__media,
.zype-playlist-grid-shortcode .zype-background-thumbnail.zype-grid-video-card__media,
.zype-carousel .zype-background-thumbnail.zype-grid-video-card__media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  background-color: #1a1a1a;
  background-image: none;
  box-sizing: border-box;
}

.zype-playlist-grid-shortcode .zype-grid-video-card__media--landscape,
.zype-carousel .zype-grid-video-card__media--landscape,
.zype-playlist-grid-shortcode .zype-grid-video-card--landscape .zype-grid-video-card__media,
.zype-playlist-grid-shortcode .zype-grid-video-card.zype-landscape .zype-grid-video-card__media,
.zype-carousel .zype-grid-video-card--landscape .zype-grid-video-card__media,
.zype-carousel .zype-grid-video-card.zype-landscape .zype-grid-video-card__media {
  aspect-ratio: var(--zype-card-landscape-aspect-ratio, 16 / 9);
}

.zype-playlist-grid-shortcode .zype-grid-video-card__media--poster,
.zype-carousel .zype-grid-video-card__media--poster,
.zype-playlist-grid-shortcode .zype-grid-video-card--poster .zype-grid-video-card__media,
.zype-playlist-grid-shortcode .zype-grid-video-card.zype-poster .zype-grid-video-card__media,
.zype-carousel .zype-grid-video-card--poster .zype-grid-video-card__media,
.zype-carousel .zype-grid-video-card.zype-poster .zype-grid-video-card__media {
  aspect-ratio: var(--zype-card-portrait-aspect-ratio, 2 / 3);
}

.zype-playlist-grid-shortcode .zype-grid-video-card__image,
.zype-carousel .zype-grid-video-card__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
  pointer-events: none;
}

.zype-playlist-grid-shortcode .zype-grid-video-card__image:not([src]),
.zype-carousel .zype-grid-video-card__image:not([src]) {
  visibility: hidden;
}

.zype-playlist-grid-shortcode .zype-grid-video-card__image.zype-hybrid-img-deferred,
.zype-carousel .zype-grid-video-card__image.zype-hybrid-img-deferred {
  opacity: 1;
}

.zype-playlist-grid-shortcode .zype-grid-video-card__overlay,
.zype-carousel .zype-grid-video-card__overlay {
  z-index: 1;
}

.zype-playlist-grid-shortcode .zype-grid-video-card__media .zype-hybrid-img-noscript,
.zype-carousel .zype-grid-video-card__media .zype-hybrid-img-noscript {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/*
 * Native Grid / playlist packing (not Carousel): fill the content-body row.
 * auto-fit collapses unused tracks; 1fr stretches visible columns. Track floor
 * keeps a definite non-zero size (0×0 protection for absolute <img> children).
 */
.zype-playlist-grid-shortcode:not(.zype-carousel) .box-with-content {
  --zype-grid-track-min: var(--zype-card-portrait-width, 200px);
  display: grid;
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--zype-grid-track-min)), 1fr)
  );
  align-items: start;
  gap: var(--zype-card-gap, 0.375rem);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.zype-playlist-grid-shortcode:not(.zype-carousel) .box-with-content:has(> .view_all_images.zype-landscape),
.zype-playlist-grid-shortcode:not(.zype-carousel) .box-with-content:has(> .zype-grid-video-card.zype-landscape),
.zype-playlist-grid-shortcode:not(.zype-carousel) .box-with-content:has(> .zype-grid-video-card--landscape) {
  --zype-grid-track-min: var(--zype-card-landscape-width, 320px);
}

.zype-playlist-grid-shortcode:not(.zype-carousel) .box-with-content > .view_all_images,
.zype-playlist-grid-shortcode:not(.zype-carousel) .box-with-content > .zype-grid-video-card {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.zype-playlist-grid-shortcode:not(.zype-carousel) .box-with-content > .playlist-with-content {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
}

/* Inline details reveal spans the full Grid track range (same contract as playlist rows). */
.zype-playlist-grid-shortcode:not(.zype-carousel) .box-with-content > .zype-inline-details-reveal {
  grid-column: 1 / -1;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  /* Parent .box-with-content uses font-size:0 for card packing — restore type here. */
  font-size: 1rem;
  line-height: 1.5;
}

/* Carousel destination grid keeps fixed logical card widths (definite size). */
.zype-carousel.zype-playlist-grid-shortcode .box-with-content > .view_all_images.zype-landscape,
.zype-carousel.zype-playlist-grid-shortcode .box-with-content > .zype-grid-video-card.zype-landscape,
.zype-carousel.zype-playlist-grid-shortcode .box-with-content > .zype-grid-video-card--landscape {
  width: var(--zype-card-landscape-width, 320px);
  max-width: 100%;
}

.zype-carousel.zype-playlist-grid-shortcode .box-with-content > .view_all_images.zype-poster,
.zype-carousel.zype-playlist-grid-shortcode .box-with-content > .zype-grid-video-card.zype-poster,
.zype-carousel.zype-playlist-grid-shortcode .box-with-content > .zype-grid-video-card--poster {
  width: var(--zype-card-portrait-width, 200px);
  max-width: 100%;
}

.zype-playlist-grid-shortcode .box-with-content .view_all_images.zype-landscape .zype-grid-video-card__media,
.zype-playlist-grid-shortcode .box-with-content .zype-grid-video-card.zype-landscape .zype-grid-video-card__media,
.zype-playlist-grid-shortcode .box-with-content .zype-grid-video-card--landscape .zype-grid-video-card__media {
  width: 100%;
  height: auto;
}

.zype-playlist-grid-shortcode .box-with-content .view_all_images.zype-poster .zype-grid-video-card__media,
.zype-playlist-grid-shortcode .box-with-content .zype-grid-video-card.zype-poster .zype-grid-video-card__media,
.zype-playlist-grid-shortcode .box-with-content .zype-grid-video-card--poster .zype-grid-video-card__media {
  width: 100%;
  height: auto;
  max-height: none;
}

.slider-list.zype-landscape .zype-grid-video-card__media,
.view_all_images.zype-landscape .zype-grid-video-card__media {
  width: var(--zype-card-landscape-width, 320px);
  max-width: 100%;
  height: auto;
}

.slider-list.zype-poster .zype-grid-video-card__media,
.view_all_images.zype-poster .zype-grid-video-card__media {
  width: var(--zype-card-portrait-width, 200px);
  max-width: 100%;
  height: auto;
}

@media (prefers-reduced-motion: reduce) {
  .zype-playlist-grid-shortcode .zype-grid-video-card__image,
  .zype-carousel .zype-grid-video-card__image {
    transition: none;
  }
}