/* Shared event detail. Uses the tenant's existing fonts and semantic palette. */
.event-page { max-width: 1200px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.event-hero { display: grid; gap: 3rem; margin-top: 2.5rem; padding-bottom: 3.5rem; border-bottom: 1px solid var(--color-base-300); align-items: center; }
.event-intro { min-width: 0; }
.event-title { font-size: clamp(2.5rem, 5vw, 4.75rem); line-height: 1.04; letter-spacing: -.025em; margin: 1.25rem 0; overflow-wrap: anywhere; }
.event-host { font-size: .875rem; opacity: .65; margin-bottom: 2rem; }
.event-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; border-top: 1px solid var(--color-base-300); padding-top: 1.5rem; }
.event-facts h2 { font-size: .65rem; letter-spacing: .13em; }
.event-facts p { font-size: 1rem; line-height: 1.5; }
.event-jump { margin-top: 2rem; min-width: 11rem; justify-content: space-between; gap: 2rem; }
.event-portrait { margin: 0; border-radius: var(--radius-box, 1rem); overflow: hidden; background: var(--color-base-200); }
.event-portrait img { display: block; width: 100%; height: auto; max-height: 620px; object-fit: contain; }
.event-content { display: grid; gap: 3.5rem; align-items: start; margin-top: 3.5rem; }
.event-section-label { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .6; margin-bottom: 1rem; }
.event-section-title { font-size: clamp(1.8rem, 3vw, 2.5rem); line-height: 1.15; margin-bottom: 1.5rem; }
.event-description { font-size: 1.05rem; line-height: 1.85; max-width: 60ch; }
.event-description p + p { margin-top: 1.5rem; }
.event-description > * + * { margin-top: 1.5rem; }
/* A description's formatting (docs/136): the detail page's .event-description, and
   .event-prose wherever else one is shown. Only elements Markdown writes are styled, so a
   plain description (paragraphs and breaks) is untouched. h3/h4 keep the base layer's
   bold body type; sizes are relative to the description's. */
:is(.event-description, .event-prose) :is(h3, h4) { line-height: 1.3; margin-top: 1.75em; }
:is(.event-description, .event-prose) :is(h3, h4) + * { margin-top: .5em; }
:is(.event-description, .event-prose) h3 { font-size: 1.3em; }
:is(.event-description, .event-prose) h4 { font-size: 1.1em; }
:is(.event-description, .event-prose) :is(h3, h4):first-child { margin-top: 0; }
:is(.event-description, .event-prose) :is(ul, ol) { padding-inline-start: 1.4em; }
:is(.event-description, .event-prose) ul { list-style: disc; }
:is(.event-description, .event-prose) ol { list-style: decimal; }
:is(.event-description, .event-prose) li + li { margin-top: .35em; }
:is(.event-description, .event-prose) li::marker { color: color-mix(in srgb, currentColor 60%, transparent); }
:is(.event-description, .event-prose) blockquote { border-inline-start: 3px solid var(--color-primary); padding-inline-start: 1em; font-style: italic; }
:is(.event-description, .event-prose) a { text-decoration: underline; text-underline-offset: .18em; }
:is(.event-description, .event-prose) a:hover { color: var(--color-primary); }
.event-registration { min-width: 0; border: 1px solid var(--color-base-300); border-top: 4px solid var(--color-primary); border-radius: var(--radius-box, 1rem); background: var(--color-base-100); padding: clamp(1.25rem, 3vw, 2rem); scroll-margin-top: 7rem; box-shadow: 0 12px 36px color-mix(in srgb, var(--color-base-content) 5%, transparent); }
.event-registration-facts { margin-top: 1.5rem; display: grid; gap: 1.25rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-base-300); }
.event-registration-facts dt { font-size: .65rem; }
.event-registration form { gap: 1rem; }
.event-registration .input, .event-registration .select, .event-registration .textarea { background: var(--color-base-100); }
@media (min-width: 900px) {
  .event-hero--image { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(2rem, 5vw, 5rem); }
  .event-content--signup { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); }
}
@media (max-width: 599px) {
  .event-hero { gap: 2rem; margin-top: 1.5rem; padding-bottom: 2rem; }
  .event-facts { grid-template-columns: 1fr; }
  .event-portrait img { max-height: 480px; }
  .event-content { margin-top: 2rem; gap: 2rem; }
}