/* ═══ Event window, roomier and tighter ═══════════════════════════════
   Nearly full screen on laptops. The facts people decide on (what, when,
   where, how to get in, attend) sit in the first view; comments and
   extras follow below. Template in index.html, filled by _edxFill. */

/* bigger window on laptops and desktops */
@media (min-width: 861px) {
  .event-detail-modal.edx { width: min(94vw, 1320px) !important; height: min(92vh, 940px) !important; max-height: none !important; }
  .edx .event-detail-layout { grid-template-columns: minmax(0, 1fr) minmax(520px, 1.02fr) !important; }
  .edx .event-detail-body { padding: 30px 36px 0; }
  .edx .edx-title { font-size: clamp(1.7rem, 2.5vw, 2.3rem) !important; }
}

/* when, where, entry: three short lines instead of four boxes */
.edx-tiles.edx-lines, .edx .edx-tiles { display: flex !important; flex-direction: column; gap: 9px; margin-top: 14px; }
.edx-tiles[hidden] { display: none !important; }
.edx-line { display: flex; align-items: flex-start; flex-wrap: nowrap; gap: 10px; margin: 0; font-size: 1rem; line-height: 1.4; color: rgba(255,255,255,0.82); }
.edx-line > svg { flex: none; margin-top: 3px; color: #ff5c78; }
.edx-line > .ev2-soon { flex: none; margin-top: -1px; }
.edx-line > span { min-width: 0; }
.edx-when > span { font-weight: 700; color: #fff; }
.edx-line a.ev-map-link { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px dashed rgba(255,92,122,0.5); }
.edx-line a.ev-map-link:hover { color: #ff7a92; }
.edx-official { display: inline-flex; align-items: center; gap: 6px; color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255,92,122,0.55); }
.edx-official:hover { color: #ff7a92; }
.edx-line .ev2-soon { height: 24px; }
.ev2-soon.is-far { color: rgba(255,255,255,0.75); background: rgba(255,255,255,0.08); }

/* the big countdown only in the last week; further out the chip on the date line says it */
.edx-cd.is-far { display: none !important; }
.edx .edx-cd { margin-top: 10px; }

/* one action row: Attend (or ticket) then the icon buttons */
.edx-actrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-top: 20px; padding-bottom: 18px; }
.edx-actrow > .edx-main { display: contents; }
.edx-actrow .rsvp-section:not([style*="none"]) { display: contents !important; }
.edx-actrow #evCancelledNote { order: 0; flex: 1 1 100%; }
.edx-actrow .ticket-section { order: 1; flex: 1 1 100%; }
.edx-actrow .rsvp-btn-row { order: 2; margin: 0 !important; flex: 0 1 auto !important; justify-content: flex-start !important; gap: 10px; }
.edx-actrow .edx-actions { order: 3; padding: 0 !important; margin: 0 !important; }
.edx-actrow .rsvp-who-row { order: 4; flex: 1 1 100%; margin: 4px 0 0 !important; }
.edx-actrow .rsvp-who-row[style*="none"] { display: none !important; }
.edx-actrow .ev-checkin-banner { order: 5; flex: 1 1 100%; }
.edx-actrow .ev-checkin-banner[style*="none"] { display: none !important; }
.edx-actrow .rsvp-capacity-badge[style*="none"] { display: none; }

/* "Tickets and entry" next to "I'm going" for events EventMe only lists */
.rsvp-official-btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 999px; font-size: 0.9rem; font-weight: 700; text-decoration: none;
  color: #fff; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); transition: background .2s, border-color .2s; }
.rsvp-official-btn:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,92,122,0.6); }
.edx .rsvp-attend-btn { border-radius: 999px !important; }

/* phones: full screen already; the same tighter content */
@media (max-width: 860px) {
  .edx-line { font-size: 0.95rem; }
  .edx-actrow { margin-top: 16px; }
  .edx-actrow .rsvp-btn-row { flex: 1 1 100% !important; }
  .edx-actrow .rsvp-btn-row .rsvp-attend-btn, .edx-actrow .rsvp-official-btn { flex: 1 1 0; justify-content: center; min-width: 0; }
  .edx-actrow .edx-actions { flex: 1 1 100%; justify-content: flex-start; }
}

/* light theme */
[data-theme="light"] .edx-line { color: #4a3438; }
[data-theme="light"] .edx-when > span, [data-theme="light"] .edx-line a.ev-map-link, [data-theme="light"] .edx-official { color: #18090C; }
[data-theme="light"] .ev2-soon.is-far { color: #5a4448; background: rgba(0,0,0,0.06); }
[data-theme="light"] .rsvp-official-btn { color: #18090C; background: #fff; border-color: rgba(0,0,0,0.14); }

/* ═══ Talent window: the same family as the event window ═══ */
@media (min-width: 861px) {
  .talent-detail-modal.tdx { width: min(94vw, 1200px) !important; height: min(86vh, 760px) !important; }
  .tdx .talent-detail-media { flex: 0 0 46% !important; width: 46% !important; }
  .tdx .talent-detail-content { padding: 34px 38px 0 !important; }
  .tdx .tdx-name { font-size: clamp(1.8rem, 2.6vw, 2.4rem) !important; }
  .tdx .talent-detail-bio { font-size: 1rem; line-height: 1.7; }
}
/* a photo always fills its frame the same way, faces kept in view */
.tdx .talent-detail-photo-wrap img { object-fit: cover; object-position: center 22%; }
/* Follow says what it does, like Message */
.tdx #tdFollowBtn { width: auto !important; min-width: 0 !important; padding: 0 16px !important; gap: 7px !important; border-radius: 999px !important; }
.tdx #tdFollowBtn .tdx-sr { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
/* phones: Book and Message share the first row, Follow, like and share the second, nothing squeezed */
@media (max-width: 860px) {
  .tdx .tdx-actions { flex-wrap: wrap !important; gap: 8px !important; }
  .tdx .tdx-actions > .action-btn:not([style*="none"]) { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; height: 44px !important; padding: 0 14px !important; justify-content: center; }
  .tdx .tdx-actions > .action-btn svg { display: inline-block !important; }
  .tdx .tdx-icons { flex: 1 1 100%; display: flex; gap: 8px; }
  .tdx .tdx-icons #tdFollowBtn { flex: 1 1 auto; justify-content: center; height: 44px !important; }
  .tdx .tdx-icons .tdx-ib:not(#tdFollowBtn) { flex: none; width: 44px !important; height: 44px !important; min-width: 44px !important; padding: 0 !important; }
}