/* Helpers for CMS page-builder sections (loaded after the theme stylesheet). */

/* A section that visually continues the previous one: drop its top padding. */
.section-continued > .container-xxl {
    padding-top: 0 !important;
}

/* Rich text / article content. */
.blog-article { font-size: 1.0625rem; line-height: 1.8; }
.blog-article h2 { margin-top: 2.5rem; margin-bottom: 1rem; font-size: clamp(1.4rem, 3vw, 1.85rem); }
.blog-article li { margin-bottom: .5rem; }
.blog-article address { font-style: normal; }
.blog-article a:not(.btn) { text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }

/* Default call-to-action box when a page has no custom colour class. */
.cta-primary {
    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
    color: white;
    border-radius: 20px;
    padding: 50px;
}

/* Spacing for the generic text + media card layout. */
.split-content .btn { margin-top: .5rem; }
/* Image card: on phones (when shown) the image sits above the text as a banner. */
@media (max-width: 991.98px) { .image-card-media { min-height: 240px; } }

/* White feature card with a lift on hover (website solution pages). */
.solution-card {
    background: #fff;
    border-radius: 14px;
    padding: 28px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .06);
    transition: transform .3s ease, box-shadow .3s ease;
}
.solution-card:hover { transform: translateY(-6px); box-shadow: 0 14px 34px rgba(0, 0, 0, .12); }
@media (prefers-reduced-motion: reduce) {
    .solution-card { transition: none; }
    .solution-card:hover { transform: none; }
}

/* FAQ block that follows an article: match the article column width. */
@media (min-width: 992px) {
    .blog-article-faq > .container-xxl > .container { max-width: 900px; }
}
.blog-article-faq h3 { font-size: 1.25rem; }

/* ==========================================================================
   Small screens: keep every layout inside the viewport down to 320px.
   ========================================================================== */

/* Long breadcrumb labels and contact details must be able to wrap. */
.page-header .breadcrumb { flex-wrap: wrap; row-gap: .5rem; }
.page-header .breadcrumb-item.active { white-space: normal; max-width: 100%; }
.cms-contact-item { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 575.98px) {
    /* The theme's generous 3rem padding leaves almost no room for text on phones. */
    .p-5 { padding: 1.5rem !important; }
    .px-5 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
    .service-item .service-text { padding: 1.25rem 1rem !important; }

    /* Coloured call-to-action boxes (cta-crm, cta-social, ...). */
    [class^="cta-"], [class*=" cta-"] { padding: 2rem 1.25rem !important; border-radius: 14px; }

    .btn-lg { padding: .65rem 1.25rem; font-size: 1rem; }
    .page-header h1 { font-size: calc(1.6rem + 2.5vw); }
}

@media (max-width: 399.98px) {
    /* Two service tiles per row is too tight on the smallest phones: stack them. */
    .row > .col-6:has(> .service-item) { flex: 0 0 100%; max-width: 100%; }

    .feature-item { padding: 1.5rem 1rem !important; }
    .feature-item h5, .feature-item .h5 { font-size: 1rem; }

    .display-5 { font-size: calc(1.3rem + 2.5vw); }
    .display-6 { font-size: calc(1.2rem + 2vw); }
}

/* ==========================================================================
   Mobile spacing: the theme uses desktop spacing (3rem) everywhere, which
   stacks into 100px+ gaps on phones. Tighten it below 576px.
   ========================================================================== */
