/**
 * ArGetia v4.0 — Responsive CSS
 * Breakpoints: 1200px | 1024px | 768px | 480px | 375px
 */

/* ============================================================
   DESKTOP LARGE — 1400px+
   ============================================================ */
@media (min-width: 1400px) {
    .container { max-width: 1320px; }
    .hero-headline { font-size: 130px; }
}

/* ============================================================
   DESKTOP — max 1200px
   ============================================================ */
@media (max-width: 1200px) {
    .container { padding-inline: 32px; }
    .split-wrap { gap: 60px; }
    .detail-grid { gap: 60px; }
    .tech-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   TABLET — max 1024px
   ============================================================ */
@media (max-width: 1024px) {
    .container { padding-inline: 28px; }

    /* Services split → stack */
    .split-wrap { grid-template-columns: 1fr; gap: 48px; }
    .split-sticky { position: relative; top: auto; }
    .split-items { padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

    /* Bento */
    .bento { grid-template-columns: 1fr 1fr; }
    .bento-item.featured { grid-column: span 2; grid-row: span 1; }

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

    /* Values / Skills */
    .two-col { grid-template-columns: 1fr; gap: 48px; }

    /* Service detail */
    .detail-grid { grid-template-columns: 1fr; gap: 48px; }
    .detail-grid.rev { direction: ltr; }

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

    /* Feat boxes */
    .feat-boxes { grid-template-columns: 1fr; }

    /* Blog / Projects grid */
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .proj-grid { grid-template-columns: repeat(2, 1fr); }

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

    /* Footer */
    .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
}

/* ============================================================
   TABLET SMALL / MOBILE — max 768px
   ============================================================ */
@media (max-width: 768px) {
    /* Base sections */
    .section { padding: 80px 0; }
    .section-sm { padding: 60px 0; }
    .container { padding-inline: 20px; }

    /* Floating nav */
    .site-header {
        top: 12px;
        width: calc(100% - 24px);
        border-radius: 16px;
        padding: 10px 16px;
    }
    .main-navigation { display: none; }
    .nav-cta-btn { display: none; }
    .nav-toggle { display: flex; }

    /* Hero */
    .hero {
        padding: 120px 0 80px;
        text-align: center;
    }
    .hero-eyebrow { margin-bottom: 20px; }
    .hero-headline { font-size: clamp(42px, 11vw, 72px); }
    .hero-desc { margin-left: auto; margin-right: auto; }
    .hero-actions {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .hero-actions .btn { width: 100%; max-width: 280px; justify-content: center; }
    .tech-pills { justify-content: center; }

    /* Orbs — smaller */
    .orb-1 { width: 320px; height: 320px; }
    .orb-2 { width: 260px; height: 260px; }
    .orb-3 { display: none; }

    /* Services split → single col */
    .split-wrap { grid-template-columns: 1fr; gap: 40px; }
    .split-items { grid-template-columns: 1fr; }

    /* Stats */
    .stats-wrap { padding: 40px 24px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .stat-num { font-size: 40px; }

    /* Bento → single col */
    .bento { grid-template-columns: 1fr; }
    .bento-item.featured { grid-column: span 1; aspect-ratio: 16/9; }

    /* Values */
    .two-col { grid-template-columns: 1fr; gap: 40px; }

    /* Detail grid */
    .detail-grid { grid-template-columns: 1fr; gap: 40px; }
    .detail-grid.rev { direction: ltr; }

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

    /* CTA box */
    .cta-box { padding: 60px 28px; }
    .cta-title { font-size: clamp(28px, 7vw, 44px); }

    /* Page hero */
    .page-hero {
        min-height: 50vh;
        padding-top: 110px;
        padding-bottom: 60px;
        text-align: center;
    }
    .page-hero-title { font-size: clamp(32px, 8vw, 56px); }
    .page-hero-sub { margin-left: auto; margin-right: auto; }

    /* Blog grid */
    .blog-grid { grid-template-columns: 1fr; gap: 20px; }
    .proj-grid { grid-template-columns: 1fr; gap: 20px; }

    /* Contact */
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }

    /* Solutions */
    .sol-grid { grid-template-columns: 1fr; }

    /* About page grids */
    .about-grid { grid-template-columns: 1fr; gap: 40px; }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }
    .footer-social { justify-content: center; }
    .footer-col ul { align-items: center; display: flex; flex-direction: column; }
    .footer-bottom { flex-direction: column; gap: 12px; text-align: center; }

    /* 404 */
    .e404-num { font-size: clamp(80px, 22vw, 140px); }

    /* Scroll bar */
    .scroll-hint { display: none; }

    /* Spotlight cursor — disable glow on touch devices */
    .cursor-spotlight { display: none; }
}

/* ============================================================
   MOBILE SMALL — max 480px
   ============================================================ */
@media (max-width: 480px) {
    .container { padding-inline: 16px; }

    .hero-headline { font-size: clamp(36px, 10vw, 56px); }
    .hero-desc { font-size: 15px; }

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

    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .stat-num { font-size: 34px; }
    .stat-lbl { font-size: 12px; }

    .tech-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .tech-badge { padding: 14px 10px; }

    .cta-box { padding: 48px 20px; }

    .footer-grid { gap: 32px; }

    .val-card { padding: 22px; }

    .svc-card { padding: 24px; }

    /* Contact form — single col grid */
    #argetia-contact-form > div:first-of-type {
        grid-template-columns: 1fr !important;
    }
}

/* ============================================================
   MOBILE TINY — max 375px
   ============================================================ */
@media (max-width: 375px) {
    .container { padding-inline: 14px; }
    .hero-headline { font-size: 32px; }
    .site-header { width: calc(100% - 20px); }
    .e404-num { font-size: 80px; }
    .stat-num { font-size: 30px; }
    .btn { padding: 12px 20px; font-size: 13px; }
}

/* ============================================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================================ */
@media (hover: none) and (pointer: coarse) {
    .cursor-spotlight { display: none; }
    .magnetic-wrap { transform: none !important; }
    .bento-item:hover { transform: none; }
    .svc-card:hover { transform: none; }
    .val-card:hover { transform: none; }
    .card:hover { transform: none; }
    .bento-item .bento-over { opacity: 1; }
    .bento-item.featured .bento-featured-info { opacity: 1; }
}

/* ============================================================
   HIGH DPI / RETINA
   ============================================================ */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .noise-overlay { background-size: 150px 150px; }
}

/* ============================================================
   DARK MODE (already dark — light mode OS override suppressed)
   ============================================================ */
@media (prefers-color-scheme: light) {
    :root { color-scheme: dark; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
    .site-header,
    .cursor-spotlight,
    .noise-overlay,
    #page-transition,
    .orb,
    .cta-box,
    .footer-social,
    .scroll-bar,
    .scroll-hint { display: none !important; }

    body { background: #fff; color: #000; }
    a { color: #333; }
}