/* css/home_events_v2.css — the NEW phone design for the homepage "Upcoming events" swipe row (S69 §AK, 20 Oct 2026).
 *
 * Built from published card / carousel guidance (SAP Fiori carousel layout, Mesa design system cards, UX Planet card practices):
 *  · cards start at the content edge and the NEXT card is cut at the right edge ("peek") — the cue that the row scrolls;
 *  · one clear hierarchy: picture → title (2 lines) → date & place → one clear action; nothing repeated on every card shouts;
 *  · every card the same size, snap scrolling, at most five cards, then a "See all events" card;
 *  · large tap targets.
 * Phones only. REVERT: Admin → Homepage Sections → switch off "New phone design for Upcoming events" (or delete this file) —
 * the page then looks exactly as before. Loaded by index.php only when the file exists and the switch is on.
 */
@media (max-width: 767.98px) {
  /* row: start-aligned, peek on the right */
  .section-events .row.g-4 { padding: 6px 16px 16px !important; margin: 0 -12px !important; scroll-padding-left: 16px; --bs-gutter-x: 12px; }
  .section-events .row.g-4 > [class*="col-"] { flex: 0 0 80% !important; max-width: 80% !important; scroll-snap-align: start !important; padding: 0 6px !important; }
  .section-events .row.g-4 > [class*="col-"]:first-child { padding-left: 0 !important; }

  /* card */
  .section-events .event-card.ev2 { border-radius: 18px !important; border: 1px solid #efe6e6 !important; overflow: hidden;
    box-shadow: 0 10px 28px -16px rgba(80, 0, 0, .35) !important; background: #fff; }
  .section-events .ev2 .event-poster-wrap { aspect-ratio: 16 / 9 !important; border-radius: 0; }
  .section-events .ev2 .event-poster-wrap::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; z-index: 2; pointer-events: none;
    background: linear-gradient(to top, rgba(20, 0, 0, .45), rgba(20, 0, 0, 0)); }

  /* status chip: smaller, crisp */
  .section-events .ev2 .ev2-st { top: 10px !important; left: 10px !important; padding: 4px 9px !important; font-size: .66rem !important; z-index: 3; }

  /* date badge: bottom-left on the picture, like a calendar tile */
  .section-events .ev2 .ev2-mo { right: auto !important; left: 12px !important; bottom: 10px !important; z-index: 3; min-width: 54px !important;
    padding: 0 !important; overflow: hidden; border-radius: 10px !important; box-shadow: 0 6px 16px rgba(0, 0, 0, .3) !important; }
  .section-events .ev2 .ev2-mo b { display: block; width: 100%; padding: 5px 8px 4px; background: var(--clr-primary, #800000); color: #fff !important;
    font-size: .78rem !important; letter-spacing: .08em; text-align: center; }
  .section-events .ev2 .ev2-mo small { display: block; padding: 3px 8px 5px; color: #1e293b !important; font-size: .7rem !important; text-align: center; margin: 0 !important; }

  /* body: type as a small label, title, details */
  .section-events .ev2 .ev2-body { padding: 14px 16px 16px !important; }
  .section-events .ev2 .ev2-eb { display: inline-flex !important; align-self: flex-start; margin-bottom: 8px !important; padding: 3px 8px;
    border-radius: 6px; background: #f8eeee; font-size: .62rem !important; letter-spacing: .1em; }
  .section-events .ev2 .ev2-eb--w { background: #eef3ff; }
  .section-events .ev2 .ev2-t { font-size: 1rem !important; line-height: 1.32 !important; }
  .section-events .ev2 .ev2-info { gap: 6px !important; margin-top: 10px !important; }
  .section-events .ev2 .ev2-info li { font-size: .82rem !important; }

  /* footer: countdown as a soft chip, one full-width action */
  .section-events .ev2 .ev2-foot { border-top: 0 !important; padding-top: 12px !important; }
  .section-events .ev2 .ev-cd.on { background: #fff7ed; color: #b45309; padding: 4px 10px; border-radius: 99px; font-size: .72rem !important; }
  .section-events .ev2 .ev2-btn { margin-top: 10px !important; padding: 11px 12px !important; border-radius: 12px !important; font-size: .9rem !important; }

  /* "See all events" — the last card */
  .section-events .row.g-4 > .ev-allcard-col { display: flex !important; flex: 0 0 55% !important; max-width: 55% !important; }
  .ev-allcard { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center;
    border-radius: 18px; padding: 20px 14px; text-decoration: none; color: #fff;
    background: linear-gradient(160deg, var(--clr-primary, #800000), #4a0000); box-shadow: 0 10px 28px -16px rgba(80, 0, 0, .5); }
  .ev-allcard i { font-size: 1.8rem; width: 56px; height: 56px; border-radius: 50%; background: rgba(255, 255, 255, .14); display: flex; align-items: center; justify-content: center; }
  .ev-allcard b { font-size: 1rem; }
  .ev-allcard span { font-size: .78rem; opacity: .8; }
  .ev-allcard:hover, .ev-allcard:focus { color: #fff; }
}