/* Eventos V1 — agenda editorial y archivo documental.
   Owner local de /eventos.html. Las reglas compartidas permanecen en
   v1-families.css/v1-identity.css; esta capa solo establece jerarquía y
   reflow específicos de la página marcada con data-page="events". */

html.v1 [data-page="events"]{
  --events-blue:#1d4f96;
  --events-blue-deep:#0d2c57;
  --events-gold:#b8860b;
  --events-gold-text:#956900;
  --events-pale:#f1f9ff;
  --events-rule:color-mix(in srgb,var(--events-blue) 24%,var(--color-border));
}

html.v1 [data-page="events"] .v1-masthead{
  position:relative;
  border-bottom:2px solid var(--events-blue);
}
html.v1 [data-page="events"] .v1-masthead::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:clamp(4.5rem,12vw,9rem);
  height:2px;
  background:var(--events-gold);
}
html.v1 [data-page="events"] .v1-masthead h1{
  color:var(--events-blue);
}
html.v1 [data-page="events"] .v1-masthead .coordinate{
  color:var(--events-gold-text);
}
html.v1 [data-page="events"] .v1-masthead__lead{
  max-width:38ch;
}
html.v1 [data-page="events"] .primary-action{
  border-color:var(--events-blue-deep);
  background:var(--events-blue-deep);
}
html.v1 [data-page="events"] .primary-action:hover,
html.v1 [data-page="events"] .primary-action:focus-visible{
  background:var(--events-blue);
}
html.v1 [data-page="events"] .text-action{
  color:var(--events-blue);
}
html.v1 [data-page="events"] .text-action:hover,
html.v1 [data-page="events"] .text-action:focus-visible{
  color:var(--events-blue-deep);
}

/* Agenda futura: un estado editorial útil, no una alerta ni un placeholder. */
html.v1 [data-page="events"] #proximos{
  border-bottom-color:var(--events-rule);
}
html.v1 [data-page="events"] #proximos .v1-section__head .eyebrow{
  color:var(--events-blue);
}
html.v1 [data-page="events"] #proximos .event-year > h3{
  color:var(--events-blue);
}
html.v1 [data-page="events"] #proximos .event-empty{
  max-width:62rem;
  padding:clamp(1.7rem,3vw,2.6rem) clamp(1rem,2.5vw,2rem);
  border-top:1px solid var(--events-rule);
  border-bottom:1px solid var(--events-rule);
  background:linear-gradient(90deg,var(--events-pale),color-mix(in srgb,var(--events-pale) 24%,transparent));
}
html.v1 [data-page="events"] #proximos .event-empty::before{
  top:0;
  bottom:0;
  width:3px;
  background:var(--events-blue);
}
html.v1 [data-page="events"] #proximos .event-empty__title{
  max-width:24ch;
  color:var(--events-blue-deep);
  font-size:clamp(1.45rem,2.2vw,2rem);
}

/* Archivo: cronología documental. La fecha no compite con el título, pero
   forma una columna reconocible y la fotografía real se integra en el registro. */
html.v1 [data-page="events"] #pasados{
  border-bottom-color:var(--events-rule);
}
html.v1 [data-page="events"] #pasados .v1-section__head .eyebrow,
html.v1 [data-page="events"] #pasados .event-year > h3{
  color:var(--events-blue);
}
html.v1 [data-page="events"] #pasados .event-list{
  border-top:2px solid var(--events-blue);
}
html.v1 [data-page="events"] #pasados .event-entry{
  grid-template-columns:minmax(7.25rem,.22fr) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.5rem);
  padding:clamp(1.55rem,2.8vw,2.25rem) 0;
  border-bottom-color:var(--events-rule);
}
html.v1 [data-page="events"] #pasados .event-entry > *{
  min-width:0;
}
html.v1 [data-page="events"] #pasados .event-entry time{
  color:var(--events-blue-deep);
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.055em;
  text-transform:uppercase;
}
html.v1 [data-page="events"] #pasados .event-entry h3{
  color:var(--events-blue-deep);
  font-size:clamp(1.3rem,1.9vw,1.8rem);
}
html.v1 [data-page="events"] #pasados .event-entry p{
  max-width:62ch;
}
html.v1 [data-page="events"] #feria-libro-madrid-2026 > div{
  display:grid;
  grid-template-columns:minmax(14rem,.58fr) minmax(0,1fr);
  gap:.35rem clamp(1.5rem,4vw,3.5rem);
  align-items:start;
}
html.v1 [data-page="events"] #feria-libro-madrid-2026 > div > *{
  grid-column:2;
  min-width:0;
}
html.v1 [data-page="events"] #feria-libro-madrid-2026 figure{
  grid-column:1;
  grid-row:1 / span 4;
  width:100%;
  max-width:24rem;
  margin:0;
}
html.v1 [data-page="events"] #feria-libro-madrid-2026 figure img{
  width:100%;
  height:auto;
}
html.v1 [data-page="events"] #feria-libro-madrid-2026 figcaption{
  color:var(--color-muted);
}
/* The featured Madrid body is itself a grid. Without an explicit self-alignment,
   its text action stretches across the track and turns the underline into a
   second full-width divider immediately above the event border. */
