/* =============================================================================
   DACC New Theme — Event Detail
   Pass 34

   Canonical path:
   /_assets/css/main-theme/new/overrides/templates/event-detail.css

   Foundation owns Event Detail structure and responsive behavior.
   This file owns New-theme appearance only.
   ============================================================================= */

@import url("../components/detail-family.css");

/* Header ------------------------------------------------------------------ */

.event-detail__header {
  position: relative;
  overflow: hidden;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--detail-new-panel-radius);
  background:
    radial-gradient(
      circle at 88% 14%,
      color-mix(in srgb, var(--color-gold) 22%, transparent),
      transparent 20rem
    ),
    linear-gradient(
      135deg,
      var(--color-primary-dark),
      color-mix(in srgb, var(--color-primary) 84%, var(--color-primary-dark))
    );
  box-shadow: 7px 7px 0 color-mix(in srgb, var(--color-primary-dark) 24%, var(--color-border));
}

.event-detail__type {
  background: var(--color-gold);
  color: var(--color-text);
}

.event-detail__format {
  border-color: color-mix(in srgb, var(--color-white) 72%, transparent);
  background: color-mix(in srgb, var(--color-white) 10%, transparent);
  color: var(--color-white);
}

.event-detail__title,
.event-detail__author {
  color: var(--color-white);
}

.event-detail__summary,
.event-detail__author-title {
  color: color-mix(in srgb, var(--color-white) 90%, transparent);
}

.event-detail__byline {
  border-inline-start-color: var(--color-gold);
}

/* Main image -------------------------------------------------------------- */

.event-detail__image {
  border: 0.3rem solid var(--color-gold);
  border-radius: var(--detail-new-panel-radius);
  box-shadow: var(--detail-new-panel-shadow);
}

/* Content panels ---------------------------------------------------------- */

.event-detail__agenda,
.event-detail__accessibility,
.event-detail__related {
  border-color: var(--detail-new-border-blue);
  background: var(--color-white);
}

.event-detail__agenda {
  border-block-start: 0.3rem solid var(--color-gold);
}

.event-detail__accessibility {
  background: var(--detail-new-soft-blue);
}

.event-detail__related {
  background: var(--detail-new-soft-gold);
}

.event-detail__agenda-time,
.event-detail__details-item dt {
  color: var(--color-primary-dark);
}

.event-detail__agenda-heading,
.event-detail__details-heading,
.event-detail__details-item dd {
  color: var(--color-text);
}

/* Sidebar ----------------------------------------------------------------- */

.event-detail__details-card {
  border-color: var(--detail-new-border-blue);
  background: var(--color-white);
}

.event-detail__details-card:first-child {
  border-block-start: 0.3rem solid var(--color-gold);
}

.event-detail__all-day {
  border: 1px solid color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
  background: var(--detail-new-soft-blue);
  color: var(--color-primary-dark);
}

.event-detail__registration-link {
  background: var(--color-gold);
  color: var(--color-text);
  box-shadow: 4px 4px 0 var(--color-primary-dark);
}

.event-detail__registration-link:hover,
.event-detail__registration-link:focus {
  background: var(--color-white);
  color: var(--color-primary-dark);
}

.event-detail__contact-image {
  border: 0.2rem solid var(--color-gold);
  border-radius: 50%;
}

.event-detail__contact-list a,
.event-detail__contact-email a,
.event-detail__related-list a {
  color: var(--color-primary-dark);
}

.event-detail__contact-list a:hover,
.event-detail__contact-list a:focus,
.event-detail__contact-email a:hover,
.event-detail__contact-email a:focus,
.event-detail__related-list a:hover,
.event-detail__related-list a:focus {
  color: var(--color-accent);
}

@media (max-width: 640px) {
  .event-detail__header {
    padding: var(--space-xl);
    box-shadow: 5px 5px 0 color-mix(in srgb, var(--color-primary-dark) 20%, var(--color-border));
  }
}

/* =============================================================================
   Pass 43 — Event Detail header date/time contrast stabilization
   The same date/time classes are reused in the white sidebar, so scope this
   correction to the dark header only.
   ============================================================================= */
.event-detail__header .event-detail__date,
.event-detail__header .event-detail__time {
  color: color-mix(in srgb, var(--color-white) 94%, transparent);
  font-weight: var(--fw-semibold, 600);
}
