/* ======================================================
   Videos page — deterministic layout, scoped
   Desktop rows:
     1) 1/3 (4:5) + 2/3 (matched height)
     2) 1/3 + 1/3 + 1/3 (all 4:5)
     3) 2/3 (matched height) + 1/3 (4:5)
     4) 1/3 + 1/3 + 1/3 (all 4:5)
   ====================================================== */

/* Base grid */
body.videos #videoGrid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  column-gap: 0;
  row-gap: 18px;
  margin: 0 -9px; /* half the gutter on each side */
}

/* All Cards: apply equal side gutters and default to 4:5 aspect ratio (1/3 width) */
body.videos #videoGrid .card{
  margin: 0 9px;                 /* = 18px total between neighbors */
  position: relative;
  /* outline: 1px solid red; */
}

/* Media always fills */
body.videos #videoGrid .thumb img,
body.videos #videoGrid .thumb video{
  width:100%; height:100%; object-fit:cover; display:block;
}

/* ===================== Desktop (≥901px) ===================== */
/* ===================== Desktop (≥901px) ===================== */
@media (min-width:901px){
  /* Row 1: [1/3 (4:5) | 2/3 (Wide)] -> Total 2 cards */
  /* Card 1: 1/2 width, starts at column 1 */
  body.videos #videoGrid .card:nth-child(1) {
  grid-column: 1 / 4;   /* cioè dalla linea 1 alla 5 → 4 colonne */
  grid-row: 1; /* forza a stare in prima riga */
  height: 100%;       /* riempiono la stessa riga */
  aspect-ratio: 7 / 8 !important;
}
  
  /* Card 2: 2/2 width */
  body.videos #videoGrid .card:nth-child(2) {
  grid-column: 5 / 13;  /* dalla linea 5 all’ultima linea → 8 colonne */
  grid-row: 1; /* forza a stare in prima riga */
  aspect-ratio: 16 / 9 !important;
  height: 100%;       /* riempiono la stessa riga */
}

  /* Row 2: [1/3 | 1/3 | 1/3] -> Total 3 cards */
  /* Card 3: 1/3 width, starts at column 1 */
  body.videos #videoGrid .card:nth-child(3){ 
    grid-column: 1 / span 4 ; 
      grid-row: 2; /* forza a stare in seconda riga */
  }
  /* Card 4: 1/3 width, starts at column 5 */
  body.videos #videoGrid .card:nth-child(4){ 
    grid-column: 5 / span 4 ; 
    grid-row: 2; /* forza a stare in seconda riga */
  }
  /* Card 5: 1/3 width, starts at column 9 */
  body.videos #videoGrid .card:nth-child(5){ 
    grid-column: 9 / span 4 ; 
    grid-row: 2; /* forza a stare in seconda riga */
  }

  /* Row 3: [2/3 (Wide) | 1/3 (4:5)] -> Total 2 cards (This row was correct) */
  /* Card 6: 2/3 width, starts at column 1 */
  body.videos #videoGrid .card:nth-child(6){ 
    grid-column: 1 / span 8 ; 
    grid-row: 3; /* forza a stare in terza riga */
  }
  /* Card 7: 1/3 width, starts at column 9 */
  body.videos #videoGrid .card:nth-child(7){ 
    grid-column: 9 / span 4 ; 
    grid-row: 3; /* forza a stare in terza riga */
  }

  /* Row 4: [1/3 | 1/3 | 1/3] -> Total 3 cards */
  /* Card 8: 1/3 width, starts at column 1 */
  body.videos #videoGrid .card:nth-child(8){  
    grid-column: 1 / span 4 ; 
    grid-row: 4; /* forza a stare in quarta riga */
  }
  /* Card 9: 1/3 width, starts at column 5 */
  body.videos #videoGrid .card:nth-child(9){  
    grid-column: 5 / span 4 ; 
    grid-row: 4; /* forza a stare in quarta riga */
  }
  /* Card 10: 1/3 width, starts at column 9 */
  body.videos #videoGrid .card:nth-child(10){ 
    grid-column: 9 / span 4 ; 
    grid-row: 4; /* forza a stare in quarta riga */
  }
  /* Row 5: Total 2 cards */
  /* Card 11 */
  body.videos #videoGrid .card:nth-child(11) {
  grid-column: 1 / 4;   /* cioè dalla linea 1 alla 5 → 4 colonne */
  grid-row: 5; /* forza a stare in prima riga */
  height: 100%;       /* riempiono la stessa riga */
  aspect-ratio: 7 / 8 !important;
 }
  
  /* Card 12 */ 
  body.videos #videoGrid .card:nth-child(12) {
  grid-column: 5 / 13;  /* dalla linea 5 all’ultima linea → 8 colonne */
  grid-row: 5; /* forza a stare in prima riga */
  aspect-ratio: 16 / 9 !important;
  height: 100%;       /* riempiono la stessa riga */
 }
}

/* ===================== Tablet (561–900px) ===================== */
/* Two-up. Wides breathe full-width at 16:9 */
@media (min-width:561px) and (max-width:900px){
  /* All cards default to 1/2 width (span 6) and 4:5 aspect ratio */
  body.videos #videoGrid .card{
    grid-column: span 6 !important;
    aspect-ratio: 4 / 5 !important;
  }
  
  /* Wides (#2 and #6) become full-width 16:9 */
  body.videos #videoGrid .card:nth-child(2),
  body.videos #videoGrid .card:nth-child(7),
  body.videos #videoGrid .card:nth-child(6){
    grid-column: 1 / -1 !important; /* full width */
    aspect-ratio: 16 / 9 !important;
  }
}

/* ===================== Mobile (≤560px) ===================== */
/* Clean 1-up stack; wides 16:9, smalls 4:5 */
@media (max-width:560px){
  /* All cards are full width */
  body.videos #videoGrid .card{
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  
  /* Wides (#2 and #6) get 16:9 aspect ratio */
  body.videos #videoGrid .card:nth-child(2),
  body.videos #videoGrid .card:nth-child(6){ 
    aspect-ratio: 16 / 9 !important; 
  }
  
  /* All other cards get 4:5 aspect ratio */
  body.videos #videoGrid .card:not(:nth-child(2)):not(:nth-child(6)){ 
    aspect-ratio: 4 / 5 !important; 
  }
}