/* ==========================================================================
   2TELLERS — responsive.css
   Breakpoints: 1080px (tablet), 820px (small tablet), 640px (mobile).
   ========================================================================== */

@media (max-width: 1080px) {
    .games__grid { grid-template-columns: 1fr; }
    .studio__numbers { grid-template-columns: repeat(2, 1fr); }
    .founders__grid { grid-template-columns: 1fr; }
    .founders__photo { max-width: 520px; }
    .contact__grid { grid-template-columns: 1fr; }
    .contact__channels {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 820px) {
    :root { --nav-h: 72px; }

    .nav__links, .nav__cta { display: none; }
    .nav__toggle { display: flex; }

    .experience__stats,
    .studio__grid { grid-template-columns: 1fr; }

    .studio__pillar {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .hero__scroll-hint { display: none; }

    .hero__strip { gap: 24px; }
}

@media (max-width: 640px) {
    body { font-size: 15px; }

    /* Custom sections collapse cleanly */
    .custom-cards { grid-template-columns: 1fr; }
    .custom-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Order/nav chrome */
    .mode-toggle { width: 38px; height: 38px; }

    :root { --section-pad: 90px; --radius: 14px; }

    .hero { padding-top: calc(var(--nav-h) + 24px); }

    .hero__actions { flex-direction: column; align-items: stretch; }
    .hero__actions .btn { justify-content: center; }

    .hero__strip { flex-direction: column; gap: 18px; }

    .timeline__list { padding-left: 40px; }
    .timeline__dot { left: -36px; }

    .studio__numbers { grid-template-columns: 1fr 1fr; gap: 26px; }

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

    .footer__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .logo-card { min-width: 150px; padding: 22px 18px; }

    /* 3D tilt off on touch layouts */
    .game-card, .founder-card, .founders__photo { transform: none !important; }
}

/* Coarse pointers never see the custom cursor or magnetic effects */
@media (pointer: coarse) {
    .cursor { display: none !important; }
}


/* Very narrow phones */
@media (max-width: 400px) {
    .nav__brand-word { display: none; }
    .hero__title-line { font-size: clamp(64px, 22vw, 96px); }
    .brains__svg { width: 86vw; }
    .loader__inner { width: 86vw; }
    .game-card__name { font-size: 30px; }
    .footer__logo { font-size: 24vw; }
}

/* Grids never overflow their container on any width */
.custom-cards { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.custom-logos { grid-template-columns: repeat(auto-fill, minmax(min(170px, 100%), 1fr)); }

/* Touch devices: no hover-dependent UI surprises */
@media (hover: none) {
    [data-spotlight]::before { display: none; }
    .game-card:hover .game-card__border { opacity: 0; }
}