/* ============================================================
   EVENT DETAIL + REGISTRATION
   Uses the working palette tokens (which can be themed per-event
   by the event-loader via data-event-theme + inline overrides).
   ============================================================ */

.event-nav { background: #fff; }
.event-nav .bar { padding: 18px 0; }
.event-nav .right { display: flex; align-items: center; gap: 14px; }
.event-nav .ts-event-brand img { max-height: 32px; }

/* =========================================================
   EVENT BRAND BANNER (on-page client + event logo lockup)
   Lives at the top of the content column. Each event "wears"
   its own brand. Default: borderless, no separators, content
   stays on one line until the page is too narrow to fit it.
   The pill border is opt-in via .style-pill on the banner.
   ========================================================= */
.event-brand-banner {
  display: flex; align-items: center; gap: 14px;
  margin: 4px 0 16px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* Stay on one line if we can; wrap only when there's not enough room */
  flex-wrap: wrap;
}
.event-brand-banner.style-pill {
  display: inline-flex;
  padding: 10px 18px;
  background: #fff;
  border: 1px solid var(--ts-line);
  border-radius: 999px;
  box-shadow: 0 1px 0 rgba(10,22,40,0.04);
}
.event-brand-banner .brand-img { max-height: 36px; width: auto; }
.event-brand-banner .brand-img-event { max-height: 40px; }
/* Keep partner logos readable even if a user-agent overrides color-scheme
   (Android Chrome's "Always-on dark", Samsung Internet's "Dark theme for
   sites", etc.). The padding gives the logo glyphs a white backdrop. */
@media (prefers-color-scheme: dark) {
  .event-brand-banner .brand-img,
  .event-logo-feature img {
    background: #fff;
    border-radius: 6px;
    padding: 4px 6px;
  }
}
.event-brand-banner .brand-name {
  font-family: var(--ts-display); font-weight: 700; font-size: 14px;
  color: var(--ts-text); letter-spacing: -0.01em;
}

/* Separator visibility is class-driven so an admin can pick none / bar / dot */
.event-brand-banner .brand-divider,
.event-brand-banner .brand-dot { display: none; }
.event-brand-banner.sep-bar    .brand-divider  { display: inline-block; width: 1px; height: 24px; background: var(--ts-line-2); }
.event-brand-banner.sep-dot    .brand-dot      { display: inline-block; color: var(--ts-text-subtle); font-size: 18px; line-height: 1; margin: 0 -2px; }
.event-brand-banner.sep-custom .brand-sep-text {
  display: inline-block;
  font-family: var(--ts-mono); font-size: 12.5px;
  color: var(--ts-text-muted); letter-spacing: 0.04em;
  padding: 0 4px;
}

/* "presents" connector — sits inline with the logos. The dashed left rule
   only shows when there's something visually separating the columns
   (i.e. the pill border or a bar separator is in play). */
.event-brand-banner .brand-presented {
  font-family: var(--ts-mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ts-text-subtle);
  white-space: nowrap;
}
.event-brand-banner.style-pill .brand-presented,
.event-brand-banner.sep-bar    .brand-presented {
  padding-left: 10px;
  border-left: 1px dashed var(--ts-line);
}
[dir="rtl"] .event-brand-banner.style-pill .brand-presented,
[dir="rtl"] .event-brand-banner.sep-bar    .brand-presented {
  padding-left: 0; padding-right: 10px;
  border-left: 0; border-right: 1px dashed var(--ts-line);
}

/* Standalone event-logo block (when eventLogoLayout === 'below').
   Sits between the brand pill and the title card; size variants give
   the admin control over visual weight. Always responsive — on narrow
   viewports the img shrinks to fit even if the size-* class allows a
   bigger natural height. */
.event-logo-feature {
  display: flex; align-items: center; justify-content: flex-start;
  margin: 18px 0 8px;
  /* Allow the img to shrink inside the flex column (without this,
     flex items refuse to go below their intrinsic content width). */
  min-width: 0;
  max-width: 100%;
}
.event-logo-feature img {
  max-width: 100%;
  min-width: 0;
  width: auto;
  height: auto;
  object-fit: contain;
}
.event-logo-feature.size-small  img { max-height: 56px; }
.event-logo-feature.size-medium img { max-height: 96px; }
.event-logo-feature.size-large  img { max-height: 140px; }
.event-logo-feature.size-xlarge img { max-height: 200px; }
/* Shrink the size ceilings on smaller screens so a wide logo doesn't
   blow horizontally past the viewport before max-width:100% catches it. */
@media (max-width: 720px) {
  .event-logo-feature.size-large  img { max-height: 96px; }
  .event-logo-feature.size-xlarge img { max-height: 120px; }
}
@media (max-width: 480px) {
  .event-logo-feature.size-medium img { max-height: 72px; }
  .event-logo-feature.size-large  img { max-height: 80px; }
  .event-logo-feature.size-xlarge img { max-height: 96px; }
}

/* The summary block accepts rich HTML from the admin RTE — give every
   allowed tag sensible defaults so the page never breaks regardless of
   what the editor produced. */
.detail-shell .summary p { margin: 0 0 12px; }
.detail-shell .summary p:last-child { margin-bottom: 0; }
.detail-shell .summary ul,
.detail-shell .summary ol { margin: 8px 0 16px; padding-left: 22px; }
.detail-shell .summary li { margin: 4px 0; }
.detail-shell .summary a { color: var(--ts-primary); text-decoration: underline; }
.detail-shell .summary strong, .detail-shell .summary b { color: var(--ts-ink); font-weight: 700; }
.detail-shell .summary h2 { font-family: var(--ts-display); font-size: 24px; font-weight: 700; margin: 18px 0 10px; color: var(--ts-ink); }
.detail-shell .summary h3 { font-family: var(--ts-display); font-size: 19px; font-weight: 700; margin: 16px 0  8px; color: var(--ts-ink); }
.detail-shell .summary h4 { font-family: var(--ts-display); font-size: 16px; font-weight: 700; margin: 14px 0  6px; color: var(--ts-ink); }
.detail-shell .summary blockquote {
  margin: 12px 0; padding: 10px 16px; border-left: 3px solid var(--ts-primary);
  background: var(--ts-paper-2); border-radius: 4px;
  color: var(--ts-text); font-style: italic;
}
.detail-shell .summary pre, .detail-shell .summary code {
  font-family: var(--ts-mono); font-size: 13.5px;
  background: var(--ts-paper-2); border-radius: 4px; padding: 1px 6px;
}
.detail-shell .summary pre { padding: 12px 14px; margin: 12px 0; overflow-x: auto; }
.detail-shell .summary s { color: var(--ts-text-subtle); }

/* Apply the same rich-HTML resets to the custom-section body */
.detail-shell .event-section-body h2,
.detail-shell .event-section-body h3,
.detail-shell .event-section-body h4 { font-family: var(--ts-display); font-weight: 700; color: var(--ts-ink); margin: 16px 0 8px; }
.detail-shell .event-section-body h2 { font-size: 22px; }
.detail-shell .event-section-body h3 { font-size: 18px; }
.detail-shell .event-section-body h4 { font-size: 15px; }
.detail-shell .event-section-body blockquote {
  margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--ts-primary);
  background: var(--ts-paper-2); border-radius: 4px; font-style: italic;
}
.detail-shell .event-section-body pre,
.detail-shell .event-section-body code {
  font-family: var(--ts-mono); font-size: 13px;
  background: var(--ts-paper-2); border-radius: 4px; padding: 1px 6px;
}

