/* ========================================
   KAKRINA HILLS - Custom Overrides
   ======================================== */

/* ----------------------------------------
   1. CONSISTENT BORDER-RADIUS
   All elements use 16px border-radius
   ---------------------------------------- */

/* Images in about page and cards */
.about-section img,
.layout-pt-lg img:not(.img-ratio):not([src*="logo"]):not([src*="icon"]),
section .col-xl-6 > img,
section .col-lg-6 > img {
    border-radius: 16px;
}

/* Ensure all rounded elements use same radius */
.rounded-4,
.rounded-8,
.rounded-12 {
    border-radius: 16px !important;
}

/* Keep rounded-full as is (circles) */
/* Keep rounded-16 as is (already correct) */
/* Keep rounded-200 as is (pills) */

/* Cards and images consistency */
.baseCard__image,
.baseCard__image .ratio {
    border-radius: 16px;
    overflow: hidden;
}

/* ----------------------------------------
   2. BUTTON STYLES - Only 2 types
   Type A: Transparent bg, black border, black text
           Hover: black bg, white text
   Type B: Black bg, white text
           Hover: transparent bg, black border, black text
   ---------------------------------------- */

/* Type A: Outlined button */
.button.-type-2.-outline-black,
.button.-type-2.-outline-dark {
    background-color: transparent !important;
    border: 1px solid #122223 !important;
    color: #122223 !important;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.button.-type-2.-outline-black:hover,
.button.-type-2.-outline-dark:hover {
    background-color: #122223 !important;
    color: #fff !important;
}

/* Type B: Filled dark button */
.button.bg-accent-1,
.button.bg-accent-2.-dark-1,
.button.-dark-1 {
    background-color: #122223 !important;
    color: #fff !important;
    border: 1px solid #122223 !important;
    border-radius: 16px;
    transition: all 0.3s ease;
}

.button.bg-accent-1:hover,
.button.bg-accent-2.-dark-1:hover,
.button.-dark-1:hover {
    background-color: transparent !important;
    color: #122223 !important;
}

/* Standardize the accent-2 buttons used across the site */
.button.bg-accent-2.-accent-1 {
    border-radius: 16px;
}

/* Search form button */
.searchForm__button .button {
    border-radius: 16px;
}

/* ----------------------------------------
   3. FOOTER SPACING - Consistent gaps
   ---------------------------------------- */

.footer__grid h4 {
    margin-bottom: 0;
}

.footer__grid .mt-60 {
    margin-top: 30px !important;
}

.footer__main {
    padding-top: 80px;
    padding-bottom: 60px;
}

.footer__bottom {
    padding-top: 30px;
    padding-bottom: 30px;
}

/* ----------------------------------------
   4. ABOUT PAGE - Consistent spacing
   ---------------------------------------- */



/* About page image border-radius */
.about-section img,
section .col-xl-6 img,
section .col-lg-6 img {
    border-radius: 16px;
}

/* Consistent heading-to-text spacing */
.text-40.capitalize + .lh-17,
h3.text-40 + p {
    margin-top: 20px;
}

/* ----------------------------------------
   5. HOMEPAGE CAROUSEL - Consistent cards
   ---------------------------------------- */

/* Ensure all experience cards on homepage have same styling */
.baseCard.-type-1 .baseCard__content {
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
    border-radius: 0 0 16px 16px;
}

/* Rooms section cards - consistent hover */
.hotelsCard.-type-2 {
    border-radius: 16px;
    overflow: hidden;
}

.hotelsCard.-type-2 .hotelsCard__image {
    border-radius: 16px;
    overflow: hidden;
}

/* ----------------------------------------
   6. MOBILE FIXES
   ---------------------------------------- */

@media (max-width: 767px) {
    /* Influencer/testimonials section - add padding */
    .sectionBg.-type-2 {
        border-radius: 0;
    }
    
    /* Numbers section - fix alignment */
    .layout-pt-md .row.y-gap-30.justify-between {
        justify-content: center !important;
        text-align: center;
    }
    
    .layout-pt-md .row.y-gap-30.justify-between .col-auto {
        width: 50%;
        padding: 10px;
    }
    
    /* Fix overlapping sections */
    .layout-pt-md {
        padding-top: 60px;
    }
    
    .layout-pb-md {
        padding-bottom: 60px;
    }
    
    /* Hero text readability on mobile */
    .pageHero__title {
        text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
    }
    
    .pageHero__bg::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.4) 100%);
        z-index: 1;
    }
    
    .pageHero__content {
        position: relative;
        z-index: 2;
    }
    
    /* Fix experience cards stacking on mobile */
    .hero__filter {
        margin-bottom: 20px;
    }
    
    /* Footer responsive spacing */
    .footer__grid {
        gap: 30px;
    }
    
    .footer__grid .mt-60 {
        margin-top: 15px !important;
    }
}

