/* ============================================================
   Bravepesa — Responsive CSS
   Mobile-first. Pure dark mode.
   ============================================================ */

/* ── Tablet 768px+ ─────────────────────────────────────────── */
@media (min-width: 768px) {
    .desktop-nav { display: flex; }
    .mobile-menu-toggle { display: none; }
    .footer-links { display: flex; }

    .hero-inner { flex-direction: row; align-items: center; }
    .hero-content { flex: 1; }
    .hero-visual  { flex-shrink: 0; }

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

    .service-grid    { grid-template-columns: repeat(2, 1fr); }
    .blog-grid       { grid-template-columns: repeat(2, 1fr); }
    .extra-cash-grid { grid-template-columns: repeat(2, 1fr); }
    .posts-grid      { grid-template-columns: repeat(2, 1fr); }

    .classes-layout  { flex-direction: row; }
    .classes-info, .booking-form-wrapper { flex: 1; }

    .resume-layout { flex-direction: row; }
    .resume-info, .resume-form-wrapper { flex: 1; }

    .proxies-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-8); }

    .footer-inner { flex-direction: row; justify-content: space-between; text-align: left; }
}

/* ── Desktop 1024px+ ───────────────────────────────────────── */
@media (min-width: 1024px) {
    .service-grid    { grid-template-columns: repeat(4, 1fr); }
    .blog-grid       { grid-template-columns: repeat(3, 1fr); }
    .extra-cash-grid { grid-template-columns: repeat(3, 1fr); }
    .posts-grid      { grid-template-columns: repeat(3, 1fr); }
}

/* ── Container Queries ─────────────────────────────────────── */
@container (min-width: 500px) {
    .service-grid { grid-template-columns: repeat(2, 1fr); }
}
@container (min-width: 900px) {
    .service-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Global mobile polish ──────────────────────────────────── */
@media (max-width: 767px) {
    .desktop-only { display: none !important; }
    /* Prevent horizontal overflow on small screens */
    body { overflow-x: hidden; }

    /* Tighter page hero on mobile */
    .page-hero { padding-block: var(--sp-8); margin-bottom: var(--sp-6); }
    .page-hero h1 { font-size: var(--text-2xl); }
    .page-hero p  { font-size: var(--text-base); }

    /* Hero tighter on mobile */
    .hero { padding-block: var(--sp-10); }
    .hero-title { font-size: clamp(1.75rem, 7vw, 2.5rem); }
    .hero-subtitle { font-size: var(--text-base); margin-bottom: var(--sp-6); }

    /* Booking card full padding */
    .booking-card { padding: var(--sp-5); }

    /* Proxy buy card */
    .proxy-buy { padding: var(--sp-5); }

    /* Paywall box */
    .paywall-box { padding: var(--sp-5); }

    /* Dashboard tabs scroll */
    .dashboard-tabs, .service-tabs { overflow-x: auto; flex-wrap: nowrap; }

    /* Data table horizontal scroll */
    .data-table-wrapper { -webkit-overflow-scrolling: touch; }

    /* Countdown units tighter */
    .countdown-unit span { min-width: 52px; padding: var(--sp-2) var(--sp-1); font-size: clamp(1.5rem, 9vw, 2.25rem); }
    .countdown-sep { font-size: 1.25rem; margin-bottom: 1.2rem; }

    /* Access key smaller on tiny screens */
    .meeting-key-display code { font-size: clamp(1.25rem, 8vw, 1.75rem); letter-spacing: 0.15em; }

    /* Requirements list single column */
    .requirements-list { grid-template-columns: 1fr; }

    /* Blog card read more */
    .blog-card-read { margin-top: var(--sp-2); }

    /* Auth modal full width */
    .auth-modal-box { padding: var(--sp-6); }

    /* Success page */
    .success-page { padding-block: var(--sp-10); }
    .success-icon { font-size: 3rem; }
}

/* ── Tablet subscriber view — handled in components.css ───── */