/**
 * [zype_carousel] horizontal playlist carousel.
 * Aligns to the theme wide column (header/footer .alignwide); JS refines left/width.
 * Avoid viewport-width full bleeds. Mixed poster/landscape: top-aligned.
 */

.zype-carousel {
    --zype-carousel-card-gap: 5px;
    --zype-carousel-landscape-card-width: clamp(200px, 28vw, 280px);
    /*
     * Poster width fallback (pre-JS / no-JS). carousel.js overrides this per
     * instance from the carousel track viewport so rows fill content width
     * (~7 / 6 / 4 / 2.5 cards). Keep 2:3 via aspect-ratio on the thumbnail.
     */
    --zype-carousel-poster-card-width: clamp(140px, 14vw, 240px);
    --zype-carousel-poster-bg: #111;
    --zype-carousel-arrow-inset: 2.75rem;
    --zype-carousel-wide: var(
        --wp--style--global--wide-size,
        var(--zype-wide-width, var(--wp--style--global--content-size, 100%))
    );

    box-sizing: border-box;
    width: 100%;
    /*
     * Prefer the theme wide column (same token as header/footer .alignwide).
     * carousel.js refines left/width to match the live header wide column when
     * entry-content is flush to root padding and narrower than that column.
     */
    max-width: min(100%, var(--zype-carousel-wide));
    margin-left: auto;
    margin-right: auto;
    margin-inline: auto;
    padding-inline: 0;
    overflow-x: clip;
}

/*
 * Beat shared .zype-playlist-grid-shortcode content-size rules so carousel can
 * use the wide column. Inline styles from carousel.js win for precise alignment.
 */
.zype-carousel.zype-playlist-grid-shortcode,
.zype-carousel-shortcode,
.zype-carousel.alignwide,
.alignwide .zype-carousel.zype-playlist-grid-shortcode,
.entry-content.alignwide .zype-carousel,
.wp-block-post-content.alignwide .zype-carousel,
.alignwide .zype-carousel-shortcode,
.wp-block-group.alignwide > .zype-carousel,
.wp-block-group.alignwide > .zype-carousel.zype-playlist-grid-shortcode {
    width: 100%;
    max-width: min(100%, var(--zype-carousel-wide));
    margin-left: auto;
    margin-right: auto;
    margin-inline: auto;
}

/* Grid destination keeps packing inside its parent; no wide-column breakout. */
.zype-carousel--grid,
.zype-carousel--grid.zype-playlist-grid-shortcode {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-inline: auto;
}

.zype-carousel__header {
    margin: 0 0 0.75rem;
}

.zype-carousel__title {
    /* Typography owned by shared catalog title contract in catalog_cards.css.
     * Keep margin reset here so header + title stacking stays predictable. */
    margin: 0;
    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-carousel__title-link {
    color: inherit;
    text-decoration: none;
}

.zype-carousel__title-link:hover,
.zype-carousel__title-link:focus,
.zype-carousel__title-link:focus-visible {
    text-decoration: none;
}

.zype-carousel__title-link:focus,
.zype-carousel__title-link:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
}

.zype-carousel__back {
    margin: 0 0 0.5rem;
}

.zype-carousel__back-link {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.zype-carousel__back-link:focus,
.zype-carousel__back-link:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
}

.zype-carousel__viewport {
    position: relative;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.zype-carousel__viewport:focus,
.zype-carousel__viewport:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
}

.zype-carousel__track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start; /* mixed 2:3 poster + 16:9 landscape: top aligned */
    justify-content: flex-start;
    gap: var(--zype-carousel-card-gap);
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    scroll-padding-inline: var(--zype-carousel-arrow-inset);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    box-sizing: border-box;
    padding-block: 0.125rem;
    /* Hide scrollbars; keep native overflow scrolling. */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Legacy Edge/IE */
}

.zype-carousel__track::-webkit-scrollbar {
    display: none; /* Chromium / Safari */
    width: 0;
    height: 0;
    background: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .zype-carousel__track {
        scroll-behavior: auto;
    }

    .zype-carousel__previous,
    .zype-carousel__next {
        transition: none;
    }
}

