/*
 * Event Listing section.
 *
 * An eyebrow, heading, and intro above a ruled list of events. Desktop lays
 * each event out as a square photo, a text column, and a button in one row;
 * phones stack the photo, the text, and the button. The Learn More button
 * opens the Event Modal, a native dialog with the cream panel from the
 * design: the title and date above a rule, then the copy beside a larger
 * square photo. Section colors are component custom props with
 * light-surface defaults; the purple-surface overrides live in the central
 * page-sections stylesheet. The dialog keeps its own fixed light colors
 * because it opens over any surface.
 */

.acu-event-listing {
  --acu-event-listing-copy: var(--acu-midnight-purple);
  --acu-event-listing-eyebrow: var(--acu-midnight-purple);
  --acu-event-listing-heading: var(--acu-wildcat-purple);
  --acu-event-listing-title: var(--acu-wildcat-purple);
  --acu-event-listing-rule: rgba(33, 23, 75, 0.3);
  --acu-event-listing-media-surface: rgba(33, 23, 75, 0.06);
  color: var(--acu-event-listing-copy);
  padding: clamp(var(--space-3xl), 7.5vw, 7rem) 0;
  width: 100%;
}

.acu-event-listing__inner {
  margin: 0 auto;
  max-width: var(--container-xl);
  padding: 0 var(--space-xl);
  width: 100%;
}

.acu-event-listing__intro {
  max-width: 54rem;
  min-width: 0;
}

.acu-event-listing__eyebrow {
  align-items: center;
  color: var(--acu-event-listing-eyebrow);
  display: flex;
  font-family: var(--font-serif);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  gap: var(--space-sm);
  letter-spacing: var(--tracking-widest);
  line-height: var(--leading-snug);
  margin: 0;
  text-transform: uppercase;
}

.acu-event-listing__eyebrow-icon {
  display: block;
  flex: 0 0 auto;
  height: 0.75rem;
  width: 1rem;
}

.acu-event-listing__heading {
  color: var(--acu-event-listing-heading);
  font-family: var(--font-serif);
  font-size: clamp(var(--text-4xl), 4.4vw, 3.5rem);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  text-wrap: balance;
}

.acu-event-listing__eyebrow + .acu-event-listing__heading {
  margin-top: var(--space-md);
}

.acu-event-listing__description {
  font-family: var(--font-sans);
  font-size: clamp(var(--text-md), 1.4vw, var(--text-lg));
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
}

.acu-event-listing__heading + .acu-event-listing__description,
.acu-event-listing__eyebrow + .acu-event-listing__description {
  margin-top: var(--space-lg);
}

.acu-event-listing__description p {
  margin: 0;
}

.acu-event-listing__description p + p {
  margin-top: var(--space-sm);
}

.acu-event-listing__list {
  border-bottom: 1px solid var(--acu-event-listing-rule);
  list-style: none;
  margin: 0;
  max-width: 54rem;
  padding: 0;
}

.acu-event-listing__intro + .acu-event-listing__list {
  margin-top: clamp(var(--space-2xl), 5.5vw, 5rem);
}

.acu-event-listing__item {
  margin: 0;
  padding: 0;
}

.acu-event-listing__card {
  align-items: start;
  border-top: 1px solid var(--acu-event-listing-rule);
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 9rem minmax(0, 1fr) auto;
  padding: var(--space-xl) 0;
}

/* A row without a photo gives its column back to the text. */
.acu-event-listing__card--no-media {
  grid-template-columns: minmax(0, 1fr) auto;
}

.acu-event-listing__card-media {
  aspect-ratio: 1;
  background-color: var(--acu-event-listing-media-surface);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: 9rem;
}

.acu-event-listing__card-image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.acu-event-listing__card-body {
  min-width: 0;
}

.acu-event-listing__card-title {
  color: var(--acu-event-listing-title);
  font-family: var(--font-serif);
  font-size: clamp(var(--text-xl), 2vw, var(--text-2xl));
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin: 0;
  overflow-wrap: anywhere;
}

.acu-event-listing__card-date {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  margin: var(--space-xs) 0 0;
}

.acu-event-listing__card-copy {
  margin-top: var(--space-md);
}

.acu-event-listing__card-subtitle {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-normal);
  margin: 0;
}

.acu-event-listing__card-description {
  font-family: var(--font-sans);
  font-size: var(--text-md);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
}

.acu-event-listing__card-description p {
  margin: 0;
}

.acu-event-listing__card-description p + p {
  margin-top: var(--space-xs);
}

.acu-event-listing__card-actions {
  display: flex;
  flex: 0 0 auto;
}

/* The compact button from the design: the shared citrus surface with a
   sunset hover, sized to one line of text. */
.acu-event-listing__button {
  align-items: center;
  appearance: none;
  background-color: var(--acu-citrus-orange);
  border: 0;
  border-radius: var(--radius-md);
  color: var(--acu-midnight-purple);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  justify-content: center;
  line-height: var(--leading-snug);
  margin: 0;
  min-height: 2.5rem;
  padding: var(--space-xs) var(--space-md);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-out);
  white-space: nowrap;
}

