/* css/home_legacy_v2.css — "Previous Events" on PHONES as a TIMELINE strip (S69 §AL, 20 Oct 2026).
 *
 * Past events matter less than upcoming ones, so on a phone they become a slim, swipeable timeline: a thin line runs along the top
 * with a dot and the YEAR above each event, smaller cards (about 2½ on screen), all the same size, and a last card "View all previous
 * events". Different on purpose from the bigger Upcoming events cards.
 * REVERT: Admin → Homepage Sections → Design options → "Timeline design for Previous events" → Off (or delete this file).
 */
@media (max-width: 767.98px) {
  .section-legacy .legacy-grid { display: flex !important; gap: 12px !important; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; margin: 0 -12px; padding: 0 16px 10px;
    scroll-padding-left: 16px; position: relative; align-items: stretch; }
  .section-legacy .legacy-grid::-webkit-scrollbar { display: none; }

  /* each event: year + dot on the timeline above its card */
  .section-legacy .legacy-item { flex: 0 0 42% !important; max-width: 42%; scroll-snap-align: start; position: relative; padding-top: 34px;
    overflow: visible !important; border-radius: 0 !important; display: flex !important; flex-direction: column; }
  .section-legacy .legacy-item::before { content: attr(data-year); position: absolute; top: 0; left: 0; font-size: .8rem; font-weight: 800;
    color: var(--clr-primary, #800000); letter-spacing: .02em; }
  .section-legacy .legacy-item::after { content: ""; position: absolute; top: 22px; left: 0; right: -12px; height: 2px;
    background: linear-gradient(90deg, var(--clr-primary, #800000) 0 10px, #ead9d9 10px); border-radius: 2px; }
  .section-legacy .legacy-item .legacy-card { flex: 1; display: flex !important; flex-direction: column; border-radius: 14px !important; overflow: hidden;
    box-shadow: 0 8px 20px -14px rgba(80,0,0,.35) !important; }
  .section-legacy .legacy-item .legacy-card.legacy-hidden { display: flex !important; }   /* all events in the strip */

  /* compact card: thumbnail, title, one line */
  .section-legacy .legacy-card-poster { aspect-ratio: 4 / 3 !important; height: auto !important; }
  .section-legacy .legacy-card-body { padding: 9px 10px 11px !important; display: flex; flex-direction: column; flex: 1; }
  .section-legacy .legacy-card-body > div:first-child { display: none !important; }      /* year/type pills — the year is on the timeline */
  .section-legacy .legacy-card-title { font-size: .8rem !important; line-height: 1.3 !important; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden; min-height: 2.6em; margin: 0 !important; }
  .section-legacy .legacy-card-theme { display: none !important; }
  .section-legacy .legacy-card-meta { margin-top: 6px !important; font-size: .68rem !important; }
  .section-legacy .legacy-card-meta span { display: none !important; }
  .section-legacy .legacy-card-meta span:nth-child(1), .section-legacy .legacy-card-meta span:nth-child(2) { display: flex !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .section-legacy .legacy-card-body > div:last-child { display: none !important; }       /* the "View details →" line — the card is the link */

  /* the last card + the old buttons */
  .section-legacy .legacy-allcard { display: flex !important; flex: 0 0 36%; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    margin-top: 34px; border-radius: 14px; padding: 14px 10px; text-align: center; text-decoration: none; color: #fff; scroll-snap-align: start;
    background: linear-gradient(160deg, var(--clr-primary, #800000), #4a0000); }
  .section-legacy .legacy-allcard i { font-size: 1.4rem; }
  .section-legacy .legacy-allcard b { font-size: .8rem; line-height: 1.3; }
  .section-legacy .legacy-allcard:hover { color: #fff; }
  .section-legacy .legacy-more-wrap, .section-legacy .legacy-viewall-wrap { display: none !important; }
}