/* ══════════════════════════════════════════
   RESPONSIVE — Outsiders
   Breakpoints : 960px | 640px | 480px
   ══════════════════════════════════════════ */

/* ─── TABLET (≤ 960px) ─── */
@media (max-width: 960px) {

    /* Dodge game */
    #dodge-zone { display: none; }

    /* Container */
    .container { padding: 0 2.5rem; }

    /* Nav blend layer — hide on touch to avoid double hamburger square */
    .nav-blend-layer { display: none; }

    /* Hero */
    .hero-content {
        padding-left: 3rem;
        padding-right: 2rem;
    }
    .hero-bottom { margin-top: 44vh; }

    /* About */
    .about-grid { grid-template-columns: 1fr; gap: 3rem; }
    .about-img-wrap { max-width: 500px; margin: 0 auto; }
    .about-body { max-width: 100%; }

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

    /* Portfolio */
    .portfolio-grid { grid-template-columns: 1fr; }
    .p-item.featured { grid-column: span 1; }

    /* Process */
    .process-steps { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
    .process-svg-line { display: none; }

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

/* ─── MOBILE (≤ 640px) ─── */
@media (max-width: 640px) {

    /* Sections */
    section { padding: 4.5rem 0; }
    .container { padding: 0 1.5rem; }

    /* Nav lang switcher */
    .lang-switcher a,
    .lang-switcher span { font-size: 0.8rem; }

    /* Hero — clear fixed nav */
    .hero-content {
        padding-left: 0;
        padding-right: 0;
        padding-top: 80px;
        min-height: 85vh;
    }
    .hero-label { font-size: 0.65rem; padding: 0.3rem 0.7rem; }
    .hero-bottom { margin-top: 28vh; }
    .hero-title-video { width: 160vw; top: 36%; }
    .hero-sub { font-size: 0.95rem; max-width: 100%; }

    /* Hero buttons — side by side */
    .hero-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
        gap: 0.65rem;
    }
    .btn-primary,
    .btn-ghost {
        flex: 1;
        width: auto;
        min-width: 130px;
        padding: 0.85rem 1rem;
        text-align: center;
        justify-content: center;
    }

    /* About — annotations always visible on mobile */
    .about-grid { gap: 2rem; }
    .about-img-wrap { max-width: 100%; }
    .about-img-wrap img { min-height: 280px; }
    .about-annots { display: block; }
    .about-img-wrap .annot-line  { transform: scaleX(1); }
    .about-img-wrap .annot-label { opacity: 1; }

    /* Skills — center tags */
    .skills-band { padding: 2.5rem 0; }
    .skills-band .container {
        gap: 0.5rem;
        justify-content: center;
    }

    /* Services */
    .services-grid { grid-template-columns: 1fr; gap: 1.25rem; }
    .services-top { flex-direction: column; gap: 1rem; }
    .service-a11y { margin-top: 0.5rem; }

    /* Portfolio */
    .portfolio-grid { grid-template-columns: 1fr; }
    .p-project-card { flex-direction: column; }
    .p-project-connector { display: none; }

    /* Process — vertical connector */
    .process-steps {
        grid-template-columns: 1fr;
        gap: 2rem;
        position: relative;
    }
    .process-steps::before {
        content: '';
        position: absolute;
        left: 27px;
        top: 56px;
        bottom: 56px;
        width: 1px;
        background: linear-gradient(
            to bottom,
            transparent,
            rgba(28, 172, 185, 0.25) 20%,
            rgba(28, 172, 185, 0.25) 80%,
            transparent
        );
        pointer-events: none;
    }
    .process-top { margin-bottom: 2rem; }

    /* Contact form */
    .f-row { grid-template-columns: 1fr; }
    .contact-grid { gap: 2rem; }

    /* Footer — centered layout */
    .footer-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        justify-items: center;
        text-align: center;
        gap: 0.75rem;
    }
    .footer-logo  { grid-column: 1; grid-row: 1; }
    .footer-copy  {
        grid-column: 1;
        grid-row: 2;
        text-align: center;
        padding-right: 0;
    }
    .footer-legal {
        grid-column: 1;
        grid-row: 3;
        justify-self: center;
        padding-left: 0;
    }
    .footer-a11y  {
        grid-column: 1;
        grid-row: 4;
        text-align: center;
        padding-right: 0;
    }
    /* Tagline on its own line */
    .footer-slogan { display: block; }

    /* Back to top */
    #backToTop { bottom: 1.5rem; right: 1.5rem; }
}

/* ─── MOBILE SMALL (≤ 480px) ─── */
@media (max-width: 480px) {

    /* Container */
    .container { padding: 0 1.25rem; }

    /* Sections */
    section { padding: 3.5rem 0; }

    /* Nav */
    .nav-top { padding: 0 1.25rem; }
    .lang-switcher a,
    .lang-switcher span { font-size: 0.72rem; }

    /* Hero */
    .hero-content { padding-left: 0; padding-right: 0; }
    .hero-bottom { margin-top: 24vh; }
    .hero-title-video { width: 190vw; top: 33%; }
    .hero-sub { font-size: 0.9rem; }

    /* About */
    .about-img-wrap img { min-height: 220px; }

    /* Skills */
    .skill-tag { font-size: 0.7rem; padding: 0.35rem 0.75rem; }

    /* Service cards */
    .service-card { padding: 1.5rem; }

    /* Process steps */
    .p-step { padding: 1.5rem; }

    /* Contact */
    .s-title { font-size: clamp(1.7rem, 8vw, 2.5rem); }

    /* Footer */
    .footer-copy { font-size: 0.78rem; }
}