/* CALIBRE Play - News list (/news/, parent page-news.php). Posts become cards with a
   type-colour tab, a clear date and title; the empty "CALIBRE" placeholder thumbnails are
   dropped (only real post images show). The template sets most styles inline, hence !important. */

html body main.site-main {
  width: 100%; max-width: 1120px !important; margin: 0 auto !important; padding: 34px 16px 64px !important;
  box-sizing: border-box; color: var(--play-ink);
}
html body main.site-main > h1 { font-size: clamp(38px, 6vw, 60px) !important; line-height: 1.02; margin: 0; }
html body main.site-main > h1 + p {
  opacity: 1 !important; color: var(--play-muted); font-size: 17px; line-height: 1.5; margin: 10px 0 0 !important; max-width: 60ch;
}

/* search + category */
html body main.site-main > form { gap: 10px !important; margin: 24px 0 14px !important; }
html body main.site-main > form input[type="search"] {
  min-height: 50px; padding: 0 16px 0 46px !important; font: 600 16px var(--f-body) !important; border-radius: 12px !important;
  color: var(--play-ink) !important; border: 1.5px solid rgba(242, 242, 251, .22) !important;
  background: var(--play-card-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a9abc9' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 21 21'/%3E%3C/svg%3E") no-repeat 15px 50% / 20px 20px !important;
}
html body main.site-main > form input[type="search"]:focus { border-color: var(--play-water) !important; box-shadow: 0 0 0 3px rgba(111, 157, 224, .3); }
html body main.site-main > form select {
  min-height: 50px; padding: 0 12px !important; font: 600 15px var(--f-body) !important; border-radius: 12px !important;
  color: var(--play-ink) !important; background-color: var(--play-card-2) !important; border: 1.5px solid var(--play-line) !important;
}
html body main.site-main > form button.button {
  min-height: 50px; padding: 0 22px !important; font: 800 15px/1 var(--f-body) !important; border-radius: 12px !important;
  background: var(--play-fire) !important; color: var(--play-on) !important; border: 2px solid rgba(0, 0, 0, .25) !important;
  box-shadow: var(--play-shadow);
}
html body main.site-main > form button.button:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .45); }
html body main.site-main > form > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--play-muted) !important; font-size: 14px !important; }

/* "42 articles total" */
html body main.site-main > form + p { opacity: 1 !important; font: 500 13px var(--f-data) !important; color: var(--play-muted); margin: 0 0 16px !important; }

/* ── the cards ─────────────────────────────────────────────────────────── */
html body main.site-main > form + p + div {
  display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px;
}
html body .cwp-news-row {
  --tone: var(--play-water);
  display: flex !important; flex-direction: column !important; gap: 0 !important; align-items: stretch !important;
  padding: 0 !important; overflow: hidden; min-width: 0;
  background: var(--play-card); border: 1px solid var(--play-line) !important; border-top: 4px solid var(--tone) !important;
  border-radius: 16px; box-shadow: var(--play-shadow); transition: transform .12s ease, border-color .12s ease;
}
html body .cwp-news-row:nth-child(5n+2) { --tone: var(--play-electric); }
html body .cwp-news-row:nth-child(5n+3) { --tone: var(--play-psychic); }
html body .cwp-news-row:nth-child(5n+4) { --tone: var(--play-grass); }
html body .cwp-news-row:nth-child(5n+5) { --tone: var(--play-ghost); }
html body .cwp-news-row:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--tone) 60%, var(--play-card)) !important; border-top-color: var(--tone) !important; }
html body .cwp-news-row:focus-visible { outline: 3px solid var(--play-water); outline-offset: 3px; }

/* thumbnails: real post images only */
html body .cwp-news-thumb { flex: none !important; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; border-radius: 0 !important; background: #0d0f20 !important; }
html body .cwp-news-thumb:not(:has(img)) { display: none !important; }
html body .cwp-news-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* side by side on wider screens, so a picture doesn't make its row twice as tall */
@media (min-width: 721px) {
  html body .cwp-news-row:has(.cwp-news-thumb img) { flex-direction: row !important; }
  html body .cwp-news-row:has(.cwp-news-thumb img) .cwp-news-thumb { width: 38% !important; aspect-ratio: auto; min-height: 100%; }
  html body .cwp-news-row:has(.cwp-news-thumb img) > div:last-child { flex: 1 1 0; }
}

html body .cwp-news-row > div:last-child { padding: 18px 20px 20px; gap: 8px !important; }
html body .cwp-news-row > div:last-child > div:first-child {
  opacity: 1 !important; font: 500 12px/1.3 var(--f-data) !important; letter-spacing: .04em !important;
  color: var(--play-muted); text-transform: uppercase;
}
html body .cwp-news-row h3 { font: 800 20px/1.25 var(--f-body) !important; color: var(--play-ink); text-wrap: balance; }
html body .cwp-news-row:hover h3 { color: #fff; }
html body .cwp-news-row p { opacity: 1 !important; color: var(--play-muted); font-size: 15px !important; line-height: 1.55 !important; }

/* the newest post gets the full width */
html body .cwp-news-row:first-child { grid-column: 1 / -1; }
html body .cwp-news-row:first-child h3 { font-size: clamp(22px, 2.6vw, 28px) !important; }
html body .cwp-news-row:first-child p { font-size: 16px !important; max-width: 70ch; }

/* empty search result */
html body main.site-main > form + p + div > p { grid-column: 1 / -1; color: var(--play-muted); font-size: 16px; }

/* pager */
html body main.site-main > p:last-child { gap: 10px !important; margin-top: 30px !important; font-size: 15px !important; }
html body main.site-main > p:last-child > a, html body main.site-main > p:last-child > span:first-child, html body main.site-main > p:last-child > span:last-child {
  display: inline-flex; align-items: center; min-height: 46px; padding: 0 18px; border-radius: 12px; font-weight: 800;
  background: var(--play-card); border: 1.5px solid var(--play-line); color: var(--play-ink) !important; box-shadow: var(--play-shadow);
}
html body main.site-main > p:last-child > a:hover { border-color: var(--play-water); }
html body main.site-main > p:last-child > span:first-child[style*="opacity"], html body main.site-main > p:last-child > span:last-child[style*="opacity"] { box-shadow: none; opacity: .55 !important; }
html body main.site-main > p:last-child > span:nth-child(2) { opacity: 1 !important; font: 500 13px var(--f-data); color: var(--play-muted); }

@media (max-width: 720px) {
  html body main.site-main { padding-top: 24px !important; }
  html body main.site-main > form input[type="search"] { flex-basis: 100% !important; }
  html body main.site-main > form select { flex: 1 1 auto; min-width: 0; }
  html body main.site-main > form + p + div { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  html body .cwp-news-row > div:last-child { padding: 16px 16px 18px; }
  html body .cwp-news-row h3, html body .cwp-news-row:first-child h3 { font-size: 19px !important; }
  html body .cwp-news-row p, html body .cwp-news-row:first-child p { font-size: 15px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html body .cwp-news-row { transition: none; }
  html body .cwp-news-row:hover { transform: none; }
}

/* /calibre-dark.css loads on this page and forces input colours with !important (lead, 2026-10-07) */
html body input:not([type=checkbox]):not([type=radio]), html body select, html body textarea { background: var(--play-card-2) !important; color: var(--play-ink) !important; border: 1.5px solid var(--play-line) !important; }
html body input:not([type=checkbox]):not([type=radio]):focus, html body select:focus, html body textarea:focus { border-color: var(--play-water) !important; }