/* ============================================================
   SNUG custom responsive adjustments
   Loaded AFTER style.css so it can refine the inline-styled
   sections added during the 2026 content refresh. These
   sections use inline styles (no media queries of their own),
   so we target them here by class and by inline-style fragments
   to tighten padding and type on small screens.
   ============================================================ */

/* ---------- Tablet / small-desktop ---------- */
@media (max-width: 768px) {
    /* Large gradient / feature panels (carousel slides, Snugdesk/Avaya blocks) */
    .snug-slide,
    [style*="padding: 48px 44px"],
    [style*="padding: 48px 40px"] { padding: 30px 24px !important; }

    /* Avaya featured card and similar 40px panels */
    [style*="padding: 40px"] { padding: 28px 22px !important; }

    /* Content cards */
    [style*="padding: 30px 26px"],
    [style*="padding: 32px 26px"] { padding: 26px 22px !important; }

    /* Dark stat bands */
    [style*="padding: 38px 28px"],
    [style*="padding: 34px 28px"] { padding: 28px 18px !important; }

    /* Oversized inline section headings scale down */
    .snug-slide h2 { font-size: 24px !important; line-height: 1.25 !important; }
}

/* ---------- Uniform page gutters + heading hierarchy (mobile) ---------- */
@media (max-width: 768px) {
    /* Consistent left/right gutter for all inner-page content, so nothing
       hugs the screen edge (headings, paragraphs, cards and panels). */
    .about__snug__inner__container {
        padding-left: 22px !important;
        padding-right: 22px !important;
    }

    /* The page hero should clearly dominate its section headings below it. */
    .intro h1.inner_page_heading,
    .intro h1.text--h1-main {
        font-size: 33px !important;
        line-height: 1.18 !important;
    }
    /* Hero subtitle a little larger so it doesn't read as tiny. */
    .intro .text--h3-large {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }
    /* Large intro/body paragraphs eased down so they don't overpower the hero. */
    .big__text__heading,
    .big__text__heading_inner {
        font-size: 17px !important;
        line-height: 1.55 !important;
    }
}

/* ---------- Phones ---------- */
@media (max-width: 560px) {
    .intro h1.inner_page_heading,
    .intro h1.text--h1-main { font-size: 30px !important; }

    .snug-slide,
    [style*="padding: 48px 44px"],
    [style*="padding: 48px 40px"] { padding: 26px 20px !important; }

    [style*="padding: 40px"] { padding: 24px 18px !important; }

    /* Trim tall section vertical padding so the page feels less sparse */
    [style*="padding: 60px 0"] { padding-top: 40px !important; padding-bottom: 26px !important; }
    [style*="padding: 56px 0"] { padding-top: 40px !important; padding-bottom: 36px !important; }
    [style*="padding: 60px 0 30px"] { padding-bottom: 20px !important; }

    /* Carousel controls sit a little closer on phones */
    .snug-carousel__prev,
    .snug-carousel__next { width: 38px !important; height: 38px !important; }

    /* Snugdesk / carousel slide heading */
    .snug-slide h2 { font-size: 22px !important; }
    .snug-slide p { font-size: 15px !important; }
}

/* ---------- Contact us CTA button (header) ----------
   The header is transparent over the hero at the top of the page (it carries
   the .ui-header class). As you scroll, the scroll script removes .ui-header
   and the bar turns white (.header--fixed-top / .header--fixed-free).
   So we key the button colour on that state:
     • transparent header (top / .ui-header) -> WHITE text + WHITE border
     • white header (scrolled / no .ui-header) -> RED text + RED border
     • hover, in BOTH states                  -> RED fill + WHITE text
   A submenu open (.header--expanded) also turns the bar white, so it is
   excluded from the transparent (white-outline) rule. */
.cta-contact {
    display: inline-block;
    padding: 8px 22px;
    line-height: 1;
    vertical-align: middle;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border: 2px solid;
    background-color: transparent !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* Default (white header state) -> red outline */
a.btn--link-primary b.cta-contact {
    color: #ed1f23 !important;
    border-color: #ed1f23 !important;
    background-color: transparent !important;
}

/* Transparent header at the top of the hero -> white outline */
.header.ui-header:not(.header--expanded) a.btn--link-primary b.cta-contact {
    color: #fff !important;
    border-color: #fff !important;
}

/* Hover, white header state -> red fill, white text, red border */
.header a.btn--link-primary:hover b.cta-contact {
    color: #fff !important;
    background-color: #ed1f23 !important;
    border-color: #ed1f23 !important;
}

/* Hover, transparent header state -> same red fill, white text, red border */
.header.ui-header:not(.header--expanded) a.btn--link-primary:hover b.cta-contact {
    color: #fff !important;
    background-color: #ed1f23 !important;
    border-color: #ed1f23 !important;
}