/* Event row ----------------------------------------------------------- */

.event-row {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
  color: inherit;
}

.event-row__media {
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 1px solid var(--line);
}

.event-row__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.event-row__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.event-row__meta {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.event-row__meta .icon { margin-right: var(--space-1); vertical-align: -0.125em; color: var(--primary); }

.event-row__name {
  font-weight: 700;
  line-height: 1.3;
}

.event-row:hover .event-row__name {
  color: var(--primary);
}

.event-list .event-row:last-child {
  border-bottom: 0;
}

/* An event with no page is drawn like the others but is not a link: the
   same element without href, so it neither invites a click nor answers one.
   The calendar entry and the agenda row below follow the same rule. */
.event-row:not([href]) { cursor: default; }
.event-row:not([href]):hover .event-row__name { color: inherit; }

/* Calendar — a month grid of events. Server-rendered: the cells are as tall
   as their contents, and the row follows the tallest cell. */
.cal { display: flex; flex-direction: column; gap: var(--space-4); }

.cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

/* The month is a heading for a screen reader and reads as the bold line of
   text between the arrows it always was. */
.cal-title {
  font: inherit;
  font-weight: 700;
  letter-spacing: normal;
}

/* A month with nothing on its own days says so above the grid. */
.cal-empty {
  margin: 0;
  padding: var(--space-4);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
  color: var(--ink-muted);
  text-align: center;
}

/* The grid is a <table>, so a screen reader knows each day's weekday. Its
   row groups and rows step out of the box tree, which leaves the header
   cells and the day cells as the grid's own items, seven to a row. */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.cal-grid > thead,
.cal-grid > tbody,
.cal-grid > * > tr {
  display: contents;
}

.cal-dow {
  background: var(--surface-raised);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  font-weight: inherit;
  color: var(--ink-muted);
  text-align: center;
}

.cal-day {
  background: var(--surface);
  min-height: 6rem;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.cal-day__num { font-size: var(--text-xs); color: var(--ink-muted); }
/* The day's own weekday is for the phone's list; the grid has its header. */
.cal-day__dow { display: none; }

.cal-day__events { display: flex; flex-direction: column; gap: var(--space-1); }

/* A filler day from the neighbouring month: present so the grid keeps its
   shape, recessed so it is not mistaken for this month. The ground does the
   recessing; its number is not faded, because at half opacity it fell to
   2:1 and could no longer be read. */
.cal-day--out { background: var(--stage-mid); }

.cal-day--today { box-shadow: inset 0 0 0 2px var(--primary); }
.cal-day--today .cal-day__num { color: var(--primary); font-weight: 700; }

/* An entry is a link to the event's page, or — with no page — a button
   opening its card; the two look the same, and the button drops its own
   face for it. */
.cal-event {
  display: block;
  width: 100%;
  padding: var(--space-1) var(--space-2);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--primary-soft);
  color: var(--ink);
  font: inherit;
  font-size: var(--text-xs);
  text-align: start;
  text-decoration: none;
  overflow-wrap: anywhere;
}
button.cal-event { cursor: pointer; }
/* The fill, not --primary: the dark ink on the light themes' deep --primary
   read 3.6:1 (2.6 in Motki); .event-agenda does the same. */
.cal-event:is([href], button):hover { background: var(--primary-fill); color: var(--on-primary); }
.cal-event:is([href], button):hover .cal-event__time { color: inherit; }
.cal-event__time { color: var(--ink-soft); margin-right: var(--space-1); }
.cal-event .icon { margin-right: var(--space-1); vertical-align: -0.125em; }

/* A birthday stands out from the day's other events: a pink-to-violet tile,
   the coloured cake large beside the name, and under the name, in words,
   which birthday it is. */
.cal-event--birthday {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--primary) 34%, transparent),
    color-mix(in srgb, var(--accent-violet) 28%, transparent));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent);
}
.cal-event--birthday:is([href], button):hover {
  background: linear-gradient(135deg, var(--primary-fill), var(--accent-violet));
  color: var(--on-primary);
}
.cal-event--birthday .icon { flex: none; width: 2.25em; height: 2.25em; margin: 0; }
.cal-event__label { display: flex; flex-direction: column; min-width: 0; }
.cal-event__name { font-weight: 700; }
.cal-event__kind { font-size: 0.9em; opacity: 0.85; }

/* The card an entry without a page opens: the shop's dialog shell, placed
   by the popover's own centring, a sheet from the bottom on a phone — whose
   full width the sheet sets, so the card's own is for the wider screen. */
@media (min-width: 640px) {
  .cal-pop { width: min(28rem, 92vw); }
}
.cal-pop__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.cal-pop__body p { margin: 0; }
.cal-pop__meta { color: var(--ink-muted); font-size: var(--text-sm); }

