.event-spotlight-card {
  max-width: 1040px !important;
  padding: clamp(1rem, 2vw, 1.45rem) !important;
  border: 1px solid rgba(242, 198, 109, .72) !important;
  background:
    linear-gradient(135deg, rgba(6, 18, 42, .97), rgba(12, 43, 83, .94)) !important;
  box-shadow:
    0 28px 90px rgba(0, 0, 0, .36),
    0 0 0 1px rgba(255, 255, 255, .05) inset,
    0 0 44px rgba(242, 166, 74, .14) !important;
}

.event-spotlight-layout {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) minmax(170px, 230px);
  gap: clamp(1.1rem, 2.6vw, 2rem);
  align-items: center;
}

.event-date-tile {
  min-height: 154px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: .9rem;
  border-radius: 22px;
  color: #14213d;
  text-align: center;
  background: linear-gradient(155deg, #ffd47a, #f29b45);
  box-shadow: 0 16px 35px rgba(242, 155, 69, .26);
}

.event-date-tile span,
.event-date-tile small {
  font-weight: 900;
  letter-spacing: .12em;
}

.event-date-tile span {
  font-size: 1rem;
}

.event-date-tile strong {
  margin: -.12rem 0;
  font-size: clamp(3rem, 5vw, 4.4rem);
  line-height: 1;
}

.event-date-tile small {
  font-size: .78rem;
}

.event-badges {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: .85rem;
}

.event-featured-badge,
.event-free-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: .35rem .72rem;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.event-featured-badge {
  color: #ffd98a;
  border: 1px solid rgba(255, 217, 138, .42);
  background: rgba(255, 217, 138, .1);
}

.event-free-badge {
  color: #fff;
  background: linear-gradient(135deg, #d56a37, #ec9344);
  box-shadow: 0 8px 20px rgba(213, 106, 55, .24);
}

.event-spotlight-content h2 {
  margin: 0 0 .75rem;
  color: #fff !important;
  font-size: clamp(2.15rem, 4.2vw, 3.8rem);
}

.event-spotlight-summary {
  max-width: 680px;
  margin: 0;
  color: #e6eef9 !important;
  font-size: clamp(1rem, 1.5vw, 1.13rem) !important;
}

.event-quick-details {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  margin: 1.15rem 0 0;
}

.event-quick-details span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .4rem .72rem;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  color: #fff;
  background: rgba(255, 255, 255, .075);
  font-size: .85rem;
  font-weight: 750;
}

.event-spotlight-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}

.event-primary-action {
  color: #18223a !important;
  background: linear-gradient(135deg, #ffd576, #f3a14a) !important;
  box-shadow: 0 12px 28px rgba(242, 161, 74, .25) !important;
}

.event-primary-action:hover {
  background: linear-gradient(135deg, #ffe29d, #f5b264) !important;
}

.event-secondary-action {
  color: #fff !important;
  border-color: rgba(255, 255, 255, .32) !important;
  background: rgba(255, 255, 255, .055) !important;
}

.event-secondary-action:hover {
  background: rgba(255, 255, 255, .13) !important;
}

.event-flyer-preview {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .3);
  transform: rotate(1.2deg);
  transition: transform .2s ease, box-shadow .2s ease;
}

.event-flyer-preview:hover {
  transform: rotate(0) translateY(-3px);
  box-shadow: 0 23px 50px rgba(0, 0, 0, .38);
}

.event-flyer-preview img {
  width: 100%;
  aspect-ratio: 4 / 5.1;
  object-fit: cover;
  object-position: top;
}

.event-flyer-preview span {
  position: absolute;
  right: .65rem;
  bottom: .65rem;
  padding: .35rem .65rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(7, 25, 55, .88);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .04em;
}

/* Announcement detail page */
.announcement-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1rem;
  align-items: center;
  margin: .9rem 0 1rem;
  color: #fff;
}

.announcement-event-meta strong,
.announcement-event-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: .38rem .7rem;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
}

.event-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
  gap: 2rem;
  align-items: start;
}

.event-details h2:first-of-type { margin-top: 1.2rem; }

.event-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
  margin: 1.6rem 0 2rem;
}

.event-meta-grid > div {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--paper);
}

.event-meta-grid span {
  display: block;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 850;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.event-meta-grid strong {
  display: block;
  margin-top: .25rem;
}

.event-list {
  display: grid;
  gap: .65rem;
  padding-left: 1.35rem;
}

.event-flyer-panel {
  position: sticky;
  top: 100px;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}

.event-flyer-panel img {
  width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--line);
}

.event-flyer-panel p {
  margin: 1rem .3rem .2rem;
  color: var(--muted);
  font-size: .92rem;
}

/* Light color mode */
html[data-theme="light"] .event-spotlight-card {
  border-color: rgba(190, 112, 45, .42) !important;
  background:
    linear-gradient(135deg, rgba(255, 253, 248, .97), rgba(255, 239, 214, .94)) !important;
  box-shadow:
    0 26px 70px rgba(69, 46, 22, .2),
    0 0 0 1px rgba(255, 255, 255, .8) inset,
    0 0 42px rgba(235, 151, 65, .13) !important;
}

html[data-theme="light"] .event-spotlight-content h2 {
  color: #172b49 !important;
}

html[data-theme="light"] .event-spotlight-summary {
  color: #4c5d72 !important;
}

html[data-theme="light"] .event-featured-badge {
  color: #8a4d17;
  border-color: rgba(157, 87, 25, .28);
  background: rgba(255, 211, 138, .34);
}

html[data-theme="light"] .event-quick-details span {
  color: #263c58;
  border-color: rgba(100, 119, 143, .25);
  background: rgba(255, 255, 255, .68);
}

html[data-theme="light"] .event-secondary-action {
  color: #17395e !important;
  border-color: rgba(91, 113, 139, .34) !important;
  background: rgba(255, 255, 255, .62) !important;
}

html[data-theme="light"] .event-secondary-action:hover {
  background: #fff !important;
}

html[data-theme="light"] .announcement-event-meta { color: #17395e; }

html[data-theme="light"] .announcement-event-meta strong,
html[data-theme="light"] .announcement-event-meta span {
  background: rgba(255,255,255,.72);
  border-color: rgba(111,143,178,.38);
}

html[data-theme="light"] .event-flyer-panel {
  background: #f8fbff;
  border-color: #cbd8e6;
}

@media (max-width: 900px) {
  .event-spotlight-layout {
    grid-template-columns: 105px minmax(0, 1fr);
  }

  .event-flyer-preview {
    grid-column: 1 / -1;
    width: min(100%, 340px);
    justify-self: center;
    transform: none;
  }

  .event-layout { grid-template-columns: 1fr; }
  .event-flyer-panel { position: static; max-width: 620px; }
}

@media (max-width: 620px) {
  .event-spotlight-card { padding: 1rem !important; }

  .event-spotlight-layout {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .event-date-tile {
    min-height: 0;
    grid-template-columns: auto auto auto;
    gap: .55rem;
    justify-content: center;
    padding: .72rem 1rem;
  }

  .event-date-tile strong {
    font-size: 2rem;
  }

  .event-badges,
  .event-quick-details,
  .event-spotlight-actions {
    align-items: stretch;
  }

  .event-quick-details span,
  .event-spotlight-actions .btn {
    width: 100%;
    justify-content: center;
  }

  .event-flyer-preview {
    width: min(100%, 285px);
  }

  .event-meta-grid { grid-template-columns: 1fr; }
  .announcement-event-meta { align-items: stretch; }
  .announcement-event-meta strong,
  .announcement-event-meta span { width: 100%; justify-content: center; }
}