/* ==========================================================================
   JobNest Rider — Responsive overrides
   Breakpoints follow Bootstrap 5: xl 1200 · lg 992 · md 768 · sm 576
   Tested widths: 320 · 375 · 425 · 768 · 1024 · 1440 · 1920
   ========================================================================== */

/* ---------- Large desktops ---------- */
@media (min-width: 1400px) {
    .hero__visual .phone-shot--front .phone { width: 270px; }
    .phone-shot--back .phone { width: 212px; }
}

/* ---------- Below 1200px: collapsed navigation ---------- */
@media (max-width: 1199.98px) {
    .nav-toggle { display: flex; }

    .site-header .navbar-collapse {
        margin: 0.75rem -0.25rem 0;
        padding: 0.75rem;
        border-radius: var(--radius-lg);
        background: var(--color-white);
        border: 1px solid var(--color-border);
        box-shadow: var(--shadow-md);
        max-height: calc(100vh - var(--header-height) - 24px);
        overflow-y: auto;
    }
    .main-nav { gap: 0; margin: 0 !important; }
    .main-nav .nav-link { padding: 0.8rem 1rem !important; font-size: var(--fs-base); }
    .main-nav .nav-link::after { display: none; }
    .main-nav .nav-link:hover, .main-nav .nav-link.active { background: var(--color-primary-soft); }
    .main-nav .nav-link.active { box-shadow: inset 3px 0 0 var(--color-primary); }
    .nav-actions { flex-direction: column; align-items: stretch; gap: 0.5rem; padding: 0.75rem 0 0.25rem; margin-top: 0.5rem; border-top: 1px solid var(--color-border); }
    .nav-actions .btn { padding: 0.8rem 1rem; font-size: var(--fs-base); }

    .showcase__card .phone { width: 196px; }
}

/* ---------- 992px-1199px: small laptops ---------- */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .hero__title { font-size: 2.25rem; }
}