/* =========================================================
   DETAIL LAYOUT
   ========================================================= */
.detail-shell { display: grid; grid-template-columns: 1fr 380px; gap: 56px; align-items: start; padding: 24px 0 96px; }
@media (max-width: 980px) {
  .detail-shell { grid-template-columns: 1fr; gap: 32px; }
}

.detail-shell h1 { font-family: var(--ts-display); font-size: clamp(36px, 4.4vw, 60px); font-weight: 800; line-height: 1.04; letter-spacing: -0.03em; color: var(--ts-ink); margin: 16px 0 16px; text-wrap: balance; }
.detail-shell h1 em { font-family: var(--ts-script); color: var(--ts-primary); font-style: italic; font-weight: 700; }

/* "Force the title on one line" — admin opt-in. Scales the font down to
   fit the card's actual width via container queries (~93% browser
   support). The text-overflow is `clip`, not `ellipsis`, so we never
   add visible "…" — at the smallest font size the title may extend
   slightly past the card on extremely narrow phones, which beats an
   ugly truncation. The clamp ceiling is set so even at the widest
   viewports a 22-ish-char title stays on one line. */
.detail-shell .event-header-card {
  container-type: inline-size;
  min-width: 0;
}
.detail-shell .event-header-card.title-oneline h1 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  text-wrap: nowrap;
  /* min(...,...) — whichever scales tighter wins on each viewport */
  font-size: clamp(14px, min(5.5cqi, 5vw), 48px);
  /* Roomier line-height + a touch of bottom padding so the descenders
     on g/p/y/j aren't clipped by overflow: hidden. */
  line-height: 1.25;
  padding-bottom: 0.08em;
  letter-spacing: -0.025em;
}
/* Fallback for the ~7% of browsers without container queries */
@supports not (container-type: inline-size) {
  .detail-shell .event-header-card.title-oneline h1 {
    font-size: clamp(14px, 4vw, 44px);
  }
}