@media (max-width: 575.98px) {
    /* Section padding (container-xxl py-5 > container ...). */
    .py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .pt-5 { padding-top: 1.5rem !important; }
    .pb-5 { padding-bottom: 1.5rem !important; }
    .my-5 { margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; }
    .mt-5 { margin-top: 1.5rem !important; }
    .mb-5 { margin-bottom: 1.5rem !important; }
    .mb-4 { margin-bottom: 1.25rem !important; }

    /* Sections inside sections: don't double the padding. */
    .container-xxl.py-5 > .container.py-5,
    .container-fluid.py-5 > .container.py-5 { padding-top: 0 !important; padding-bottom: 0 !important; }

    /* Gaps between stacked columns. */
    .g-5, .gx-5 { --bs-gutter-x: 1.5rem; }
    .g-5, .gy-5 { --bs-gutter-y: 1.5rem; }
    .g-4, .gy-4 { --bs-gutter-y: 1.25rem; }

    /* Page header banner. */
    .page-header { padding-top: 2rem !important; padding-bottom: 2rem !important; }
    .page-header h1 { margin-bottom: .75rem !important; }
    .page-header p:last-child { margin-bottom: 0 !important; }

    /* Footer. */
    .footer { margin-top: 0 !important; }
    .footer .row.g-5 { --bs-gutter-y: 2rem; }
    .copyright { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }

    /* Cards and carousels. */
    .testimonial-item { padding: 1.5rem !important; margin-bottom: 1rem !important; }
    .project-item { margin-bottom: 1rem !important; }
    .project-item .p-4 { padding: 1.25rem !important; }
    .card-body.p-4, .p-4 { padding: 1.25rem !important; }
    .about .bg-white { margin-top: 0 !important; }

    /* The About block's empty column only reveals the background drawing. */
    .about-spacer { display: none !important; }
    .about.my-5 { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .about { background-position: center top !important; }

    /* Feature cards from the page styles use 25-30px padding; with the gap
       between stacked cards that left ~100px of empty space per card. */
    .crm-feature-card, .social-feature-card, .seo-feature-card, .design-feature-card,
    .media-feature-card, .why-card, .stats-card, .industry-card, .process-step,
    .testimonial-box, .achievement-card, .result-card, .timeframe-card, .budget-card,
    .myth-reality-card, .service-highlight, .partner-logo, .solution-card {
        padding: 1.25rem !important;
    }
    .myth-reality-card, .timeframe-card, .budget-card { margin-bottom: 0 !important; }
    .stats-card .number { font-size: 2.25rem; }

    /* Case-study metric tiles add a 10px margin on top of the grid gap. */
    .project-metric, .education-metric, .fitness-metric, .security-metric, .result-metric {
        margin: 0 !important;
        padding: .9rem !important;
    }
    .result-metric + .result-metric { margin-top: .75rem !important; }
    .process-step::after { display: none; }
    .feature-icon, .service-icon, .option-icon, .industry-icon, .platform-icon { margin-bottom: 1rem !important; }

    /* Carousel arrows sit above the carousel on desktop; on phones put them
       underneath so they never collide with the section heading. */
    .project-carousel .owl-nav,
    .testimonial-carousel .owl-nav {
        position: static;
        transform: none;
        justify-content: center;
        margin: -.5rem 0 .5rem;
    }
    .project-carousel .owl-nav .owl-prev,
    .project-carousel .owl-nav .owl-next,
    .testimonial-carousel .owl-nav .owl-prev,
    .testimonial-carousel .owl-nav .owl-next { margin: 0 .5rem; }

    /* ...and drop the space the heading kept free for them. */
    div:has(+ .project-carousel),
    div:has(+ .testimonial-carousel) { padding-bottom: 0 !important; }

    /* Floating badges on intro images/previews: smaller so they don't cover the content. */
    .position-relative > .position-absolute.p-3 { padding: .5rem .75rem !important; margin: .5rem !important; }
    .position-relative > .position-absolute .h4 { font-size: 1rem; }
    .position-relative > .position-absolute .fa-2x { font-size: 1.4em; }
    .dashboard-preview { height: 240px !important; align-items: flex-start !important; padding-top: 1.75rem; }

    /* Lead paragraphs read better slightly smaller on phones. */
    .lead { font-size: 1.1rem; }
}

/* Carousels with fewer items than slots don't loop; centre the real items instead. */
.owl-carousel.owl-static .owl-stage { margin: 0 auto; }