/* ============================================================================
   RESPONSIVE REFINEMENT LAYER
   Loaded last on every page. Hardens against horizontal overflow and tunes
   layout, type, and spacing for real phones (small and very small screens).
   Covers both the main site (.bd-*) and the blog detail pages (.bp-*).
   ========================================================================== */

/* ---- Author photo avatars (blog pages) fill their circle ------------- */
.bp-author .av, .bp-side-author .av { object-fit: cover; padding: 0; }

/* ---- Overflow + media safety (all screens) --------------------------- */
html, body { overflow-x: hidden; max-width: 100%; }
*, *::before, *::after { min-width: 0; }
img, svg, video, iframe { max-width: 100%; height: auto; }
table { max-width: 100%; display: block; overflow-x: auto; }
h1, h2, h3, h4, h5, h6, p, li, a, span, blockquote, label, strong {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ====================================================================== */
/*  MAIN SITE PAGES                                                        */
/* ====================================================================== */

/* ---- Tablets and small laptops (<= 991px) ---------------------------- */
@media (max-width: 991px) {
    .bd-hero-grid { gap: 34px !important; }
    .bd-hero-facts { gap: 14px !important; }
}

/* ---- Phones (<= 575px) ----------------------------------------------- */
@media (max-width: 575px) {
    .container { padding-left: 18px !important; padding-right: 18px !important; }

    /* hero */
    .bd-hero-tag { white-space: normal !important; line-height: 1.4; text-align: left; height: auto !important; }
    .bd-hero-left h1 { font-size: 29px !important; line-height: 1.2 !important; }
    .bd-hero-sub { font-size: 14.5px !important; }
    .bd-hero-cta { flex-direction: column; align-items: stretch; gap: 12px; }
    .bd-hero-cta a { width: 100%; justify-content: center; }
    .bd-hero-facts { grid-template-columns: repeat(3, 1fr); gap: 10px !important; }
    .bd-hero-facts .fact-num, .bd-hero-facts .fact h4 { font-size: 22px !important; }
    .bd-hero-facts .fact-label, .bd-hero-facts .fact span { font-size: 10px !important; }
    .bd-hero-form-card { padding: 22px 18px !important; }

    /* section headings */
    .bd-section-title { font-size: 24px !important; line-height: 1.28 !important; }
    .bd-section-title br, .bd-hero-sub br, .bd-section-title-wrapper p br { display: none; }
    .bd-section-title-wrapper p { font-size: 14.5px !important; }

    /* cards: comfortable padding + spacing */
    .bd-service, .bd-blog, .bd-portfolio, .bd-process-step, .bd-why-card,
    .bd-venture-card, .bd-info-card, .bd-contact-form { padding: 22px 20px !important; }
    .bd-service { margin-bottom: 16px; }

    /* new homepage blocks stack cleanly */
    .bd-process-grid, .bd-why-grid, .bd-ventures, .bd-ventures-compact, .bd-roles-mini {
        grid-template-columns: 1fr !important;
    }
    .bd-cta-inner { flex-direction: column; align-items: flex-start; padding: 30px 22px !important; }
    .bd-cta-actions { width: 100%; }
    .bd-cta-actions a, .bd-cta-actions .theme-btn-rounded, .bd-cta-actions .theme-btn-ghost {
        width: 100%; justify-content: center;
    }

    /* page banners on inner pages */
    .bd-page-banner-title { font-size: 28px !important; line-height: 1.2 !important; }
    .bd-page-banner-sub { font-size: 14px !important; }

    /* contact + footer breathing room */
    .bd-footer-widget { margin-bottom: 26px !important; }
}

/* ---- Very small phones (<= 380px) ------------------------------------ */
@media (max-width: 380px) {
    .bd-hero-left h1 { font-size: 26px !important; }
    .bd-section-title { font-size: 22px !important; }
    .bd-hero-facts { grid-template-columns: 1fr 1fr; }
    .bd-hero-facts .fact:last-child { grid-column: 1 / -1; }
    .vs-logo-sub { font-size: 7.5px !important; }
}

/* ====================================================================== */
/*  BLOG DETAIL PAGES (.bp-*)                                              */
/* ====================================================================== */
@media (max-width: 600px) {
    .bp-hero { padding: 40px 0 32px; }
    .bp-hero h1 { font-size: 26px; line-height: 1.22; }
    .bp-crumb { font-size: 12px; }
    .bp-meta { gap: 12px 18px; font-size: 12.5px; }
    .bp-wrap { padding: 38px 0 50px; }
    .bp-figure { margin-bottom: 26px; border-radius: 10px; }
    .bp-lead { font-size: 17px; }
    .bp-article h2 { font-size: 21px; margin-top: 28px; }
    .bp-article p, .bp-checklist li { font-size: 15.5px; }
    .bp-ctabox { padding: 22px 20px; }
    .bp-ctabox a { width: 100%; justify-content: center; }
    .bp-author { flex-direction: column; gap: 14px; padding: 22px 20px; }
    .bp-footer .row { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (max-width: 440px) {
    .bp-nav { height: 64px; gap: 10px; }
    .bp-logo .mk { width: 38px; height: 38px; font-size: 15px; }
    .bp-logo .nm b { font-size: 13.5px; letter-spacing: 1.5px; }
    .bp-logo .nm span { font-size: 8px; }
    .bp-cta { padding: 9px 14px; font-size: 12.5px; }
    .bp-hero h1 { font-size: 23px; }
}