/* ============================================================
   EZAC SERVICE — RESPONSIVE / MEDIA QUERIES
   responsive.css  (mobile-first breakpoints)

   Breakpoints:
     xs   < 480px   (small phones)
     sm   < 640px   (phones)
     md   < 768px   (large phones / small tablets)
     lg   < 1024px  (tablets / small laptops)
     xl   < 1280px  (laptops)
     2xl  ≥ 1280px  (desktops — base styles)
   ============================================================ */

/* ══════════════════════════════════════════
   LG — TABLETS / SMALL LAPTOPS  (max 1024px)
════════════════════════════════════════════ */
@media (max-width: 1024px) {

    /* Layout grids */
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-32);
    }

    /* Steps */
    .steps-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-32);
    }

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

    /* Team */
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Milestones */
    .milestones-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Pricing */
    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
    }

    /* Why grid */
    .why-grid {
        grid-template-columns: 1fr;
    }

    /* Nav phone hide on smaller screens */
    .nav-phone span {
        display: none;
    }
}

/* ══════════════════════════════════════════
   MD — TABLETS  (max 768px)
════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── Section spacing ── */
    :root {
        --section-py: 52px;
        --section-py-sm: 36px;
        --section-py-lg: 68px;
    }

    /* ── Navbar ── */
    .nav-links {
        display: none;
    }

    .nav-phone {
        display: none;
    }

    .nav-actions .btn-primary {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    /* ── Grids → single column ── */
    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

    .form-row,
    .form-row-3 {
        grid-template-columns: 1fr;
    }

    /* ── Reviews ── */
    .reviews-grid {
        grid-template-columns: 1fr;
    }

    /* ── Contact ── */
    .contact-grid {
        grid-template-columns: 1fr;
    }

    /* ── Service hero ── */
    .service-hero-grid {
        grid-template-columns: 1fr;
    }

    .service-detail-visual {
        display: none;
    }

    /* ── Steps → 1 column on mobile ── */
    .steps-grid {
        grid-template-columns: 1fr;
    }

    /* ── Footer ── */
    .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-24);
    }

    /* ── CTA Banner ── */
    .cta-banner {
        flex-direction: column;
        text-align: center;
        padding: var(--space-40) var(--space-28);
    }

    .cta-banner-actions {
        justify-content: center;
    }

    /* ── Trust bar ── */
    .trust-divider {
        display: none;
    }

    .trust-bar-inner {
        gap: var(--space-12);
        justify-content: flex-start;
    }

    .trust-item {
        font-size: var(--text-xs);
    }

    /* ── Show floating call button ── */
    .float-call {
        display: flex;
    }

    /* ── Float buttons spacing ── */
    .float-btns {
        bottom: 20px;
        right: 14px;
    }

    /* ── Form card ── */
    .form-card {
        padding: var(--space-24) var(--space-20);
    }

    /* ── Team ── */
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Milestones ── */
    .milestones-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Section header ── */
    .section-subtitle {
        font-size: var(--text-base);
    }

    /* ── Service tabs — scrollable ── */
    .service-tabs {
        gap: 0;
        border-bottom-width: 1.5px;
    }

    .service-tab {
        padding: 10px var(--space-16);
        font-size: var(--text-sm);
    }

    /* ── Price table — horizontal scroll ── */
    .price-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-lg);
    }

    .price-table {
        min-width: 560px;
    }

    /* ── Hero stat numbers ── */
    .hero-stats {
        flex-wrap: wrap;
        gap: var(--space-20);
    }

    /* ── Why image block ── */
    .why-img {
        min-height: auto;
    }

    /* ── Page hero ── */
    .page-hero {
        padding: var(--space-32) 0;
    }

    .page-hero p {
        font-size: var(--text-base);
    }
}

