/* ==========================================================================
   AI BARBER – Responsive Stylesheet (Mobile First Breakpoints)
   Prefix: bab_
   Breakpoints:
     - 1199px  (laptops / small desktops)
     - 991px   (tablets landscape)
     - 767px   (tablets portrait)
     - 575px   (mobile)
   ========================================================================== */

/* ------------------------------------------------- Large Desktop ≤ 1199px */
@media (max-width: 1199.98px) {
    :root { --bab_container: 992px; }

    .bab_section { padding: 90px 0; }

    .bab_float_analytics { left: -10px; width: 200px; }
    .bab_float_beard { right: -10px; width: 190px; }

    .bab_bento { gap: 18px; }
    .bab_bento_card { padding: 26px; }

    .bab_team_grid { grid-template-columns: repeat(2, 1fr); }

    .bab_dash_body { grid-template-columns: repeat(2, 1fr); }

    /* hamburger + stacked hero from large-tablet / small-laptop down,
       so the nav and the split banner are never cramped (~1024 etc.) */
    .bab_menu,
    .bab_nav_actions .bab_btn_outline { display: none; }
    .bab_menu_toggle { display: flex; }

    .bab_hero_split { padding: 150px 0 100px; }
    .bab_hero_split_grid { grid-template-columns: 1fr; gap: 54px; text-align: center; }
    .bab_hero_split .bab_h1 { font-size: clamp(2.2rem, 5.6vw, 4rem); }
    .bab_hero_split .bab_h1 .bab_text_gradient { display: inline; }
    .bab_hero_split .bab_hero_content { text-align: center; }
    .bab_hero_split .bab_hero_content .bab_lead { margin-left: auto; margin-right: auto; }
    .bab_hero_split .bab_hero_cta { justify-content: center; }
    .bab_hero_split .bab_hero_proof { margin: 0 auto; justify-content: center; }
    .bab_hero_visual { max-width: 520px; margin: 0 auto; }
    /* frame the figure: one card left, two right — kept inside the visual */
    .bab_sf_1 { top: 4%;   right: 0; left: auto; }
    .bab_sf_2 { top: 42%;  left: 0;  right: auto; }
    .bab_sf_3 { bottom: 4%; right: 0; left: auto; }
}

/* ------------------------------------------------- Tablet Landscape ≤ 991px */
@media (max-width: 991.98px) {
    :root { --bab_container: 720px; }
.bab_feat_split{
    grid-template-columns: 1fr;
    gap: 30px;
}
.bab_feat_split.bab_reverse .bab_feat_media{
    order: 1;
}
    /* hide desktop menu, show toggler */
    .bab_menu,
    .bab_nav_actions .bab_btn_outline { display: none; }
    .bab_menu_toggle { display: flex; }

    .bab_hero { padding: 150px 0 90px; }

    .bab_hero_grid {
        grid-template-columns: 1fr;
        gap: 80px;
    }

    .bab_hero_content { text-align: center; }
    .bab_hero_content .bab_lead { margin-left: auto; margin-right: auto; }
    .bab_hero_cta { justify-content: center; }
    .bab_hero_clients { justify-content: center; }

    .bab_hero_visual { max-width: 480px; margin: 0 auto; }

    /* disable feature sticky-stacking on tablet & below */
    #bab_features .bab_feat_split { position: static; top: auto; }

    /* split hero stacks: content on top, visual below */
    .bab_hero_split_grid {
        grid-template-columns: 1fr;
        gap: 56px;
        text-align: center;
    }
    /* scale the display heading down + let the gradient line wrap so it never
       overflows once the hero is centered/stacked */
    .bab_hero_split .bab_h1 { font-size: clamp(2rem, 6.4vw, 3.6rem); }
    .bab_hero_split .bab_h1 .bab_text_gradient { display: inline; }
    .bab_hero_split .bab_hero_content { text-align: center; }
    .bab_hero_split .bab_hero_content .bab_lead { margin-left: auto; margin-right: auto; }
    .bab_hero_split .bab_hero_cta { justify-content: center; }
    .bab_hero_split .bab_hero_proof { margin: 0 auto; justify-content: center; }
    /* frame the figure: keep the floating stats inside the visual so they
       don't get clipped by the section overflow */
    .bab_sf_1 { top: 4%;   right: 0; left: auto; }
    .bab_sf_2 { top: 42%;  left: 0;  right: auto; }
    .bab_sf_3 { bottom: 4%; right: 0; left: auto; }

    .bab_bento { grid-template-columns: repeat(2, 1fr); }
    .bab_bento_card.bab_span2 { grid-column: span 2; }

    .bab_stats_grid { grid-template-columns: repeat(2, 1fr); }

    /* gallery masonry → 3 columns on tablet landscape */
    .bab_gallery_sizer,
    .bab_gallery_item { width: 33.333%; }

    .bab_about_grid {
        grid-template-columns: 1fr;
        gap: 70px;
    }

    .bab_about_images { max-width: 480px; margin: 0 auto; }

    .bab_services_grid,
    .bab_trend_grid,
    .bab_video_grid,
    .bab_blog_grid { grid-template-columns: repeat(2, 1fr); }

    .bab_pricing_grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; gap: 30px; }
    .bab_pricing_grid .bab_price_card.bab_popular { order: -1; }

    .bab_footer_grid {
        grid-template-columns: 1fr 1fr;
        gap: 36px;
    }

    /* .bab_footer_about { grid-column: 1 / -1; } */

    .bab_cta_inner { padding: 60px 32px; }
}

