/**
 * Megaswiper shortcode — critical layout overrides (FOUC, transcript modal shell, responsive).
 *
 * Loaded after msw-transcript-css (dependency). Formerly an inline <style> in swiper-view.php;
 * moved here so rules stay editable, cache-busted, and documented in one place.
 *
 * !important policy:
 * - Kept on transcript overlay shell while the node lives under .swiper-slide (Elementor / theme
 *   often override long selectors). Removing them can break modal centering or visibility — QA on
 *   a real Elementor page before stripping.
 * - Pre-init image max-width/height: required or Swiper init order can flash wrong dimensions.
 *
 * @see assets/css/transcript-layer.css — transcript trigger, teleported overlay, guards
 */

/* --- 1. Swiper: hide until initialized (avoids large image flash) --- */
.msw-unique-gato:not(.swiper-initialized) {
    opacity: 0;
    visibility: hidden;
}
.msw-unique-gato.swiper-initialized {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in;
}

/* --- 2. Pre-init image only: needs !important or this rule beats _slide-dynamic after init --- */
.msw-unique-gato:not(.swiper-initialized) .msw-slide-img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

/* --- 3. Transcript: modal shell while overlay is still inside the slide (before JS teleports to body) --- */
/* Long chain = higher specificity; !important only where Elementor typically overrides layout. */
html body .msw-unique-gato .swiper-slide .msw-transcript-container .msw-transcript-overlay {
    position: fixed !important;
    top: 15% !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 92vw !important;
    max-width: min(92vw, 800px) !important;
    height: auto !important;
    max-height: 55vh !important;
    transform: none !important;
    bottom: auto !important;
    display: none !important;
    flex-direction: column !important;
    z-index: 999999999 !important;
    background: #ffffff;
    border-radius: 20px;
    /* Tight padding: large values made the close control look “floating” inside the card */
    padding: 0.75rem 0.75rem 1rem 1rem;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
    overflow: hidden auto !important;
    opacity: 0 !important;
    pointer-events: none !important;
}
html body .msw-unique-gato .swiper-slide .msw-transcript-container.is-open .msw-transcript-overlay {
    display: flex !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/*
 * --- 4. Transcript full column (in-slide, teleported-visible, is-open) ---
 * Single merged selector list — was duplicated between transcript-layer and inline shortcode CSS.
 */
html body .msw-unique-gato .msw-transcript-overlay .msw-transcript-full,
html body .msw-transcript-overlay.msw-transcript-visible .msw-transcript-full,
html body .msw-unique-gato .msw-transcript-container.is-open .msw-transcript-overlay .msw-transcript-full {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-y: visible;
    height: auto;
    padding-right: 0;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    /* Image sizing: per-breakpoint caps are in assets/css/_slide-dynamic.css (S/M/L…). */
    .msw-unique-gato .msw-img-box {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    /*
     * PDF slide: thumbnail + "Download PDF" are direct flex children; default flex-direction is row,
     * so the link sat beside the image. Must stack on small viewports. !important beats theme/Elementor
     * or optimizer CSS that loads after megaswiper/style.css (same pattern as transcript overlay).
     */
    html body .msw-unique-gato .msw-img-box.msw-pdf-slide {
        flex-direction: column !important;
        align-items: center !important;
        gap: 0.5rem;
    }
    html body .msw-unique-gato .msw-pdf-slide .msw-pdf-download-link {
        margin-top: 0 !important;
    }
    .msw-unique-gato .msw-transcript-container {
        margin-top: 5px !important;
    }
    .msw-unique-gato .swiper-pagination-fraction,
    .msw-unique-gato .msw-pagination.swiper-pagination-fraction {
        padding-bottom: env(safe-area-inset-bottom, 1rem) !important;
    }
    html body .msw-unique-gato .swiper-slide .msw-transcript-container .msw-transcript-overlay {
        top: 18%;
        margin-left: auto;
        margin-right: auto;
    }
}