/* ===========================================================================
   SEMC Event Detail — all styling derives from Elevate tokens.
   ======================================================================== */

.semc-event-detail {
  container-type: inline-size;
  max-width: var(--hsElevate--contentWrapper--medium__maxWidth);
  margin-inline: auto;
  font-family: var(--hsElevate--body__font);
  font-size: var(--hsElevate--body__fontSize);
  line-height: var(--hsElevate--body__lineHeight);
}

/* Editor-only explainers. Never rendered on the live site. */
.semc-event-detail__notice {
  padding: var(--hsElevate--spacing--24);
  border: 2px dashed var(--hsElevate--formRequired__color);
  border-radius: var(--hsElevate-rounded--small);
  color: var(--hsElevate--formRequired__color);
  line-height: var(--hsElevate--body__lineHeight);
}

/* Informational, not an error — the index view having no row is normal. */
.semc-event-detail__notice--info {
  border-style: dashed;
  border-width: 1px;
  border-color: var(--hsElevate--formField__borderColor);
  background-color: var(--hsElevate--color--base--1);
  color: var(--hsElevate--formLabel__textColor);
}

.semc-event-detail__notice code {
  font-size: 0.9em;
  padding: 1px 5px;
  border-radius: var(--hsElevate-rounded--extra-small);
  background-color: rgb(0 0 0 / 0.06);
}

.semc-event-detail__back {
  margin-block-end: var(--hsElevate--spacing--24);
  font-size: var(--hsElevate--body--small__fontSize);
  font-weight: 700;
}

.semc-event-detail__back a {
  color: var(--hsElevate--link--primary__fontColor);
  text-decoration: none;
}

.semc-event-detail__back a:hover { text-decoration: underline; }

/* --- Header -------------------------------------------------------------- */

.semc-event-detail__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hsElevate--spacing--8);
  margin-block-end: var(--hsElevate--spacing--16);
}

.semc-event-detail__title {
  font-family: var(--hsElevate--h1__font);
  font-size: var(--hsElevate--h1__fontSize);
  font-weight: var(--hsElevate--h1__fontWeight);
  line-height: var(--hsElevate--heading__lineHeight);
  margin: 0 0 var(--hsElevate--spacing--16);
}

/* Subtitle — the event's theme, bold, on its own line under the title. */
.semc-event-detail__subtitle {
  font-family: var(--hsElevate--body__font);
  font-size: var(--hsElevate--body--large__fontSize);
  font-weight: 700;
  line-height: var(--hsElevate--body__lineHeight);
  margin: 0 0 var(--hsElevate--spacing--16);
  max-width: var(--hsElevate--contentWrapper--narrow__maxWidth);
}

.semc-event-detail__summary {
  font-size: var(--hsElevate--body--large__fontSize);
  margin: 0 0 var(--hsElevate--spacing--32);
  max-width: var(--hsElevate--contentWrapper--narrow__maxWidth);
}

/* Featured images are client-made graphics (logo lockups, title cards) as
   often as they are photographs, so the whole image has to survive. An earlier
   version forced `aspect-ratio: 21/9` + `object-fit: cover`, which cropped a
   square 754x754 Summit lockup down to 690x296 — losing well over half of it.
   Nothing is cropped now: the image keeps its own ratio and is capped at
   1000px.

   `width: 100%` (not `auto`): HubSpot serves these through a srcset, and with
   `auto` the image locks to whichever variant happens to be loaded — the
   2000x2000 Summit lockup rendered at only 754px in a 1000px container,
   leaving a gap. Sources are large (this one has srcset up to 6000w), so
   filling the width costs nothing in sharpness.

   The `max-height` is a backstop, not the design. Featured images are meant
   to be 16:9 (see the Featured Image column description in HubDB), which at
   the 1000px cap is 563px tall and never reaches this limit. It exists so a
   square or portrait upload degrades quietly — contained to 600px rather than
   running to a 1000px block that pushes the description off-screen. HubDB
   can't enforce a ratio, and the failure is otherwise silent.

   `object-fit: contain` is required, not decorative: once max-height clamps
   the box, a replaced element would otherwise stretch to fill it. Contain
   letterboxes instead, and since these graphics are transparent PNGs the
   surrounding space is invisible. */

.semc-event-detail__hero {
  max-width: 1000px;
  margin: 0 auto var(--hsElevate--gap--medium);
}

.semc-event-detail__hero img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  border-radius: var(--hsElevate-rounded);
}

/* --- Layout -------------------------------------------------------------- */

.semc-event-detail__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--hsElevate--gap--large);
  align-items: start;
}

/* Stacked (single-column) layout: When/Where/Format and the Register CTA are
   the two things a reader wants first, so the whole aside moves above the
   description instead of sitting below the entire article. Moving the aside
   as one block keeps the panels' own spacing intact — no `display: contents`,
   no per-panel ordering. */

.semc-event-detail__aside { order: -1; }

@container (min-width: 860px) {
  .semc-event-detail__layout { grid-template-columns: minmax(0, 1fr) 320px; }
  .semc-event-detail__aside {
    order: 0;
    position: sticky;
    top: var(--hsElevate--spacing--32);
  }
}

