/* =====================================================================
   LOOP · Home (page-home-new.php) — CSS a añadir a la hoja del tema
   1) Overlay de la bolsa SVG (layout multiplevideo)
   2) Fechas "Background Block" (dates_header_layout = block)
   ===================================================================== */


/* ---------- 1) Bolsa SVG sobre el hero multiplevideo ---------- */
.home-hero-multiplevideo .header-home-video__wrapper{
  position:relative;
  overflow:hidden;
}
.home-hero-multiplevideo .loop-bag{
  position:absolute;
  inset:0;
  z-index:4;               /* por ENCIMA del vídeo y de la franja blanca de fechas (z-index 3) */
  pointer-events:none;     /* no bloquea clics */
  /* El SVG llena el hero entero: 'cover' en pantallas anchas y 'stretch' en tablet/móvil
     (el recorrido se estira a todo el hero sin deformar la bolsa). */
  display:flex;
  align-items:center;
  justify-content:center;
}
.home-hero-multiplevideo .loop-bag > svg{
  flex:0 0 auto;
  width:100%;
  max-width:100%;
}

.home-hero-multiplevideo .header-home-video__overlay{
  position:relative;
  z-index:3;
}


/* ---------- 2) Fechas "Background Block": banda blanca centrada ---------- */
/* Medidas tomadas de la captura de referencia (2000 px de ancho):
   banda ≈ 84 px de alto, texto a sangre arriba/abajo, tipografía ≈ 45 px (2.25vw),
   margen lateral 35 px a cada lado, huecos iguales entre bloques. */
.festival-dates-header-home.layout-block{
  position:absolute;
  left:0; right:0;
  top:50%; bottom:auto;
  transform:translateY(-50%);
  width:100%;
  max-width:100%;
  margin:0;
  padding:0;                         /* sin margen superior/inferior: el texto llena la banda */
  background:#fff;
  color:#111;
  z-index:3;                         /* la bolsa (z-index 4) vuela por encima */
  box-sizing:border-box;
  overflow:hidden;                   /* nunca provoca scroll horizontal */
}

/* 4 bloques a su ancho natural, repartidos de borde a borde con huecos iguales */
.dates-block{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  padding:0 35px;                    /* margen lateral: 35px a izquierda y derecha */
  transform:translateY(2px);         /* texto 2px más abajo */
}
.dates-block__item{
  flex:0 0 auto;
  min-width:0;
  text-align:center;                 /* título y fecha centrados entre sí */
}

/* Tipografía: hereda la serif del tema (la misma que "Loop") */
.dates-block__title,
.dates-block__date{
  font-family:inherit;
  font-weight:400;
  font-size:clamp(1rem, 2.25vw, 5.4rem);   /* 45 px a 2000 px; proporcional hasta 4K */
  line-height:.8;                          /* más a sangre: la banda se ciñe al texto (súbelo si toca el borde) */
  letter-spacing:-0.02em;
  white-space:nowrap;
  margin:0;
}

.dates-block__title {
    padding-bottom: 8px;
    margin-top: -2px;
}


/* ---------- Responsive: franjas blancas separadas ---------- */
/* En tablet y móvil la banda única se convierte en FRANJAS blancas independientes,
   con el vídeo visible entre ellas. El hueco entre franjas es SIEMPRE igual al alto
   de la franja: ambos usan la misma variable --ld-stripe.
     alto de franja = 2 líneas × tamaño × interlineado + 8px
     (los 8px = padding-bottom 8 − margin-top 2 del título + 2 de padding superior) */

/* Tablet (≤900px): 2 franjas, 2 fechas por franja (cada una centrada en su mitad) */
@media (max-width: 900px){
  :root{
    --ld-fs: clamp(1.1rem, 5.7vw, 3.2rem);   /* ≈ 29 px en un iPad de 502 px de la captura */
    --ld-lh: .9;
    --ld-stripe: calc(2 * var(--ld-fs) * var(--ld-lh) + 8px);
  }
  .festival-dates-header-home.layout-block{
    background:transparent;          /* el blanco pasa a cada franja */
    padding:0;
  }
  .dates-block{
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:stretch;
    gap:var(--ld-stripe) 0;          /* hueco vertical = alto de franja; sin hueco horizontal */
    padding:0;
    transform:none;
  }
  .dates-block__item{
    flex:0 0 50%;
    height:var(--ld-stripe);
    padding-top:2px;
    box-sizing:border-box;
    overflow:hidden;
    background:#fff;
  }
  .dates-block__title,
  .dates-block__date{
    font-size:var(--ld-fs);
    line-height:var(--ld-lh);
  }
}

/* Móvil (≤600px): 4 franjas, una fecha por franja */
@media (max-width: 600px){
  :root{
    --ld-fs: clamp(.95rem, 7vw, 1.8rem);     /* ≈ 17 px en un iPhone de 243 px de la captura */
    --ld-lh: .8;
  }
  .dates-block__item{ flex:0 0 100%; }
}