/* ------------------------------------------------- Tablet Portrait ≤ 767px */
@media (max-width: 767.98px) {
    /* :root { --bab_container: 540px; } */

    .bab_section { padding: 70px 0; }
    .bab_section_head { margin-bottom: 44px; }

    .bab_h1 { font-size: clamp(2.2rem, 8vw, 3rem); }

    .bab_gallery_sizer,
    .bab_gallery_item { width: 50%; }

    .bab_team_grid { grid-template-columns: repeat(2, 1fr); }

    .bab_float_analytics { top: 16px; left: 0; width: 170px; padding: 12px 14px; }
    .bab_float_beard { bottom: 60px; right: 0; width: 160px; padding: 12px 14px; }
    .bab_float_style { left: 16px; }

    .bab_dash_panel { padding: 20px; }
    .bab_dash_body { grid-template-columns: 1fr; }
    .bab_dash_widget.bab_w2 { grid-column: span 1; }

    .bab_footer_bottom { flex-direction: column; text-align: center; }

    /* AI feature split sections stack on tablet */
    .bab_feat_split { grid-template-columns: 1fr; gap: 40px; padding: 40px; }
    .bab_feat_split.bab_reverse .bab_feat_media { order: 0; }
    .bab_feat_media { max-width: 520px; margin: 0 auto; width: 100%; }

    /* disable sticky-stacking below this width — boxes just flow normally */
    #bab_features .bab_feat_split { position: static; top: auto; margin-bottom: 30px; }

    /* declutter hero – hide floating barber icons */
    .bab_hero_icons { display: none; }

    /* split hero: pull floating stat cards closer to the edges */
    .bab_hero_split .bab_container { padding: 0 24px; }
    .bab_hero_split { padding: 140px 0 90px; }
    .bab_hero_figure { min-height: 460px; }
    .bab_hero_circle { width: 360px; height: 360px; }
    .bab_hero_figure img { max-height: 480px; }
    /* slightly smaller cards so they sit inside the figure on tablet portrait */
    .bab_stat_float { padding: 11px 14px; gap: 10px; }
    .bab_stat_float strong { font-size: 1.25rem; }
    .bab_stat_float span { font-size: .76rem; }
    .bab_sf_icon { width: 36px; height: 36px; font-size: 1rem; }
    .bab_sf_1 { top: 2%;   right: 0; left: auto; }
    .bab_sf_2 { top: 42%;  left: 0;  right: auto; }
    .bab_sf_3 { bottom: 2%; right: 0; left: auto; }
}