@media (max-width: 575px) {
    /* Numbers grid on very small screens */
    .layout-pt-md .row.y-gap-30.justify-between .col-auto {
        width: 50%;
    }
    
    /* Smaller text for better fit */
    .text-92 {
        font-size: 40px !important;
    }
}

/* ----------------------------------------
   7. CAROUSEL NAV - pointer-events fix
   So nav wrapper doesn't block card clicks
   ---------------------------------------- */

/* Nav overlay should not capture pointer events in the gap between buttons */
.navAbsolute {
    pointer-events: none;
}

.navAbsolute button,
.navAbsolute a {
    pointer-events: auto;
}

/* Fade out disabled prev/next buttons (Swiper adds swiper-button-disabled) */
.navAbsolute .swiper-button-disabled {
    opacity: 0.25;
    pointer-events: none !important;
    cursor: default;
}

/* Also cover buttons not inside navAbsolute */
.swiper-button-disabled[class*="js-slider"],
.swiper-button-disabled[class*="js-about"] {
    opacity: 0.25;
    pointer-events: none !important;
    cursor: default;
}

/* ----------------------------------------
   8. ROOMS SECTION - spacing from CTA above
   ---------------------------------------- */

/* The animation wrapper around the CTA image has auto height, so the img's
   height:100%/object-fit:cover never resolve and it overflows onto this section. */
.cta.-type-1 .cta__bg > div {
    height: 100%;
}

/* Add top padding to the rooms section that follows the CTA */
.cta.-type-1 + section.layout-pt-md,
.cta.-type-1 + section.layout-pt-lg {
    padding-top: 100px;
}

/* ----------------------------------------
   9. SOCIAL MEDIA ICONS - larger size
   ---------------------------------------- */

/* Increase social icon size in footer (was text-20 = ~20px) */
.footer__bottom .row.x-gap-25 a i {
    font-size: 28px !important;
}

.footer__bottom a[href*="instagram"],
.footer__bottom a[href*="facebook"] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.footer__bottom a[href*="instagram"]:hover,
.footer__bottom a[href*="facebook"]:hover {
    background-color: rgba(255,255,255,0.15);
}

/* ----------------------------------------
   10. PAGE HERO OVERLAY
   Dark gradient so title text is always readable
   ---------------------------------------- */

.pageHero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 0, 0, 0.50) 50%,
        rgba(0, 0, 0, 0.35) 100%
    );
    z-index: 1;
}

.pageHero__bg {
    position: relative;
}

.pageHero__content {
    position: relative;
    z-index: 2;
}

/* ----------------------------------------
   11. CAROUSEL IMAGE OVERLAY
   Gradient at the bottom of images so text
   is readable even on light photos
   ---------------------------------------- */

/* Experience cards - stronger bottom overlay */
.baseCard.-type-1 {
    position: relative;
}

.baseCard.-type-1 .baseCard__image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60%;
    background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0.35) 50%, transparent 100%);
    border-radius: 0 0 16px 16px;
    z-index: 1;
    pointer-events: none;
}

/* Room cards - overlay so РЕЗЕРВИРАЙ text is readable */
.roomCard.-type-2 .roomCard__image {
    position: relative;
}

.roomCard.-type-2 .roomCard__image::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

/* About page carousel cards */
.about-page .baseCard.-type-1 .baseCard__image::after,
.js-about-slider .baseCard.-type-1 .baseCard__image::after {
    height: 70%;
}

/* ----------------------------------------
   11. HOVER EFFECTS - consistency
   All image-scale cards use same transform
   ---------------------------------------- */

/* Standardize the scale amount for all -hover-image-scale */
.-hover-image-scale:hover .-hover-image-scale__image img,
.-hover-image-scale:hover .-hover-image-scale__image .img-ratio {
    transform: scale(1.05);
    transition: transform 0.4s ease;
}

.-hover-image-scale__image img,
.-hover-image-scale__image .img-ratio {
    transition: transform 0.4s ease;
}

/* Room cards - consistent hover overlay appearance */
.roomCard.-type-2:hover {
    transform: translateY(-4px);
    transition: transform 0.3s ease;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
}

.roomCard.-type-2 {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Make sure bottom row cards in 3-column grid have same hover as top */
.row.x-gap-30.y-gap-30 .col-lg-4:nth-child(n) .roomCard.-type-2,
.row.x-gap-30.y-gap-30 .col-md-6:nth-child(n) .roomCard.-type-2 {
    transform-origin: center;
}

/* ----------------------------------------
   12. HOMEPAGE EXPERIENCES SLIDER OVERLAY
   Gradient overlay on "Незабравими изживявания"
   cards (slider4) - matches experiences.php style
   ---------------------------------------- */

.js-section-slider[data-nav-prev="js-slider4-prev"] .baseCard__content {
    padding: 20px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
}