/*
 * SEMC Customizer — Hero Banner Frontend Styles
 *
 * All .chb-* styles live here. This file is enqueued by
 * semc-customizer/includes/hero-banner.php via wp_enqueue_style().
 *
 * DO NOT add inline <style> blocks in hero-banner.php.
 * Edit this file for all banner appearance changes.
 *
 * Sections:
 *   1. Slider container
 *   2. Slide (each slide wrapper)
 *   3. Content container
 *   4. Text column (.chb-content / .chb-inner-content)
 *   5. Image column (.chb-image-wrapper)
 *   6. Nested gallery swiper + frame cards
 *   7. Person image
 *   8. Float animation
 *   9. Typography (subtitle, title, description)
 *  10. CTA button
 *  11. Swiper pagination
 *  12. Responsive breakpoints
 */


/* ─────────────────────────────────────────────────────────────────
   1. Slider container
   ───────────────────────────────────────────────────────────────── */
.chb-slider-container {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Reveal class added by JS after 1 s — banner fades in once CSS has loaded */
.chb-slider-container.chb-ready {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.4s ease;
}


/* ─────────────────────────────────────────────────────────────────
   2. Slide
   Each slide fills the viewport below the 156 px fixed header.
   ───────────────────────────────────────────────────────────────── */
.chb-slide {
    position: relative;
    width: 100%;
    height: calc(100vh - 156px);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #ffffff;
    font-family: inherit;
    overflow: hidden;
}

/* Soft left-to-right white vignette — improves text legibility over bg images */
.chb-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.15) 55%,
            rgba(255, 255, 255, 0) 100%);
    z-index: 1;
    pointer-events: none;
}


/* ─────────────────────────────────────────────────────────────────
   3. Content container
   Full-width flex row; sits above the ::before vignette.
   ───────────────────────────────────────────────────────────────── */
.chb-container {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 2;
    padding: 0px 30px;
}


/* ─────────────────────────────────────────────────────────────────
   4. Text column
   ───────────────────────────────────────────────────────────────── */

/* Outer centred wrapper — entrance animation */
.chb-content {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.swiper-slide-active .chb-content,
.chb-single-slide .chb-content {
    opacity: 1;
}

/* Inner wrapper — caps the text column width */
.chb-inner-content {
    max-width: 55%;
}


/* ─────────────────────────────────────────────────────────────────
   5. Image column
   Absolutely positioned on the right side of the slide.
   ───────────────────────────────────────────────────────────────── */
.chb-image-wrapper {
    position: absolute;
    right: 0;
    top: 0;
    width: 45%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    /* Fade left edge — prevents adjacent slides bleeding in from the left */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14%, black 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 14%, black 100%);
}

.swiper-slide-active .chb-image-wrapper,
.chb-single-slide .chb-image-wrapper {
    opacity: 1;
}


/* ─────────────────────────────────────────────────────────────────
   6. Nested gallery swiper + frame cards
   ───────────────────────────────────────────────────────────────── */

/* Swiper wrapper that holds the image carousel inside the image column */
.chb-nested-swiper {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    overflow: visible;
    /* allows card shadows to bleed outside */
}

