/* ═══════════════════════════════════════════════════════════════
   MANSAR Medical — Responsive Stylesheet
   Full responsive coverage: Desktop (1280px+) → Tablet → Mobile (320px)
   ═══════════════════════════════════════════════════════════════ */

/* Global image & element max-width safety */
img, iframe, svg, video, canvas {
    max-width: 100%;
    height: auto;
}

/* ─── MAX 1100px — Hero & Container Adjustments ──────────────── */
@media (max-width: 1100px) {
    #hero {
        padding-top: 100px;
        padding-bottom: 60px;
        min-height: auto;
    }

    .hero-inner {
        grid-template-columns: 1fr;
        padding: 0 32px;
        gap: 44px;
    }

    .hero-visual {
        max-width: 460px;
        width: 100%;
        margin: 0 auto;
    }
}

/* ─── MAX 1000px — About, Market & Footer ───────────────────── */
@media (max-width: 1000px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .market-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }

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

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .service-detail-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* ─── MAX 900px — Header Navigation & Showcase ──────────────── */
@media (max-width: 900px) {
    .header-inner {
        padding: 0 20px;
    }

    .container {
        padding: 0 20px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Mobile Header Navigation Toggle */
    nav {
        display: none !important;
    }

    .header-actions .btn-cta-sm {
        display: none !important;
    }

    .mobile-menu-toggle {
        display: flex !important;
    }

    /* Visual Showcase */
    .showcase-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .showcase-tile.tall {
        grid-row: auto !important;
    }

    .showcase-tile img {
        height: 240px !important;
    }

    .process-steps {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
    }

    .process-steps::before {
        display: none;
    }

    /* Sections padding */
    #about, #services, #process, #market, #contact, .inner-page-sec {
        padding: 70px 0;
    }

    #visual-showcase, #cta, #advantages {
        padding: 60px 0;
    }
}

/* ─── MAX 800px — Service Cards 1-Column Layout ─────────────── */
@media (max-width: 800px) {
    .services-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .service-card {
        grid-column: span 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .cta-card {
        padding: 40px 24px;
        border-radius: var(--radius-md);
    }

    .expertise-cards {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .advantages-grid {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .consultation-form {
        padding: 28px 20px;
        width: 100%;
        box-sizing: border-box;
    }

    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .legal-container {
        padding: 32px 20px;
    }
}

/* ─── MAX 600px — Process, Hero Actions & Footer ───────────── */
@media (max-width: 600px) {
    .process-steps {
        grid-template-columns: 1fr !important;
    }

    .footer-grid {
        grid-template-columns: 1fr !important;
        gap: 32px;
    }

    .hero-stats {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn-primary,
    .hero-actions .btn-secondary {
        justify-content: center;
        width: 100%;
    }

    .cta-btns {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-btns .btn-cta-white,
    .cta-btns .btn-cta-outline-white {
        justify-content: center;
        width: 100%;
    }

    .page-title {
        font-size: 28px;
    }

    .page-subtitle {
        font-size: 15px;
    }
}

/* ─── MAX 480px — Mobile Phones ─────────────────────────────── */
@media (max-width: 480px) {
    h1 {
        font-size: 30px !important;
        line-height: 1.25 !important;
    }

    .section-title {
        font-size: 24px !important;
    }

    .hero-desc {
        font-size: 15px;
    }

    .hero-float-card {
        left: -8px;
        bottom: -12px;
        padding: 10px 14px;
    }

    .hero-float-card2 {
        right: -4px;
        top: 12px;
        padding: 8px 12px;
    }

    .hero-float-num {
        font-size: 20px;
    }

    .hero-float-card2 .fc2-val {
        font-size: 16px;
    }

    .service-card {
        padding: 24px 20px !important;
    }

    .market-img-badge {
        bottom: -10px;
        right: 8px;
        padding: 10px 14px;
    }

    .about-img-inset {
        right: -8px;
        bottom: -12px;
        width: 45%;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }

    .footer-legal {
        justify-content: center;
    }
}

/* ─── MAX 375px — Small Screens ──────────────────────────────── */
@media (max-width: 375px) {
    .header-inner {
        padding: 0 14px;
        height: 64px;
    }

    #hero {
        padding-top: 84px;
        padding-bottom: 40px;
    }

    .container {
        padding: 0 14px;
    }

    .hero-inner {
        padding: 0 14px;
    }

    h1 {
        font-size: 26px !important;
    }

    .hero-stat .stat-num {
        font-size: 22px;
    }

    .hero-stat .stat-label {
        font-size: 11px;
    }

    .logo-name {
        font-size: 15px;
    }

    .service-card {
        padding: 20px 16px !important;
    }
}

/* ─── MAX 320px — Ultra Small Screens ────────────────────────── */
@media (max-width: 320px) {
    .hero-float-card,
    .hero-float-card2,
    .about-img-inset,
    .about-accent-dot {
        display: none !important;
    }

    .container {
        padding: 0 12px;
    }

    .service-card {
        padding: 18px 14px !important;
    }
}