/* =========================================================
   VUOTOCO — COVER NERA + GIF A DESTRA
   ========================================================= */

.cover--vuotoco{
  width: 100vw;
}

/* il “riquadro” nero con proporzione cover */
.cover--vuotoco .cover-frame{
  width: 100vw;
  aspect-ratio: 16 / 9;
  background: var(--neros);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
}

/* testo a sinistra (dentro il frame) */
.cover--vuotoco .cover_text_pos{
  position: static;       /* annulla l’assoluto che usavi prima */
  margin: 0;
  padding: clamp(40px, 5vw, 72px);
  width: min(720px, 60vw);
  color: var(--blancos);
  mix-blend-mode: normal; /* sul nero non serve difference */
}

.cover--vuotoco .cover_gif{
  justify-self: end;
  align-self: center;

  /* dimensione controllata */
  width: min(480px, 36vw);
  max-height: calc(100% - clamp(48px, 6vw, 96px));
  height: auto;

  /* margini nel frame */
  margin-right: clamp(24px, 4vw, 60px);
  margin-block: clamp(24px, 4vw, 48px);

  border-radius: 2px;
  display: block;
}


/* crediti: sotto al frame, come ora */
.cover--vuotoco .crediti{
  position: static; /* evita che resti “appeso” in absolute */
  width: min(1100px, 92vw);
  margin: 18px auto 0 auto;
  color: var(--neros);
  opacity: 0.85;
  mix-blend-mode: normal;
}

/* mobile */
@media (max-width: 700px){
  .cover--vuotoco .cover-frame{
    aspect-ratio: auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .cover--vuotoco .cover_text_pos{
    width: min(92vw, 1100px);
    padding: 18px 4vw 0 4vw;
    color: var(--blancos);
  }

  .cover--vuotoco .cover_gif{
    width: min(92vw, 520px);
    margin: 0 auto 18px auto;
  }

  .cover--vuotoco .crediti{
    margin-top: 8px;
    padding-bottom: 10px;
  }
}


/* =========================================================
   MENUBAR freccia non cliccabile
========================================================= */
.freccia-btn--next{ opacity: .3; }

.freccia-btn--next{
  pointer-events: none;
}


/* =========================================================
   VUOTOCO — GALLERY SYSTEM (spazi X / 2X + griglie)
   ========================================================= */

:root{
  /* “X” = unità di ritmo verticale (coerente e fluida) */
  --vco-x: clamp(18px, 2.2vh, 28px);
}

/* Override del mega-margin globale solo per la gallery VuotoCO */
.project .section.vco-section{
  margin-top: var(--vco-x);
}
.project .section.vco-section.vco-2x{
  margin-top: calc(var(--vco-x) * 4);
}

/* -------------------------
   HERO: immagine + meta dx
   ------------------------- */

.vco-hero{
  display: grid;
  grid-template-columns: 1fr minmax(220px, 320px);
  column-gap: calc(var(--vco-x) * 1);
  align-items: start;
}

/* media */
.vco-hero__media{
  margin: 0;
}
.vco-hero__img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px; /* in linea con le tue immagini */
}

/* meta */
.vco-hero__meta{
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* title in alto, keywords in basso */
  min-height: 100%;
}

.vco-hero__metaTop{
  text-align: right;
}

.vco-title{
  margin: 0;
  font-family: var(--titoli_menu-font-family);
  font-weight: var(--titoli_menu-font-weight);
  font-size: 12px;
  letter-spacing: var(--titoli_menu-letter-spacing);
  line-height: 1.2;
  color: var(--neros);
  opacity: 0.9;
}

.vco-place{
  margin: 6px 0 0 0;
  font-family: var(--testi-font-family);
  font-size: 12px;
  line-height: 1.25;
  color: var(--neros);
  opacity: 0.65;
}

.vco-tags{
  margin: 0;
  text-align: right;
  font-family: var(--testi-font-family);
  font-size: 12px;
  line-height: 1.25;
  color: var(--neros);
  opacity: 0.65;
  text-indent: var(--testi-text-indent);
}

/* -------------------------
   TRIPTYCH: 3 colonne + gap 0.3X
   ------------------------- */

.vco-triptych{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(var(--vco-x) * 0.3);
}

.vco-triptych__img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

/* =========================
   VuotoCO — Mosaic 7-1 (Q3–Q6)
   dentro larghezza pagina (no 100vw)
   ========================= */

.vco-mosaic{
  /* usa la stessa logica del tuo .project .container (min(1200px, 96vw)) */
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: auto auto;
  gap: clamp(10px, 1.2vw, 18px);

  /* IMPORTANTISSIMO per evitare overflow in grid */
  min-width: 0;
}

.vco-mosaic__item{
  margin: 0;
  min-width: 0; /* evita che l’immagine “spinga” fuori */
}

.vco-mosaic__item img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* se vuoi la stessa “pulizia” dello screen */
  border-radius: 0px;
}

/* posizionamento: grande/piccola come reference */
.vco-mosaic__item--a{ grid-column: 1; grid-row: 1; } /* grande in alto sx */
.vco-mosaic__item--b{ grid-column: 2; grid-row: 1; } /* piccola in alto dx */
.vco-mosaic__item--c{ grid-column: 1; grid-row: 2; } /* piccola in basso sx */
.vco-mosaic__item--d{ grid-column: 2; grid-row: 2; } /* grande in basso dx */

/* proporzioni “pulite” (regolabili) */
.vco-mosaic__item--a{ aspect-ratio: 16 / 10; }
.vco-mosaic__item--b{ aspect-ratio: 4 / 3; }
.vco-mosaic__item--c{ aspect-ratio: 4 / 3; }
.vco-mosaic__item--d{ aspect-ratio: 16 / 10; }

/* mobile: niente scroll orizzontale, stack semplice */
@media (max-width: 700px){
  .vco-mosaic{
    grid-template-columns: 1fr 1fr;
  }

  /* mantieni il pattern 2x2 anche su mobile (va bene spesso) */
  .vco-mosaic__item--a{ aspect-ratio: 1 / 1; }
  .vco-mosaic__item--d{ aspect-ratio: 1 / 1; }
}


/* -------------------------
   MOBILE: impila meta sotto, triptych diventa 1 col
   ------------------------- */

@media (max-width: 700px){
  :root{
    --vco-x: clamp(14px, 2vh, 20px);
  }

  .vco-hero{
    grid-template-columns: 1fr;
    row-gap: var(--vco-x);
  }

  .vco-hero__meta{
    min-height: auto;
  }

  .vco-hero__metaTop,
  .vco-tags{
    text-align: left;
  }

  .vco-triptych{
    grid-template-columns: 1fr;
    gap: var(--vco-x);
  }

  .vco-caption__right{
    margin-left: 0;
    width: 100%;
    text-align: left;
  }
}