/* ============================================================
   SevaSetuHub – Responsive Breakpoints
   responsive.css
   ============================================================ */

/* ══════════════════════════════════════════════════════════
   LARGE DESKTOP  ≥ 1440px
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
    .container {
        max-width: 1280px;
    }

    .hero-headline {
        font-size: 3.85rem;
    }

    .services-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .popular-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .steps-grid {
        gap: var(--space-5);
    }
}

/* ══════════════════════════════════════════════════════════
   DESKTOP  1024px – 1439px
   ══════════════════════════════════════════════════════════ */
@media (min-width: 1024px) and (max-width: 1439px) {
    .services-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ══════════════════════════════════════════════════════════
   COLLAPSED NAVBAR (< 1200px - Tablets & Mobile)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
    .setu-navbar {
        min-height: 64px;
    }

    .setu-navbar .navbar-collapse {
        background: rgba(255, 255, 255, 0.99);
        backdrop-filter: saturate(180%) blur(24px);
        -webkit-backdrop-filter: saturate(180%) blur(24px);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: var(--space-4) var(--space-5);
        margin-top: 10px;
        margin-bottom: 12px;
        box-shadow: 0 20px 48px rgba(15, 23, 42, 0.14);
        max-height: 82vh;
        overflow-y: auto;
    }

    .setu-navbar .navbar-collapse:not(.show) {
        display: none !important;
    }

    .setu-navbar .navbar-collapse.show {
        display: block !important;
        animation: setuNavDropdown 0.24s var(--easing-out) forwards;
    }

    @keyframes setuNavDropdown {
        from {
            opacity: 0;
            transform: translateY(-10px) scale(0.98);
        }
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    .setu-navbar .navbar-nav {
        flex-direction: column;
        gap: 3px;
        padding-bottom: var(--space-3);
    }

    .setu-navbar .navbar-nav .nav-link {
        padding: 0.65rem 1rem !important;
        font-size: 0.95rem;
        border-radius: var(--radius-md);
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .setu-navbar .navbar-nav .nav-link:hover,
    .setu-navbar .navbar-nav .nav-link.active {
        background: var(--primary-muted);
        color: var(--primary);
    }

    .nav-right-controls {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
        padding-top: var(--space-3);
        border-top: 1px solid var(--border);
        margin-left: 0;
        margin-top: 8px;
    }

    .nav-auth-group {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
    }

    .nav-auth-group .btn-nav-login,
    .nav-auth-group .btn-nav-register {
        width: 100%;
        justify-content: center;
        padding: 0.62rem 0.75rem;
        font-size: 0.875rem;
        text-align: center;
        border-radius: var(--radius-md);
    }

    .nav-auth-group .nav-book-btn {
        grid-column: 1 / -1;
        width: 100%;
        justify-content: center;
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
        border-radius: var(--radius-md);
    }

    .nav-right-controls .lang-switcher {
        width: 100%;
        justify-content: center;
        padding: 4px;
        background: var(--neutral-100);
        margin-top: 4px;
    }

    .nav-right-controls .lang-btn {
        flex: 1;
        text-align: center;
        padding: 6px 12px;
        justify-content: center;
    }
}

/* ══════════════════════════════════════════════════════════
   TABLET  768px – 1023px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {
    #hero {
        padding-top: calc(var(--navbar-height) + var(--space-10));
        padding-bottom: var(--space-16);
        text-align: center;
    }

    .hero-subtext {
        margin-left: auto;
        margin-right: auto;
    }

    .hero-cta-group {
        justify-content: center;
    }

    /* Center trust items under hero */
    #hero .d-flex.flex-wrap {
        justify-content: center;
    }

    .hero-visual {
        margin-top: var(--space-10);
        max-width: 480px;
    }

    .hero-badge-1,
    .hero-badge-2,
    .hero-badge-3 {
        display: none;
    }

    .steps-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-4);
    }

    .steps-connector {
        display: none;
    }

    .services-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

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

    /* Section headings slightly smaller on tablet */
    .section-heading {
        font-size: var(--text-3xl);
    }

    /* CTA box padding */
    .cta-box {
        padding: var(--space-12) var(--space-8);
    }
}