/* A phone has no room for seven columns, so the month becomes a list of the
   days of this month that have something on them, each a row with its
   date tile — the day and its weekday — beside its events, as the agenda
   below draws them. The markup does not change: the server marks empty and
   filler days and this hides them. */
@media (max-width: 639px) {
  .cal-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
    background: none;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }
  .cal-dow { display: none; }
  .cal-day {
    display: grid;
    grid-template-columns: 3.25rem minmax(0, 1fr);
    align-items: start;
    gap: var(--space-3);
    min-height: 0;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-2);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: var(--stage-mid);
  }
  .cal-day__num {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px var(--line-strong);
    color: var(--ink-soft);
    line-height: 1;
  }
  .cal-day__n { font-family: var(--font-brand); font-size: var(--text-xl); font-weight: 700; color: var(--ink); }
  .cal-day__dow {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: var(--label-tracking);
    text-transform: var(--label-transform);
  }
  /* Today's tile is filled, the agenda's pink; the ring stays on the row. */
  .cal-day--today { box-shadow: inset 0 0 0 2px var(--primary); }
  .cal-day--today .cal-day__num { background: var(--primary-fill); box-shadow: none; color: var(--on-primary); }
  .cal-day--today .cal-day__n { color: inherit; }
  /* After .cal-day, which sets a display of its own at the same weight. */
  .cal-day--empty,
  .cal-day--out { display: none; }
  .cal-day__events { gap: var(--space-2); }
  /* A finger needs a bigger target and an eye a bigger line than a cell. */
  .cal-event { padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
}

/* Agenda — one collection element's events as rows with a date tile. The
   whole row is the link. The tile is the filled-control pink in both themes
   (--primary-fill with --on-primary): the light theme's --primary is a deep
   text pink that --on-primary cannot be read on. */
.event-agenda {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.event-agenda__row {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4) var(--space-3) var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--stage-mid);
  color: inherit;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.event-agenda__row[href]:hover { background: var(--surface); border-color: var(--line-strong); }
.event-agenda__row[href]:hover .event-agenda__title { color: var(--primary); }
.event-agenda__row[href]:hover .event-agenda__chevron { color: var(--primary); transform: translateX(3px); }
.event-agenda__row:not([href]) { cursor: default; }
.event-agenda__row:not([href]) .event-agenda__chevron { visibility: hidden; }
/* base.css draws the ring; this keeps the row's own corners under it. */
.event-agenda__row:focus-visible { border-radius: var(--radius-lg); }

.event-agenda__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  background: var(--primary-fill);
  color: var(--on-primary);
  line-height: 1;
}
.event-agenda__day {
  font-family: var(--font-brand);
  font-size: var(--text-2xl);
  font-weight: 700;
}
.event-agenda__month {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-transform);
}
/* A row outside this year names it on a third, smaller line; the lines
   close up so the three still fit the 52px tile on a phone. */
.event-agenda__date--year { gap: 0.125rem; }
.event-agenda__year {
  font-size: 0.625rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
  opacity: 0.8;
}

.event-agenda__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
/* Hangul wraps between words, as Korean is set, not between syllables;
   overflow-wrap still breaks a run too long for the row. */
.event-agenda__title {
  font-weight: 700;
  line-height: 1.3;
  word-break: keep-all;
  overflow-wrap: anywhere;
  transition: color var(--dur-fast) var(--ease-out);
}
.event-agenda__meta {
  font-size: var(--text-sm);
  color: var(--ink-muted);
}
.event-agenda__chevron {
  display: flex;
  color: var(--ink-muted);
  transition: color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

/* "Minione": a label between two hairlines, where the past begins. */
.event-agenda__separator {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-transform);
  color: var(--ink-muted);
}
.event-agenda__separator::before,
.event-agenda__separator::after {
  content: "";
  flex: 1;
  border-top: 1px solid var(--line);
}

/* A past row steps back but stays readable: no fill, an outlined tile. */
.event-agenda__row--past { background: transparent; }
.event-agenda__row--past .event-agenda__date {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--line-strong);
  color: var(--ink-soft);
}
.event-agenda__row--past .event-agenda__title { color: var(--ink-soft); font-weight: 700; }

@media (max-width: 639px) {
  .event-agenda__row {
    grid-template-columns: 3.25rem minmax(0, 1fr) auto;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-2);
  }
  .event-agenda__day { font-size: var(--text-xl); }
}

@media (prefers-reduced-motion: reduce) {
  .event-agenda__row,
  .event-agenda__title,
  .event-agenda__chevron { transition: none; }
  .event-agenda__row:hover .event-agenda__chevron { transform: none; }
}