/* ==========================================================================
   TRIAL (22 Oct 2026, client request): keep the DESKTOP layout on phone / tablet
   for (1) the 3 hero photos and (2) the Order of Events timeline.
   Only applies below 1024px; desktop is untouched. The normal stacking rules for
   these two sections stay in styles.css, so to revert: delete this file and its
   <link> line in index.html (see README > Change log).
   Everything scales with --px (1 design point), so it always fits the screen width.
   ========================================================================== */
@media (max-width: 1023.98px) {

  /* ----- 1. hero photos: 3 in one row, same widths / crops as desktop ----- */
  .hero { grid-template-columns: 423.89fr 426.23fr 422.57fr; gap: calc(var(--px) * 3.66); }

  /* ----- 2. order of events: full timeline in one row, scaled down ----- */
  .order { --oy: calc(var(--px) * 100); padding: 42px 0 0; }   /* --oy: the desktop title area we replace with the normal heading */
  .order .events {
    position: relative; display: block; margin: 24px 0 0;
    height: calc(var(--px) * 255.06);
  }
  /* the line is drawn inside .events (the real .timeline-line div stays hidden, as in the stacked layout) */
  .order .events::after {
    content: ""; position: absolute; left: calc(var(--px) * 136); width: calc(var(--px) * 1008);
    top: calc(var(--px) * 225.16 - var(--oy)); height: 1px; background: var(--paper);
  }
  .event { position: static; display: block; }
  .event::before {
    content: ""; position: absolute; top: calc(var(--px) * 210.86 - var(--oy)); height: calc(var(--px) * 30.6);
    width: 1px; margin: 0; background: var(--paper); order: 0;
  }
  .event-icon { position: absolute; height: auto; margin: 0; }
  .event-text {
    position: absolute; top: calc(var(--px) * 266.96 - var(--oy)); width: calc(var(--px) * 200); margin: 0;
    font-size: max(6px, calc(var(--px) * 14)); line-height: calc(var(--px) * 24); white-space: nowrap; padding-left: .25em;
  }
  .ev-1::before { left: calc(var(--px) * 185); }    .ev-1 .event-icon { left: calc(var(--px) * 136.82); top: calc(var(--px) * 125.05 - var(--oy)); width: calc(var(--px) * 96.35); }
  .ev-1 .event-text { left: calc(var(--px) * 86); }
  .ev-2::before { left: calc(var(--px) * 366.6); }  .ev-2 .event-icon { left: calc(var(--px) * 332.89); top: calc(var(--px) * 128.16 - var(--oy)); width: calc(var(--px) * 66.98); }
  .ev-2 .event-text { left: calc(var(--px) * 266.55); }
  .ev-3::before { left: calc(var(--px) * 548.2); }  .ev-3 .event-icon { left: calc(var(--px) * 518.99); top: calc(var(--px) * 128.56 - var(--oy)); width: calc(var(--px) * 61.1); }
  .ev-3 .event-text { left: calc(var(--px) * 447.6); }
  .ev-4::before { left: calc(var(--px) * 729.8); }  .ev-4 .event-icon { left: calc(var(--px) * 691.19); top: calc(var(--px) * 121.34 - var(--oy)); width: calc(var(--px) * 77.23); }
  .ev-4 .event-text { left: calc(var(--px) * 630.3); }
  .ev-5::before { left: calc(var(--px) * 911.4); }  .ev-5 .event-icon { left: calc(var(--px) * 881.74); top: calc(var(--px) * 121.34 - var(--oy)); width: calc(var(--px) * 59.33); }
  .ev-5 .event-text { left: calc(var(--px) * 812.4); }
  .ev-6::before { left: calc(var(--px) * 1093); }   .ev-6 .event-icon { left: calc(var(--px) * 1055.05); top: calc(var(--px) * 123.76 - var(--oy)); width: calc(var(--px) * 77.92); }
  .ev-6 .event-text { left: calc(var(--px) * 996.65); }
}

/* very narrow portrait phones: "14:00 for 14:30" would run into "15:00", so it breaks onto two lines */
@media (max-width: 479.98px) {
  .ev-1 .event-time { white-space: normal; max-width: 8em; margin: 0 auto; }
}