/*
 * tuning-database.co.uk, v3: /whats-new/ (templates/page-whats-new.php).
 * The release digest from mu-plugins/tdb-whats-new.php: the latest releases
 * as cards, then every month as a list, each older month folded.
 */

.wn-title {
  font-size: var(--step-3);
}

.wn-intro {
  margin-top: var(--sp-2);
  color: var(--ink-2);
}

/* The latest releases. */
.wn-cards {
  display: grid;
  gap: var(--sp-3);
  margin: var(--sp-6) 0 0;
  padding: 0;
  list-style: none;
}

.wn-card {
  padding: var(--sp-4) var(--sp-5);
  border: 1px solid var(--line);
  border-radius: var(--radius-2);
  background: var(--bg-raised);
}

.wn-card-when,
.wn-when {
  color: var(--ink-3);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  white-space: nowrap;
}

.wn-card-when {
  display: block;
}

.wn-card-what {
  display: block;
  margin-top: var(--sp-1);
  color: var(--ink);
}

@media (min-width: 640px) {
  .wn-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .wn-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Everything, month by month. */
.wn-all {
  margin-top: var(--sp-7);
  border-top: 1px solid var(--line-strong);
}

.wn-all-head,
.wn-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-4) 0;
  list-style: none;
  cursor: pointer;
}

.wn-all-head::-webkit-details-marker,
.wn-head::-webkit-details-marker {
  display: none;
}

.wn-all-head {
  font-size: var(--step-2);
  font-weight: 700;
}

.wn-head {
  margin: 0;
  font-size: var(--step-1);
  font-weight: 700;
}

.wn-count {
  color: var(--ink-3);
  font-size: var(--step--1);
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}

.wn-block {
  border-top: 1px solid var(--line);
}

.wn-head:hover .wn-month {
  color: var(--accent-ink);
}

.wn-list {
  margin: 0 0 var(--sp-5);
  padding: 0;
  list-style: none;
}

.wn-item {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}

.wn-item:last-child {
  border-bottom: 0;
}