/* Custom admin-defined sections (Who should attend, Prerequisites, FAQ…) */
.detail-shell .event-section { margin-bottom: 32px; }
.detail-shell .event-section h3 { margin-top: 0; }
.detail-shell .event-section-body { font-size: 15px; color: var(--ts-text); line-height: 1.65; }
.detail-shell .event-section-body p { margin: 0 0 12px; }
.detail-shell .event-section-body p:last-child { margin-bottom: 0; }
.detail-shell .event-section-body ul,
.detail-shell .event-section-body ol { margin: 8px 0 12px; padding-left: 22px; }
.detail-shell .event-section-body li { margin: 4px 0; }
.detail-shell .event-section-body a { color: var(--ts-primary); text-decoration: underline; }
.detail-shell .event-section-body strong,
.detail-shell .event-section-body b { color: var(--ts-ink); font-weight: 700; }
.detail-shell .tagline { font-size: 18px; color: var(--ts-text-muted); line-height: 1.55; margin: 0 0 24px; max-width: 720px; }
.detail-shell .summary { font-size: 16px; color: var(--ts-text); line-height: 1.7; margin: 0 0 32px; max-width: 720px; }

.detail-shell h3 { font-family: var(--ts-display); font-size: 22px; font-weight: 700; margin: 32px 0 14px; color: var(--ts-ink); }

/* =========================================================
   LANGUAGE TABS (multi-language events)
   Pill-style segmented control so it's unmissable on every
   template, especially Workshop's all-white canvas.
   ========================================================= */
.lang-tabs {
  display: inline-flex;
  gap: 4px;
  margin: 0 0 24px;
  padding: 4px;
  background: var(--ts-paper-2);
  border: 1px solid var(--ts-line);
  border-radius: 999px;
  flex-wrap: wrap;
  align-items: center;
}
.lang-tabs::before {
  content: '🌐';
  font-size: 14px;
  padding: 0 6px 0 8px;
  opacity: 0.6;
}
.lang-tabs button {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 16px;
  font-family: var(--ts-sans);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ts-text-muted);
  cursor: pointer;
  border-radius: 999px;
  transition: color 160ms ease, background 160ms ease;
}
.lang-tabs button:hover {
  color: var(--ts-ink);
  background: rgba(0, 0, 0, 0.04);
}
.lang-tabs button.active {
  color: #fff;
  background: var(--ts-primary);
  font-weight: 600;
}
/* The Arabic-labelled tab uses RTL text natively */
.lang-tabs button[dir="rtl"] { font-feature-settings: "kern"; }

/* When the content column is in RTL mode, flip a few sub-elements */
.detail-shell > div:first-child[dir="rtl"] .learn-list .tick { margin-right: 0; margin-left: 8px; }
.detail-shell > div:first-child[dir="rtl"] .agenda .item   { grid-template-columns: 1fr 90px; }
.detail-shell > div:first-child[dir="rtl"] .speaker-card   { flex-direction: row-reverse; text-align: right; }
.detail-shell > div:first-child[dir="rtl"] .crumbs         { justify-content: flex-end; }
/* Section H3 trailing line in Workshop template stays visually balanced */
body[data-template="workshop"] .detail-shell > div:first-child[dir="rtl"] h3 { flex-direction: row-reverse; }

/* =========================================================
   STREAM / HERO VIDEO BLOCK
   ========================================================= */