.acu-event-listing__button:hover,
.acu-event-listing__button:focus-visible {
  background-color: var(--acu-sunset-orange);
  color: var(--acu-midnight-purple);
  text-decoration: none;
}

.acu-event-listing__button:focus-visible {
  outline: 0.1875rem solid var(--acu-sky-blue);
  outline-offset: var(--space-2xs);
}

/* Event Modal. The dialog element itself is transparent so the close button
   can sit above the cream panel, as designed. */
.acu-event-listing__dialog {
  --acu-event-listing-dialog-copy: var(--acu-midnight-purple);
  --acu-event-listing-dialog-heading: var(--acu-wildcat-purple);
  --acu-event-listing-dialog-rule: rgba(10, 11, 3, 0.3);
  --acu-event-listing-dialog-surface: var(--acu-casual-cream);
  background: transparent;
  border: 0;
  color: var(--acu-event-listing-dialog-copy);
  margin: auto;
  max-height: calc(100dvh - 2 * var(--space-lg));
  max-width: none;
  opacity: 0;
  overflow: auto;
  padding: 0;
  transform: translateY(var(--space-md)) scale(0.98);
  width: min(54rem, calc(100vw - 2 * var(--space-lg)));
  /* The popup fades and lifts in and out. display and overlay stay in
     their open state through the exit transition so the dialog remains in
     the top layer until the fade ends. */
  transition:
    opacity var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out),
    overlay var(--motion-base) allow-discrete,
    display var(--motion-base) allow-discrete;
}

.acu-event-listing__dialog[open] {
  opacity: 1;
  transform: none;
}

@starting-style {
  .acu-event-listing__dialog[open] {
    opacity: 0;
    transform: translateY(var(--space-md)) scale(0.98);
  }
}

.acu-event-listing__dialog::backdrop {
  background-color: rgba(33, 23, 75, 0);
  transition:
    background-color var(--motion-base) var(--ease-out),
    overlay var(--motion-base) allow-discrete,
    display var(--motion-base) allow-discrete;
}

.acu-event-listing__dialog[open]::backdrop {
  background-color: rgba(33, 23, 75, 0.8);
}

@starting-style {
  .acu-event-listing__dialog[open]::backdrop {
    background-color: rgba(33, 23, 75, 0);
  }
}

.acu-event-listing__dialog-frame {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.acu-event-listing__dialog-close {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  color: var(--acu-white);
  cursor: pointer;
  display: grid;
  flex: none;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  place-items: center;
  width: 2.5rem;
}

.acu-event-listing__dialog-close-icon {
  background-color: currentColor;
  display: block;
  height: 1.5rem;
  -webkit-mask-image: url("assets/close.svg");
  mask-image: url("assets/close.svg");
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  width: 1.5rem;
}

.acu-event-listing__dialog-close:hover {
  background-color: rgba(255, 255, 255, 0.16);
}

/* The browser focuses this button when the popup opens, so a focus ring
   would flash on every open. The legacy theme stylesheet loads last and
   draws the browser's auto ring on every focused button, so plain focus is
   cleared here too. Keyboard focus shows as the hover surface instead. */
.acu-event-listing__dialog-close:focus {
  outline: 0;
}

.acu-event-listing__dialog-close:focus-visible {
  background-color: rgba(255, 255, 255, 0.24);
  outline: 0;
}

.acu-event-listing__dialog-panel {
  background-color: var(--acu-event-listing-dialog-surface);
  border-radius: var(--radius-md);
  box-shadow: 0 1.5rem 4rem rgba(11, 7, 34, 0.35);
  padding: var(--space-xl);
  width: 100%;
}

.acu-event-listing__dialog-header {
  border-bottom: 1px solid var(--acu-event-listing-dialog-rule);
  padding-bottom: var(--space-lg);
}

.acu-event-listing__dialog-title {
  color: var(--acu-event-listing-dialog-heading);
  font-family: var(--font-serif);
  font-size: clamp(var(--text-2xl), 2.7vw, 2.125rem);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0;
  overflow-wrap: anywhere;
}

.acu-event-listing__dialog-date {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  margin: var(--space-xs) 0 0;
}

.acu-event-listing__dialog-body {
  align-items: start;
  display: grid;
  gap: var(--space-2xl);
  grid-template-columns: minmax(0, 1fr) 17.5rem;
  padding-top: var(--space-lg);
}

.acu-event-listing__dialog-body--no-media {
  grid-template-columns: minmax(0, 1fr);
}

.acu-event-listing__dialog-content {
  min-width: 0;
}

.acu-event-listing__dialog-subtitle {
  color: var(--acu-event-listing-dialog-heading);
  font-family: var(--font-serif);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
  margin: 0;
}

.acu-event-listing__dialog-presenter {
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
  margin: 0;
}

.acu-event-listing__dialog-subtitle + .acu-event-listing__dialog-presenter {
  margin-top: var(--space-2xs);
}

.acu-event-listing__dialog-presenter-title {
  font-style: italic;
}

.acu-event-listing__dialog-description {
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  font-weight: var(--font-regular);
  line-height: var(--leading-normal);
}

.acu-event-listing__dialog-lead + .acu-event-listing__dialog-description {
  margin-top: var(--space-lg);
}

.acu-event-listing__dialog-description > :first-child {
  margin-top: 0;
}

.acu-event-listing__dialog-description > :last-child {
  margin-bottom: 0;
}

.acu-event-listing__dialog-description p,
.acu-event-listing__dialog-description ul,
.acu-event-listing__dialog-description ol {
  margin: 0 0 var(--space-md);
}

.acu-event-listing__dialog-description ul,
.acu-event-listing__dialog-description ol {
  padding-left: 1.25em;
}

.acu-event-listing__dialog-description a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.acu-event-listing__dialog-description a:hover,
.acu-event-listing__dialog-description a:focus-visible {
  color: var(--acu-vibrant-purple);
}

.acu-event-listing__dialog-actions {
  margin-top: var(--space-lg);
}

.acu-event-listing__dialog-cta {
  align-items: center;
  background-color: var(--acu-citrus-orange);
  border-radius: var(--radius-md);
  color: var(--acu-midnight-purple);
  display: inline-flex;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  justify-content: center;
  line-height: var(--leading-snug);
  min-height: 3.5rem;
  padding: var(--space-sm) var(--space-lg);
  text-align: center;
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-out);
}

