/* MMO 2026 timeline — aligned to the supplied heading-safe artwork (1672 × 941) */
.program-section {
  --program-gold: #edc975;
  --program-gold-soft: #ffe4a5;
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #020817;
  box-sizing: border-box;
}
.program-inner {
  position: relative;
  width: 100%;
  aspect-ratio: 1672 / 941;
  margin: 0 auto;
  background: #031126 url('timeline-dates-bg-heading.png') center / 100% 100% no-repeat;
  color: #fff;
}
.program-header {
  display: block;
  position: absolute;
  z-index: 3;
  top: 5.2%;
  left: 0;
  width: 100%;
  margin: 0;
  padding: 0 8%;
  text-align: center;
}
.program-brand {
  margin: 0 0 .55em;
  font: 500 clamp(8px, 1.2vw, 17px)/1.3 'Cinzel', serif;
  letter-spacing: .36em;
  color: #eacb82;
}
.program-eyebrow {
  margin: 0;
  font: 500 clamp(24px, 3.8vw, 52px)/1.08 'Prompt', sans-serif;
  color: #f7d98e;
  text-shadow: 0 2px 0 #74500d, 0 0 22px rgba(255,205,100,.22);
}
.program-headline {
  margin: .18em 0 0;
  font: 400 clamp(12px, 1.9vw, 26px)/1.4 'Prompt', sans-serif;
  color: rgba(255,255,255,.9);
}
.prog-tl {
  position: absolute;
  inset: 0;
  z-index: 2;
}
.prog-tl-item {
  position: absolute;
  left: 15.2%;
  width: 82.2%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(247,216,145,.86);
  border-radius: clamp(11px, 1.25vw, 17px);
  background: linear-gradient(105deg, rgba(2,14,35,.9), rgba(3,25,57,.78));
  box-shadow: inset 0 1px rgba(255,255,255,.08), 0 8px 26px rgba(0,0,0,.24);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.prog-tl-item:nth-child(1) { top: 34.9%; height: auto; transform: translateY(-50%); }
.prog-tl-item:nth-child(2) { top: 51.8%; height: auto; transform: translateY(-50%); }
.prog-tl-item:nth-child(3) { top: 68.5%; height: auto; transform: translateY(-50%); }
.prog-tl-item:nth-child(4) {
  top: 85.8%;
  height: auto;
  transform: translateY(-50%);
  border-color: #f1c861;
  background: linear-gradient(105deg, rgba(5,20,43,.95), rgba(8,28,57,.87));
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 0 18px rgba(245,194,74,.38), 0 9px 30px rgba(0,0,0,.3);
}
.prog-tl-item:nth-child(4) .prog-tl-body { padding-top: clamp(12px, 1.15vw, 17px); padding-bottom: clamp(12px, 1.15vw, 17px); }
.prog-tl-item:nth-child(4) .prog-tl-label { font-size: clamp(15px, 1.65vw, 24px); }
.prog-tl-item:nth-child(4) .prog-tl-title { margin-bottom: .25em; padding-bottom: .28em; font-size: clamp(9px, .95vw, 13px); }
.prog-tl-item:nth-child(4) .prog-tl-desc { font-size: clamp(7.5px, .72vw, 10.5px); line-height: 1.32; }
.prog-tl-item:hover { border-color: #ffe5a5; }
.prog-tl-date,
.prog-tl-mid { display: none; }
.prog-tl-body,
.prog-tl-item.glow .prog-tl-body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  min-width: 0;
  margin: 0;
  padding: clamp(12px, 1.15vw, 17px) clamp(17px, 1.8vw, 27px);
  border: 0;
  background: none;
}
.prog-tl-label {
  margin: 0 0 .12em;
  font: 700 clamp(16px, 1.8vw, 27px)/1.08 'Playfair Display', 'Prompt', serif;
  letter-spacing: .01em;
  text-transform: none;
  color: var(--program-gold-soft);
  text-shadow: 0 1px 12px rgba(237,201,117,.18);
}
.prog-tl-title,
.prog-tl-item.glow .prog-tl-title {
  margin: .28em 0 0;
  padding: 0;
  border-bottom: 0;
  font: 400 clamp(10px, 1.05vw, 15px)/1.28 'Prompt', sans-serif;
  color: rgba(255,255,255,.92);
}
.prog-tl-desc {
  font: 300 clamp(8px, .84vw, 12px)/1.48 'Prompt', sans-serif;
  color: rgba(240,244,250,.84);
}
.prog-tl-row {
  display: grid;
  grid-template-columns: clamp(96px, 9vw, 134px) minmax(0, 1fr);
  align-items: start;
}
.prog-tl-row + .prog-tl-row { border-top: 1px solid rgba(117,156,199,.12); }
.prog-tl-desc strong {
  display: block;
  min-width: 0;
  margin-right: clamp(7px, 1.2vw, 14px);
  padding-right: clamp(7px, 1.2vw, 14px);
  border-right: 1px solid rgba(237,201,117,.8);
  font-weight: 600;
  color: var(--program-gold-soft);
}
.prog-tl-item:last-child::after { content: none; }
.program-footer { display: none; }

@media (max-width: 760px) {
  .program-section {
    padding: 42px 13px 48px;
    background: #031126 url('timeline-dates-bg-heading.png') center / cover no-repeat;
  }
  .program-inner {
    width: 100%;
    box-sizing: border-box;
    aspect-ratio: auto;
    background: rgba(1,10,27,.72);
    border: 1px solid rgba(237,201,117,.2);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,.35);
  }
  .program-header {
    display: block;
    position: relative;
    top: auto;
    left: auto;
    width: auto;
    padding: 32px 18px 25px;
  }
  .program-brand { font-size: 8px; letter-spacing: .2em; }
  .program-eyebrow { font-size: clamp(25px, 8vw, 34px); }
  .program-headline { font-size: 13px; }
  .prog-tl {
    position: relative;
    inset: auto;
    display: grid;
    gap: 14px;
    padding: 0 12px 24px;
  }
  .prog-tl-item,
  .prog-tl-item:nth-child(1),
  .prog-tl-item:nth-child(2),
  .prog-tl-item:nth-child(3),
  .prog-tl-item:nth-child(4) {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    height: auto;
    transform: none;
    display: grid;
    grid-template-columns: 70px minmax(0,1fr);
    border-radius: 15px;
    box-sizing: border-box;
  }
  .prog-tl-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 16px 7px;
    border-right: 1px solid rgba(237,201,117,.35);
    background: rgba(5,29,61,.7);
    text-align: center;
  }
  .prog-tl-day { font: 700 30px/1 'Cinzel', serif; color: var(--program-gold-soft); }
  .prog-tl-month { margin-top: 5px; font: 500 9px/1.35 'Prompt', sans-serif; color: #fff; }
  .prog-tl-body,
  .prog-tl-item.glow .prog-tl-body { padding: 17px 13px 19px; }
  .prog-tl-label { font-size: clamp(15px, 4.6vw, 18px); overflow-wrap: anywhere; }
  .prog-tl-title { font-size: 10.5px; }
  .prog-tl-desc { font-size: 10.5px; line-height: 1.7; }
  .prog-tl-desc strong {
    display: block;
    width: max-content;
    min-width: 0;
    margin: 7px 0 1px;
    padding: 0;
    border: 0;
  }
  .prog-tl-row { display: block; }
  .prog-tl-row + .prog-tl-row { border-top: 0; }
}