/* ---------- Below 992px: tablets ---------- */
@media (max-width: 991.98px) {
    .hero__content { text-align: center; }
    .hero__lead { margin-left: auto; margin-right: auto; }
    .hero__actions, .hero__trust, .store-badges--hero .store-badges__row { justify-content: center; }
    .store-badges--hero .store-badges__note { text-align: center; }
    .hero__visual { max-width: 520px; margin: 0 auto; min-height: 520px; }

    .step-flow { grid-template-columns: repeat(2, 1fr); }
    .step-card:not(:last-child)::after { display: none; }

    .timeline { grid-template-columns: 1fr; gap: var(--space-4); max-width: 620px; margin-left: auto; margin-right: auto; }
    .timeline::before { top: 32px; bottom: 32px; left: 31px; right: auto; width: 3px; height: auto; background: repeating-linear-gradient(180deg, var(--color-primary) 0 12px, transparent 12px 20px); }
    .timeline__item { display: flex; gap: var(--space-4); text-align: left; }
    .timeline__marker { margin: 0; flex-shrink: 0; }
    .timeline__card { height: auto; flex: 1; }

    /* Showcase becomes a swipeable carousel */
    .showcase__track {
        position: relative; display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory;
        padding: 0.5rem 0.25rem 1rem; margin: 0 -0.25rem; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .showcase__track::-webkit-scrollbar { display: none; }
    .showcase__card { flex: 0 0 min(340px, 80%); scroll-snap-align: center; }
    .showcase__card:hover { transform: none; }
    .showcase__card .phone { width: 204px; }
    .showcase__dots { display: flex; }

    .feature-visual .phone { width: 252px; }
    .callout-list { grid-template-columns: 1fr 1fr; }

    .cta-banner { flex-direction: column; align-items: flex-start; }
    .cta-banner__actions { flex-direction: row; flex-wrap: wrap; }

    .auth__wrap, .auth__wrap--login { grid-template-columns: 1fr; }
    .auth__perks { grid-template-columns: 1fr 1fr; }
    .auth__reward { margin-top: var(--space-2); }

    .section--taxi::before { right: -300px; top: 20%; }
}

/* ---------- Below 768px: large phones ---------- */
@media (max-width: 767.98px) {
    :root { --header-height: 64px; --logo-height: var(--logo-height-mobile); }

    .rules-list { grid-template-columns: 1fr; }
    .callout-list { grid-template-columns: 1fr; }
    .verify-box { padding: var(--space-5); }
    .verify-box__head { flex-direction: column; }

    .commission-table th, .commission-table td { padding: var(--space-3) var(--space-4); }
    .commission-table caption { padding: var(--space-3) var(--space-4); }
    .amount-pill { min-width: 72px; padding: 0.25rem 0.6rem; font-size: var(--fs-sm); }

    .help-card { flex-direction: column; text-align: center; }
    .site-footer__bottom { flex-direction: column; text-align: center; }
}

/* ---------- Below 576px: phones ---------- */
@media (max-width: 575.98px) {
    .step-flow { grid-template-columns: 1fr; }
    .step-card { padding: var(--space-5); }

    .hero__actions { flex-direction: column; }
    .hero__actions .btn { width: 100%; }
    .hero__trust { flex-direction: column; align-items: center; gap: var(--space-2); }

    /* Hero phones: one group sized in % of the visual, so the whole composition scales together and fits the screen */
    .hero__visual { width: 100%; max-width: 372px; margin: 0 auto; min-height: 0; padding: 2.75rem 0 1.25rem; }
    .hero__visual .phone-shot--front { width: 58%; }
    .hero__visual .phone-shot--front .phone { width: 100%; }
    .phone-shot--back { width: 42%; }
    .phone-shot--back .phone { width: 100%; padding: 18px 7px 15px; border-radius: 30px; }
    .phone-shot--back .phone__screen { border-radius: 22px; }
    .phone-shot--back .phone__speaker { top: 7px; width: 40px; height: 5px; }
    /* 6% inset keeps the rotated corners (about 14% of a phone's width) inside the visual */
    .phone-shot--left { left: 6%; }
    .phone-shot--right { right: 6%; }
    .hero-logo { width: 20.5%; max-width: 82px; top: 0.75rem; left: 3%; box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.4), 0 0 0 10px rgba(255, 255, 255, 0.6), 0 10px 24px -10px rgba(15, 23, 42, 0.35); }
    .hero__visual .float-card--reward { right: 0; bottom: 0.5rem; max-width: 62%; }

    .feature-visual .phone { width: 240px; }
    .float-card { padding: 0.5rem 0.75rem 0.5rem 0.5rem; font-size: var(--fs-xs); }
    .float-card__icon, .float-card--meter > i { width: 30px; height: 30px; font-size: 0.8rem; }

    .cta-banner__actions { flex-direction: column; width: 100%; }
    .cta-banner__actions .btn { width: 100%; }

    .auth__perks { grid-template-columns: 1fr; }
    .auth .container { padding-left: 12px; padding-right: 12px; }

    .journey__item { flex-wrap: wrap; padding: var(--space-4); }
    .journey__text { flex: 1 1 calc(100% - 52px - var(--space-4)); }
    .journey__item .amount-pill { margin-left: calc(52px + var(--space-4)); }

    .store-badge img { height: 40px; }

    .formula__expr { font-size: var(--fs-sm); }
    .policy-note { padding: var(--space-4); }

    .brand-logo__word { font-size: 1.1rem; }

    .back-to-top { right: 14px; bottom: 14px; }
}

/* ---------- Very small phones (320px) ---------- */
@media (max-width: 359.98px) {
    .container { padding-left: 14px; padding-right: 14px; }
    .feature-visual .phone, .showcase__card .phone { width: 200px; }
    .phone { border-radius: 34px; padding: 22px 8px 18px; }
    .phone__screen { border-radius: 26px; }
    .float-card div span { display: none; }
    .brand-logo__word { font-size: 1rem; }
    .brand-logo { gap: 0.5rem; }
    .btn-lg-brand { padding: 0.85rem 1.2rem; font-size: var(--fs-base); }
    .commission-table th, .commission-table td { padding: var(--space-3); font-size: var(--fs-sm); }
}

