/*
 * Plantilla individual de eventos de La Feria de Huamantla.
 * Referencia protegida: Demo 2.0 / La Noche que Nadie Duerme.
 *
 * La cascada replica el prototipo: base compartida (feria.css) + familia
 * reutilizable de celebraciones (celebration.css) + ajustes exactos del evento.
 * Boletos queda excluido y conserva su landing especial.
 */
.hd-fair-event-template,
.hd-fair-event-template * { box-sizing: border-box; }

.hd-fair-event-template {
  --night-dark: #0d242b;
  --night-paper: #f3f4f4;
  --pink-text-accessible: #d62a78;
  --muertos-gold: #d7ae75;
  padding-bottom: 0;
}

/* Elementor no debe restar otros 48 px dentro del page-shell ya limitado a 1180. */
.hd-fair-event-template > .e-con-inner,
.hd-fair-event-template.e-con { gap: 0 !important; }
.hd-fair-event-template .hd-celebration-shell { width: 100%; margin-inline: 0; }

.hd-fair-event-template .breadcrumb { margin: 0; }
.hd-fair-event-template .breadcrumb a,
.hd-fair-event-template .breadcrumb a:visited,
.hd-fair-event-template .breadcrumb a:hover,
.hd-fair-event-template .breadcrumb a:active { color: var(--ink) !important; }

.hd-fair-event-template h1 { max-width: 11ch; }
.hd-fair-event-template h2 { max-width: 18ch; }
.hd-fair-event-template .hd-celebration-microtitle {
  color: #d62a78;
  font-size: .75rem;
}

