/* ============================================================
   GODDY TABI — EVENT CARD

   The calendar reminder that will not stay in the notification
   tray. What is in somebody's calendar used to reach them once,
   as a push, and then live only in the bell — which is where
   notifications go to be scrolled past.

   So the reminder comes back: three cues per event (two days
   out, the day before, the day itself), each dismissible on its
   own. The styling escalates with the cue — a quiet navy card
   two days out, the school's gold on the day. A dashboard is
   read at a glance, and the difference between "coming up" and
   "today" has to survive that glance.
   ============================================================ */

.event-card {
  position: relative;
  padding: 16px 44px 16px 16px;
  margin-bottom: 16px;
  border-radius: var(--r-xl);
  background: var(--surface);
  border: 1px solid var(--border-light);
  border-left: 4px solid var(--navy);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--fast);
}
.event-card:hover { box-shadow: var(--shadow-md); }

.event-card--tomorrow { border-left-color: #D97706; }
.event-card--today {
  border-left-color: var(--gold);
  background: linear-gradient(180deg, rgba(212,160,23,0.09) 0%, var(--surface) 70%);
}

.event-card__when {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 5px;
}
.event-card--tomorrow .event-card__when { color: #B45309; }
.event-card--today    .event-card__when { color: #9A6B06; }

.event-card__title {
  font-size: 16px;
  font-weight: 800;
  color: var(--navy-deep);
  line-height: 1.25;
}

.event-card__cat {
  margin-top: 6px;
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--r-full);
  background: var(--bg);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-muted);
}

.event-card__desc {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  /* Two lines on the dashboard; the rest is on the event itself. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.event-card__foot {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.event-card__link {
  font-size: 13px;
  font-weight: 800;
  color: var(--navy);
}
.event-card__more {
  font-size: 12px;
  color: var(--text-muted);
}

/* Big enough to hit on a phone without being the first thing the
   eye lands on — dismissing is not the point of the card. */
.event-card__dismiss {
  position: absolute;
  top: 6px; right: 6px;
  width: 32px; height: 32px;
  border: none;
  background: none;
  border-radius: var(--r-full);
  color: var(--text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.event-card__dismiss:hover { background: var(--bg); color: var(--text-primary); }