/* ================================================
   HOANG GIANG SOLAR — MOBILE RESPONSIVE CSS
   Enterprise-grade responsive for all mobile devices
   Breakpoints: xs(≤480), sm(≤576), md(≤768)
   ================================================ */

/* ============================================
   TABLET (≤ 768px)
   ============================================ */
@media (max-width: 768px) {

    /* --- Global Typography --- */
    h1, .sec-title { font-size: 1.5rem !important; }
    h2 { font-size: 1.35rem; }
    h3 { font-size: 1.1rem; }
    h4 { font-size: .95rem; }
    p, .sec-desc { font-size: .88rem; }
    .sec-label { font-size: .7rem; }

    /* --- Container Padding --- */
    .container { padding-left: 16px; padding-right: 16px; }

    /* --- Section Spacing --- */
    section { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }
    section .mb-5 { margin-bottom: 1.5rem !important; }
    section .mb-4 { margin-bottom: 1rem !important; }
    section .py-5 { padding-top: 2.5rem !important; padding-bottom: 2.5rem !important; }

    /* -------------------------------------------
       HERO Section
       ------------------------------------------- */
    .solar-hero {
        min-height: 70vh !important;
        padding: 2rem 0 !important;
    }
    .solar-hero h1 {
        font-size: 1.5rem !important;
        line-height: 1.3;
    }
    .solar-hero .hero-sub {
        font-size: .85rem !important;
        margin-bottom: 1.25rem;
    }
    .solar-hero .hero-btns {
        flex-direction: column;
        gap: 10px;
    }
    .solar-hero .hero-btns .btn {
        width: 100%;
        text-align: center;
        padding: .75rem 1rem;
        font-size: .9rem;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .hero-highlights {
        gap: 8px !important;
        flex-direction: column;
    }
    .hero-highlights .hi {
        font-size: .78rem !important;
    }
    .solar-hero::after { height: 60px; }

    /* -------------------------------------------
       BENEFITS Section
       ------------------------------------------- */
    .solar-benefits { padding: 2.5rem 0 1.5rem !important; }
    .benefit-card {
        padding: 1.25rem 1rem;
        border-radius: 12px;
    }
    .benefit-icon {
        width: 48px; height: 48px;
        border-radius: 12px;
        font-size: 1.2rem;
    }
    .benefit-card h4 { font-size: .85rem; }
    .benefit-card p { font-size: .75rem; line-height: 1.5; }

    /* -------------------------------------------
       SOLAR SERVICES Section
       ------------------------------------------- */
    .solar-services { padding: 2.5rem 0 !important; }
    .svc-card {
        padding: 1.5rem;
        border-radius: 14px;
    }
    .svc-card .svc-icon {
        width: 48px; height: 48px;
        border-radius: 12px;
        font-size: 1.1rem;
    }
    .svc-card h3 { font-size: .95rem; }
    .svc-card p { font-size: .78rem; }

    /* -------------------------------------------
       PRODUCTS Section
       ------------------------------------------- */
    .section-products .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }
    .section-products .btn-outline-primary {
        align-self: flex-start;
        font-size: .8rem;
        padding: .4rem 1rem;
    }
    .product-card {
        border-radius: 10px;
    }
    .product-img, .product-img-placeholder {
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }
    .product-img-placeholder {
        height: auto !important;
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .product-name {
        font-size: .78rem !important;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .product-category { font-size: .65rem !important; }
    .product-price { font-size: .85rem !important; }
    .product-info { padding: .75rem .6rem; }
    .product-info .btn { font-size: .72rem; padding: .35rem .5rem; min-height: 36px; }

    /* -------------------------------------------
       CTA Banner
       ------------------------------------------- */
    .solar-cta {
        padding: 2.5rem 0 !important;
    }
    .solar-cta h2 {
        font-size: 1.25rem !important;
        line-height: 1.4;
    }
    .solar-cta p { font-size: .85rem; }
    .solar-cta .btn-cta-quote {
        width: 100%;
        padding: .75rem 1.5rem;
        font-size: .9rem;
        min-height: 48px;
    }

    /* -------------------------------------------
       STATS Counter
       ------------------------------------------- */
    .solar-stats { padding: 2.5rem 0 !important; }
    .stat-box { padding: 1rem .5rem; }
    .stat-box .stat-num {
        font-size: 1.6rem !important;
    }
    .stat-box .stat-label {
        font-size: .7rem !important;
        line-height: 1.3;
    }

    /* -------------------------------------------
       SECONDARY SERVICES (Camera, Light)
       ------------------------------------------- */
    .secondary-svc { padding: 2.5rem 0 !important; }
    .mini-svc {
        padding: 1.25rem;
        border-radius: 12px;
        gap: 12px;
    }
    .mini-svc .mini-icon {
        width: 42px; height: 42px;
        border-radius: 10px;
        font-size: 1rem;
    }
    .mini-svc h5 { font-size: .85rem; }
    .mini-svc p { font-size: .75rem; }

    /* -------------------------------------------
       BRANDS
       ------------------------------------------- */
    .section-brands img {
        max-height: 40px !important;
    }

    /* -------------------------------------------
       TESTIMONIALS
       ------------------------------------------- */
    #testimonialCarousel .row { flex-direction: column; }
    #testimonialCarousel .col-md-6 { width: 100%; }
    #testimonialCarousel .card-body { padding: 1.25rem !important; }
    #testimonialCarousel .card-body p { font-size: .82rem; }

    /* -------------------------------------------
       NEWS Section
       ------------------------------------------- */
    .section-news .d-flex.justify-content-between {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 10px;
    }
    .section-news .btn-outline-primary {
        align-self: flex-start;
        font-size: .8rem;
        padding: .4rem 1rem;
    }
    .news-card { border-radius: 12px; }
    .news-img {
        height: 180px;
        object-fit: cover;
    }
    .news-title { font-size: .9rem !important; }
    .news-summary { font-size: .78rem; }
    .news-body { padding: 1rem; }

    /* -------------------------------------------
       CONTACT + FORM
       ------------------------------------------- */
    .section-contact .row { flex-direction: column; }
    .section-contact .col-lg-5,
    .section-contact .col-lg-7 { width: 100%; }
    .contact-item { margin-bottom: .75rem; }
    .contact-form .form-control,
    .contact-form textarea {
        min-height: 48px;
        font-size: .9rem;
    }
    .contact-form .form-label { font-size: .82rem; margin-bottom: 4px; }
    .contact-form .btn-lg {
        min-height: 48px;
        font-size: .9rem;
    }

    /* -------------------------------------------
       MAP Section
       ------------------------------------------- */
    .section-map iframe {
        height: 280px !important;
    }

    /* -------------------------------------------
       FOOTER
       ------------------------------------------- */
    .footer-top { padding: 2.5rem 0 1.5rem; }
    .footer-top .row { gap: 1.5rem; }
    .footer-top .col-lg-4,
    .footer-top .col-lg-2,
    .footer-top .col-md-6 {
        width: 100%;
    }
    .footer-brand-name { font-size: 1.1rem; }
    .footer-brand-tagline { font-size: .65rem; }
    .footer-desc { font-size: .82rem; }
    .footer-contact-list li { font-size: .82rem; }
    .footer-heading { font-size: .9rem; margin-bottom: .75rem; }
    .footer-links li { font-size: .82rem; }
    .footer-social-row { margin-top: 1rem; }
    .footer-newsletter .input-group { flex-direction: column; gap: 8px; }
    .footer-newsletter .form-control {
        border-radius: 10px !important;
        min-height: 48px;
    }
    .footer-newsletter .btn {
        border-radius: 10px !important;
        min-height: 48px;
        width: 100%;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 8px;
        text-align: center;
        font-size: .75rem;
    }
    .footer-bottom-links {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* -------------------------------------------
       MODALS (Calculator, etc.)
       ------------------------------------------- */
    .calc-modal .modal-dialog { margin: 1rem; }
    .calc-modal .modal-body { padding: 1.25rem; }
    .calc-modal .form-control-lg { font-size: .9rem; min-height: 48px; }
    .calc-result .cr-value { font-size: .95rem; }

    /* -------------------------------------------
       PAGE HEADER (inner pages)
       ------------------------------------------- */
    .page-header { padding: 2rem 0 !important; }
    .page-header h1 { font-size: 1.4rem !important; }
    .breadcrumb { font-size: .75rem; }

    /* -------------------------------------------
       PRODUCT DETAIL PAGE
       ------------------------------------------- */
    .product-detail-section .row { flex-direction: column; }
    .product-detail-section .col-lg-6 { width: 100%; }

    /* -------------------------------------------
       ABOUT PAGE
       ------------------------------------------- */
    .about-img-bg { display: none; }
    .about-badge-box { left: 0; }

    /* -------------------------------------------
       Touch UX — Tap Targets
       ------------------------------------------- */
    a, button, .btn, input[type="submit"],
    .nav-link, .product-tab, .social-icon {
        min-height: 44px;
        min-width: 44px;
    }
    .btn-sm { min-height: 40px; font-size: .78rem; }

    /* Force no horizontal overflow */
    .row { margin-left: 0; margin-right: 0; }
    .row > * { padding-left: 8px; padding-right: 8px; }

    /* -------------------------------------------
       BREADCRUMB NAV
       ------------------------------------------- */
    nav.bg-light { padding: 6px 0 !important; }
    nav.bg-light .breadcrumb { font-size: .72rem; flex-wrap: nowrap; overflow: hidden; }
    nav.bg-light .breadcrumb-item { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px; }
    nav.bg-light .breadcrumb-item.active { max-width: 160px; }
    nav.bg-light .breadcrumb-item + .breadcrumb-item::before { padding: 0 4px; }

    /* -------------------------------------------
       INNER PAGE CONTENT (Services, About, etc.)
       ------------------------------------------- */
    .section-label { font-size: .68rem; }
    .section-title { font-size: 1.25rem !important; line-height: 1.35; }

    /* Wizard page — hide sidebar on mobile */
    .wz-sidebar-sticky { display: none; }

    /* Services/About — image + text rows */
    .py-5 .col-lg-6 img, .py-5 .col-lg-5 img { border-radius: 12px; max-height: 300px; object-fit: cover; width: 100%; }

    /* Project/News cards */
    .card .card-body { padding: 1rem; }
    .card .card-title { font-size: .9rem; line-height: 1.35; }
    .card .card-text { font-size: .8rem; }
}

/* ============================================
   SMALL PHONES (≤ 480px) — iPhone SE, small Android
   ============================================ */
@media (max-width: 480px) {

    /* --- Tighter typography --- */
    h1, .sec-title { font-size: 1.3rem !important; }
    .sec-desc { font-size: .82rem; }

    /* Hero */
    .solar-hero { min-height: 60vh !important; }
    .solar-hero h1 { font-size: 1.3rem !important; }
    .solar-hero .hero-sub { font-size: .8rem !important; }
    .hero-label { font-size: .7rem !important; padding: 5px 12px; }

    /* Benefits — 1 column on very small */
    .solar-benefits .col-6 { width: 100%; }
    .benefit-card { display: flex; align-items: center; text-align: left; gap: 12px; padding: 1rem; }
    .benefit-icon { margin: 0 !important; flex-shrink: 0; }
    .benefit-card h4 { margin-bottom: .25rem; }

    /* Stats */
    .stat-box .stat-num { font-size: 1.4rem !important; }
    .stat-box .stat-label { font-size: .65rem !important; }

    /* Products — slightly tighter */
    .product-info { padding: .6rem .5rem; }
    .product-name { font-size: .72rem !important; }
    .product-price { font-size: .78rem !important; }
    .product-info .btn { font-size: .68rem; padding: .3rem .4rem; }
    .product-badge { font-size: .6rem; }

    /* CTA */
    .solar-cta h2 { font-size: 1.1rem !important; }

    /* Contact form */
    .contact-form .row.g-3 > div { padding: 0; }

    /* Footer newsletter */
    .footer-newsletter-title { font-size: .9rem; }
    .footer-badges .badge { font-size: .68rem; }

    /* Map */
    .section-map iframe { height: 220px !important; }

    /* Breadcrumb — tighter on small phones */
    nav.bg-light .breadcrumb { font-size: .65rem; }
    nav.bg-light .breadcrumb-item { max-width: 130px; }
    nav.bg-light .breadcrumb-item.active { max-width: 120px; }
}

/* ============================================
   TINY PHONES (≤ 360px) — iPhone SE 1st gen
   ============================================ */
@media (max-width: 360px) {
    .container { padding-left: 12px; padding-right: 12px; }

    h1, .sec-title { font-size: 1.2rem !important; }
    .solar-hero h1 { font-size: 1.15rem !important; }
    .solar-hero .hero-sub { font-size: .75rem !important; }

    /* Products — 1 column */
    .section-products .col-6 { width: 100%; }

    /* Stats — smaller */
    .stat-box .stat-num { font-size: 1.2rem !important; }

    /* Floating buttons — tighter */
    .float-btn { font-size: .78rem !important; height: 44px; }
}