/* Anniversary day links and date calendar (PLA2-1312).
   Own file, scoped under .blog, so the UI kit can load it without magazine.css,
   whose unscoped rules (body, section, footer) would restyle the kit page. */

/* Previous / next day under an anniversary article. Explicit columns keep
   "All dates" centred when the previous or next link is absent. */
.blog .day-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 16px;
  margin-top: 40px;
  padding: 24px 0;
  border-top: 1px solid var(--blog-rule);
  border-bottom: 1px solid var(--blog-rule);
}
.blog .day-nav-link { display: flex; flex-direction: column; gap: 4px; color: var(--ink); text-decoration: none; }
.blog .day-nav-prev { grid-column: 1; }
.blog .day-nav-all { grid-column: 2; font-size: 15px; color: var(--accent); }
.blog .day-nav-next { grid-column: 3; justify-self: end; text-align: right; }
.blog .day-nav-label { font-size: 13px; color: var(--muted); }
.blog .day-nav-date { font-size: 19px; font-weight: 500; letter-spacing: -0.01em; }
.blog .day-nav-link:hover .day-nav-date { color: var(--accent); }

/* Twelve-month calendar on /blog/anniversaries/. Year-agnostic: day numbers in
   a 7-column grid, no weekday alignment. Linked days carry a tint; today is
   outlined, and filled when it has a page. */
.blog .anniversary-calendar { margin: 40px 0 56px; }
.blog .anniversary-calendar h2 { font-size: 24px; font-weight: 500; letter-spacing: -0.015em; line-height: 1.2; margin: 0; }
.blog .anniversary-calendar > p { font-size: 15px; color: var(--muted); margin: 8px 0 0; }
.blog .calendar-months {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 28px 24px;
  margin-top: 24px;
}
.blog .calendar-month { margin: 0; }
.blog .calendar-month h3 { font-size: 15px; font-weight: 500; line-height: 1.3; margin: 0 0 8px; }
.blog .calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; list-style: none; margin: 0; padding: 0; }
.blog .calendar-days li { margin: 0; }
.blog .calendar-days a,
.blog .calendar-days li > span {
  display: grid;
  place-items: center;
  min-height: 28px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}
.blog .calendar-days li > span { color: var(--muted); }
.blog .calendar-days a { color: var(--ink); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.blog .calendar-days a:hover { background: var(--accent); color: #fff; }
.blog .calendar-days [aria-current="date"] { outline: 2px solid var(--accent); outline-offset: -2px; font-weight: 600; }
.blog .calendar-days a[aria-current="date"] { background: var(--accent); color: #fff; }

@media (max-width: 480px) {
  .blog .day-nav { gap: 12px; }
  .blog .day-nav-date { font-size: 16px; }
  /* Two months side by side. Days carry no weekday, so six columns are as
     valid as seven and keep day centres over 24px apart (WCAG 2.5.8). */
  .blog .calendar-months { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .blog .calendar-days { grid-template-columns: repeat(6, 1fr); }
}