/* Hero literal del Demo 2.0. */
.hd-fair-event-template .hd-celebration-hero {
  grid-template-columns: minmax(0,1.05fr) minmax(360px,.95fr);
  gap: 48px;
  margin-top: 32px;
  padding: 48px;
  border-radius: 32px;
}
.hd-fair-event-template .hd-celebration-hero h1 {
  margin: 9px 0 0;
  font-size: clamp(2.45rem,5vw,3.5rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.052em;
}
.hd-fair-event-template .hd-celebration-short-answer { margin-top: 14px; padding: 10px 14px; border-radius: 10px; background: var(--soft); }
.hd-fair-event-template .hd-celebration-intro { margin-top: 18px; max-width: 55ch; font-size: 1rem; line-height: 1.6; }
.hd-fair-event-template .hd-celebration-hero-actions { margin-top: 22px; gap: 8px; }
.hd-fair-event-template .hd-celebration-hero-image { aspect-ratio: 4/3; border-radius: 28px; }

/* Datos esenciales. */
.hd-fair-event-template .hd-celebration-facts { margin-top: 14px; border-radius: 22px; }
.hd-fair-event-template .hd-celebration-facts article { min-height: 98px; padding: 18px; }
.hd-fair-event-template .hd-celebration-facts small { color: #d62a78; font-size: .72rem; }
.hd-fair-event-template .hd-celebration-facts strong { margin-top: 8px; font-size: .86rem; line-height: 1.35; }

/* Video: exactamente la composición oscura de la referencia. */
.hd-fair-event-template .hd-celebration-media {
  grid-template-columns: minmax(320px,.95fr) minmax(0,1.05fr);
  gap: 34px;
  margin-top: 48px;
  padding: 32px;
  border: 1px solid #284047;
  border-radius: 30px;
  background: var(--night-dark);
  color: #fff;
}
.hd-fair-event-template .hd-celebration-media .hd-celebration-microtitle { color: var(--gold); }
.hd-fair-event-template .hd-celebration-media h2 { color: #fff !important; }
.hd-fair-event-template .hd-celebration-media > div:last-child > p:not(.hd-celebration-microtitle) { color: #c5ced1; font-size: .88rem; line-height: 1.65; }
.hd-fair-event-template .hd-celebration-media small { color: #aeb9bc; font-size: .75rem; }
.hd-fair-event-template .hd-celebration-media-stage { aspect-ratio: 16/9; border-radius: 22px; }

/* Introducción y cita. */
.hd-fair-event-template .hd-celebration-introduction,
.hd-fair-event-template .hd-celebration-experience,
.hd-fair-event-template .hd-celebration-gallery,
.hd-fair-event-template .hd-celebration-guide,
.hd-fair-event-template .hd-celebration-related-news,
.hd-fair-event-template .hd-fair-event-more {
  margin-top: 48px;
  padding: 34px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: #fff;
}
.hd-fair-event-template .hd-celebration-introduction { grid-template-columns: minmax(250px,.68fr) minmax(0,1.32fr); gap: 42px; }
.hd-fair-event-template .hd-celebration-reading p { margin: 0 0 16px; color: var(--secondary); font-size: .9rem; line-height: 1.8; }
.hd-fair-event-template .hd-celebration-reading blockquote { margin: 26px 0 0; padding: 22px; border-left: 4px solid var(--secondary); background: var(--night-paper); }
.hd-fair-event-template .hd-celebration-reading blockquote p { color: var(--ink); font-weight: 650; }
.hd-fair-event-template .hd-celebration-reading cite { color: var(--secondary); font-size: .76rem; font-style: normal; }

/* Recorrido y mapa: el iframe permanece fuera del DOM hasta el clic. */
.hd-fair-event-template .hd-fair-event-route {
  display: grid;
  grid-template-columns: minmax(320px,.95fr) minmax(0,1.05fr);
  align-items: center;
  gap: 34px;
  margin-top: 48px;
  padding: 32px;
  border: 1px solid var(--line);
  border-radius: 30px;
  background: #fff;
  color: var(--ink);
}
.hd-fair-event-template .hd-fair-event-route-copy > p:not(.hd-celebration-microtitle) { color: var(--secondary); font-size: .86rem; line-height: 1.7; }
.hd-fair-event-template .hd-fair-event-route-link { margin-top: 14px; }
.hd-fair-event-template .hd-fair-event-route-stage {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: #dde2e3;
}
.hd-fair-event-template .hd-fair-event-route-stage::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:rgba(13,36,43,.28); }
.hd-fair-event-template .hd-fair-event-route-stage.is-playing::after { display:none; }
.hd-fair-event-template .hd-fair-event-route-stage > button { width:100%; height:100%; display:block; padding:0; border:0; background:transparent; cursor:pointer; }
.hd-fair-event-template .hd-fair-event-route-stage img,
.hd-fair-event-template .hd-fair-event-route-stage iframe { width:100%!important; height:100%!important; display:block; object-fit:cover; border:0; }
.hd-fair-event-template .hd-fair-event-route-stage iframe { position:absolute; z-index:3; inset:0; background:#fff; }
.hd-fair-event-template .hd-fair-event-route-button { min-height:48px; position:absolute; z-index:2; left:18px; bottom:18px; display:inline-flex; align-items:center; gap:10px; padding:0 18px; border-radius:999px; background:#fff; color:var(--ink); font-size:.78rem; font-weight:750; line-height:1; }

/* Cronología: cinco columnas como Demo 2.0. */
.hd-fair-event-template .hd-celebration-experience-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; margin-top: 24px; }
.hd-fair-event-template .hd-celebration-experience-grid article { min-height:190px; padding:18px; border-radius:20px; }
.hd-fair-event-template .hd-celebration-experience-grid span { font-size:.72rem; }
.hd-fair-event-template .hd-celebration-experience-grid h3 { margin:18px 0 0; font-size:.96rem; }
.hd-fair-event-template .hd-celebration-experience-grid p { margin:10px 0 0; font-size:.76rem; line-height:1.55; }

/* Arte efímero. */
.hd-fair-event-template .hd-celebration-art { grid-template-columns:minmax(320px,.95fr) minmax(0,1.05fr); gap:34px; margin-top:48px; padding:32px; border-radius:30px; background:var(--night-paper); border-color:var(--line); color:var(--ink); }
.hd-fair-event-template .hd-celebration-art figure { aspect-ratio:16/9; border-radius:22px; }
.hd-fair-event-template .hd-celebration-art p:not(.hd-celebration-microtitle),
.hd-fair-event-template .hd-celebration-art li { color:var(--secondary); font-size:.84rem; line-height:1.65; }
.hd-fair-event-template .hd-celebration-art ul { padding-left:19px; }

/* Galería. */
.hd-fair-event-template .hd-celebration-gallery-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-top:24px; }
.hd-fair-event-template .hd-celebration-gallery-grid img { height:205px!important; aspect-ratio:16/9; border-radius:18px; }
.hd-fair-event-template .hd-celebration-gallery-grid figcaption { padding-top:8px; font-size:.76rem; }

/* FAQ tematizado. */
.hd-fair-event-template .hd-celebration-guide-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:24px; }
.hd-fair-event-template .hd-celebration-guide-theme { padding:24px; border-radius:24px; background:var(--night-paper); }
.hd-fair-event-template .hd-celebration-guide-theme:last-child { grid-column:1/-1; }
.hd-fair-event-template .hd-celebration-guide-theme > h3 { margin:8px 0 20px; max-width:16ch; font-size:1.12rem; }
.hd-fair-event-template .hd-celebration-guide-theme details > div { padding:0 0 18px; }
.hd-fair-event-template .hd-celebration-guide-theme details p,
.hd-fair-event-template .hd-celebration-guide-theme details li { color:var(--secondary); font-size:.8rem; line-height:1.7; }
.hd-fair-event-template .hd-celebration-guide-theme details a,
.hd-fair-event-template .hd-celebration-guide-theme details a:visited {
  color: inherit !important;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Noticias. */
.hd-fair-event-template .hd-celebration-news-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:10px; margin-top:24px; }
.hd-fair-event-template .hd-celebration-news-grid article { border-radius:18px; background:var(--night-paper); }
.hd-fair-event-template .hd-celebration-news-grid img { height:118px!important; aspect-ratio:16/9; }
.hd-fair-event-template .hd-celebration-news-grid a > span { min-height:118px; padding:13px; }
.hd-fair-event-template .hd-celebration-news-grid small { color:#d62a78; font-size:.68rem; }
.hd-fair-event-template .hd-celebration-news-grid strong { margin-top:8px; font-size:.8rem; line-height:1.35; }

/* Catálogo automático compacto: página padre + hermanas publicadas, excluye la actual. */
.hd-fair-event-template .hd-fair-event-more-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:24px; }
.hd-fair-event-template .hd-fair-event-more-card,
.hd-fair-event-template .hd-fair-event-more-card:visited,
.hd-fair-event-template .hd-fair-event-more-card:hover,
.hd-fair-event-template .hd-fair-event-more-card:active { overflow:hidden; border:1px solid var(--line); border-radius:18px; color:var(--ink)!important; text-decoration:none; background:#fff; }
.hd-fair-event-template .hd-fair-event-more-card img { width:100%!important; height:150px!important; aspect-ratio:16/9; display:block; object-fit:cover; }
.hd-fair-event-template .hd-fair-event-more-card strong { min-height:62px; display:flex; align-items:center; padding:13px; color:var(--ink)!important; font-size:.82rem; line-height:1.35; }

/* Elementor/Hello: conservar texto visible en todos los botones del modelo. */
.hd-fair-event-template .hd-celebration-button--primary,
.hd-fair-event-template .hd-celebration-button--primary:visited,
.hd-fair-event-template .hd-celebration-button--primary:hover,
.hd-fair-event-template .hd-celebration-button--primary:active { color:#fff!important; }
.hd-fair-event-template .hd-celebration-button--secondary,
.hd-fair-event-template .hd-celebration-button--secondary:visited,
.hd-fair-event-template .hd-celebration-button--secondary:hover,
.hd-fair-event-template .hd-celebration-button--secondary:active { color:var(--ink)!important; }

.hd-fair-event-template :is(a,button,summary):focus-visible { outline:3px solid var(--pink); outline-offset:3px; }

@media (max-width:1000px) {
  .hd-fair-event-template .hd-celebration-media,
  .hd-fair-event-template .hd-fair-event-route,
  .hd-fair-event-template .hd-celebration-art,
  .hd-fair-event-template .hd-celebration-introduction { grid-template-columns:1fr; }
  .hd-fair-event-template .hd-celebration-experience-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .hd-fair-event-template .hd-celebration-news-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .hd-fair-event-template .hd-fair-event-more-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width:700px) {
  .hd-fair-event-template .hd-celebration-facts { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hd-fair-event-template .hd-celebration-media,
  .hd-fair-event-template .hd-fair-event-route,
  .hd-fair-event-template .hd-celebration-art,
  .hd-fair-event-template .hd-celebration-introduction,
  .hd-fair-event-template .hd-celebration-experience,
  .hd-fair-event-template .hd-celebration-gallery,
  .hd-fair-event-template .hd-celebration-guide,
  .hd-fair-event-template .hd-celebration-related-news,
  .hd-fair-event-template .hd-fair-event-more { margin-top:32px; padding:18px; border-radius:24px; }
  .hd-fair-event-template .hd-celebration-experience-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hd-fair-event-template .hd-celebration-gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .hd-fair-event-template .hd-celebration-gallery-grid img { height:clamp(104px,27vw,190px)!important; }
  .hd-fair-event-template .hd-celebration-guide-grid { grid-template-columns:1fr; }
  .hd-fair-event-template .hd-celebration-guide-theme:last-child { grid-column:auto; }
  .hd-fair-event-template .hd-celebration-news-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .hd-fair-event-template .hd-fair-event-more-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .hd-fair-event-template .hd-celebration-news-grid img { height:clamp(88px,25vw,118px)!important; }
  .hd-fair-event-template .hd-fair-event-more-card img { height:clamp(96px,27vw,132px)!important; }
  .hd-fair-event-template .hd-fair-event-route-stage,
  .hd-fair-event-template .hd-celebration-media-stage,
  .hd-fair-event-template .hd-celebration-art figure { border-radius:17px; }
}

/*
 * Breakpoint literal del hero de Demo 2.0.
 * Celebration.css colapsa su hero a 1000/700 px porque sirve también a otras
 * páginas; La Noche usa el patrón original de page-hero: colapso a 900 px y
 * compactación final a 620 px. Estos overrides quedan aislados a Feria.
 */
@media (min-width: 901px) and (max-width: 1000px) {
  .hd-fair-event-template .hd-celebration-hero {
    grid-template-columns: minmax(0,1.05fr) minmax(360px,.95fr);
  }
}

@media (min-width: 621px) and (max-width: 900px) {
  .hd-fair-event-template .hd-celebration-hero {
    grid-template-columns: 1fr;
    gap: 48px;
    margin-top: 32px;
    padding: 48px;
    border-radius: 32px;
  }
  .hd-fair-event-template .hd-celebration-hero h1 {
    font-size: clamp(2.45rem,5vw,3.5rem);
  }
}

@media (max-width: 620px) {
  .hd-fair-event-template .hd-celebration-hero {
    grid-template-columns: 1fr;
    gap: 24px;
    margin-top: 24px;
    padding: 24px 18px;
    border-radius: 24px;
  }
  .hd-fair-event-template .hd-celebration-hero h1 {
    font-size: 2.15rem;
  }
  .hd-fair-event-template .hd-celebration-hero-image {
    border-radius: 20px;
  }
}