/* Slightly larger on small screens and above */



@media (min-width: 1024px) {
    /* Keep desktop logo modest so it doesn't dominate the hero */
    .viewlix-hero-logo { height: 56px; }
    .viewlix-hero-logo-shadow { width: 14rem; height: 3.4rem; }
}

/* Smooth transform for carousel movement */


/* Smooth transitions for slides and images */







/* Small screens */
@media (min-width: 640px) {
}

/* Medium screens */
@media (min-width: 768px) {
    /* Taller hero on medium screens */
}

/* Large screens - REDUCED from 720px to 520px */
@media (min-width: 1024px) {
    /* Even taller hero on large screens */
}

/* Desktop: nudge overlay inner container slightly upward for better visual balance
   without changing layout or alignment. Adjust the translateY value to fine-tune. */


/* Ensure slides fill the carousel height and occupy exactly 100% of the carousel width
so only one slide is visible at a time. Don't use auto margins which previously caused
partial slides to appear. We also override Preline's absolute positioning on the carousel
body so desktop sizing is consistent (Preline may add `absolute top-0 bottom-0` which
can conflict with media-query heights and cause layout issues). */


            /* Ensure each slide takes exactly the visible carousel width on all viewports
               (prevents oversized or partially visible adjacent slides). Use !important
          

/* Ensure the carousel body spans the full available inner width so
   each slide is exactly the visible carousel width. Using a
   centered max-width here caused the body to be slightly narrower
   than the container which allowed the next slide to peek in. */

/* Make the whole slide feel clickable */
.viewlix-clickable-card { cursor: pointer; }

/* Mobile: make the hero carousel feel full-screen */
@media (max-width: 639px) {
    /* Let the carousel occupy the full viewport height on phones */
    

    /* Carousel body and slides should fill the viewport height */
 


    /* Responsive hero logo sizing for mobile: keep the logo modest on very small phones
        - reduce the minimum to avoid oversized logos on narrow screens
        - prefer a slightly larger scale on mid-size phones, but cap the max */
    /* Limit image width so it doesn't span the hero; ensure height scales naturally */
    .viewlix-hero-logo-img { max-width: clamp(40%, 60%, 75%); height: auto; }
    /* Shadow should scale with logo but remain subtle */
    .viewlix-hero-logo-shadow { width: clamp(6.5rem, 14vw, 12rem); height: clamp(1.4rem, 3.2vw, 2.8rem); }

    /* Mobile: nudge the overlay content up slightly (change vertical position only).
       This increases the bottom spacing of the overlay inner container without
*/
}
     /* Mobile-friendly carousel adjustments */
        @media (max-width: 768px) {
            .carousel-container { min-height: 280px; }
            .carousel-trending-badge { font-size: 0.65rem; padding: 0.35rem 0.75rem; }
            .carousel-title { font-size: 1.5rem; }
            .carousel-logo { height: 20px; }
            .carousel-meta { font-size: 0.7rem; gap: 0.5rem; }
            .carousel-meta span { padding: 0.25rem 0.5rem; }
            .carousel-description { font-size: 0.85rem; padding-left: 1rem; padding-right: 1rem; line-height: 1.4; margin-top: 0.75rem; }
            .carousel-buttons { gap: 0.5rem; margin-top: 0.75rem; }
            .carousel-buttons a, .carousel-buttons button { font-size: 0.875rem; padding: 0.5rem 0.75rem; }
        }
        @media (max-width: 480px) {
            .carousel-container { min-height: 240px; }
            .carousel-trending-badge { font-size: 0.6rem; padding: 0.3rem 0.6rem; }
            .carousel-title { font-size: 1.25rem; }
            .carousel-logo { height: 16px; }
            .carousel-meta { font-size: 0.65rem; gap: 0.35rem; }
            .carousel-meta span { padding: 0.2rem 0.4rem; }
            .carousel-description { font-size: 0.8rem; padding-left: 0.75rem; padding-right: 0.75rem; }
            .carousel-buttons a, .carousel-buttons button { font-size: 0.8rem; padding: 0.4rem 0.6rem; }
        }