@supports not (container-type: inline-size) {
  @media (min-width: 900px) {
    .semc-event-detail__layout { grid-template-columns: minmax(0, 1fr) 320px; }
    .semc-event-detail__aside { order: 0; }
  }
}

/* Phones only: the featured image costs a full screen of scrolling before any
   event detail appears. Tablets keep it — they have the room, and this is
   deliberately a narrower breakpoint than the 860px the layout switches at. */
@media (max-width: 767px) {
  .semc-event-detail__hero { display: none; }
}

.semc-event-detail__section { margin-block-start: var(--hsElevate--gap--medium); }

.semc-event-detail__section-title {
  font-family: var(--hsElevate--h3__font);
  font-size: var(--hsElevate--h3__fontSize);
  font-weight: var(--hsElevate--h3__fontWeight);
  margin: 0 0 var(--hsElevate--spacing--16);
}

.semc-rte > :first-child { margin-block-start: 0; }
.semc-rte > :last-child { margin-block-end: 0; }

/* --- Facts panel --------------------------------------------------------- */

/* The literal #ffffff is a deliberate exception to this module's
   everything-through-a-token rule. Elevate exposes only two card background
   colours — variant1/variant2 are both #edf2f1 and variant3/variant4 are both
   #0f2f3a — and #edf2f1 is also the page background, so the facts panel was
   rendering the same colour as the page with only its border to define it.
   There is no white token to point at. If a white card variant is ever added
   in Settings > Themes, swap this back to that token. */

.semc-event-detail__panel {
  background-color: #ffffff;
  border: var(--hsElevate--card--variant1__borderThickness) solid var(--hsElevate--card--variant1__borderColor);
  border-radius: var(--hsElevate--card--variant1__borderRadius);
  color: var(--hsElevate--card--variant1__textColor);
  padding: var(--hsElevate--spacing--24);
}

.semc-event-detail__panel + .semc-event-detail__panel {
  margin-block-start: var(--hsElevate--gap--small);
}

.semc-event-detail__panel--register {
  background-color: var(--hsElevate--card--variant3__backgroundColor);
  border-color: var(--hsElevate--card--variant3__borderColor);
  color: var(--hsElevate--card--variant3__textColor);
}

.semc-event-detail__panel-title {
  font-family: var(--hsElevate--h4__font);
  font-size: var(--hsElevate--h4__fontSize);
  font-weight: var(--hsElevate--h4__fontWeight);
  margin: 0 0 var(--hsElevate--spacing--16);
}

.semc-facts { margin: 0; }

.semc-facts__row + .semc-facts__row {
  margin-block-start: var(--hsElevate--spacing--16);
  padding-block-start: var(--hsElevate--spacing--16);
  border-block-start: 1px solid var(--hsElevate--formField__borderColor);
}

.semc-facts dt {
  font-family: var(--hsElevate--captions__font);
  font-size: var(--hsElevate--captions__fontSize);
  font-weight: 700;
  text-transform: var(--hsElevate--captions__case);
  letter-spacing: 0.06em;
  opacity: 0.7;
  margin-block-end: var(--hsElevate--spacing--4);
}

.semc-facts dd {
  margin: 0;
  font-size: var(--hsElevate--body__fontSize);
  font-weight: 700;
}

.semc-facts__note {
  display: block;
  font-weight: 400;
  font-size: var(--hsElevate--body--small__fontSize);
  opacity: 0.75;
}

/* --- Buttons ------------------------------------------------------------- */

/* The `color` and `text-decoration` !importants below are load-bearing — do
   not "clean them up". Elevate styles every link with
     a:not(.hs-elevate-button, …), a.hs-elevate-link--primary, …
   which is specificity (0,1,1) and outranks a plain `.semc-btn--primary`
   (0,1,0). Without !important the Register button renders its label in the
   link blue — the same colour as its own background, so the label vanishes —
   and Elevate's a:hover re-adds an underline. Verified on the live site. */

.semc-btn {
  display: inline-block;
  font-family: var(--hsElevate--button--primary__font);
  font-size: var(--hsElevate--button--primary__fontSize);
  font-weight: var(--hsElevate--button--primary__fontWeight);
  border-radius: var(--hsElevate--button--primary__borderRadius);
  padding: var(--hsElevate--spacing--16) var(--hsElevate--spacing--24);
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  min-height: 44px;
}

.semc-btn:hover,
.semc-btn:focus-visible {
  text-decoration: none !important;
}

.semc-btn--primary {
  color: var(--hsElevate--button--primary__textColor) !important;
  background-color: var(--hsElevate--button--primary__backgroundColor);
  border: var(--hsElevate--button--primary__borderThickness) solid var(--hsElevate--button--primary__borderColor);
}

.semc-btn--primary:hover,
.semc-btn--primary:focus-visible {
  color: var(--hsElevate--button--primary__hover--textColor) !important;
  background-color: var(--hsElevate--button--primary__hover--backgroundColor);
}

.semc-btn--secondary {
  color: var(--hsElevate--button--secondary__textColor) !important;
  background-color: var(--hsElevate--button--secondary__backgroundColor);
  border: var(--hsElevate--button--secondary__borderThickness) solid var(--hsElevate--button--secondary__borderColor);
}