.chb-nested-swiper .swiper-slide {
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Frame container — side (inactive) card: 220 × 340 */
.chb-frame-container {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 220px;
    height: 340px;
    transition: width 0.9s ease-in-out,
        height 0.9s ease-in-out;
}

/* Frame container — active (centre) card: 340 × 420 */
.chb-nested-swiper .swiper-slide-active .chb-frame-container {
    width: 340px;
    height: 420px;
}

/* Decorative gradient background blob — hidden on side cards */
.chb-frame-bg {
    position: absolute;
    right: -50px;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 90%;
    background: linear-gradient(270deg, #ffffff 41.06%, #FFB4FF 74.12%, #8B008B 100%);
    border-radius: 50px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.9s ease-in-out,
        height 0.9s ease-in-out,
        border-radius 0.9s ease-in-out;
}

.chb-nested-swiper .swiper-slide-active .chb-frame-bg {
    opacity: 1;
}

/* White rounded frame that contains the person image */
.chb-frame {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    background: #ffffff;
    border-radius: 40px;
    padding: 10px;
    box-sizing: border-box;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.9s ease-in-out,
        border-radius 0.9s ease-in-out;
}

.chb-nested-swiper .swiper-slide-active .chb-frame {
    border-radius: 50px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14);
}


/* ─────────────────────────────────────────────────────────────────
   7. Person image
   ───────────────────────────────────────────────────────────────── */
.chb-person {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 32px !important;
    /* slightly less than outer frame */
    margin: 0 !important;
    padding: 0 !important;
    transition: border-radius 0.9s ease-in-out;
}

.chb-nested-swiper .swiper-slide-active .chb-person {
    border-radius: 42px !important;
}


/* Section 8 (Float keyframe) removed — no bounce/float animations */


/* ─────────────────────────────────────────────────────────────────
   9. Typography
   ───────────────────────────────────────────────────────────────── */

/* Subtitle — small label above the main title */
.chb-subtitle {
    color: #666666;
    font-family: 'Satoshi font', sans-serif;
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: inline-block;
    border-left: 3px solid #810081;
    padding: 2px 0 2px 12px;
    line-height: 26px;
    background: #ffffff;
}

.chb-subtitle span {
    color: #810081;
    font-weight: 400;
}

.chb-subtitle .last-word-subtitle {
    color: #8B008B;
    font-weight: 400;
}

/* Main slide title */
.chb-title {
    color: #111111;
    font-family: 'Satoshi font', sans-serif;
    font-size: 46px;
    font-weight: 700;
    line-height: 54px;
    margin: 0 0 20px 0;
    letter-spacing: 0;
}

/* Highlighted keywords (countries, 'Visa', etc.) */
.chb-title span {
    color: #ee9a00;
    font-weight: 700;
}

/* Last word of title — slightly different gold */
.chb-title .last-word-title {
    color: #EB9201;
    font-weight: 700;
}

/* Body copy below the title */
.chb-description {
    color: #4a5568;
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 35px;
    max-width: 100%;
}

.chb-description p:last-child {
    margin-bottom: 0;
}


/* ─────────────────────────────────────────────────────────────────
   10. CTA buttons
   ───────────────────────────────────────────────────────────────── */

/* Flex row that holds primary + outline button side-by-side */
.chb-button-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

/* Primary solid button */
.chb-button {
    display: inline-block;
    background-color: #810081;
    color: #ffffff;
    font-weight: 500 !important;
    font-size: 15px;
    font-family: 'satoshi', sans-serif !important;
    padding: 14px 34px;
    border-radius: 50px;
    text-decoration: none;
    transition: background-color 0.3s ease,
        transform 0.3s cubic-bezier(0.25, 1, 0.5, 1),
        box-shadow 0.3s ease;
    box-shadow: 0 4px 14px rgba(129, 0, 129, 0.25);
}

.chb-button:hover {
    background-color: #6a006a;
    color: #ffffff;
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(129, 0, 129, 0.35);
}

/* Outline / ghost variant — shown when Button 2 URL is filled */
.chb-button--outline {
    background-color: transparent;
    color: #810081;
    border: 1px solid #FFB4FF;
    box-shadow: none;
    padding: 12px 32px;
    /* compensate 2px border to match solid height */
    font-family: 'satoshi', sans-serif !important;
    font-size: 15px;
    font-weight: 500 !important;
}

.chb-button--outline:hover {
    background-color: #810081;
    color: #ffffff;
    box-shadow: 0 8px 20px rgba(17, 15, 17, 0.25);
    transform: translateY(-3px);
}


/* ─────────────────────────────────────────────────────────────────
   11. Swiper pagination
   ───────────────────────────────────────────────────────────────── */

/* Absolutely positioned container centred at 1300px max-width */
.chb-pagination-container {
    position: absolute;
    top: 55%;
    left: 50%;
   /* transform: translate(-50%, -50%); */
    max-width: 1300px;
    width: 100%;
    z-index: 10;
    pointer-events: none;
}

/* Pagination dots strip — positioned below the text content */
.chb-swiper-pagination {
    position: absolute;
    top: 230px;
    left: 0;
    width: 100%;
    text-align: left;
    pointer-events: auto;
}

.chb-swiper-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #d3d3d3;
    opacity: 1;
    margin: 0 8px;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
    transition: all 0.3s ease;
}