html.v1 [data-page="events"] #feria-libro-madrid-2026 .text-action{
  justify-self:start;
  width:auto;
  max-width:100%;
}

/* El hito editorial no se presenta como otro evento realizado. */
html.v1 [data-page="events"] #hitos-editoriales{
  position:relative;
  border-bottom-color:var(--events-rule);
}
html.v1 [data-page="events"] #hitos-editoriales::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:clamp(4rem,10vw,7rem);
  height:2px;
  background:var(--events-gold);
}
html.v1 [data-page="events"] #hitos-editoriales .v1-section__head .eyebrow,
html.v1 [data-page="events"] #hitos-editoriales .event-year > h3{
  color:var(--events-gold-text);
}
html.v1 [data-page="events"] #hitos-editoriales .event-list{
  border-top:1px solid color-mix(in srgb,var(--events-gold) 48%,var(--color-border));
}
html.v1 [data-page="events"] #hitos-editoriales .event-entry{
  grid-template-columns:minmax(7.25rem,.22fr) minmax(0,1fr);
  background:color-mix(in srgb,var(--events-gold) 4%,var(--surface-page));
}
html.v1 [data-page="events"] #hitos-editoriales .event-entry > *{
  min-width:0;
}
html.v1 [data-page="events"] #hitos-editoriales .event-entry time{
  color:var(--events-gold-text);
}

/* Organizar: directorio de contacto, no colección de tarjetas equivalentes. */
html.v1 [data-page="events"] #organizar .v1-section__head .eyebrow{
  color:var(--events-blue);
}
html.v1 [data-page="events"] #organizar .contact-grid{
  border-top:2px solid var(--events-blue);
}
html.v1 [data-page="events"] #organizar .contact-card{
  min-width:0;
  border-bottom-color:var(--events-rule);
}
html.v1 [data-page="events"] #organizar .contact-card--featured{
  position:relative;
}
html.v1 [data-page="events"] #organizar .contact-card--featured::before{
  content:"";
  position:absolute;
  left:0;
  top:1.1rem;
  bottom:1.1rem;
  width:2px;
  background:var(--events-blue);
}
html.v1 [data-page="events"] #organizar .contact-card--featured .eyebrow,
html.v1 [data-page="events"] #organizar .contact-card--featured h3{
  color:var(--events-blue-deep);
}

/* Reflow: 1fr conserva un suelo min-content. Bajo zoom de texto ese suelo
   podía hacer crecer el archivo fuera del viewport. minmax(0,1fr) y min-width:0
   permiten que el contenido parta según las reglas base sin ocultarlo. */
@media (max-width:900px){
  html.v1 [data-page="events"] .event-year{
    grid-template-columns:minmax(0,1fr);
  }
  html.v1 [data-page="events"] .event-year > *{
    min-width:0;
  }
  html.v1 [data-page="events"] #feria-libro-madrid-2026 > div{
    grid-template-columns:minmax(0,1fr);
    gap:.8rem;
  }
  html.v1 [data-page="events"] #feria-libro-madrid-2026 > div > *,
  html.v1 [data-page="events"] #feria-libro-madrid-2026 figure{
    grid-column:1;
    grid-row:auto;
    min-width:0;
  }
  html.v1 [data-page="events"] #feria-libro-madrid-2026 figure{
    max-width:min(100%,28rem);
  }
}

@media (max-width:767px){
  html.v1 [data-page="events"] .event-entry,
  html.v1 [data-page="events"] #pasados .event-entry,
  html.v1 [data-page="events"] #hitos-editoriales .event-entry{
    grid-template-columns:minmax(0,1fr);
  }
  html.v1 [data-page="events"] .event-entry > *,
  html.v1 [data-page="events"] .event-entry figure,
  html.v1 [data-page="events"] .event-entry img{
    min-width:0;
    max-width:100%;
  }
  html.v1 [data-page="events"] .event-entry figure::after{
    right:0;
    bottom:0;
  }
  html.v1 [data-page="events"] .event-entry .text-action{
    display:inline-block;
    width:auto;
    max-width:100%;
    white-space:normal;
    overflow-wrap:anywhere;
  }
}

@media (max-width:600px){
  html.v1 [data-page="events"] #proximos .event-empty{
    padding:1.35rem 1rem;
  }
  html.v1 [data-page="events"] #organizar .contact-card--featured{
    padding-left:1rem;
  }
  html.v1 [data-page="events"] #organizar .contact-card--featured::before{
    top:.8rem;
    bottom:.8rem;
  }
}