/* ============================================================
   KROMA STUDIO — mobile.css
   Fix responsive mobile/tablet (audit 2026-06-12).
   SOLO regole dentro @media (max-width: ≤900px): il desktop
   non è toccato per costruzione. Caricato DOPO site.css/inner.css
   → a pari specificità vince in cascata nei range coperti.
   ============================================================ */

/* ---------- ≤900px ---------- */
@media (max-width: 900px) {
  /* CHROME — menu overlay sopra il pop-up consulenza: il menu aperto
     (.mmenu, z-index 300 in site.css) finiva SOTTO il toast .kpop
     (z-index 1000) che copriva "Contatti" e la CTA. */
  .mmenu {
    z-index: 1100;
    justify-content: flex-start;
    padding-top: clamp(112px, 16vh, 150px);
    overflow-y: auto;
  }

  .mmenu__links a {
    font-size: clamp(2.05rem, 7vw, 3.2rem);
    line-height: 1.06;
  }

  /* CHROME — tap target X chiudi menu: area toccabile ~53×53px senza
     spostare visivamente il glifo (compensa il padding su top/right;
     base: top clamp(20px,4vh,40px), right var(--gut), padding 0). */
  .mmenu__close {
    padding: 12px;
    top: calc(clamp(20px, 4vh, 40px) - 12px);
    right: calc(var(--gut) - 12px);
  }

  /* CONTATTI — su tablet/desktop stretti la nav trasparente entra sopra
     il titolo della hero. Il copy scende sotto la zona del logo fisso. */
  body.page-id-8 .contact-hero__inner {
    justify-content: flex-end;
    padding-top: 104px;
    padding-bottom: clamp(28px, 7vw, 56px);
  }
}

/* ---------- ≤860px ---------- */
@media (max-width: 860px) {
  /* CHROME — burger: area tocco più alta (~40px), orizzontale invariato
     (base padding 8px). */
  .nav__burger { padding: 14px 8px; }

  /* RICERCA — la paginazione dei risultati è testo nudo (search.php non ha
     la classe .blog-list che attiva le pillole di inner.css): stesse pillole,
     scopate a .search-results. */
  .search-results .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: clamp(48px, 9vw, 80px);
  }
  .search-results .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid var(--rule-strong);
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: .04em;
    color: var(--ink);
    text-decoration: none;
  }
  .search-results .page-numbers.current {
    background: var(--kroma);
    border-color: var(--kroma);
    color: #fff;
  }
  .search-results .page-numbers.dots {
    border: 0;
    min-width: auto;
    padding: 0 4px;
  }

  /* RICERCA — la query utente (anche senza spazi) non deve sbordare. */
  .search .page-hero__title,
  .search .minihero__title,
  .search .minihero__lead { overflow-wrap: anywhere; }
}

/* ---------- ≤820px ---------- */
@media (max-width: 820px) {
  /* HOME — hero: a 768–820px (tablet portrait) il video showreel 16:9 era
     croppato ~58% da object-fit:cover (testo nel reel mutilato). Resta
     l'immagine statica .hero__img sottostante, come su mobile.
     (Selettore 0-1-1 per battere site.css `.hero__media video,.hero__video`;
     il JS site.js carica il video solo da 821px in su.) */
  .hero__media .hero__video { display: none; }

  /* HOME — worklist "Diventa il prossimo": tra 681 e 820px la colonna tag
     schiacciava i titoli a una parola per riga. Si estende ai tablet il
     layout impilato già usato ≤680px. */
  .workrow { grid-template-columns: 64px 1fr; }
  .workrow__meta { grid-column: 2; text-align: left; }

  /* SERVIZI — freccia Kroma Agency: tra 721 e 820px restava a opacità piena
     sotto il testo bianco di .partner__text. Estende l'attenuazione già
     prevista ≤720px (inner.css). */
  .svc-agency::after { opacity: .32; }
}

/* ---------- ≤760px ---------- */
@media (max-width: 760px) {
  /* CHI SIAMO — touch target accordion "Approfondisci" founder (era ~19px). */
  .person__more > summary { padding-block: 12px; }

  /* COME LAVORIAMO — touch target link "Tutte le testimonianze" (era ~23px). */
  .tease-center .shead .more { padding-block: 10px; }

  /* CTA finale (Chi siamo / Come lavoriamo e pagine col componente) —
     touch target mail (era ~20px). */
  .cta__mail { display: inline-block; padding-block: 12px; }

  /* TESTIMONIANZE — a 1 colonna l'equalizzazione delle righe
     (grid-auto-rows:1fr) stirava tutte le 37 card alla più alta
     (80–150px di vuoto sotto i chip): righe a misura di contenuto. */
  .tmgrid--video { grid-auto-rows: auto; }

  /* TESTIMONIANZE — a 1 colonna piena (561–724px) il video 9:16 superava
     i 950px di altezza: cap conservativo e centratura. Sotto i 520px la
     card è già più stretta di 480px → nessun effetto. */
  .tmgrid--video .tmcard { width: 100%; max-width: 480px; margin-inline: auto; }
}

/* ---------- ≤680px ---------- */
@media (max-width: 680px) {
  /* PORTFOLIO — filtri settore/servizio: tap target 36→40px e chip un po'
     più compatte per ridurre l'ingombro del doppio blocco filtri a 390px. */
  .work-filter { gap: 8px; }
  .work-filter__btn { padding: 10px 13px; min-height: 40px; }
}

/* ---------- ≤600px ---------- */
@media (max-width: 600px) {
  /* CHROME — footer: blocco FESR schiacciato (testo in colonna ~180px
     accanto al logo): logo sopra, testo a tutta larghezza. */
  .footer__fesr { flex-direction: column; align-items: flex-start; gap: 18px; }
  .footer__fesr-text { flex: 0 0 auto; width: 100%; }
  .footer__fesr-logo { height: 48px; max-width: 100%; }

  /* COME LAVORIAMO — infografica metodo (sorgente 2560px) illeggibile a
     390px (etichette ~9px): fascia scorrevole in orizzontale con immagine
     a 720px → etichette ≈18px equivalenti. */
  .cl-infographic .media-band--full {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cl-infographic .media-band--full::-webkit-scrollbar { display: none; }
  .cl-infographic .media-band--full img { width: 720px; max-width: none; }

  /* COME LAVORIAMO — riequilibrio fascia arancione infografica
     (padding 20px sopra vs 64px sotto). */
  .section.cl-infographic { padding-bottom: 36px; }

  /* ARTICOLO — tap target condivisione social e tag (solo padding,
     wrappano già bene). */
  .single__share .single__share-btn { padding: 11px 16px; }
  .single__tags .single__tag { padding: 9px 14px; }

  /* CONTATTI — checkbox consenso più grande e brand (markup CF7 intatto). */
  .wpcf7-form .form-consent input[type=checkbox] {
    width: 20px;
    height: 20px;
    accent-color: var(--kroma);
    flex: 0 0 auto;
    margin-top: 2px;
  }

  /* CONTATTI — cap altezza textarea su mobile (rows=10 → ~285px). */
  .contact-card .wpcf7-form textarea { height: 200px; min-height: 140px; }

  /* CASE STUDIES — area tap dei link "Download the pdf". */
  .feat-item__desc .link { padding-block: 8px 6px; }
}

/* ---------- ≤460px ---------- */
@media (max-width: 460px) {
  /* CHROME — voci menu overlay: corpo leggermente ridotto (base 2.4rem)
     così "Clienti / Casi studio" non tocca il bordo a 390px e non spezza
     male a 360–375px. */
  .mmenu__links a { font-size: 2.05rem; line-height: 1.2; }
}