.event-detail-main {
  color: var(--color-ink);
}

.event-detail-hero {
  min-height: 266px;
  padding-block: 110px 44px;
}

.event-detail-breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--color-warm-grey);
  font-size: var(--font-size-supporting-text);
  line-height: 1.25;
}

.event-detail-breadcrumb a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 160ms ease-out;
}

.event-detail-breadcrumb a:hover,
.event-detail-breadcrumb a:focus-visible {
  text-decoration-color: currentColor;
}

.event-detail-breadcrumb__mobile,
.event-detail-meta__mobile,
.event-detail-about__mobile,
.event-detail-about__copy--mobile,
.event-detail-booking__copy--mobile {
  display: none;
}

.event-detail-hero__title {
  margin-block-start: 14px;
  color: var(--color-ink);
  font-family: var(--font-heading);
  font-size: var(--font-size-heading-2);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.event-detail-hero__title em,
.event-detail-about__title em {
  color: var(--color-accent);
  font-weight: inherit;
}

.event-detail-banner {
  padding-block-end: 40px;
}

.event-detail-banner__image-wrap {
  position: relative;
  height: 380px;
  overflow: hidden;
  border-radius: 20px;
  background: #6b513c;
}

.event-detail-banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 49%;
}

.event-detail-banner__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 65%, rgb(0 0 0 / 20%));
  opacity: 0;
  pointer-events: none;
}

.event-detail-meta {
  display: flex;
  flex-wrap: wrap;
  min-width: 0;
  gap: 12px;
  padding-block-end: 64px;
}

.event-detail-meta__chip {
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  min-height: 37px;
  align-items: center;
  padding: 8px 17px;
  border: 1px solid #dcd8d0;
  border-radius: 999px;
  background: var(--color-surface);
  color: var(--color-ink);
  font-size: var(--font-size-supporting-text);
  line-height: normal;
  letter-spacing: -0.01em;
  white-space: normal;
  overflow-wrap: anywhere;
}

.event-detail-body {
  display: grid;
  min-height: 498px;
  grid-template-columns: minmax(0, 816px) 400px;
  align-items: start;
  gap: 80px;
  padding-block-end: 119px;
}

.event-detail-about__label,
.event-detail-programme__label {
  color: var(--color-warm-grey);
  font-size: var(--font-size-caption);
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
}

.event-detail-about__title {
  margin-block-start: 20px;
  font-family: var(--font-heading);
  font-size: var(--font-size-h5);
  font-weight: 300;
  line-height: 1.14;
  letter-spacing: -0.01em;
}

.event-detail-about__copy {
  margin-block-start: 20px;
  color: var(--color-warm-grey);
  font-size: var(--font-size-body-lg);
  line-height: 1.7;
}

.event-detail-programme {
  width: min(100%, 700px);
  margin-block-start: 72px;
}

.event-detail-programme__label {
  margin-block-end: 20px;
}

.event-detail-programme__line {
  display: block;
  width: 100%;
  height: 8px;
  margin-block-end: 14px;
  border-radius: 999px;
  background: #e7e4dc;
}

.event-detail-programme__line:nth-of-type(3) { width: 91.43%; }
.event-detail-programme__line:nth-of-type(5) { width: 77.14%; }
.event-detail-programme__line:last-child { margin-block-end: 0; }

.event-detail-booking {
  position: sticky;
  top: 96px;
  min-height: 308px;
  padding: 37px 35px 36px;
  border: 1px solid #dcd8d0;
  border-radius: 20px;
  background: var(--color-surface);
}

.event-detail-booking h2 {
  font-family: var(--font-heading);
  font-size: var(--font-size-heading-8);
  font-weight: 300;
  line-height: 1.18;
  letter-spacing: -0.01em;
}

.event-detail-booking__copy {
  margin-block-start: 18px;
  color: var(--color-warm-grey);
  font-size: var(--font-size-body);
  font-weight: 500;
  line-height: 1.7;
}

.event-detail-booking__login,
.event-detail-booking__join {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-block-start: 18px;
  text-align: center;
}

.event-detail-booking__join {
  margin-block-start: 18px;
  font-size: var(--font-size-inline-link);
  line-height: normal;
  letter-spacing: -0.01em;
}

