/* ============================================================
   Mac-Point.cz — Carousel banners, iOS 26 / Liquid Glass
   + mobile whitespace fix
   Scoped to .banners-row only.
   ============================================================ */

/* ------------------------------------------------------------
   1. UNIVERSAL FIXES (all breakpoints)
   ------------------------------------------------------------ */

/* Anchor wrappers — block-level + zero font/line-height
   eliminates the baseline descender gap below inline images */
.banners-row #carousel .item > a,
.banners-row .banner-wrapper.half-banner > a {
    display: block;
    font-size: 0;
    line-height: 0;
}

/* Hide Shoptet's empty banner-text overlay so it can't add layout */
.banners-row .extended-banner-texts.empty {
    display: none;
}


/* ------------------------------------------------------------
   2. WRAPPER — chunkier radius + layered ambient shadows
   ------------------------------------------------------------ */
.banners-row #carousel,
.banners-row .banner-wrapper.half-banner {
    position: relative;
    border-radius: 22px;
    overflow: hidden;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),     /* tight contact */
        0 6px 18px rgba(0, 0, 0, 0.08),    /* mid lift */
        0 18px 44px rgba(0, 0, 0, 0.06);   /* ambient ground */
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.banners-row .carousel-inner {
    border-radius: inherit;
    overflow: hidden;
}

/* Images inside match the curve and fill the wrapper */
.banners-row #carousel .item img,
.banners-row .banner-wrapper.half-banner img {
    border-radius: 22px;
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}


/* ------------------------------------------------------------
   3. GLASS RIM — thin bright border + top specular highlight
   ------------------------------------------------------------ */
.banners-row #carousel::after,
.banners-row .banner-wrapper.half-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 2;

    /* Layered inset shadows = the glass rim */
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.65),
        inset 0 0 0 1px rgba(255, 255, 255, 0.20),
        inset 0 -1px 0 0 rgba(0, 0, 0, 0.05);

    /* Top specular highlight */
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.18) 0%,
        rgba(255, 255, 255, 0.04) 10%,
        transparent 26%
    );

    transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.banners-row .carousel-control {
    z-index: 5;
    border-radius: 999px;
    transition: background-color 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ------------------------------------------------------------
   4. HOVER — lift + brighter highlight (desktop only)
   ------------------------------------------------------------ */
.banners-row .banner-wrapper.half-banner:hover {
    transform: translateY(-3px);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.04),
        0 14px 30px rgba(0, 0, 0, 0.12),
        0 30px 60px rgba(0, 0, 0, 0.08);
}

.banners-row .banner-wrapper.half-banner:hover::after {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.30) 0%,
        rgba(255, 255, 255, 0.06) 12%,
        transparent 30%
    );
}


/* ------------------------------------------------------------
   5. MOBILE WHITESPACE FIX
   Shoptet sets heights for the desktop layout (carousel +
   stacked side banners need to match heights). On mobile this
   leaves containers taller than the image. Reset them here.
   ------------------------------------------------------------ */
@media (max-width: 767px) {
    /* Kill the inline min-height Bootstrap carousel JS injects */
    .banners-row .carousel-inner {
        min-height: 0 !important;
    }

    /* Force wrappers to size to their content */
    .banners-row .next-to-carousel-banners,
    .banners-row .banner-wrapper.half-banner,
    .banners-row #carousel,
    .banners-row #carousel .item {
        height: auto !important;
    }

    /* Belt-and-suspenders: image fully fills container width */
    .banners-row #carousel .item img,
    .banners-row .banner-wrapper.half-banner img {
        width: 100%;
        height: auto;
        display: block;
        margin: 0;
        padding: 0;
    }

    /* Add a small gap between stacked side banners on mobile */
    .banners-row .banner-wrapper.half-banner + .banner-wrapper.half-banner {
        margin-top: 12px;
    }
}


/* ------------------------------------------------------------
   6. REDUCE MOTION
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .banners-row #carousel,
    .banners-row .banner-wrapper.half-banner,
    .banners-row .banner-wrapper.half-banner::after {
        transition: none;
    }
    .banners-row .banner-wrapper.half-banner:hover {
        transform: none;
    }
}