/* v3 event date-stub (reference §1b, plan §11 #35): a ticket stub, day over
   short month, with a dashed perforation just inside its right edge. Sizes:
   md 3rem (headers), row 2.75rem (grid rows, pickers), card 2.5rem (phone
   cards). States from role tokens only; no shadow, no icon.
   Macro: core/components/_lg_stub.html. */

.lg-stub {
  position: relative;
  display: inline-flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  inline-size: 3rem;
  block-size: 3rem;
  /* Content sits left of the perforation (0.25rem in from the edge). */
  padding-inline: 0 var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  text-align: center;
  white-space: nowrap;
}
/* The perforation: 1px dashed line just inside the right edge. */
.lg-stub::after {
  content: "";
  position: absolute;
  inset-block: var(--space-1);
  inset-inline-end: var(--space-1);
  border-inline-end: 1px dashed var(--border-strong);
}
.lg-stub__day {
  font-size: var(--size-section);
  line-height: 1.2;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.lg-stub__month {
  font-size: var(--size-caption);
  line-height: var(--leading-caption);
  font-weight: 500;
}

.lg-stub--row  { inline-size: 2.75rem; block-size: 2.75rem; }
.lg-stub--card { inline-size: 2.5rem;  block-size: 2.5rem; }
.lg-stub--row .lg-stub__day,
.lg-stub--card .lg-stub__day { font-size: var(--size-card-title); }

/* A multi-day range ("17–19") or a month range ("Oct–Nov") is wider text:
   the day one step smaller, and the stub may grow wider than its square
   (never narrower) so text never drops below caption size or meets the
   perforation. Single dates stay exact squares. */
.lg-stub--range {
  inline-size: auto;
  min-inline-size: 3rem;
  padding-inline: var(--space-1) var(--space-3);
}
.lg-stub--range.lg-stub--row  { min-inline-size: 2.75rem; }
.lg-stub--range.lg-stub--card { min-inline-size: 2.5rem; }
.lg-stub--range .lg-stub__day { font-size: var(--size-label); }

.lg-stub--live {
  border-color: var(--primary);
  background: var(--primary-tint);
  color: var(--primary-ink);
}
.lg-stub--live::after { border-color: var(--primary); }

/* Event mark = banner thumbnail, 16:9 (decision 300). Height matches the stub
   it replaces; the image is covered (centre kept), never stretched. */
.lg-evmark {
  flex: none;
  block-size: 3rem;
  aspect-ratio: 16 / 9;
  inline-size: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-control);
  background: var(--neutral-tint);
  object-fit: cover;
}
.lg-evmark--row { block-size: 2.75rem; }
.lg-evmark--bar { block-size: 2rem; }
.lg-evmark--past { opacity: 0.55; filter: grayscale(1); }

/* No date yet (decision 297): same stub, "TBA" at label size, muted. */
.lg-stub--tba { color: var(--text-muted); }
.lg-stub--tba .lg-stub__day { font-size: var(--size-label); letter-spacing: 0; }

.lg-stub--past,
.lg-stub--cancelled { color: var(--text-muted); }