/* ==========================================================
   PROACTT – targeted fixes
   Save as: assets/css/proactt-fixes.css
   Sections 1 & 2 = desktop/tablet (UNCHANGED).
   Section 3      = MOBILE ONLY (<= 767px). Desktop is not touched.
   Mobile hero image: assets/Proactt_Home Page Image_vertical.png
   (space in the file name is written as %20 in the url()).
   ========================================================== */

/* ---------- 1. CLIENT LOGOS – larger (unchanged) ---------- */
.proactt-partner-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
.proactt-partner-logo,
.proactt-partner-logo:nth-child(2n),
.proactt-partner-logo:nth-child(3n),
.proactt-partner-logo:nth-child(5n) {
    height: 170px !important;
    min-height: 170px !important;
    padding: 14px 18px !important;
    border-right: 1px solid rgba(33, 0, 75, .10) !important;
}
.proactt-partner-logo:nth-child(4n) { border-right: 0 !important; }

.proactt-partner-logo img {
    width: 100% !important;
    height: 130px !important;
    max-width: 260px !important;
    max-height: 130px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    object-fit: contain !important;
    object-position: center !important;
}

@media (max-width: 991px) {
    .proactt-partner-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .proactt-partner-logo,
    .proactt-partner-logo:nth-child(4n),
    .proactt-partner-logo:nth-child(5n) {
        height: 150px !important; min-height: 150px !important;
        border-right: 1px solid rgba(33, 0, 75, .10) !important;
    }
    .proactt-partner-logo:nth-child(3n) { border-right: 0 !important; }
    .proactt-partner-logo img { height: 115px !important; max-height: 115px !important; max-width: 220px !important; }
}

/* ---------- 2. HEADER LOGO – desktop & tablet (unchanged) ---------- */
.as-header-1-logo.proactt-site-logo { width: 300px !important; }
.as-header-1-logo.proactt-site-logo img { max-width: 300px !important; width: 100% !important; }
@media (max-width: 991px) {
    .as-header-1-logo.proactt-site-logo { width: 240px !important; }
    .as-header-1-logo.proactt-site-logo img { max-width: 240px !important; }
}

/* ==========================================================
   3. MOBILE ONLY (<= 767px)
   ========================================================== */
