/* =============================================================================
   Contact Button Section
   Versions: --light | --dark | --light-inline

   HTML structure:
   .contact-btn-section.section.contact-btn-section--[version]
     .container
       .contact-btn-section__buttons
         a.btn | a.btn.transparent-blue | a.btn.transparent-blur | a.btn.blue-btn
           <svg>...</svg>
           "Call" (text)

   Designs:
   - light        : separated rounded buttons on off-white background, icon + label
   - dark         : separated rounded buttons on dark background, icon + label
   - light-inline : fused pill strip (no gaps, shared border) on off-white, icon + label
                    Mobile for all: single column, icon-only square buttons
   ============================================================================= */


/* =============================================================================
   SHARED BASE
   ============================================================================= */

.contact-btn-section {
    background-size: cover;
    background-repeat: no-repeat;
}

/* All versions share the same flex row of buttons */
.contact-btn-section .contact-btn-section__buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
}

/* Every button: same height, flexible width, icon + label row */
.contact-btn-section .contact-btn-section__buttons .btn {
    flex: 1;
    max-width: 340px;
    height: 56px;
    padding: 14px 24px;
    gap: 10px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

/* SVG icon inside buttons — control size here only */
.contact-btn-section .contact-btn-section__buttons .btn svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

/* img fallback icon */
.contact-btn-section .contact-btn-section__buttons .btn img {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    object-fit: contain;
}

.contact-btn-section .btn.white-blue:hover {
    color: #2A3E49;
}


/* =============================================================================
   LIGHT VERSION  (.contact-btn-section--light)
   Off-white noise background, separated buttons
   Call = yellow (.btn), others = transparent-blue outline
   ============================================================================= */

.contact-btn-section--light {
    background-color: #F4F5F3;
    background-image: url("../../images/background_noise_white.webp");
    background-repeat: repeat;
}

/* Light version: outline buttons keep dark border/text */
.contact-btn-section--light .btn.transparent-blue {
    border-color: #2A3E49;
    color: #2A3E49;
}

.contact-btn-section--light .btn.transparent-blue:hover {
    border-color: #53707F;
    color: #53707F;
}


/* =============================================================================
   DARK VERSION  (.contact-btn-section--dark)
   Dark blue background, separated buttons
   Call = yellow, others = white outline (transparent-blur)
   ============================================================================= */

.contact-btn-section--dark {
    background-color: #2A3E49;
    background-image: url("../../images/background_big_blue_2.webp");
    background-size: cover;
    background-repeat: no-repeat;
}

/* Dark version: outline buttons become white-bordered */
.contact-btn-section--dark .btn.transparent-blue,
.contact-btn-section--dark .btn.transparent-blur {
    border-color: rgba(255, 255, 255, 0.7);
    color: #FFFFFF;
    background-color: transparent;
}

.contact-btn-section--dark .btn.transparent-blue:hover,
.contact-btn-section--dark .btn.transparent-blur:hover {
    border-color: #F4CA35;
    color: #F4CA35;
}

/* SVG icons should be white on dark bg for outline buttons */
.contact-btn-section--dark .btn.transparent-blue svg,
.contact-btn-section--dark .btn.transparent-blue img,
.contact-btn-section--dark .btn.transparent-blur svg,
.contact-btn-section--dark .btn.transparent-blur img {
    filter: brightness(0) invert(1);
}

.contact-btn-section--dark .btn.transparent-blue:hover svg,
.contact-btn-section--dark .btn.transparent-blue:hover img {
    filter: none;
}
.contact-btn-section--dark .btn.transparent-blur:hover svg path {
    fill: #F4CA35;
}

/* =============================================================================
   LIGHT-INLINE VERSION  (.contact-btn-section--light-inline)
   Off-white background, buttons fused into a single pill strip
   No individual border-radius on inner edges, shared 1px dividers
   ============================================================================= */

.contact-btn-section--light-inline {
    background-color: #F4F5F3;
    background-image: url("../../images/background_noise_white.webp");
    background-repeat: repeat;
}

/* Wrapper: becomes a single fused pill */
.contact-btn-section--light-inline .contact-btn-section__buttons {
    gap: 0;
    border: 1.5px solid #CACFD7;
    border-radius: 10px;
    overflow: hidden;
    max-width: 100%;
    display: inline-flex;
    width: 100%;
}

/* All buttons inside inline strip */
.contact-btn-section--light-inline .contact-btn-section__buttons .btn {
    flex: 1;
    max-width: none;
    border-radius: 0;
    border: none;
    border-right: 1.5px solid #CACFD7;
    background-color: #FFFFFF;
    color: #2A3E49;
    height: 56px;
}

/* Last button — no right divider */
.contact-btn-section--light-inline .contact-btn-section__buttons .btn:last-child {
    border-right: none;
}

/* First button (Call) = yellow, no right-border override needed */
.contact-btn-section--light-inline .contact-btn-section__buttons .btn:first-child {
    background-color: #F4CA35;
    color: #2A3E49;
    border-right: 1.5px solid #CACFD7;
}

.contact-btn-section--light-inline .contact-btn-section__buttons .btn:first-child:hover {
    background-color: #FDDE71;
}

/* Hover for outline/white buttons in inline strip */
.contact-btn-section--light-inline .contact-btn-section__buttons .btn:not(:first-child):hover {
    background-color: #F4F5F3;
}

/* Reset transparent-blue inside inline strip */
.contact-btn-section--light-inline .contact-btn-section__buttons .btn.transparent-blue {
    background-color: #FFFFFF;
    border-color: transparent;
    color: #2A3E49;
}

.contact-btn-section--light-inline .contact-btn-section__buttons .btn.transparent-blue:hover {
    background-color: #F4F5F3;
    color: #2A3E49;
}


/* =============================================================================
   RESPONSIVE — Tablet  (≤ 768px)
   Shrink button text, reduce padding
   ============================================================================= */
@media (max-width: 768px) {
    .contact-btn-section .contact-btn-section__buttons .btn {
        height: 52px;
        padding: 12px 16px;
        font-size: 15px;
        gap: 8px;
    }

    /* Break inline strip wrapper overflow on tablet */
    .contact-btn-section--light-inline .contact-btn-section__buttons {
        width: 100%;
    }
}


/* =============================================================================
   RESPONSIVE — Mobile  (≤ 576px)
   All versions: vertical stacked column, icon-only square buttons (no label)
   Frame_782 / Frame_783: 4 tall square cards in a column
   ============================================================================= */
@media (max-width: 576px) {

    /* Stack vertically */
    .contact-btn-section .contact-btn-section__buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
        width: 100%;
    }

    /* Square icon-only cards */
    .contact-btn-section .contact-btn-section__buttons .btn {
        flex: none;
        width: 100%;
        max-width: 100%;
        height: 48px;
        border-radius: 12px;
        justify-content: center;
        padding: 0;
        gap: 8px;
        font-size: 16px;
        line-height: 100%;
        font-weight: 700;
        color: #2A3E49;
    }

    /* Icon grows on mobile */
    .contact-btn-section .contact-btn-section__buttons .btn svg {
        width: 36px;
        height: 36px;
        color: #2A3E49;
    }

    .contact-btn-section .contact-btn-section__buttons .btn img {
        width: 36px;
        height: 36px;
    }

    /* Yellow call button icon stays dark */
    .contact-btn-section .contact-btn-section__buttons .btn:first-child svg {
        color: #2A3E49;
    }

    /* Dark version: restore white icon color for outline buttons */
    .contact-btn-section--dark .contact-btn-section__buttons .btn.transparent-blue svg,
    .contact-btn-section--dark .contact-btn-section__buttons .btn.transparent-blur svg {
        color: #FFFFFF;
        filter: brightness(0) invert(1);
    }

    /* ── light-inline mobile: break out of fused strip back to separate cards ── */
    .contact-btn-section--light-inline .contact-btn-section__buttons {
        flex-direction: column;
        border: none;
        border-radius: 0;
        overflow: visible;
        background: transparent;
        gap: 24px;
    }

    .contact-btn-section--light-inline .contact-btn-section__buttons .btn {
        border-radius: 12px;
        border: 1.5px solid #CACFD7;
        background-color: #FFFFFF;
        color: #2A3E49 !important;
        font-size: 16px;
        height: 46px;
    }

    .contact-btn-section--light-inline .contact-btn-section__buttons .btn:first-child {
        background-color: #F4CA35;
        border-color: #F4CA35;
    }

    .contact-btn-section--light-inline .contact-btn-section__buttons .btn.transparent-blue {
        background-color: #FFFFFF;
        border-color: #CACFD7;
    }
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJjb250YWN0LWJ1dHRvbi1zZWN0aW9uLmNzcyIsInNvdXJjZXNDb250ZW50IjpbXX0= */