/* ══════════════════════════════════════════
   SM — PHONES  (max 640px)
════════════════════════════════════════════ */
@media (max-width: 640px) {

    /* ── Container ── */
    :root {
        --container-pad: 16px;
    }

    /* ── Services grid → 2 col on small phones ── */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-12);
    }

    .service-card {
        padding: var(--space-16) var(--space-14, 14px);
    }

    .service-icon {
        width: 44px;
        height: 44px;
        font-size: 20px;
    }

    .service-card h3 {
        font-size: var(--text-sm);
    }

    .service-card p {
        display: none;
    }

    /* hide desc on very small */
    .service-card-link {
        display: none;
    }

    /* ── Steps ── */
    .step-num {
        width: 56px;
        height: 56px;
        font-size: var(--text-xl);
    }

    /* ── Team ── */
    .team-avatar {
        width: 60px;
        height: 60px;
        font-size: var(--text-xl);
    }

    /* ── Milestones ── */
    .milestones-grid {
        grid-template-columns: 1fr 1fr;
    }

    .milestone .num {
        font-size: var(--text-2xl);
    }

    /* ── Pricing ── */
    .pricing-card {
        padding: var(--space-28) var(--space-20);
    }

    /* ── Review card ── */
    .review-card {
        padding: var(--space-20);
    }

    /* ── Footer ── */
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-top {
        padding: var(--space-40) 0 var(--space-32);
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-8);
    }

    /* ── Nav logo ── */
    .logo-text {
        font-size: 18px;
    }

    /* ── FAQ ── */
    .faq-q {
        font-size: var(--text-base);
        padding: var(--space-16) var(--space-20);
    }

    .faq-a-inner {
        padding: 0 var(--space-20) var(--space-16);
        font-size: var(--text-sm);
    }

    /* ── Contact info ── */
    .contact-info-item {
        flex-direction: column;
        gap: var(--space-12);
    }

    /* ── Form card ── */
    .form-card {
        padding: var(--space-20) var(--space-16);
        border-radius: var(--radius-lg);
    }

    .form-card-title {
        font-size: var(--text-lg);
    }

    /* ── CTA banner ── */
    .cta-banner {
        padding: var(--space-32) var(--space-20);
        border-radius: var(--radius-lg);
    }

    .cta-banner h2 {
        font-size: var(--text-2xl);
    }

    .cta-banner-actions {
        flex-direction: column;
    }

    .cta-banner-actions .btn {
        width: 100%;
    }

    /* ── Service hero ── */
    .service-price-box {
        padding: var(--space-20);
    }

    /* ── Float buttons ── */
    .float-btn {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .float-top {
        width: 38px;
        height: 38px;
        font-size: 14px;
    }

    /* ── Breadcrumb ── */
    .breadcrumb {
        font-size: 12px;
    }

    /* ── Section labels ── */
    .section-label {
        font-size: 11px;
    }
}

/* ══════════════════════════════════════════
   XS — SMALL PHONES  (max 480px)
════════════════════════════════════════════ */
@media (max-width: 480px) {

    /* ── Services: stack to 1 col ── */
    .services-grid {
        grid-template-columns: 1fr;
    }

    .service-card p {
        display: block;
    }

    /* ── Steps ── */
    .step-card {
        text-align: left;
        display: flex;
        gap: var(--space-16);
        align-items: flex-start;
    }

    .step-num {
        margin: 0;
        flex-shrink: 0;
        width: 48px;
        height: 48px;
        font-size: var(--text-lg);
    }

    /* ── Team ── */
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* ── Milestones ── */
    .milestones-grid {
        grid-template-columns: 1fr;
    }

    /* ── Stats ── */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    /* ── Hero stats ── */
    .hero-stat-num {
        font-size: var(--text-2xl);
    }

    /* ── Buttons ── */
    .btn-lg {
        padding: 13px var(--space-24);
        font-size: var(--text-base);
    }

    /* ── Why items ── */
    .why-item {
        flex-direction: column;
        gap: var(--space-10, 10px);
    }

    .why-icon {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    /* ── Mobile menu width ── */
    .mobile-menu {
        max-width: 100%;
    }

    /* ── Pricing badge ── */
    .pricing-badge {
        font-size: 11px;
        padding: 5px var(--space-16);
    }

    /* ── Section title ── */
    h2 {
        font-size: clamp(22px, 6vw, var(--text-3xl));
    }
}

/* ══════════════════════════════════════════
   PRINT STYLES
════════════════════════════════════════════ */
@media print {

    #navbar,
    .float-btns,
    .mobile-menu,
    .mobile-overlay,
    footer {
        display: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
    }

    a::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #666;
    }

    .section {
        padding: 24pt 0;
    }

    .hero {
        background: #fff !important;
        color: #000 !important;
        padding: 24pt 0;
    }

    .hero-title {
        color: #000 !important;
    }
}

/* ══════════════════════════════════════════
   DARK MODE (system preference)
   Minimal — keeps brand colors intact
════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    /* Uncomment to enable dark mode
  :root {
    --white:     #1a1a2e;
    --gray-50:   #16213e;
    --gray-100:  #0f3460;
    --gray-200:  #1a1a40;
    --gray-800:  #e0e0e0;
    --gray-900:  #f5f5f5;
  }
  body { background: var(--white); }
  */
    /* Currently disabled to maintain brand consistency */
}