.zype-carousel__item {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/*
 * Orientation owns the flex width on the item itself — not only a nested child.
 * Poster items are true 2:3 cards; landscape items are true 16:9 cards.
 */
.zype-carousel__item--poster,
.zype-carousel__item[data-thumbnail-orientation="poster"] {
    flex: 0 0 var(--zype-carousel-poster-card-width);
    flex-basis: var(--zype-carousel-poster-card-width);
    width: var(--zype-carousel-poster-card-width);
    min-width: var(--zype-carousel-poster-card-width);
    max-width: var(--zype-carousel-poster-card-width);
}

.zype-carousel__item--landscape,
.zype-carousel__item[data-thumbnail-orientation="landscape"] {
    flex: 0 0 var(--zype-carousel-landscape-card-width);
    flex-basis: var(--zype-carousel-landscape-card-width);
    width: var(--zype-carousel-landscape-card-width);
    min-width: var(--zype-carousel-landscape-card-width);
    max-width: var(--zype-carousel-landscape-card-width);
}

/* Override shared .view_all_images margins/spacing inside the carousel only. */
.zype-carousel .zype-grid-video-card,
.zype-carousel .view_all_images,
.zype-carousel .zype-carousel__card,
.zype-carousel .zype-grid-video-card__link {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box;
    vertical-align: top;
}

.zype-carousel__item--poster .zype-grid-video-card,
.zype-carousel__item--poster .zype-grid-video-card__link,
.zype-carousel__item--poster .view_all_images,
.zype-carousel__item--poster .zype-carousel__card,
.zype-carousel__item--poster .zype-background-thumbnail,
.zype-carousel__item--poster .zype-grid-video-card__thumbnail,
.zype-carousel__item--poster .zype-grid-video-card__media,
.zype-carousel__item[data-thumbnail-orientation="poster"] .zype-grid-video-card,
.zype-carousel__item[data-thumbnail-orientation="poster"] .zype-grid-video-card__link,
.zype-carousel__item[data-thumbnail-orientation="poster"] .view_all_images,
.zype-carousel__item[data-thumbnail-orientation="poster"] .zype-carousel__card,
.zype-carousel__item[data-thumbnail-orientation="poster"] .zype-background-thumbnail,
.zype-carousel__item[data-thumbnail-orientation="poster"] .zype-grid-video-card__thumbnail,
.zype-carousel__item[data-thumbnail-orientation="poster"] .zype-grid-video-card__media {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

.zype-carousel__item--landscape .zype-grid-video-card,
.zype-carousel__item--landscape .zype-grid-video-card__link,
.zype-carousel__item--landscape .view_all_images,
.zype-carousel__item--landscape .zype-carousel__card,
.zype-carousel__item--landscape .zype-background-thumbnail,
.zype-carousel__item--landscape .zype-grid-video-card__thumbnail,
.zype-carousel__item--landscape .zype-grid-video-card__media,
.zype-carousel__item[data-thumbnail-orientation="landscape"] .zype-grid-video-card,
.zype-carousel__item[data-thumbnail-orientation="landscape"] .zype-grid-video-card__link,
.zype-carousel__item[data-thumbnail-orientation="landscape"] .view_all_images,
.zype-carousel__item[data-thumbnail-orientation="landscape"] .zype-carousel__card,
.zype-carousel__item[data-thumbnail-orientation="landscape"] .zype-background-thumbnail,
.zype-carousel__item[data-thumbnail-orientation="landscape"] .zype-grid-video-card__thumbnail,
.zype-carousel__item[data-thumbnail-orientation="landscape"] .zype-grid-video-card__media {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
}

/*
 * Beat shared grid fixed-pixel thumbnail rules (style_plugin.css) for carousel only.
 * Semantic <img> fills the ratio-controlled media wrapper via object-fit: cover.
 */
.zype-carousel__item--landscape .zype-background-thumbnail,
.zype-carousel__item--landscape .zype-grid-video-card__thumbnail,
.zype-carousel__item--landscape .zype-grid-video-card__media,
.zype-carousel__item[data-thumbnail-orientation="landscape"] .zype-background-thumbnail,
.zype-carousel .zype-grid-video-card.zype-landscape .zype-background-thumbnail,
.zype-carousel .zype-grid-video-card--landscape .zype-background-thumbnail,
.zype-carousel .zype-grid-video-card--landscape .zype-grid-video-card__media,
.zype-carousel .view_all_images.zype-landscape .zype-background-thumbnail {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 16 / 9 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-image: none;
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box;
}

.zype-carousel__item--poster .zype-background-thumbnail,
.zype-carousel__item--poster .zype-grid-video-card__thumbnail,
.zype-carousel__item--poster .zype-grid-video-card__media,
.zype-carousel__item[data-thumbnail-orientation="poster"] .zype-background-thumbnail,
.zype-carousel .zype-grid-video-card.zype-poster .zype-background-thumbnail,
.zype-carousel .zype-grid-video-card--poster .zype-background-thumbnail,
.zype-carousel .zype-grid-video-card--poster .zype-grid-video-card__media,
.zype-carousel .view_all_images.zype-poster .zype-background-thumbnail {
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;
    aspect-ratio: 2 / 3 !important;
    /*
     * Fill the true 2:3 poster card. When only landscape thumbnails exist, cover
     * center-crops the smallest selected source into the poster frame.
     */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-image: none;
    background-color: var(--zype-carousel-poster-bg);
    /* Containing block for absolute overlay (do not rely on stale style_plugin cache). */
    position: relative !important;
    overflow: hidden !important;
    box-sizing: border-box;
}

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

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

/*
 * Overlay must be confined to the 2:3/16:9 thumbnail frame.
 * Duplicated here because style_plugin.css is often stuck at ver=1.0 in browser cache
 * and may not deliver .zype-grid-video-card overlay/position rules.
 */
.zype-carousel .zype-grid-video-card__overlay {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    box-sizing: border-box;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    /* Reserve 25px for the full-bleed docked action bar. */
    padding: 10px 12px 50px;
    background: rgba(255, 255, 255, 0.82);
    color: #000;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.zype-carousel .zype-grid-video-card:hover .zype-grid-video-card__overlay,
.zype-carousel .zype-grid-video-card:focus-within .zype-grid-video-card__overlay,
.zype-carousel .zype-grid-video-card__link:focus .zype-grid-video-card__overlay,
.zype-carousel .zype-grid-video-card__link:focus-visible .zype-grid-video-card__overlay {
    opacity: 1;
    /* Keep none so the parent <a> remains the hit target (no overlay steal). */
    pointer-events: none;
}

/* Allow icon hover without making the whole overlay clickable. */
.zype-carousel .zype-grid-video-card:hover .zype-grid-video-card__actions,
.zype-carousel .zype-grid-video-card:focus-within .zype-grid-video-card__actions {
    pointer-events: auto;
}

.zype-carousel .zype-grid-video-card__overlay-inner {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
    flex: 1 1 0%;
}

.zype-carousel__item--poster .zype-grid-video-card__overlay,
.zype-carousel__item[data-thumbnail-orientation="poster"] .zype-grid-video-card__overlay {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
    overflow: hidden;
}

.zype-carousel .zype-grid-video-card.zype-poster .zype-grid-video-card__title,
.zype-carousel .zype-grid-video-card--poster .zype-grid-video-card__title {
    -webkit-line-clamp: 3;
    overflow: hidden;
    max-width: 100%;
    font-size: 15px;
}

/*
 * Poster overlays are tall (2:3). flex-basis 0% + high line-clamp fills space
 * above Read more / action row before ellipsis (no early truncation gap).
 */
.zype-carousel .zype-grid-video-card.zype-poster .zype-grid-video-card__description,
.zype-carousel .zype-grid-video-card--poster .zype-grid-video-card__description,
.zype-carousel__item--poster .zype-grid-video-card__description,
.zype-carousel__item[data-thumbnail-orientation="poster"] .zype-grid-video-card__description {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 40;
    line-clamp: 40;
    overflow: hidden;
    max-width: 100%;
    font-size: 13px;
    line-height: 1.3;
    min-height: 0;
    flex: 1 1 0%;
}

.zype-carousel .zype-grid-video-card__body {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 0;
    overflow: hidden;
    flex: 1 1 0%;
}

.zype-carousel .zype-grid-video-card.zype-poster .zype-grid-video-card__read-more,
.zype-carousel .zype-grid-video-card--poster .zype-grid-video-card__read-more {
    flex-shrink: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 13px;
}

.zype-carousel .zype-grid-video-card__actions {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    height: 50px;
    margin: 0;
    flex-shrink: 0;
}

.zype-carousel__empty,
.zype-carousel__error {
    margin: 0;
    padding: 0.75rem 0;
    font-size: 1rem;
    line-height: 1.4;
}

.zype-carousel__previous,
.zype-carousel__next {
    position: absolute;
    top: 50%;
    z-index: 2;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    color: #111;
    background: rgba(255, 255, 255, 0.55);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    opacity: 0.55;
    transition: opacity 0.15s ease, background 0.15s ease;
}

.zype-carousel__previous:hover,
.zype-carousel__next:hover,
.zype-carousel__previous:focus,
.zype-carousel__next:focus,
.zype-carousel__previous:focus-visible,
.zype-carousel__next:focus-visible {
    opacity: 1;
    background: rgba(255, 255, 255, 0.92);
}

.zype-carousel__previous:focus,
.zype-carousel__next:focus,
.zype-carousel__previous:focus-visible,
.zype-carousel__next:focus-visible {
    outline: 2px solid #111;
    outline-offset: 2px;
}

.zype-carousel__previous:disabled,
.zype-carousel__next:disabled,
.zype-carousel__previous[hidden],
.zype-carousel__next[hidden] {
    display: none;
}

.zype-carousel__previous {
    left: 0.35rem;
}

.zype-carousel__next {
    right: 0.35rem;
}

.zype-carousel__arrow-icon {
    display: block;
    width: 0.65rem;
    height: 0.65rem;
    margin: 0 auto;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    box-sizing: border-box;
}

.zype-carousel__previous .zype-carousel__arrow-icon {
    transform: translateX(0.15rem) rotate(-135deg);
}

.zype-carousel__next .zype-carousel__arrow-icon {
    transform: translateX(-0.1rem) rotate(45deg);
}

/* Grid destination: unchanged packing (not the horizontal track). */
.zype-carousel--grid .zype-carousel__grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.375rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.zype-carousel--grid .zype-carousel__grid > .view_all_images,
.zype-carousel--grid .zype-carousel__grid > .zype-grid-video-card {
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
    box-sizing: border-box;
}

.zype-carousel--grid .zype-carousel__grid .view_all_images.zype-landscape .zype-background-thumbnail,
.zype-carousel--grid .zype-carousel__grid .zype-grid-video-card.zype-landscape .zype-background-thumbnail {
    width: min(var(--zype-card-landscape-width, 320px), 100%);
    height: auto;
    aspect-ratio: var(--zype-card-landscape-aspect-ratio, 16 / 9);
}

.zype-carousel--grid .zype-carousel__grid .view_all_images.zype-poster .zype-background-thumbnail,
.zype-carousel--grid .zype-carousel__grid .zype-grid-video-card.zype-poster .zype-background-thumbnail {
    width: min(var(--zype-card-portrait-width, 200px), 100%);
    height: auto;
    max-height: none;
    aspect-ratio: var(--zype-card-portrait-aspect-ratio, 2 / 3);
}

.zype-carousel.is-dragging,
.zype-carousel.is-dragging a {
    cursor: grabbing;
    user-select: none;
}

.zype-carousel.is-dragging a {
    pointer-events: none;
}