/* ------------------------------------------------- Mobile ≤ 575px */
@media (max-width: 575.98px) {
    .bab_container { padding: 0 18px; }

    .bab_section { padding: 60px 0; }

    /* compact header so logo + CTA + toggle always fit small phones */
    .bab_header { padding: 16px 0; }
    .bab_nav { gap: 10px; }
    .bab_logo { font-size: 1.1rem; gap: 8px; }
    .bab_logo_mark { width: 36px; height: 36px; font-size: 1rem; }
    .bab_nav_actions { gap: 8px; }
    .bab_nav_actions .bab_btn_primary { padding: 9px 14px; font-size: .8rem; }
    .bab_menu_toggle { width: 42px; height: 42px; font-size: 1.15rem; }

    /* keep long headings from overflowing on small screens */
    .bab_h2 { font-size: clamp(1.6rem, 7vw, 2.3rem); }
    .bab_section_head .bab_lead, .bab_lead { font-size: 1rem; }
    .bab_feat_content h2 { font-size: clamp(1.7rem, 7.4vw, 2.4rem); }

    .bab_bento,
    .bab_stats_grid,
    .bab_services_grid,
    .bab_trend_grid,
    .bab_video_grid,
    .bab_blog_grid,
    .bab_team_grid { grid-template-columns: 1fr; }

    .bab_bento_card.bab_span2 { grid-column: span 1; }

    .bab_gallery_sizer,
    .bab_gallery_item { width: 50%; }

    .bab_hero_cta { flex-direction: column; }
    .bab_hero_cta .bab_btn { justify-content: center; }

    .bab_hero_clients { flex-direction: column; gap: 12px; }

    /* split hero on mobile */
    .bab_hero_split { padding: 104px 0 80px; }
    .bab_hero_split .bab_container { padding: 0 18px; }
    .bab_hero_split .bab_h1 { font-size: clamp(1.7rem, 7.4vw, 2.5rem); line-height: 1.05; margin-bottom: 18px; }
    /* let the gradient line wrap instead of overflowing (it's inline-block by default) */
    .bab_hero_split .bab_h1 .bab_text_gradient { display: inline; overflow-wrap: break-word; }
    .bab_hero_split .bab_lead { font-size: 1rem; }
    .bab_hero_play { justify-content: center; }
    .bab_hero_proof { flex-direction: column; gap: 18px; padding: 18px; 
    grid-template-columns: 1fr;}
    .bab_hero_review { padding-left: 0; border-left: 0; border-top: 1px solid var(--bab_border); padding-top: 16px; }
    .bab_hero_figure { min-height: 380px; }
    .bab_hero_circle { width: 280px; height: 280px; }
    .bab_hero_figure img { max-height: 390px; }
    .bab_stat_float { padding: 9px 13px; gap: 9px;
    display: none; }
    .bab_stat_float strong { font-size: 1.2rem; }
    .bab_stat_float span { font-size: .74rem; }
    .bab_sf_icon { width: 34px; height: 34px; font-size: 1rem; }
    .bab_sf_2 { display: none; } /* keep two cards for breathing room */

    .bab_float_card { display: none; } /* declutter on tiny screens */

    .bab_about_img_sub { width: 140px; right: 0; bottom: -24px; }
    .bab_about_exp { left: 0; top: -18px; padding: 16px 18px; }
    .bab_about_exp strong { font-size: 1.9rem; }

    /* AI feature boxes – tighten for mobile */
    .bab_feat_split { padding: 24px; gap: 32px; }
    .bab_mock { padding: 18px; }
    .bab_scoremock_grid { grid-template-columns: 1fr; gap: 24px; text-align: center; }
    .bab_scoremock_ring { margin: 0 auto; }
    .bab_swatch_grid { grid-template-columns: repeat(6, 1fr); gap: 8px; }
    .bab_mock_badge { display: none; }

    .bab_filter_bar { gap: 8px; }
    .bab_filter_btn { padding: 9px 16px; font-size: .85rem; }

    .bab_cta_inner { padding: 48px 22px; }
    .bab_cta_buttons { flex-direction: column; }
    .bab_cta_buttons .bab_btn { width: 100%; justify-content: center; }

    .bab_footer_grid { grid-template-columns: 1fr; }
    .bab_footer_links { flex-wrap: wrap; justify-content: center; gap: 16px; }

    .bab_back_top { bottom: 20px; right: 20px; width: 46px; height: 46px; }

    .bab_stat_number { font-size: 2.4rem; }
    .bab_price_amount .bab_value { font-size: 3rem; }
}

/* ------------------------------------------------- New sections responsive */
@media (max-width: 991.98px) {
    .bab_timeline { grid-template-columns: repeat(2, 1fr); }
    .bab_timeline::before { display: none; }

    .bab_tryon_grid { grid-template-columns: 1fr; gap: 44px; }
    .bab_tryon_content { text-align: center; max-width: 560px; margin: 0 auto; }
    .bab_tryon_lead { margin-left: auto; margin-right: auto; }
    .bab_tryon_actions, .bab_tryon_trust { justify-content: center; }
    .bab_tryon_trust { margin-left: auto; margin-right: auto; }
    .bab_tryon_features { max-width: 460px; margin-left: auto; margin-right: auto; }
    .bab_tryon_features li { text-align: left; }

    .bab_ba_slider { aspect-ratio: 4 / 3; }
}

/* try-on dashboard – shrink overlays when the preview narrows */
@media (max-width: 767.98px) {
    .bab_tryon_preview { aspect-ratio: 4 / 3.4; }
    .bab_tryon_acards { top: 46px; gap: 8px; }
    .bab_tryon_acard { min-width: 0; padding: 7px 9px; }
    .bab_tryon_acard span { font-size: .62rem; }
    .bab_tryon_acard strong { font-size: .82rem; }
    .bab_tryon_metrics { width: 150px; gap: 7px; }
    .bab_tryon_metric { padding: 6px 8px; }
    .bab_tryon_mbar span { font-size: .64rem; }
    .bab_tryon_benefits { grid-template-columns: repeat(2, 1fr); }
    .bab_tryon_benefit:nth-child(odd) { border-left: none; padding-left: 0; }
}

@media (max-width: 575.98px) {
    .bab_timeline { grid-template-columns: 1fr; }
    .bab_ba_slider { aspect-ratio: 1 / 1; }
    .bab_ba_handle i { width: 40px; height: 40px; font-size: 1rem; }
    .bab_acc_head { padding: 18px; font-size: 1rem; }
    .bab_acc_inner { padding: 0 18px 20px; }

    /* hide dense overlays on phones, keep the comparison + tabs usable */
    .bab_tryon_window { padding: 12px; }
    .bab_tryon_acards, .bab_tryon_metrics { display: none; }
    .bab_tryon_preview { aspect-ratio: 3 / 3.4; }
    .bab_tryon_tab { font-size: .8rem; padding: 11px 6px; gap: 5px; }
    .bab_tryon_tab i { display: none; }
    .bab_tryon_card { flex: 0 0 80px; }
    .bab_tryon_cimg { height: 88px; }
    .bab_tryon_swc { width: 48px; height: 48px; }
    .bab_tryon_benefit span { font-size: .72rem; }
}