.aa-event { border-bottom: 1px solid var(--color-border); }

.aa-event__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 45px; }
.aa-event__head .section-label { margin-bottom: 20px; }
.aa-event__intro { color: var(--color-accent); font-size: 14px; line-height: 1.75; max-width: 370px; }
@media (max-width: 640px) {
  .aa-event__head { display: block; margin-bottom: 30px; }
  .aa-event__intro { margin-top: 20px; }
}
.aa-event__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1px; background: var(--color-border); border: 1px solid var(--color-border); }
.aa-event__venue {
  padding: 36px 32px 32px; position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 100% 0%, rgba(25, 111, 180, .16), transparent 55%), var(--color-surface);
}
.aa-event__city { font-size: clamp(30px, 3.4vw, 44px); font-weight: 300; letter-spacing: -.04em; text-transform: uppercase; color: var(--color-fg); }
.aa-event__when { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 16px 0 6px; font: 12px var(--font-mono); color: var(--color-accent); text-transform: uppercase; letter-spacing: .5px; }
.aa-event__time::before { content: "// "; opacity: .6; }
.aa-event__time--empty { display: none; }
body.cms-edit .aa-event__time--empty { display: inline; opacity: .5; }
.aa-event__place { font-size: 13px; color: #d5dbe5; margin-bottom: 16px; }
.aa-event__venue p { color: var(--color-muted); font-size: 13px; line-height: 1.65; max-width: 420px; }
.aa-event__foot { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 24px; }
.aa-event__foot p { color: #7f8d9f; font-size: 12px; line-height: 1.7; max-width: 640px; }
.aa-event__link { flex-shrink: 0; }
.aa-event__link::after { content: "\2197"; }
body.cms-edit .aa-event__grid .cms-list-item-add { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .aa-event__grid { grid-template-columns: 1fr; }
  .aa-event__venue { padding: 28px 22px; }
  .aa-event__foot { display: block; }
  .aa-event__link { margin-top: 16px; }
}

/* Optional background image per venue: darkened so the text stays
   readable, with a slow zoom on hover. The "Image" button that sets it
   only shows in the editor. */
.aa-event__venue { position: relative; overflow: hidden; isolation: isolate; }
.aa-event__img {
  position: absolute; inset: 0; z-index: -1;
  background: center / cover no-repeat; opacity: 1;
  transition: transform 6s ease-out, opacity .4s;
}
/* Clear at the top so the picture shows; dark from mid-card down,
   where the text sits. */
.aa-event__img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 12, 19, .05) 0%, rgba(8, 12, 19, .2) 30%, rgba(8, 12, 19, .72) 62%, rgba(8, 12, 19, .95) 100%);
}
.aa-event__venue:hover .aa-event__img { transform: scale(1.05); }
.aa-event__img-btn { display: none; }
body.cms-edit .aa-event__img-btn {
  display: inline-flex; position: absolute; top: 12px; right: 12px; z-index: 3;
  padding: 6px 10px; font: 11px var(--font-body); cursor: pointer;
  color: var(--color-fg); background: rgba(5, 7, 11, .75);
  border: 1px dashed var(--color-border); border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) { .aa-event__img { transition: none; } .aa-event__venue:hover .aa-event__img { transform: none; } }

/* With a photo the card gets taller, so the place reads as a place. */
.aa-event__venue:has(.aa-event__img) { min-height: 340px; display: flex; flex-direction: column; justify-content: flex-end; }