/* ══════════════════════════════════════════════════════════
   MOBILE  < 768px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    /* ── Hero ────────────────────────────────────────────── */
    #hero {
        padding-top: calc(var(--navbar-height) + var(--space-8));
        padding-bottom: var(--space-12);
        text-align: center;
    }

    .hero-headline {
        font-size: 2.1rem;
        letter-spacing: -0.02em;
    }

    .hero-subtext {
        font-size: var(--text-base);
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    .hero-cta-group {
        flex-direction: column;
        align-items: center;
        gap: var(--space-3);
    }

    .hero-cta-group .btn {
        width: 100%;
        max-width: 300px;
    }

    .hero-badge-1,
    .hero-badge-2,
    .hero-badge-3 {
        display: none;
    }

    .hero-banner-wrap {
        height: 190px;
    }

    .hero-mini-workflow {
        font-size: 0.68rem;
        padding: var(--space-2);
        gap: 4px;
    }

    .mini-wf-step span {
        font-size: 0.68rem;
    }

    .mini-wf-icon {
        width: 24px;
        height: 24px;
        font-size: 0.65rem;
    }

    .hero-stats-strip {
        gap: var(--space-1);
    }

    .hero-stat-cell .stat-num {
        font-size: 1.05rem;
    }

    /* ── Search Widget ───────────────────────────────────── */
    .search-widget {
        padding: var(--space-5) var(--space-5);
        border-radius: var(--radius-xl);
    }

    /* ── Trust Bar ───────────────────────────────────────── */
    .trust-scroll {
        gap: var(--space-1);
    }

    /* ── Services Grid ───────────────────────────────────── */
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-3);
    }

    .service-category-card .card-thumb-wrap {
        height: 100px;
    }

    .service-category-card .card-content-wrap {
        padding: var(--space-3);
    }

    .service-category-card .card-title {
        font-size: 0.95rem;
    }

    /* ── Popular Grid ────────────────────────────────────── */
    .popular-grid {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    /* ── Offers ──────────────────────────────────────────── */
    .offers-grid {
        grid-template-columns: 1fr;
    }

    /* ── Steps ───────────────────────────────────────────── */
    .steps-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4);
    }

    .steps-connector {
        display: none;
    }

    .how-step {
        padding: var(--space-3) var(--space-2);
    }

    /* ── Sections ────────────────────────────────────────── */
    .section-padding {
        padding: var(--space-16) 0;
    }

    .section-padding-sm {
        padding: var(--space-10) 0;
    }

    #hero,
    #services,
    #popular-services,
    #offers,
    #how-it-works,
    #before-after,
    #why-us,
    #for-businesses,
    #for-technicians,
    #amc,
    #service-history,
    #testimonials,
    #statistics,
    #faq,
    #final-cta {
        padding-top: var(--space-16);
        padding-bottom: var(--space-16);
    }

    .section-heading {
        font-size: var(--text-3xl);
        letter-spacing: -0.02em;
    }

    .section-subheading {
        font-size: var(--text-base);
    }

    /* ── CTA Box ─────────────────────────────────────────── */
    .cta-box {
        padding: var(--space-10) var(--space-5);
        border-radius: var(--radius-xl);
    }

    .cta-box .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-box .cta-buttons .btn {
        width: 100%;
        max-width: 280px;
    }

    .cta-box .cta-headline {
        font-size: 1.75rem;
    }

    /* ── Statistics ──────────────────────────────────────── */
    .stats-divider {
        display: none;
    }

    /* ── Footer ──────────────────────────────────────────── */
    .footer-brand p {
        max-width: 100%;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .footer-bottom-links {
        gap: var(--space-4);
    }

    /* ── Before/After ─────────────────────────────────────── */
    .ba-feature-list {
        gap: var(--space-2);
    }

    .ba-feature {
        padding: var(--space-3);
    }

    /* ── FAB ─────────────────────────────────────────────── */
    #fab-book {
        display: flex !important;
    }

    /* ── Toast ───────────────────────────────────────────── */
    #toast-container {
        bottom: 80px;
        right: var(--space-4);
        left: var(--space-4);
    }

    .toast-item {
        min-width: unset;
        max-width: 100%;
    }
}

/* ══════════════════════════════════════════════════════════
   SMALL MOBILE  < 480px
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .popular-grid {
        grid-template-columns: 1fr;
    }

    .services-grid {
        grid-template-columns: 1fr 1fr;
    }

    .steps-grid {
        grid-template-columns: 1fr;
    }

    .offers-grid {
        grid-template-columns: 1fr;
    }

    .hero-headline {
        font-size: 1.9rem;
    }

    .section-heading {
        font-size: var(--text-2xl);
    }

    .before-after-container {
        grid-template-columns: 1fr;
    }

    .how-step {
        padding: var(--space-4);
    }

    .biz-features-wrap {
        gap: var(--space-2);
    }

    .biz-tag {
        font-size: var(--text-xs);
    }

    /* Compact search widget */
    .search-widget {
        padding: var(--space-4);
        border-radius: var(--radius-lg);
    }

    /* Hero visual full-width */
    .hero-visual {
        max-width: 100%;
    }

    /* Feature items more compact */
    .feature-item {
        padding: var(--space-3) var(--space-2);
        gap: var(--space-3);
    }

    .feature-item .feature-icon-wrap {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }
}

/* ══════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════ */
@media print {
    #fab-book,
    #toast-container,
    .setu-navbar {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .section-padding {
        padding: 2rem 0;
    }

    .hero-badge,
    .hero-live-pill,
    .steps-connector {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }

    #fab-book {
        animation: none;
    }

    .hero-badge-1,
    .hero-badge-2,
    .hero-badge-3 {
        animation: none;
    }

    .trust-scroll {
        animation: none;
    }

    #hero::before,
    #hero::after {
        animation: none;
    }

    .hero-eyebrow::after,
    .hero-headline .highlight::after,
    .section-label::before {
        animation: none;
    }

    .steps-connector::after {
        animation: none;
    }
}