/* Responsive video embeds */
.video-container {
    margin: 30px 0;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.video-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    height: 0;
    overflow: hidden;
    background: #000;
}

.video-responsive iframe,
.video-responsive blockquote {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Instagram specific styling */
.instagram-media {
    min-width: 326px !important;
}

/* For the gallery video placeholders when loaded */
.gallery-item iframe,
.gallery-item blockquote {
    width: 100%;
    height: 100%;
    border: none;
}
.hero-gallery {
    display: flex;
    gap: 16px;
    align-items: stretch;
    align-content: stretch;
}
/* Ensure iframes are below navigation controls so nav clicks hit buttons on mobile */
.hero-gallery .gallery-item iframe { position: relative; z-index: 1; }

/* Make Swiper navigation buttons sit above videos and accept pointer events */
.swiper-button-next, .swiper-button-prev {
    z-index: 60;
    pointer-events: auto;
}
/* Swiper-specific sizing to match sample layout */
.hero-gallery.swiper, .swiper {
    width: 100%;
    height: 500px;
}
.hero-gallery.swiper .swiper-slide img, .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hero-gallery .gallery-item {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: block;
    border-radius: 12px;
    background: #111;
}
.hero-gallery .gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.hero-gallery .video-placeholder .play-overlay {
    position: absolute;
    inset: 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    color: #fff;
    /* background: linear-gradient(180deg, rgba(0,0,0,0.25), rgba(0,0,0,0.45)); */
}

/* Ensure the overlay and icon sit above background and fonts render */
.hero-gallery .video-placeholder .play-overlay { z-index: 3; }
.hero-gallery .video-placeholder .play-overlay .platform-icon {
    display: inline-block;
    /* Force Font Awesome font families as a defensive fallback */
    font-family: "Font Awesome 6 Brands", "Font Awesome 6 Free", sans-serif !important;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
.hero-gallery .side-gallery {
    display:flex;
    flex-direction:column;
    gap:12px;
    width: 40%;
}

/* Flex-grid aspect strategies:
   - Primary item takes remaining width; side gallery fixed as column
   - Use aspect-ratio for natural sizing; when a container has .vertical class,
     it will expand height to preserve portrait ratio.
*/
.hero-gallery > .gallery-item {
    flex: 1 1 60%;
    aspect-ratio: 16 / 9; /* default landscape */
    min-height: 260px;
}
.hero-gallery .side-gallery > .gallery-item {
    flex: 0 0 auto;
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: 140px;
    border-radius: 8px;
    overflow: hidden;
}

/* When a vertical video is loaded we add .vertical to the gallery-item
   which flips the aspect ratio to portrait and lets the flex container
   naturally expand the height so content is not cut off. */
.hero-gallery .gallery-item.vertical {
    aspect-ratio: 9 / 16;
}
.hero-gallery .side-gallery > .gallery-item.vertical {
    aspect-ratio: 9 / 16;
}

.play-overlay.mini { padding: 8px; border-radius: 8px; background: rgba(0,0,0,0.35); }
.play-overlay .platform-label { font-weight: 700; text-transform: none; letter-spacing: 0.2px; font-size: 0.85rem; }

/* Unified icon styling: use <i> rules so platform icons inherit the same look */
.play-overlay i { font-size: 3.5rem; color: var(--verified-gold); margin-bottom: 10px; filter: drop-shadow(0 4px 10px rgba(0,0,0,0.5)); }
.play-overlay.mini i { font-size: 1.25rem; margin-bottom: 0; }

/* Small screens: stack and make side gallery row under primary */
@media (max-width: 768px) {
    .hero-gallery { flex-direction: column; }
    .hero-gallery .side-gallery { width: 100%; flex-direction: row; gap: 8px; }
    .hero-gallery .side-gallery > .gallery-item { flex: 1 1 0; aspect-ratio: 4/3; min-height: 120px; }
    .hero-gallery > .gallery-item { width: 100%; aspect-ratio: 16/9; }
    .play-overlay .platform-label { display: none; }
}

/* Strong override: ensure video-placeholder backgrounds (gradient or thumbnail)
   are visible even if other styles attempt to force a dark background. */
.hero-gallery .gallery-item.video-placeholder {
    background-color: #f3f4f6 !important;
    background-image: var(--platform-gradient, none), var(--thumb-url, none) !important;
    background-size: cover !important;
    background-position: center center !important;
}
.hero-gallery .gallery-item.video-placeholder::before {
    opacity: 0 !important;
}

/* Platform-specific backgrounds */
.play-overlay.youtube {
    background: linear-gradient(45deg, var(--youtube-red), #CC0000);
}

.play-overlay.instagram {
    background: linear-gradient(45deg, var(--instagram-purple), var(--instagram-pink), var(--instagram-orange));
}

.play-overlay.tiktok {
    background: linear-gradient(45deg, var(--tiktok-black), #333333);
}

/* Ensure the inner placeholder element fills the slide so injected iframes
   occupy the full swiper-slide area instead of collapsing to overlay size. */
.hero-gallery .gallery-item > .video-placeholder,
.hero-gallery .gallery-item > .video-loaded {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* If we keep the placeholder class while loaded, hide the play-overlay */
.hero-gallery .gallery-item > .video-placeholder.video-loaded .play-overlay,
.hero-gallery .gallery-item > .video-loaded .play-overlay { display: none !important; }