.chb-swiper-pagination .swiper-pagination-bullet:first-child {
    margin-left: 0;
}

.chb-swiper-pagination .swiper-pagination-bullet-active {
    background: #810081;
    box-shadow: 0 0 0 4px #ffffff, 0 0 0 5px #810081;
}


/* ─────────────────────────────────────────────────────────────────
   12. Responsive breakpoints
   ───────────────────────────────────────────────────────────────── */

/* ── 1330px — large tablet / small desktop ── */

@media (max-width: 1380px) {
    .chb-swiper-pagination {
        top: 236px;
        left: 40px;
    }
}

/* ── 1200px — tablet landscape ── */
@media (max-width: 1200px) {
    .chb-slide {
        min-height: 580px;

    }

    .chb-container {
        padding: 0px 30px;
    }

    .chb-description {
        font-size: 15px;
    }
}

/* ── 1024px — tablet portrait: hide image, full-width text ── */
@media (max-width: 1024px) {
    .chb-image-wrapper {
        display: none !important;
    }

    .chb-container {
        padding: 0px 20px;
    }

    .chb-content {
        max-width: 100%;
        padding: 60px 0;
    }

    .chb-description {
        max-width: 100%;
    }

    .chb-inner-content {
        max-width: 86% !important;
    }
}

/* ── 768px — tablet portrait / large phones ── */
@media (max-width: 768px) {
    .chb-title {
        font-size: 36px;
        line-height: 1.2;
    }

    .chb-slide {
        height: 70vh;
        min-height: 50vh;

    }

    .chb-container {
        padding: 0px 16px;
    }

    .chb-content {
        padding: 60px 0px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    /* Image column drops to the bottom half of the slide */
    .chb-image-wrapper {
        width: 100%;
        height: 50%;
        top: auto;
        bottom: 0;
        justify-content: center;
        align-items: center;
        opacity: 0.35;
    }

    .chb-inner-content {
        max-width: 96%;
    }

    /* Gallery frame adjustments */
    .chb-frame-container {
        max-width: 80%;
    }

    .chb-frame-bg {
        display: none;
    }

    .chb-frame {
        padding: 8px;
        border-radius: 24px;
    }

    .chb-person {
        border-radius: 16px;
    }

    /* Pagination repositioned to bottom centre */
    .chb-pagination-container {
        top: 85%;
        bottom: 40px;
        transform: translateX(-50%);
        padding: 0 20px;
    }

    .chb-swiper-pagination {
        position: relative;
        top: auto;
        text-align: center;
    }
}

/* ── 480px — small phones ── */
@media (max-width: 480px) {
    .chb-slide {
        height: 70vh;
        min-height: 50vh;

    }

    .chb-subtitle {
        font-size: 11px;
        letter-spacing: 1px;
    }

    .chb-title {
        font-size: 32px !important;
        line-height: 42px !important;
    }

    .chb-description {
        font-size: 14px;
        margin-bottom: 24px;
        padding: 0 !important;
    }

    .chb-button {
        font-size: 14px;
        padding: 11px 26px;
    }

    .chb-button--outline {
        padding: 9px 24px;
    }

    .chb-pagination-container {
        top: 90% !important;
        left: 50% !important;
    }

    .chb-inner-content {
        max-width: 100% !important;
    }
}