.stream-frame {
  background: var(--ts-ink); border-radius: 14px; aspect-ratio: 16/9;
  position: relative; overflow: hidden; margin-bottom: 24px;
  display: flex; align-items: center; justify-content: center;
}
.stream-frame::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.04) 0, transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--ts-primary) 30%, transparent) 0%, transparent 60%);
}
.stream-frame .play { position: relative; z-index: 1; width: 72px; height: 72px; border-radius: 999px; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
.stream-frame .play::after { content: ''; border-left: 22px solid var(--ts-primary); border-top: 14px solid transparent; border-bottom: 14px solid transparent; margin-left: 5px; }
.stream-frame .pre-title { position: absolute; top: 24px; left: 24px; right: 24px; z-index: 1; color: #fff; }
.stream-frame .pre-title .label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.7); font-weight: 700; margin-bottom: 6px; }
.stream-frame .pre-title .ttl { font-family: var(--ts-display); font-size: 22px; font-weight: 700; }

/* Hero media variants — admin can pick image or video instead of the placeholder
   card. Same 16:9 box and rounded corners; only the inner content changes. */
.stream-frame-image,
.stream-frame-video { background: var(--ts-ink); }
/* Decorative ::before overlays (base + per-template gradients, e.g. the
   workshop template) must NEVER intercept clicks — otherwise they swallow the
   <video>'s native play/pause controls. pointer-events:none lets clicks fall
   through; content:none removes it on templates where specificity allows. */
.stream-frame-image::before,
.stream-frame-video::before { content: none; pointer-events: none; }
/* The real media sits ABOVE any overlay (z-index) so it's the paint + click
   target. Being opaque + object-fit:cover, it also hides any gradient a
   higher-specificity template ::before may still render underneath. */
.stream-frame-image img,
.stream-frame-video video {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: inherit;
  position: relative; z-index: 2;
}

/* =========================================================
   AGENDA + LEARN LIST
   ========================================================= */
.agenda { display: flex; flex-direction: column; gap: 0; margin-bottom: 32px; }
.agenda .item { display: grid; grid-template-columns: 90px 1fr; gap: 16px; padding: 14px 0; border-bottom: 1px dashed var(--ts-line); }
.agenda .item:last-child { border-bottom: none; }
.agenda .item .t { font-family: var(--ts-mono); font-size: 12px; color: var(--ts-text-muted); padding-top: 2px; }
.agenda .item .b { font-size: 15px; color: var(--ts-ink); line-height: 1.45; font-weight: 600; }
.agenda .item .b small { display: block; color: var(--ts-text-muted); margin-top: 2px; font-size: 13px; font-weight: 400; }

.learn-list { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 12px; }
.learn-list li { display: flex; gap: 12px; align-items: start; font-size: 15px; }
.learn-list .tick { display: inline-flex; width: 22px; height: 22px; border-radius: 999px; background: var(--ts-primary-soft); color: var(--ts-primary-strong); flex-shrink: 0; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; margin-top: 1px; }

/* =========================================================
   SPEAKERS
   ========================================================= */
