/* ════════════════════════════════════════════════════════════════════════════════════════════════
   css/event_page.css — ONE DESIGN for the event (registration) page below the hero (S68 §Z54, 19 Oct 2026).

   The client: "on larger screens it doesn't look like one design… and the speakers, show a couple then a button".
   Chosen from a mock. Every section: a small red label + a bold title; one soft background; rounded white cards, never
   a card inside a card; the About text at a reading width with the bullet list as a ✓ checklist; on laptops an
   "at a glance" card beside it that stays in view; speakers as photo cards — 8 on a laptop, 4 on a phone, then
   "Show all N".
   ⚠️ register.php only uses the new markup when THIS FILE EXISTS (is_file), so the deploy order cannot half-apply it.
   ⚠️ --reg-primary / --reg-light / --reg-accent are the event's own colours (theme picker) — the page keeps them.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

.ep-band { background: #f7f5f4 !important; padding: 48px 0 !important; }
.ep-band + .ep-band { padding-top: 8px !important; }

/* ── Section heading, the same everywhere ── */
.ep-head { margin: 0 0 22px; }
.ep-head--c { text-align: center; }
.ep-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.ep-eb { font-size: .72rem; font-weight: 800; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--reg-primary, #800000); margin-bottom: 8px; }
.ep-h { font-size: 1.75rem; font-weight: 800; line-height: 1.2; letter-spacing: -.01em; color: #1e293b; margin: 0; }
.ep-h small { font-size: .95rem; font-weight: 600; color: #94a3b8; margin-left: 6px; }
@media (max-width: 575.98px) { .ep-h { font-size: 1.4rem; } .ep-band { padding: 36px 0 !important; } }

/* ── About / Program ── */
.ep-about .reg-abcard { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; overflow: visible !important; }
.ep-about .reg-abhead { background: none !important; border: 0 !important; padding: 0 0 14px !important; }
.ep-about .reg-abtabs { display: inline-flex !important; gap: 4px; padding: 4px !important; border-radius: 12px !important; background: #efeae8 !important; }
.ep-about .reg-abtab { border: 0 !important; border-radius: 9px !important; background: none !important; box-shadow: none !important;
  color: #64748b !important; font-weight: 700 !important; padding: 9px 16px !important; }
.ep-about .reg-abtab.active { background: #fff !important; color: #1e293b !important; box-shadow: 0 1px 3px rgba(0,0,0,.08) !important; }
.ep-about .reg-abbody { background: none !important; padding: 0 !important; border: 0 !important; }
.ep-about .reg-about-box {
  background: #fff !important; border: 1px solid #eee7e4; border-radius: 16px !important; box-shadow: 0 8px 24px -14px rgba(15,23,42,.18) !important;
  padding: 30px 34px !important; font-size: 1rem; line-height: 1.75 !important; color: #334155 !important;
}
.ep-about .reg-about-box > :first-child { margin-top: 0 !important; }
.ep-about .reg-about-box h1, .ep-about .reg-about-box h2, .ep-about .reg-about-box h3, .ep-about .reg-about-box h4 {
  font-size: .95rem !important; font-weight: 800 !important; letter-spacing: .08em; text-transform: uppercase;
  color: var(--reg-primary, #800000) !important; margin: 26px 0 10px !important; line-height: 1.4 !important;
}
.ep-about .reg-about-box h1 strong, .ep-about .reg-about-box h2 strong, .ep-about .reg-about-box h3 strong { font-weight: inherit; }
.ep-about .reg-about-box > h1:first-child, .ep-about .reg-about-box > h2:first-child { font-size: 1.15rem !important; letter-spacing: .02em; color: #1e293b !important; }
.ep-about .reg-about-box ul { list-style: none; padding: 0 !important; margin: 0 0 16px; display: grid; gap: 10px 28px; }
.ep-about .reg-about-box ul li { position: relative; padding-left: 30px; line-height: 1.55; }
.ep-about .reg-about-box ul li::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 19px; height: 19px; border-radius: 50%;
  background: var(--reg-light, #f9eaea) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23800000' stroke-width='2.2' d='M4 8.5l2.6 2.4L12 5.5'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.ep-about .reg-about-box ol { padding-left: 22px; }
@media (max-width: 575.98px) { .ep-about .reg-about-box { padding: 22px 18px !important; } .ep-about .reg-abtab { padding: 8px 12px !important; font-size: .85rem; } }

/* ── The "at a glance" card (laptops and up; the hero already shows this on phones) ── */
.ep-side { display: none; }
@media (min-width: 992px) {
  .ep-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; }
  .ep-about .reg-about-box ul { grid-template-columns: 1fr 1fr; }
  .ep-side { display: block; position: sticky; top: calc(var(--ssbmt-nav-h, 85px) + 20px);
    background: #fff; border: 1px solid #eee7e4; border-radius: 16px; box-shadow: 0 8px 24px -14px rgba(15,23,42,.18); padding: 22px; }
}
.ep-st { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 6px 11px; border-radius: 99px; background: #f1f5f9;
  font-size: .68rem; font-weight: 800; line-height: 1; letter-spacing: .12em; text-transform: uppercase; color: #475569; }
.ep-st i { width: 8px; height: 8px; border-radius: 50%; background: #94a3b8; }
.ep-st--open i { background: #22c55e; } .ep-st--soon i { background: #f59e0b; } .ep-st--ongoing i { background: #ef4444; }
.ep-side-t { font-size: 1.05rem; font-weight: 800; line-height: 1.35; color: #1e293b; margin-bottom: 14px; }
.ep-side ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 11px; }
.ep-side li { display: flex; gap: 10px; font-size: .9rem; line-height: 1.4; color: #334155; }
.ep-side li > .bi { color: var(--reg-primary, #800000); font-size: 1rem; margin-top: 1px; flex-shrink: 0; }
.ep-side li a { color: #1e293b; text-decoration: underline; text-decoration-color: #cbd5e1; text-underline-offset: 3px; }
.ep-side li a .bi { font-size: .7rem; margin-left: 2px; }
.ep-side .ep-dl span { color: #92400e; font-weight: 700; }
.ep-go, .ep-go2 { display: flex; width: 100%; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 12px; font-weight: 800; font-size: .92rem; cursor: pointer; }
.ep-go { border: 0; background: var(--reg-primary, #800000); color: #fff; }
.ep-go:hover { filter: brightness(1.08); }
.ep-go2 { margin-top: 8px; border: 1px solid #eadbd8; background: #fff; color: var(--reg-primary, #800000); padding: 10px; font-size: .88rem; }
.ep-go2:hover { background: #fdf6f5; }

/* ── Speakers: photo cards, 8 on a laptop / 4 on a phone, then "Show all" ── */
.ep-spk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 768px) { .ep-spk { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.ep-sp { position: relative; display: block; width: 100%; padding: 18px 12px 16px; text-align: center; cursor: pointer;
  background: #fff; border: 1px solid #eee7e4; border-radius: 16px; box-shadow: 0 6px 18px -14px rgba(15,23,42,.25);
  transition: transform .2s, box-shadow .2s; font: inherit; color: inherit; }
.ep-sp:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgba(15,23,42,.4); }
.ep-sp img, .ep-ph { display: block; width: 84px; height: 84px; margin: 0 auto 12px; border-radius: 50%; object-fit: cover; object-position: 50% 20%;
  border: 3px solid #fff; box-shadow: 0 0 0 1px #eee7e4; }
.ep-ph { display: flex !important; align-items: center; justify-content: center; overflow: hidden; margin-top: 0 !important;
  background: var(--reg-light, #f9eaea); color: var(--reg-primary, #800000); }
/* §Z63 — the default picture: a centred person silhouette (the generic `.ep-sp span` rule used to shrink it to the top). */
.ep-ph .bi { font-size: 46px; line-height: 1; opacity: .55; transform: translateY(6px); }
@media (max-width: 575.98px) { .ep-ph .bi { font-size: 40px; } }
.ep-sp b { display: block; font-size: .88rem; line-height: 1.3; color: #1e293b; }
.ep-sp b em { font-style: normal; color: var(--reg-primary, #800000); font-weight: 700; }
.ep-sp span:not(.ep-ph) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: .74rem; line-height: 1.35; color: #64748b; }
.ep-tag { position: absolute; top: 10px; right: 10px; padding: 3px 8px; border-radius: 99px; background: var(--reg-light, #f9eaea); color: var(--reg-primary, #800000);
  font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.ep-tag { white-space: nowrap; max-width: calc(100% - 20px); overflow: hidden; text-overflow: ellipsis; }
/* §Z61 — the role tag sits UNDER the photo at every width (on a phone it wrapped onto 2 lines over the photo; on a laptop
   the corner tag clipped the photo's edge). The card is a column; hidden cards stay hidden (that rule outranks this). */
.ep-tag { position: static; display: inline-block; max-width: 100%; margin: -4px 0 8px; }
.ep-tag--spk { background: #f1f5f9; color: #64748b; }   /* §Z62 — ordinary speakers: quiet; special roles keep the event colour */
.ep-sp { display: flex; flex-direction: column; align-items: center; }
.ep-sp img, .ep-sp .ep-ph { order: 1; } .ep-sp .ep-tag { order: 2; } .ep-sp b { order: 3; } .ep-sp span:not(.ep-ph) { order: 4; }
.ep-spk:not(.open) > .ep-sp:nth-child(n+5) { display: none; }
@media (min-width: 768px) { .ep-spk:not(.open) > .ep-sp:nth-child(n+5) { display: flex; } .ep-spk:not(.open) > .ep-sp:nth-child(n+9) { display: none; } }
@media (max-width: 575.98px) { .ep-sp img, .ep-ph { width: 72px !important; height: 72px !important; max-width: 72px !important; } .ep-sp { padding: 16px 10px 14px; } }
.ep-more { display: flex; justify-content: center; margin-top: 22px; }
.ep-more button { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #e5d6d3; border-radius: 12px; background: #fff; padding: 12px 22px;
  color: var(--reg-primary, #800000); font-weight: 800; font-size: .92rem; cursor: pointer; }
.ep-more button:hover { background: #fdf6f5; }
@media (prefers-reduced-motion: reduce) { .ep-sp, .ep-sp:hover { transition: none; transform: none; } }