/* =========================================================
   responsive.css
   Il mobile non è il desktop rimpicciolito.
   Le misure di "videobydan" sono MISURATE su ogni viewport,
   non stimate: la parola deve stare su una riga sempre.

   Griglia dei lavori:  >=1100px  3 colonne
                        650-1099  2 colonne
                        <650      1 colonna
   ========================================================= */

/* ---------- griglia lavori: tablet ---------- */

@media (max-width: 1099px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- griglia lavori: telefono ---------- */

@media (max-width: 649px) {
  .work-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(48px, 7vh, 72px);
  }
}

/* ---------- tablet (768 → 1024px) ---------- */

@media (max-width: 1024px) and (min-width: 768px) {
  .brand   { font-size: clamp(52px, min(12vw, 22svh), 140px); }
  .about__grid { gap: clamp(20px, 3vw, 40px); }
  .name    { font-size: 17px; }
  .tagline { font-size: 17px; }
}

/* ---------- telefoni (≤ 767px) ---------- */

@media (max-width: 767px) {

  :root {
    --pad: 20px;
    --section-space: clamp(80px, 11vh, 120px);
  }

  .hero {
    /* meno spinta verso l'alto: sul telefono il centro ottico è più in basso */
    padding-bottom: calc(max(var(--pad), env(safe-area-inset-bottom)) + 2.5vh);
  }

  .brand {
    /* 16.5vw: misurato. La parola "videobydan" è larga 4,85 volte la
       dimensione del carattere: questa è la misura massima che la tiene
       su una riga con margine anche su uno schermo da 320px. */
    font-size: clamp(44px, 16.5vw, 110px);
    letter-spacing: -.045em;
  }

  .name    { margin-top: 16px; font-size: 15px; }
  .tagline { margin-top: 10px; max-width: 26ch; font-size: 15px; line-height: 1.4; }

  /* 3 emoji invece di 5, più piccole, e solo dove non c'è testo.
     Spariscono la videocamera (dove ora c'è la lente) e le cuffie. */
  .emoji { font-size: calc(var(--s) * .62); }
  .emoji--desk,
  .emoji:nth-child(2),
  .emoji:nth-child(5) { display: none; }

  .about__grid  { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .about__text  { max-width: 100%; font-size: clamp(18px, 5.4vw, 26px); }
  .about__clap  { justify-self: start; font-size: clamp(72px, 22vw, 110px); }

  .hero__cta { margin-top: 24px; }
  .btn { padding: .8em 1.25em; font-size: 14px; }

  /* la lente scende un po' e si stringe: sul telefono lo spazio è tutto in alto */
  .lens { width: clamp(58px, 18vw, 88px); left: 79% !important; top: 21% !important; }
  .contact__cta { font-size: clamp(38px, 11.5vw, 62px); }
  .footer { margin-top: 80px; }
}

/* ---------- schermi larghi ma bassi (finestre non a schermo intero) ---------- */

@media (min-width: 1025px) and (max-height: 720px) {
  .brand { font-size: min(11vw, 30svh); }
}