/* ============================================================
   08-HORARIO.css — PROGRAMACIÓN / TIMELINE
   ============================================================
   Sección con la cronología del día: citación, ceremonia,
   cóctel, cena, fiesta, hora de irse a dormir, etc.
   En desktop se ve como timeline en zigzag, en móvil en columna.

   Los iconos van en assets/horario/
   ============================================================ */

.schedule {
  max-width: 960px;
  padding: 5rem 1.5rem;
  text-align: center;
  color: var(--accent);
}

/* Título "Programación y horarios" */
.schedule__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
  line-height: 1;
}
.schedule__title-upper {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--accent);
  padding-left: 0.4em;
}
.schedule__title-script {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2.8rem, 6vw, 4.2rem);
  color: var(--accent);
  margin-top: -0.1em;
  margin-left: 0.6em;
}

.schedule__intro {
  font-family: var(--sans);
  font-size: 0.98rem;
  color: var(--accent);
  max-width: 480px;
  margin: 0 auto 4rem;
  line-height: 1.7;
}

/* Grid timeline en zigzag (desktop) */
.schedule__timeline {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: auto 80px auto;
  align-items: center;
  position: relative;
  color: var(--accent);
}
.schedule__item--t1 { grid-column: 1 / span 2; grid-row: 1; }
.schedule__item--t2 { grid-column: 3 / span 2; grid-row: 1; }
.schedule__item--t3 { grid-column: 5 / span 2; grid-row: 1; }
.schedule__item--b1 { grid-column: 2 / span 2; grid-row: 3; }
.schedule__item--b2 { grid-column: 4 / span 2; grid-row: 3; }
.schedule__item--b3 { grid-column: 6 / span 2; grid-row: 3; }

/* Líneas decorativas que conectan los items */
.schedule__connector {
  grid-column: 1 / -1;
  grid-row: 2;
  width: 100%;
  height: 100%;
  color: var(--accent);
  opacity: 0.65;
}

.schedule__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 0.5rem;
}
.schedule__icon {
  width: 110px;
  height: 110px;
  object-fit: contain;
  margin-bottom: 0.2rem;
}
.schedule__name {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--accent);
  margin-bottom: 0.2rem;
}
.schedule__time {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
  letter-spacing: 0.04em;
}

/* Mobile: el zigzag horizontal se convierte en zigzag vertical: items
   alternan a izquierda y derecha de una línea vertical central. El orden
   se fuerza con `order` para que sea cronológico (t1, b1, t2, b2, t3, b3)
   en vez del orden del DOM (que en desktop importa para el grid). */
@media (max-width: 720px) {
  .schedule { padding: 3rem 2rem; }
  .schedule__intro { margin-bottom: 2.5rem; }

  .schedule__timeline {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
    position: relative;
    padding: 1rem 1.5rem;
    grid-template-columns: none;
    grid-template-rows: none;
    max-width: 360px;
    margin: 0 auto;
  }
  /* Línea vertical que recorre toda la columna por el centro. */
  .schedule__timeline::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--accent);
    opacity: 0.55;
    transform: translateX(-50%);
  }
  .schedule__connector { display: none; }

  .schedule__item {
    width: 50%;
    padding: 0 0.75rem;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  /* Items impares (cronológicos) a la izquierda; pares a la derecha. */
  .schedule__item--t1 { order: 1; align-self: flex-start; }   /* Citación  */
  .schedule__item--b1 { order: 2; align-self: flex-end; }     /* Ceremonia */
  .schedule__item--t2 { order: 3; align-self: flex-start; }   /* Cóctel    */
  .schedule__item--b2 { order: 4; align-self: flex-end; }     /* Cena      */
  .schedule__item--t3 { order: 5; align-self: flex-start; }   /* Fiesta    */
  .schedule__item--b3 { order: 6; align-self: flex-end; }     /* A dormir  */

  .schedule__icon { width: 78px; height: 78px; }
  .schedule__name { font-size: 1rem; }
  .schedule__time { font-size: 0.95rem; }
}