/*
 * RUCSS-EXCLUDED child stylesheet — Smiles on X.
 *
 * Home for CHILD rules keyed on JS-ADDED classes (Splide .is-active/.is-prev/.is-next,
 * scroll-state, drawer state, …). WP Rocket RUCSS prunes such rules out of the normal
 * child style.css because the classes are absent from the crawled server HTML; this file
 * is whole-file excluded from RUCSS (functions.php -> rocket_rucss_external_exclusions),
 * so every rule here survives. Put child runtime-state CSS HERE, never in style.css.
 */

/* Reviews peek carousel (desktop): centre sharp, neighbours dim/blur/drop. Splide adds
   .is-active/.is-prev/.is-next at mount. Desktop-only; mobile shows a single sharp review. */
@media (min-width: 1025px) {
    .reviews .splide__slide .con-wrap-match {
        opacity: 0.5;
        filter: blur(4px);
        transform: translateY(clamp(32px, 2.86vw, 55px));
        transition: opacity 0.9s ease, filter 0.9s ease, transform 0.9s ease;
    }
    .reviews .splide__slide.is-active .con-wrap-match {
        opacity: 1;
        filter: none;
        transform: none;
    }
    .reviews .splide__slide.is-prev .con-wrap-match {
        filter: blur(8px);
    }
    .reviews .splide__slide.is-next .con-wrap-match {
        filter: blur(2px);
    }
}

/* Mobile contact popup (#contInfo) — opened via the .show-info phone icon through lity.
   The framework ships this markup but never ported its styling from fgB, so it rendered as
   unstyled black-on-page ("blank screen"). Dark card treatment matched to fgB/Berg. Lives here
   (not style.css) because RUCSS blanks it — #contInfo is lity-hide, opened by JS. */
#contInfo.touch-contact {
    background: rgba(0, 0, 0, 0.85);
    color: #F8F8F8;
    padding: clamp(24px, 8vw, 40px);
    max-width: min(90vw, 360px);
    text-align: center;
}
#contInfo.touch-contact h2,
#contInfo.touch-contact h3 {
    color: #F8F8F8;
    margin: 0 0 clamp(18px, 5vw, 28px);
}
#contInfo .social {
    margin: 0 0 clamp(14px, 4vw, 20px);
    padding: 6px 0;
    list-style: none;
}
#contInfo .social li {
    display: inline-block;
    margin: 0 clamp(6px, 2vw, 10px);
}
#contInfo .social a,
#contInfo .social a i {
    color: #F8F8F8;
    font-size: 21px;
}
#contInfo .floatLink {
    display: inline-block;
    color: #F8F8F8;
    font-size: clamp(20px, 6vw, 24px);
    font-weight: 600;
}

/* Mobile header buttons (book CTA + phone icon) — positioned by JS-state classes
   (body.scrolled / body:not(.scrolled) / .mobHd / .mobile-show). RUCSS strips these from
   style.css, so the CTA loses its placement and falls to the centered-absolute base (flies
   to the top, overlapping the header). Duplicated here (RUCSS-safe) so they always apply. */
@media (max-width: 1024px) {
    .mobile-show.moreInfo {
        left: min(32px, 8vw);
    }
    .mobile-show.moreInfo a {
        background: var(--black);
        color: var(--white);
        width: 34px;
        height: 34px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        border-radius: 0;
    }
    body:not(.scrolled) #header .mobHd .btn-block.mobile-show {
        position: static;
        transform: none;
        margin: min(32px, 8vw) auto min(48px, 12.31vw);
        width: fit-content;
    }
    body:not(.scrolled) #header .mobHd .btn-block.mobile-show .booking-opener,
    body:not(.scrolled) #header .mobHd .btn-block.mobile-show .booking-blank {
        padding: min(19px, 5vw) min(32px, 8vw);
        font-size: 16px;
        line-height: 1.5;
    }
    body.scrolled .mobile-show.moreInfo {
        top: 11px;
    }
    body.scrolled #header .btn-block.mobile-show {
        transform: none;
    }
    body.scrolled #header .btn-block.mobile-show .booking-opener,
    body.scrolled #header .btn-block.mobile-show .booking-blank {
        top: 11px;
        left: 50%;
        transform: translateX(-50%);
        height: 34px;
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #footer .footer-holder .social {
        padding-bottom: min(52px, 13vw);
    }
}