/* ============================================================
   Mac-Point.cz — Benefit banner section, iOS 26 glass v3
   Neutral glass cards, transparent parent wrapper.
   Scoped to .position--benefitHomepage only.
   ============================================================ */

/* ------------------------------------------------------------
   1. CONTAINER — gap, transparent self
   ------------------------------------------------------------ */
.benefitBanner.position--benefitHomepage {
    gap: 16px;
    background: transparent !important;
    box-shadow: none !important;
}

/* Strip background from the Shoptet homepage-box wrapper
   that contains *this* benefit banner — uses :has() so we
   don't accidentally hit other homepage sections. */
.content-wrapper.homepage-box:has(.benefitBanner.position--benefitHomepage),
.homepage-box:has(.benefitBanner.position--benefitHomepage),
.content-wrapper:has(> .content-wrapper-in .benefitBanner.position--benefitHomepage) {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.content-wrapper.homepage-box:has(.benefitBanner.position--benefitHomepage) .content-wrapper-in,
.homepage-box:has(.benefitBanner.position--benefitHomepage) .content-wrapper-in {
    background: transparent !important;
    box-shadow: none !important;
}


/* ------------------------------------------------------------
   2. CARD — neutral glass surface, soft cool gradient
   ------------------------------------------------------------ */
.benefitBanner.position--benefitHomepage .benefitBanner__item {
    position: relative;
    border-radius: 20px;
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(248, 250, 252, 0.90) 50%,
            rgba(242, 245, 250, 0.88) 100%
        );
    box-shadow:
        0 1px 2px rgba(20, 25, 40, 0.04),
        0 6px 16px rgba(20, 25, 40, 0.05),
        0 16px 36px rgba(20, 25, 40, 0.04);
    transition:
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
    isolation: isolate;
}

/* Glass rim — bright top edge + perimeter, all neutral */
.benefitBanner.position--benefitHomepage .benefitBanner__item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 3;
    box-shadow:
        inset 0 1px 0 0 rgba(255, 255, 255, 0.85),
        inset 0 0 0 1px rgba(255, 255, 255, 0.40),
        inset 0 -1px 0 0 rgba(20, 25, 40, 0.04);
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.30) 0%,
        rgba(255, 255, 255, 0.06) 14%,
        transparent 32%
    );
    transition: background 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ------------------------------------------------------------
   3. ICON — clean, no disc
   ------------------------------------------------------------ */
.benefitBanner.position--benefitHomepage .benefitBanner__picture {
    position: relative;
    z-index: 2;
}

.benefitBanner.position--benefitHomepage .benefitBanner__img {
    position: relative;
    z-index: 1;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}


/* ------------------------------------------------------------
   4. TEXT — title in macpoint purple, polished subtext
   ------------------------------------------------------------ */
.benefitBanner.position--benefitHomepage .benefitBanner__content {
    position: relative;
    z-index: 2;
}

.benefitBanner.position--benefitHomepage .benefitBanner__title {
    background: linear-gradient(
        135deg,
        #7B3FE4 0%,
        #8E3DFF 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: #7B3FE4; /* fallback for older browsers */
    letter-spacing: 0.01em;
}

.benefitBanner.position--benefitHomepage .benefitBanner__data {
    color: #4a4458;
    opacity: 0.85;
}


/* ------------------------------------------------------------
   5. HOVER — lift, brighter rim, icon nudge
   ------------------------------------------------------------ */
.benefitBanner.position--benefitHomepage .benefitBanner__item:hover {
    transform: translateY(-4px);
    box-shadow:
        0 1px 2px rgba(20, 25, 40, 0.05),
        0 14px 28px rgba(20, 25, 40, 0.10),
        0 28px 56px rgba(20, 25, 40, 0.06);
}

.benefitBanner.position--benefitHomepage .benefitBanner__item:hover::after {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.45) 0%,
        rgba(255, 255, 255, 0.10) 16%,
        transparent 34%
    );
}

.benefitBanner.position--benefitHomepage .benefitBanner__item:hover .benefitBanner__img {
    transform: scale(1.06);
}


/* ------------------------------------------------------------
   6. REDUCE MOTION — accessibility
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .benefitBanner.position--benefitHomepage .benefitBanner__item,
    .benefitBanner.position--benefitHomepage .benefitBanner__item::after,
    .benefitBanner.position--benefitHomepage .benefitBanner__img {
        transition: none;
    }
    .benefitBanner.position--benefitHomepage .benefitBanner__item:hover {
        transform: none;
    }
    .benefitBanner.position--benefitHomepage .benefitBanner__item:hover .benefitBanner__img {
        transform: none;
    }
}