.semc-btn--secondary:hover,
.semc-btn--secondary:focus-visible {
  color: var(--hsElevate--button--secondary__hover--textColor) !important;
  border-color: var(--hsElevate--button--secondary__hover--borderColor);
}

.semc-btn--block {
  display: block;
  width: 100%;
  margin-block-start: var(--hsElevate--spacing--20);
}

.semc-register__notice,
.semc-register__note {
  margin: 0;
  font-size: var(--hsElevate--body--small__fontSize);
  opacity: 0.85;
}

.semc-register__note { margin-block-start: var(--hsElevate--spacing--12); }

/* --- Audience, venue, organizers ----------------------------------------- */

.semc-event-detail__audience {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hsElevate--spacing--8);
  list-style: none;
  margin: 0;
  padding: 0;
}

.semc-event-detail__audience li {
  font-family: var(--hsElevate--tag__font);
  font-size: var(--hsElevate--tag__fontSize);
  font-weight: var(--hsElevate--tag__fontWeight);
  color: var(--hsElevate--tag__textColor);
  background-color: var(--hsElevate--tag__backgroundColor);
  border: var(--hsElevate--tag__borderThickness) solid var(--hsElevate--tag__borderColor);
  border-radius: var(--hsElevate--tag__borderRadius);
  padding: var(--hsElevate--spacing--8) var(--hsElevate--spacing--16);
}

.semc-venue__name {
  font-weight: 700;
  font-size: var(--hsElevate--body--large__fontSize);
  margin: 0 0 var(--hsElevate--spacing--8);
}

.semc-venue__address {
  font-style: normal;
  margin: 0 0 var(--hsElevate--spacing--16);
}

.semc-venue__details {
  border-block-start: 1px solid var(--hsElevate--formField__borderColor);
  padding-block: var(--hsElevate--spacing--12);
}

.semc-venue__details summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--hsElevate--link--primary__fontColor);
}

.semc-venue__map {
  margin-block-start: var(--hsElevate--spacing--20);
  border-radius: var(--hsElevate-rounded--small);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}

.semc-venue__map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Fallback when the Map Embed URL is a share link Google won't let us frame. */
.semc-venue__maplink {
  margin-block-start: var(--hsElevate--spacing--20);
}

.semc-organizers { list-style: none; margin: 0; padding: 0; }

.semc-organizer {
  display: flex;
  gap: var(--hsElevate--spacing--16);
  align-items: flex-start;
}

.semc-organizer + .semc-organizer {
  margin-block-start: var(--hsElevate--spacing--24);
  padding-block-start: var(--hsElevate--spacing--24);
  border-block-start: 1px solid var(--hsElevate--formField__borderColor);
}

.semc-organizer__logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  border-radius: var(--hsElevate-rounded--small);
  flex-shrink: 0;
}

.semc-organizer__name { font-weight: 700; margin: 0; }

.semc-organizer__type {
  font-size: var(--hsElevate--body--small__fontSize);
  opacity: 0.7;
  margin: 0 0 var(--hsElevate--spacing--8);
}

.semc-organizer__bio { font-size: var(--hsElevate--body--small__fontSize); }

/* --- Gallery ------------------------------------------------------------- */

.semc-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--hsElevate--spacing--16);
  list-style: none;
  margin: 0;
  padding: 0;
}

.semc-gallery__item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--hsElevate-rounded--small);
  display: block;
}

.semc-gallery__caption {
  display: block;
  font-size: var(--hsElevate--captions__fontSize);
  opacity: 0.75;
  margin-block-start: var(--hsElevate--spacing--8);
}

/* --- Related ------------------------------------------------------------- */

.semc-event-detail__related {
  margin-block-start: var(--hsElevate--gap--large);
  padding-block-start: var(--hsElevate--gap--medium);
  border-block-start: 1px solid var(--hsElevate--formField__borderColor);
}

.semc-related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--hsElevate--gap--small);
  list-style: none;
  margin: 0;
  padding: 0;
}

.semc-related__date {
  font-family: var(--hsElevate--captions__font);
  font-size: var(--hsElevate--captions__fontSize);
  text-transform: var(--hsElevate--captions__case);
  letter-spacing: 0.06em;
  font-weight: 700;
  opacity: 0.7;
  margin: 0 0 var(--hsElevate--spacing--4);
}

.semc-related__title {
  font-family: var(--hsElevate--h5__font);
  font-size: var(--hsElevate--h5__fontSize);
  font-weight: var(--hsElevate--h5__fontWeight);
  margin: 0 0 var(--hsElevate--spacing--4);
}

.semc-related__title a {
  color: var(--hsElevate--link--primary__fontColor);
  text-decoration: none;
}

.semc-related__title a:hover { text-decoration: underline; }

.semc-related__location {
  font-size: var(--hsElevate--body--small__fontSize);
  opacity: 0.75;
  margin: 0;
}

.semc-event-detail__resources {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hsElevate--spacing--12);
  margin-block-start: var(--hsElevate--spacing--20);
}