/* busta-mobile-desktopish-v1 */
/* Mobile più simile al desktop: compatto, non verticalizzato. */
/* Non tocca /chaoscore player. Pensato per Busta Files / archive pages. */

@media (max-width: 820px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    -webkit-text-size-adjust: 100%;
  }

  * {
    box-sizing: border-box;
  }

  img,
  video {
    max-width: 100%;
  }

  button,
  a,
  [role="button"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /*
    Layout generale:
    invece di far collassare tutto in colonna lunga,
    stringiamo i blocchi come una dashboard desktop compatta.
  */
  main,
  .main,
  .page,
  .wrap,
  .wrapper,
  .container,
  .content,
  .archive,
  .archive-wrap,
  .busta-files,
  .evidence-room {
    max-width: 100% !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  /*
    Titoli e scritte: meno enormi su mobile,
    così non rompono il layout in mille righe.
  */
  h1 {
    font-size: clamp(1.55rem, 8vw, 3.2rem) !important;
    line-height: 0.9 !important;
    letter-spacing: -0.06em !important;
  }

  h2 {
    font-size: clamp(1rem, 5vw, 1.8rem) !important;
    line-height: 0.95 !important;
  }

  h3,
  .title,
  .folder-title,
  .card-title,
  .file-title {
    line-height: 0.95 !important;
  }

  p,
  .subtitle,
  .caption,
  .meta,
  .folder-meta,
  .card-meta,
  .file-meta {
    font-size: clamp(0.58rem, 2.4vw, 0.82rem) !important;
    line-height: 1.15 !important;
  }

  /*
    Le griglie principali devono restare griglie.
    Non una card sotto l'altra.
  */
  .grid,
  .cards,
  .card-grid,
  .folders,
  .folder-grid,
  .archive-grid,
  .files-grid,
  .evidence-grid,
  .gallery,
  .gallery-grid,
  .submissions-grid,
  .approved-grid,
  [class*="grid"],
  [class*="gallery"] {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
  }

  /*
    Se ci sono card molto grandi, le rendiamo più compatte.
  */
  .card,
  .folder,
  .folder-card,
  .file-card,
  .evidence-card,
  .submission-card,
  .case-card,
  [class*="card"] {
    min-width: 0 !important;
    padding: 9px !important;
    border-radius: 14px !important;
  }

  /*
    Immagini/preview: tre affiancate, non enormi in verticale.
  */
  .card img,
  .folder img,
  .folder-card img,
  .file-card img,
  .evidence-card img,
  .submission-card img,
  .case-card img,
  .gallery img,
  .gallery-grid img,
  [class*="card"] img,
  [class*="gallery"] img {
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    border-radius: 11px !important;
  }

  /*
    Testi dentro card: massimo 2 righe, così le card non diventano torri.
  */
  .card h3,
  .folder h3,
  .folder-card h3,
  .file-card h3,
  .evidence-card h3,
  .submission-card h3,
  .case-card h3,
  .card-title,
  .folder-title,
  .file-title,
  [class*="card"] h3,
  [class*="card"] .title {
    font-size: clamp(0.62rem, 2.65vw, 0.9rem) !important;
    line-height: 0.96 !important;
    letter-spacing: -0.035em !important;
    margin: 6px 0 3px !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  .card p,
  .folder p,
  .folder-card p,
  .file-card p,
  .evidence-card p,
  .submission-card p,
  .case-card p,
  [class*="card"] p {
    font-size: clamp(0.5rem, 2.15vw, 0.68rem) !important;
    line-height: 1.08 !important;
    margin: 2px 0 !important;

    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
  }

  /*
    Bottoni/azioni dentro card: più piccoli e non verticali enormi.
  */
  .actions,
  .card-actions,
  .file-actions,
  .folder-actions,
  [class*="actions"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    align-items: center !important;
  }

  .actions button,
  .card-actions button,
  .file-actions button,
  .folder-actions button,
  [class*="actions"] button {
    min-height: 27px !important;
    padding: 5px 7px !important;
    font-size: 0.58rem !important;
    border-radius: 999px !important;
  }

  /*
    Search/header compatti.
  */
  input[type="search"],
  input[type="text"],
  .search,
  .search-input,
  [class*="search"] input {
    min-height: 34px !important;
    font-size: 0.78rem !important;
    border-radius: 999px !important;
  }
}

/*
  Telefoni molto stretti:
  se 3 colonne diventano troppo sacrificate, passiamo a 2.
  Meglio 2 colonne ordinate che una colonna infinita.
*/
@media (max-width: 420px) {
  .grid,
  .cards,
  .card-grid,
  .folders,
  .folder-grid,
  .archive-grid,
  .files-grid,
  .evidence-grid,
  .gallery,
  .gallery-grid,
  .submissions-grid,
  .approved-grid,
  [class*="grid"],
  [class*="gallery"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .card,
  .folder,
  .folder-card,
  .file-card,
  .evidence-card,
  .submission-card,
  .case-card,
  [class*="card"] {
    padding: 8px !important;
    border-radius: 13px !important;
  }
}

/*
  Telefoni grandi / landscape:
  mantiene 3 colonne, quasi desktop.
*/
@media (min-width: 421px) and (max-width: 820px) {
  .grid,
  .cards,
  .card-grid,
  .folders,
  .folder-grid,
  .archive-grid,
  .files-grid,
  .evidence-grid,
  .gallery,
  .gallery-grid,
  .submissions-grid,
  .approved-grid,
  [class*="grid"],
  [class*="gallery"] {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}