.acu-event-listing__dialog-cta:hover,
.acu-event-listing__dialog-cta:focus-visible {
  background-color: var(--acu-sunset-orange);
  color: var(--acu-midnight-purple);
  text-decoration: none;
}

.acu-event-listing__dialog-cta:focus-visible {
  outline: 0.1875rem solid var(--acu-sky-blue);
  outline-offset: var(--space-2xs);
}

.acu-event-listing__dialog-media {
  aspect-ratio: 1;
  background-color: rgba(33, 23, 75, 0.06);
  border-radius: var(--radius-sm);
  overflow: hidden;
  width: 100%;
}

.acu-event-listing__dialog-image {
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* The page behind an open popup stays put; the script sets the class. */
.acu-event-listing-dialog-open {
  overflow: hidden;
}

@media (max-width: 63.9375rem) {
  .acu-event-listing__inner {
    padding-inline: var(--space-lg);
  }
}

@media (max-width: 47.9375rem) {
  .acu-event-listing {
    padding-block: var(--space-3xl);
  }

  .acu-event-listing__heading {
    font-size: var(--text-4xl);
  }

  .acu-event-listing__eyebrow + .acu-event-listing__heading {
    margin-top: var(--space-sm);
  }

  .acu-event-listing__description {
    font-size: var(--text-md);
  }

  .acu-event-listing__heading + .acu-event-listing__description,
  .acu-event-listing__eyebrow + .acu-event-listing__description {
    margin-top: var(--space-md);
  }

  .acu-event-listing__intro + .acu-event-listing__list {
    margin-top: var(--space-2xl);
  }

  .acu-event-listing__list {
    border-bottom: 0;
  }

  /* Photo, text, and button stack on phones. */
  .acu-event-listing__card {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: var(--space-lg) 0;
  }

  .acu-event-listing__card-media {
    width: 10.5rem;
  }

  .acu-event-listing__card-title {
    font-size: var(--text-xl);
  }

  .acu-event-listing__card-date,
  .acu-event-listing__card-subtitle {
    font-size: var(--text-md);
  }

  .acu-event-listing__card-copy {
    margin-top: var(--space-xs);
  }

  .acu-event-listing__card-description {
    font-size: var(--text-sm);
  }

  .acu-event-listing__dialog {
    max-height: calc(100dvh - 2 * var(--space-md));
    width: calc(100vw - 2 * var(--space-md));
  }

  .acu-event-listing__dialog-frame {
    gap: var(--space-md);
  }

  .acu-event-listing__dialog-panel {
    padding: var(--space-md);
  }

  .acu-event-listing__dialog-header {
    padding-bottom: var(--space-md);
  }

  .acu-event-listing__dialog-title {
    font-size: var(--text-2xl);
  }

  .acu-event-listing__dialog-date {
    font-size: var(--text-lg);
  }

  /* The photo drops below the copy on phones. */
  .acu-event-listing__dialog-body {
    gap: var(--space-xl);
    grid-template-columns: minmax(0, 1fr);
    padding-top: var(--space-md);
  }

  .acu-event-listing__dialog-subtitle {
    font-size: var(--text-lg);
  }

  .acu-event-listing__dialog-presenter,
  .acu-event-listing__dialog-description {
    font-size: var(--text-md);
  }

  .acu-event-listing__dialog-lead + .acu-event-listing__dialog-description {
    margin-top: var(--space-md);
  }

  .acu-event-listing__dialog-actions {
    margin-top: var(--space-md);
  }
}

@media (prefers-reduced-motion: reduce) {
  .acu-event-listing__button,
  .acu-event-listing__dialog-cta,
  .acu-event-listing__dialog,
  .acu-event-listing__dialog::backdrop {
    transition: none;
  }

  .acu-event-listing__dialog {
    transform: none;
  }
}