@media (max-width: 767px) {

    /* Tweak these two numbers to fine-tune the header:
       --m-h        = height shared by logo, "Connect with Us" button and menu button
       --m-logo-top = vertical position of the logo (aligns it with the button) */
    html body {
        --m-h: 38px;
        --m-logo-top: 44px;
    }

    /* ---------- HEADER ---------- */
    /* Logo: bigger, and exactly the same height as the button */
    html body .as-header-1-logo.proactt-site-logo {
        position: absolute !important;
        left: 14px !important;
        top: var(--m-logo-top) !important;
        width: auto !important;
        height: var(--m-h) !important;
        max-width: calc(100vw - 250px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        z-index: 50 !important;
    }
    html body .as-header-1-logo.proactt-site-logo img {
        height: var(--m-h) !important;
        width: auto !important;
        max-width: calc(100vw - 250px) !important;
        object-fit: contain !important;
        object-position: left center !important;
        display: block !important;
    }

    /* "Connect with Us" button: compact, same height as logo */
    html body .as-header-1-action-link .as-pr-btn-1 {
        height: var(--m-h) !important;
        min-height: 0 !important;
        padding: 0 14px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        line-height: 1 !important;
        font-size: 13px !important;
        border-radius: 8px !important;
    }
    html body .as-header-1-action-link .as-pr-btn-1 .text,
    html body .as-header-1-action-link .as-pr-btn-1 span {
        font-size: 13px !important;
        line-height: 1 !important;
    }
    html body .as-header-1-action-link .sr-offcanvas-btn-1 {
        width: var(--m-h) !important;
        height: var(--m-h) !important;
        padding: 0 !important;
        font-size: 16px !important;
    }

    /* ---------- HERO ---------- */
    /* Vertical mobile image as the hero background (desktop image NOT used) */
    html body .as-hero-1-area {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        position: relative !important;
        min-height: 640px !important;
        padding: 130px 0 40px !important;
        overflow: hidden !important;
        background-color: #21004B !important;
        background-image: url("../Proactt_Home%20Page%20Image_vertical.png") !important;
        background-size: cover !important;
        background-position: center top !important;
        background-repeat: no-repeat !important;
    }
    html body .as-hero-1-area::before,
    html body .as-hero-1-area::after { display: none !important; content: none !important; }
    html body .as-hero-1-area > .container { width: 100% !important; }

    html body .as-hero-1-bg-color,
    html body .as-hero-1-marquee,
    html body .as-hero-1-img,
    html body .as-hero-1-copyright-bg-shape { display: none !important; }

    /* Everything stacked and centred */
    html body .as-hero-1-wrap {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0 !important;
    }
    html body .as-hero-1-right { order: 1 !important; }
    html body .as-hero-1-left  { order: 2 !important; margin-top: 14px !important; }

    html body .as-hero-1-left,
    html body .as-hero-1-right,
    html body .as-hero-1-content,
    html body .as-hero-1-content-inner {
        position: static !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        text-align: center !important;
    }

    html body .as-hero-1-content .hero-title {
        color: #fff !important;
        text-align: center !important;
        font-size: clamp(26px, 8vw, 36px) !important;
        line-height: 1.05 !important;
        max-width: 100% !important;
        margin: 0 0 16px !important;
        overflow-wrap: break-word !important;
    }

    /* Smaller email box, centred */
    html body .as-hero-1-content-box {
        transform: none !important;
        width: min(80%, 280px) !important;
        max-width: 280px !important;
        margin: 0 auto 14px !important;
        padding: 16px 14px !important;
        border-width: 2px !important;
        border-radius: 20px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        text-align: center !important;
    }
    html body .as-hero-1-content-box .box-title {
        font-size: 14px !important;
        line-height: 1.25 !important;
        margin: 0 !important;
        text-align: center !important;
    }
    html body .as-hero-1-content-box .as-pr-btn-1-v2 {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        width: auto !important;
        padding: 8px 12px !important;
        font-size: 12px !important;
        margin: 0 auto !important;
    }
    html body .as-hero-1-content-box .as-pr-btn-1-v2 .text { font-size: 12px !important; }
    html body .as-hero-1-content-box .as-pr-btn-1-v2 .icon svg {
        width: 20px !important;
        height: 20px !important;
    }
    html body .as-hero-1-content-box .box-address {
        font-size: 12px !important;
        margin: 0 !important;
        text-align: center !important;
    }

    /* "Customer Success" centred */
    html body .as-hero-1-content .guaranteed {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: normal !important;
        width: 100% !important;
        margin: 4px auto 0 !important;
        font-size: 20px !important;
        text-align: center !important;
        color: #fff !important;
    }

    html body .as-hero-1-copyright-bg,
    html body .as-hero-1-copyright {
        writing-mode: horizontal-tb !important;
        position: static !important;
        font-size: 14px !important;
        transform: none !important;
        text-align: center !important;
        color: #fff !important;
    }

    /* ---------- CLIENT LOGOS: 2 columns, every box bordered & connected ---------- */
    html body .proactt-partner-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        grid-auto-rows: 110px !important;
        gap: 0 !important;
        border-top: 1px solid rgba(33, 0, 75, .28) !important;
        border-left: 1px solid rgba(33, 0, 75, .28) !important;
        background: #fff !important;
    }
    html body .proactt-partner-grid .proactt-partner-logo {
        box-sizing: border-box !important;
        height: 110px !important;
        min-height: 0 !important;
        padding: 10px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        overflow: hidden !important;
        background: #fff !important;
        border-right: 1px solid rgba(33, 0, 75, .28) !important;
        border-bottom: 1px solid rgba(33, 0, 75, .28) !important;
    }
    /* last box alone on its row -> stretch full width so there is no gap */
    html body .proactt-partner-grid .proactt-partner-logo:last-child:nth-child(odd) {
        grid-column: 1 / -1 !important;
    }
    html body .proactt-partner-grid .proactt-partner-logo img {
        width: 100% !important;
        max-width: 150px !important;
        height: 80px !important;
        max-height: 80px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 auto !important;
        object-fit: contain !important;
        object-position: center !important;
        display: block !important;
    }
}

/* Very small phones */
@media (max-width: 400px) {
    html body {
        --m-h: 34px;
        --m-logo-top: 46px;
    }
    html body .as-header-1-action-link .as-pr-btn-1,
    html body .as-header-1-action-link .as-pr-btn-1 .text,
    html body .as-header-1-action-link .as-pr-btn-1 span { font-size: 12px !important; }
    html body .as-header-1-logo.proactt-site-logo,
    html body .as-header-1-logo.proactt-site-logo img { max-width: calc(100vw - 225px) !important; }
}