/* ==========================================================================
   Premium mobile layer (phones, max 767px)
   Compact, app-landing-page rhythm for phones. Everything here is inside
   max-width media queries, so tablets in landscape and desktop (1024px+) are untouched.
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Type scale for phones */
    :root {
        --fs-h1: clamp(1.88rem, 1.45rem + 2.1vw, 2.2rem);   /* ~30-35px */
        --fs-h2: clamp(1.42rem, 1.22rem + 0.95vw, 1.65rem); /* ~23-26px */
        --fs-h3: clamp(1.03rem, 0.97rem + 0.28vw, 1.1rem);  /* ~16.5-17.5px */
        --fs-lg: 1.03rem;
        --section-pad: 3rem;
    }

    /* One consistent side gutter */
    .container { padding-left: 16px; padding-right: 16px; }

    /* Header & menu */
    .site-header .navbar { padding: 0.45rem 0; }
    .site-header .navbar-collapse { margin-top: 0.5rem; padding: 0.5rem; border-radius: var(--radius-md); }
    .main-nav .nav-link { padding: 0.7rem 0.9rem !important; font-size: 0.95rem; border-radius: var(--radius-sm); }
    .nav-actions { flex-direction: row; gap: 0.5rem; padding-top: 0.6rem; }
    .nav-actions .btn { flex: 1 1 0; padding: 0.7rem 0.75rem; font-size: 0.9rem; }

    /* Section rhythm */
    .section-head { margin-bottom: 1.75rem; }
    .section-title { margin-bottom: 0.75rem; letter-spacing: -0.025em; }
    .section-lead { font-size: 0.95rem; line-height: 1.6; }
    .eyebrow { margin-bottom: 0.5rem; font-size: 0.7rem; }
    .section .row.g-4 { --bs-gutter-y: 0.875rem; --bs-gutter-x: 0.875rem; }

    /* Buttons: touch-friendly (46px+) but not oversized */
    .btn-lg-brand { padding: 0.72rem 1.2rem; font-size: 0.92rem; }
    .btn-block { padding: 0.75rem 1.1rem; }

    /* Hero: compact, centred stack — badge, heading, text, buttons, highlights, store badges, screenshots */
    .hero { padding: 1.75rem 0 2.25rem; }
    .hero__badge { margin-bottom: 1rem; font-size: 0.8rem; padding: 0.3rem 0.8rem 0.3rem 0.35rem; }
    .hero__badge i { width: 24px; height: 24px; font-size: 0.7rem; }
    .hero__title { margin-bottom: 0.85rem; line-height: 1.12; }
    .hero__lead { font-size: 0.95rem; line-height: 1.6; margin-bottom: 1.35rem; }
    .hero__actions { gap: 0.6rem; margin-bottom: 1.25rem; }
    .hero__trust { gap: 0.4rem 1rem; font-size: 0.8125rem; }
    .store-badges--hero { margin-top: 1.1rem; }
    .store-badges--hero .store-badge img { height: 38px; }
    .store-badges__note { margin-top: 0.45rem; }

    /* How it works: compact icon-left cards */
    .step-flow { gap: 0.75rem; }
    .step-card { display: grid; grid-template-columns: auto 1fr; column-gap: 0.9rem; align-items: start; padding: 1.1rem 1.1rem 1.15rem; }
    .step-card .icon-badge { grid-row: 1 / span 2; margin-bottom: 0; width: 44px; height: 44px; font-size: 1.05rem; border-radius: 12px; }
    .step-card__title { margin-bottom: 0.3rem; padding-right: 2.2rem; }
    .step-card__text { font-size: 0.9rem; }
    .step-card__num { font-size: 1.6rem; top: 0.85rem; right: 1rem; }

    /* Rider benefits: compact icon-left list cards */
    .feature-card { display: grid; grid-template-columns: auto 1fr; column-gap: 0.9rem; align-items: start; padding: 1rem 1.1rem; }
    .feature-card .icon-badge { grid-row: 1 / span 3; margin-bottom: 0; width: 44px; height: 44px; font-size: 1.05rem; border-radius: 12px; }
    .feature-card__title { margin-bottom: 0.25rem; }
    .feature-card__text { font-size: 0.9rem; }
    .feature-card .badge-soon { justify-self: start; margin-top: 0.5rem; }

    /* App showcase carousel */
    .showcase__card { padding: 1.25rem 1rem 1.1rem; border-radius: var(--radius-lg); }
    .showcase__card .phone { width: 188px; }
    .showcase__body { margin-top: 1rem; }
    .showcase__text { font-size: 0.9rem; }
    .shot-note { margin-top: 1.25rem; font-size: 0.8125rem; }

    /* Earnings dashboard / QR / taxi feature visuals */
    .feature-visual { padding: 0.5rem 0; }
    .feature-visual .phone { width: 220px; }
    .callout-list { gap: 0.6rem; margin-top: 1.25rem; }
    .callout { padding: 0.8rem 0.9rem; }
    .callout div > span { font-size: 0.85rem; }
    .qr-flow { margin: 1.25rem 0; }
    .qr-flow__step { gap: 0.85rem; padding-bottom: 0.9rem; }
    .qr-flow__icon { width: 40px; height: 40px; }
    .qr-flow__step:not(:last-child)::before { left: 19px; top: 44px; }
    .qr-flow__text { font-size: 0.9rem; }
    .policy-note { padding: 0.9rem 1rem; }

    /* Earnings & rewards */
    .reward-card { padding: 1.5rem 1.35rem; border-radius: var(--radius-lg); }
    .reward-card__amount { font-size: clamp(2.4rem, 2rem + 2vw, 2.85rem); margin: 0.6rem 0 0.75rem; }
    .reward-card__text { font-size: 0.95rem; }
    .reward-card__points { margin: 1rem 0; gap: 0.6rem; }
    .rules-list { gap: 0.6rem; margin-top: 1.1rem; }
    .rules-list li { font-size: 0.9rem; }
    .link-arrow { margin-top: 1rem; }

    /* GPS taxi meter */
    .formula { margin: 1.1rem 0; padding: 1rem; }
    .formula__expr { gap: 0.35rem; }
    .formula__expr span { padding: 0.35rem 0.6rem; font-size: 0.85rem; }
    .taxi-feature { padding: 0.85rem 0.9rem; }
    .taxi-feature span { font-size: 0.85rem; }

    /* FAQ */
    .faq-accordion { gap: 0.6rem; }
    .faq-accordion .accordion-button { padding: 0.9rem 1rem; font-size: 0.95rem; }
    .faq-accordion .accordion-button::after { width: 26px; height: 26px; font-size: 0.7rem; }
    .faq-accordion .accordion-body { padding: 0 1rem 1rem; font-size: 0.9rem; }

    /* Contact / support cards: icon-left */
    .support-card { display: grid; grid-template-columns: auto 1fr; column-gap: 0.9rem; row-gap: 0.2rem; padding: 1.1rem; }
    .support-card .icon-badge { grid-row: 1 / span 3; margin-bottom: 0; width: 44px; height: 44px; font-size: 1.05rem; border-radius: 12px; }
    .support-card strong { font-size: 1.0625rem; }
    .support-card > span:not(.icon-badge) { font-size: 0.9rem; }
    .support-card > .support-card__link { padding-top: 0.35rem; }

    /* Final CTA */
    .cta-banner { padding: 1.75rem 1.35rem; gap: 1.25rem; border-radius: var(--radius-lg); }
    .cta-banner__text { font-size: 0.95rem; }
    .cta-banner__actions { gap: 0.6rem; }

    /* Footer */
    .site-footer { padding: 2.5rem 0 1.25rem; }
    .site-footer .row.g-4 { --bs-gutter-y: 1.75rem; }
    .site-footer__title { margin-bottom: 0.75rem; }
    .site-footer__links { gap: 0.45rem; }
    .site-footer__bottom { margin-top: 2rem; padding-top: 1.1rem; }

    /* Sub-pages */
    .page-hero { padding: 2rem 0 2.25rem; }
    .page-hero__title { font-size: var(--fs-h2); margin-bottom: 0.75rem; }
    .page-hero__lead { font-size: 0.95rem; }
    .crumbs { margin-bottom: 1rem; }
    .timeline { margin-bottom: 2rem; }
    .timeline::before { left: 23px; top: 24px; bottom: 24px; }
    .timeline__marker { width: 48px; height: 48px; font-size: 1.1rem; box-shadow: 0 0 0 6px var(--color-light), 0 0 0 7px var(--color-border); }
    .timeline__card { padding: 1rem 1.1rem; }
    .verify-box { padding: 1.25rem; border-radius: var(--radius-lg); }
    .check-card, .info-card { padding: 1.35rem; }
    .journey__item { padding: 0.9rem 1rem; }
    .help-card { padding: 1.25rem; margin-top: 2rem; }
    .placeholder-doc { padding: 2rem 1.25rem; }
    .contact-info, .form-card { padding: 1.35rem; border-radius: var(--radius-lg); }
    .faq-tools { margin-bottom: 1.25rem; }
    .auth { padding: 1.25rem 0 2rem; }
    .auth__aside { padding: 1.6rem 1.35rem; }
    .auth__card { padding: 1.5rem 1.35rem; }
    .auth__perks { margin: 1rem 0; gap: 0.6rem; }
}

@media (max-width: 575.98px) {
    /* Hero screenshots: one centred group, dashboard in front, scaled proportionally */
    .hero__visual { padding: 2.5rem 0 0.75rem; }
    .hero__visual .phone-shot--front { width: 56%; }
    .phone-shot--back { width: 40%; }
    .phone-shot--left { left: 5.5%; }
    .phone-shot--right { right: 5.5%; }
}

@media (max-width: 359.98px) {
    :root { --fs-h1: 1.72rem; --fs-h2: 1.32rem; }
    .container { padding-left: 14px; padding-right: 14px; }
    .nav-actions { flex-direction: column; }
}