.speakers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 24px; }
@media (max-width: 720px) { .speakers { grid-template-columns: 1fr; } }
.speaker-card { background: var(--ts-paper-2); border-radius: 14px; padding: 18px; display: flex; gap: 14px; align-items: start; }
.speaker-card .ava-l { width: 52px; height: 52px; border-radius: 999px; background: #fff; border: 1px solid var(--ts-line); display: flex; align-items: center; justify-content: center; font-family: var(--ts-display); font-weight: 700; color: var(--ts-text); flex-shrink: 0; }
.speaker-card h5 { font-family: var(--ts-display); font-size: 16px; font-weight: 700; color: var(--ts-ink); margin: 0 0 4px; }
.speaker-card .role { font-size: 13px; color: var(--ts-text-muted); margin: 0 0 6px; }
.speaker-card .bio { font-size: 13.5px; color: var(--ts-text-muted); line-height: 1.5; margin: 0; }

/* =========================================================
   SIDEBAR — REGISTER CARD
   ========================================================= */
.detail-side { position: sticky; top: 88px; display: flex; flex-direction: column; gap: 16px; }
@media (max-width: 980px) { .detail-side { position: static; } }

.register-card { background: #fff; border: 1px solid var(--ts-line); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 1px 0 rgba(10,22,40,0.04), 0 4px 14px rgba(10,22,40,0.05); }
.register-card .when-big { display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; border-bottom: 1px dashed var(--ts-line); }
.register-card .when-big .d { font-family: var(--ts-display); font-size: 26px; font-weight: 800; color: var(--ts-ink); letter-spacing: -0.02em; line-height: 1.1; }
.register-card .when-big .t { font-size: 14px; color: var(--ts-text-muted); }
.register-card .row-info { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ts-text-muted); padding: 4px 0; }
.register-card .row-info b { color: var(--ts-ink); font-weight: 600; }
.register-card .price { font-family: var(--ts-display); font-size: 18px; font-weight: 700; color: var(--ts-primary-strong); }
.register-card .btn-primary { justify-content: center; padding: 14px; font-size: 15px; }
.register-card .small { font-size: 12px; color: var(--ts-text-subtle); text-align: center; margin: 0; }

.share-card { background: var(--ts-paper-2); border-radius: 14px; padding: 18px 22px; display: flex; flex-direction: column; gap: 10px; }
.share-card .label { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ts-text-subtle); font-weight: 700; }
.share-card .row { display: flex; gap: 8px; }

/* ── Registrant Gated YouTube Embed ──────────────────────── */
.stream-embed-container {
  display: flex;
  gap: 16px;
  width: 100%;
  margin-top: 14px;
}
.stream-embed-container .video-wrapper {
  flex: 0 0 65%;
  position: relative;
  padding-bottom: 36.56%; /* 16:9 aspect ratio * 65% */
  height: 0;
}
.stream-embed-container .video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 1px solid var(--ts-line);
}
.stream-embed-container .chat-wrapper {
  flex: 0 0 35%;
  height: 0;
  padding-bottom: 36.56%; /* Match the height of video */
  position: relative;
}
.stream-embed-container .chat-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 1px solid var(--ts-line);
}

@media (max-width: 768px) {
  .stream-embed-container {
    flex-direction: column;
  }
  .stream-embed-container .video-wrapper {
    flex: none;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 full-width */
  }
  .stream-embed-container .chat-wrapper {
    flex: none;
    width: 100%;
    height: 400px;
    padding-bottom: 0;
  }
}

/* =========================================================
   REGISTRATION FORM PAGE
   ========================================================= */
.register-shell { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; padding: 32px 0 96px; align-items: start; }
@media (max-width: 920px) { .register-shell { grid-template-columns: 1fr; } }

.register-summary { background: var(--ts-paper-2); border-radius: 16px; padding: 28px; position: sticky; top: 88px; }
@media (max-width: 920px) { .register-summary { position: static; } }
.register-summary h3 { font-family: var(--ts-display); font-size: 18px; font-weight: 700; margin: 0 0 10px; color: var(--ts-ink); }
.register-summary .meta { font-size: 14px; color: var(--ts-text-muted); margin: 0 0 16px; line-height: 1.55; }
.register-summary .what-we-do { font-size: 13px; color: var(--ts-text-muted); padding-top: 16px; border-top: 1px dashed var(--ts-line); line-height: 1.55; }

.register-form { background: #fff; border: 1px solid var(--ts-line); border-radius: 16px; padding: 32px; }
.register-form h2 { font-family: var(--ts-display); font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--ts-ink); margin: 0 0 6px; }
.register-form .lead { color: var(--ts-text-muted); font-size: 15px; margin: 0 0 20px; }
.register-form .submit-row { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.register-form .submit-row .btn-primary { justify-content: center; padding: 14px; font-size: 15px; }
.register-form .submit-row .small { font-size: 12px; color: var(--ts-text-subtle); text-align: center; margin: 0; }

/* Success state */
.register-done { background: #fff; border: 1px solid var(--ts-line); border-radius: 16px; padding: 48px 32px; text-align: center; max-width: 560px; margin: 0 auto; }
.register-done .checkmark { width: 64px; height: 64px; border-radius: 999px; background: #E6F4EC; color: #166B45; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; font-size: 32px; font-weight: 700; }
.register-done h2 { font-family: var(--ts-display); font-size: 28px; margin: 0 0 8px; }
.register-done p { color: var(--ts-text-muted); margin: 0 0 8px; }