.event-detail-booking__login {
  min-width: 0;
  overflow-wrap: anywhere;
  transition: border-color var(--motion-cta-duration) var(--motion-ease-out), background-color var(--motion-cta-duration) var(--motion-ease-out), transform var(--motion-cta-duration) var(--motion-ease-out);
}

.event-detail-booking__login:hover {
  transform: translateY(-1px);
}

html.apl-event-detail-motion-boot .event-detail-breadcrumb,
html.apl-event-detail-motion-boot .event-detail-hero__title,
html.apl-event-detail-motion-boot .event-detail-meta__chip {
  visibility: hidden;
}

@media (max-width: 1366px) {
  .event-detail-body {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 400px);
    gap: 5.5vw;
  }
}

@media (max-width: 900px) {
  .event-detail-hero { min-height: 220px; padding-block: 75px 35px; }
  .event-detail-hero__title { font-size: 46px; }
  .event-detail-banner__image-wrap { height: clamp(260px, 28vw, 380px); }
  .event-detail-body { grid-template-columns: minmax(0, 1fr) 330px; gap: 32px; }
  .event-detail-booking { padding-inline: 24px; }
}

@media (max-width: 760px) {
  .event-detail-body { display: block; min-height: 0; padding-block-end: 72px; }
  .event-detail-booking { position: static; margin-block-start: 56px; }
  .event-detail-programme { margin-block-start: 40px; }
  .event-detail-meta { padding-block-end: 48px; }
}

@media (max-width: 480px) {
  html.apl-event-detail-motion-boot .event-detail-banner,
  html.apl-event-detail-motion-boot .event-detail-meta,
  html.apl-event-detail-motion-boot .event-detail-about,
  html.apl-event-detail-motion-boot .event-detail-booking { visibility: hidden; }
  .event-detail-main { --gutter: 24px; }
  .event-detail-hero { min-height: 197px; padding-block: 56px 28px; }
  .event-detail-breadcrumb { gap: 8px; font-size: var(--font-size-caption); line-height: 1.25; }
  .event-detail-breadcrumb__desktop,
  .event-detail-meta__desktop,
  .event-detail-meta__chip--category,
  .event-detail-about__desktop,
  .event-detail-about__title,
  .event-detail-about__copy--desktop,
  .event-detail-booking__copy--desktop,
  .event-detail-booking__join,
  .event-detail-programme { display: none; }
  .event-detail-breadcrumb__mobile,
  .event-detail-meta__mobile,
  .event-detail-about__mobile,
  .event-detail-about__copy--mobile,
  .event-detail-booking__copy--mobile { display: inline; }
  .event-detail-hero__title { margin-block-start: 14px; font-size: var(--font-size-heading-compact); line-height: 1.1; }
  .event-detail-hero__title em { display: block; }
  .event-detail-banner { padding-block-end: 22px; }
  .event-detail-banner__image-wrap { height: 220px; border-radius: 18px; }
  .event-detail-banner img { object-position: center center; }
  .event-detail-meta { gap: 10px; padding-block-end: 40px; }
  .event-detail-meta__chip { padding-inline: 17px; }
  .event-detail-body { padding-block-end: 72px; }
  .event-detail-about { min-height: 156px; padding-block-end: 44px; }
  .event-detail-about__label { font-size: var(--font-size-label-xs); letter-spacing: .18em; }
  .event-detail-about__copy { display: block; margin-block-start: 16px; font-size: var(--font-size-body); line-height: 1.75; }
  .event-detail-about__copy--desktop { display: none; }
  .event-detail-booking { min-height: 206px; margin-block-start: 0; padding: 27px 23px 25px; border-radius: 18px; }
  .event-detail-booking h2 { font-size: var(--font-size-h5); }
  .event-detail-booking__copy { display: block; margin-block-start: 14px; font-size: var(--font-size-supporting-text); font-weight: 400; line-height: 1.72; }
  .event-detail-booking__copy--desktop { display: none; }
  .event-detail-booking__login { margin-block-start: 14px; }
}

@media (max-width: 360px) {
  .event-detail-main { --gutter: 20px; }
  .event-detail-hero__title { font-size: var(--font-size-heading-ultra-narrow); }
}

@media (prefers-reduced-motion: reduce) {
  .event-detail-banner img { transform: none !important; }
  .event-detail-banner__scrim { opacity: 0 !important; }
  .event-detail-booking__join { transition: none; }
}