/* ============================================================================
   Signal Desk — signature styling for the AI-news block theme.
   Spine / pulse / source-tag / attribution + layout the mockup needs.

   TRACEABILITY: every color, size, spacing and radius below resolves to a
   theme.json preset. The aliases in :root are the ONLY indirection — they map
   1:1 onto --wp--preset--* / --wp--custom--* so a grep for "#" hits comments
   only. Dark mode overrides the same preset vars (see functions.php / dark.json).
   Structural pixel dimensions (icon boxes, thumbnails) are layout, not tokens.
   ============================================================================ */

:root {
  /* color */
  --c-paper:       var(--wp--preset--color--paper);
  --c-surface:     var(--wp--preset--color--surface);
  --c-surface-2:   var(--wp--preset--color--surface-2);
  --c-ink:         var(--wp--preset--color--ink);
  --c-muted:       var(--wp--preset--color--muted);
  --c-faint:       var(--wp--preset--color--faint);
  --c-accent:      var(--wp--preset--color--accent);
  --c-accent-weak: var(--wp--preset--color--accent-weak);
  --c-hot:         var(--wp--preset--color--hot);

  /* type */
  --f-body: var(--wp--preset--font-family--body);
  --f-mono: var(--wp--preset--font-family--mono);
  --fs-meta:    var(--wp--preset--font-size--meta);
  --fs-body:    var(--wp--preset--font-size--body);
  --fs-title:   var(--wp--preset--font-size--title);
  --fs-title-l: var(--wp--preset--font-size--title-l);
  --fs-h2:      var(--wp--preset--font-size--h2);
  --fs-hero:    var(--wp--preset--font-size--hero);

  /* spacing */
  --s10: var(--wp--preset--spacing--10); /* 4  */
  --s20: var(--wp--preset--spacing--20); /* 8  */
  --s30: var(--wp--preset--spacing--30); /* 12 */
  --s40: var(--wp--preset--spacing--40); /* 16 */
  --s50: var(--wp--preset--spacing--50); /* 24 */
  --s60: var(--wp--preset--spacing--60); /* 32 */
  --s70: var(--wp--preset--spacing--70); /* 48 */
  --s80: var(--wp--preset--spacing--80); /* 64 */

  /* radius */
  --r-sm:   var(--wp--custom--radius--sm);
  --r-md:   var(--wp--custom--radius--md);
  --r-lg:   var(--wp--custom--radius--lg);
  --r-pill: var(--wp--custom--radius--pill);
}

/* ---- global scaffolding --------------------------------------------------- */
body { -webkit-font-smoothing: antialiased; }
.mono,
.wp-block-post-date,
.wp-block-post-terms { font-feature-settings: "tnum"; }

:focus-visible {
  outline: 2.5px solid var(--c-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---- masthead / header ---------------------------------------------------- */
.masthead {
  border-bottom: 1px solid var(--c-faint);
  background: var(--c-surface);
}
.masthead .wp-block-group {
  align-items: center;
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--s20);
  font-weight: 800;
  letter-spacing: -0.01em;
}
.brand .wp-block-site-title,
.brand .wp-block-site-title a { font-weight: 800; }
.brand .glyph {
  color: var(--c-accent);
  font-family: var(--f-mono);
  font-size: var(--fs-title-l);
  line-height: 1;
}
/* ---- primary nav: dynamic, taxonomy-driven dropdown (آبشاری), RTL --------- */
.mainnav__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s30);
  list-style: none;
  margin: 0;
  padding: 0;
}
.mainnav__item { position: relative; margin: 0; }
.mainnav__link {
  color: var(--c-muted);
  font-weight: 500;
  white-space: nowrap;
  padding-block: var(--s10);
  border-bottom: 2px solid transparent;
  text-decoration: none;
}
.mainnav__link:hover,
.mainnav__item--has-children:hover > .mainnav__link,
.current-menu-item > .mainnav__link { color: var(--c-ink); }
.current-menu-item > .mainnav__link { border-color: var(--c-accent); }

/* disclosure caret next to a parent that has children */
.mainnav__disclosure {
  border: 0;
  background: transparent;
  color: var(--c-muted);
  cursor: pointer;
  padding: var(--s10);
  font-size: var(--fs-meta);
  line-height: 1;
}
.mainnav__item--has-children:hover .mainnav__disclosure,
.mainnav__disclosure:hover,
.mainnav__disclosure[aria-expanded="true"] { color: var(--c-ink); }
.mainnav__caret { display: inline-block; transition: transform 0.18s ease; }
.mainnav__item--has-children:hover .mainnav__caret,
.mainnav__disclosure[aria-expanded="true"] .mainnav__caret { transform: rotate(180deg); }

/* the آبشاری submenu: opens on the inline-start edge, so RTL is correct */
.mainnav__submenu {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  z-index: 50;
  min-width: 200px; /* dropdown width (structural) */
  display: none;
  flex-direction: column;
  gap: var(--s10);
  margin: 0;
  padding: var(--s20);
  list-style: none;
  background: var(--c-surface);
  border: 1px solid var(--c-faint);
  border-radius: var(--r-md);
  box-shadow: 0 8px 28px -12px color-mix(in srgb, var(--c-ink) 32%, transparent);
}
/* open on hover, on keyboard focus (:focus-within), or when JS flags it (touch) */
.mainnav__item--has-children:hover > .mainnav__submenu,
.mainnav__item--has-children:focus-within > .mainnav__submenu,
.mainnav__submenu.is-open { display: flex; }
.mainnav__submenu li { margin: 0; }
.mainnav__submenu a {
  display: block;
  padding: var(--s10) var(--s20);
  border-radius: var(--r-sm);
  color: var(--c-muted);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
}
.mainnav__submenu a:hover,
.mainnav__submenu a:focus-visible { color: var(--c-accent); background: var(--c-accent-weak); }
/* child post-count badge: label on the start edge, count pushed to the end */
.mainnav__sublink {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s30);
}
.mainnav__count {
  color: var(--c-muted);
  font-size: var(--fs-meta);
  /* body font, not mono: the count is localized to Persian digits (۱۲۳) and a
     Latin monospace face may lack those glyphs. --f-body renders them correctly. */
  font-family: var(--f-body);
  font-variant-numeric: tabular-nums;
}
/* keep the count legible against the accent-tinted hover/focus row */
.mainnav__submenu a:hover .mainnav__count,
.mainnav__submenu a:focus-visible .mainnav__count { color: inherit; }

@media (prefers-reduced-motion: reduce) {
  .mainnav__caret { transition: none; }
}

/* ---- header actions: icon buttons (search + theme) ------------------------ */
.m-actions { color: var(--c-muted); gap: var(--s20); }
.m-actions .ic {
  width: 34px; height: 34px; /* icon box (structural) */
  border: 1px solid var(--c-faint);
  border-radius: var(--r-md);
  display: grid;
  place-items: center;
  cursor: pointer;
  background: transparent;
  color: var(--c-muted);
}
.m-actions .ic:hover { color: var(--c-ink); border-color: var(--c-accent); }

/* search: a magnifier that expands the field on click */
.header-search { position: relative; align-items: center; gap: var(--s20); }
.header-search__toggle {
  width: 34px; height: 34px; /* icon box (structural) */
  display: grid;
  place-items: center;
  border: 1px solid var(--c-faint);
  border-radius: var(--r-md);
  background: transparent;
  color: var(--c-muted);
  cursor: pointer;
  font-size: var(--fs-body);
  flex: none;
}
.header-search__toggle:hover,
.header-search__toggle[aria-expanded="true"] { color: var(--c-ink); border-color: var(--c-accent); }
.header-search__form {
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: width 0.22s ease, opacity 0.22s ease;
}
.header-search.is-open .header-search__form {
  width: 220px; /* expanded field (structural) */
  opacity: 1;
}
.header-search__form .wp-block-search__input { min-width: 0; }

/* theme toggle: icon only, square like the other action buttons */
.toggle {
  width: 34px; height: 34px; /* icon box (structural) */
  display: grid;
  place-items: center;
  border: 1px solid var(--c-faint);
  background: var(--c-surface);
  color: var(--c-ink);
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--fs-body);
  flex: none;
}
.toggle:hover { border-color: var(--c-accent); color: var(--c-accent); }

@media (prefers-reduced-motion: reduce) {
  .header-search__form { transition: none; }
}

/* ---- section label -------------------------------------------------------- */
.slabel {
  display: flex;
  align-items: center;
  gap: var(--s30);
  font-weight: 800;
  font-size: var(--fs-h2);
  letter-spacing: -0.01em;
  color: var(--c-ink);
}
.slabel::before {
  content: "";
  width: 4px; height: 20px; /* accent bar (structural) */
  background: var(--c-accent);
  border-radius: 2px;
  flex: none;
}
.slabel.hot::before { background: var(--c-hot); }
.slabel .more { margin-inline-start: auto; font-size: var(--fs-meta); color: var(--c-muted); font-weight: 500; }

/* ---- source tag / chip / time -------------------------------------------- */
.src {
  display: inline-flex;
  align-items: center;
  gap: var(--s20);
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.src::before {
  content: "";
  width: 7px; height: 7px; /* source dot (structural) */
  border-radius: 50%;
  background: var(--c-accent);
  flex: none;
}
.src.hot::before { background: var(--c-hot); }

.chip {
  display: inline-flex;
  font-size: var(--fs-meta);
  font-weight: 600;
  color: var(--c-accent);
  background: var(--c-accent-weak);
  border-radius: var(--r-pill);
  padding: var(--s10) var(--s30);
  width: fit-content;
}
.chip a { color: inherit; }

.time,
.wp-block-post-date {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  color: var(--c-muted);
}

.meta {
  display: flex;
  gap: var(--s30);
  align-items: center;
  flex-wrap: wrap;
}

/* ---- uniform magazine media (the core fix) -------------------------------- */
/* one contract for every card image: fill the box, crop, never distort. */
.wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wp-block-post-featured-image a   { display: block; height: 100%; } /* let the img fill its box */

/* ---- HERO (editorial OVERLAY: full-bleed photo, text scrimmed over it) ----- */
.hero { align-items: stretch; }
/* the whole .lead IS the photo — no card background, no padding around it */
.lead {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--c-faint);
}
/* featured image is the in-flow sizer: edge-to-edge, wide + capped, cover-cropped */
.lead .wp-block-post-featured-image {
  aspect-ratio: 16 / 9;
  max-height: 380px; /* lead media cap (structural) */
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
}
.lead .wp-block-post-featured-image,
.lead .wp-block-post-featured-image a,
.lead .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* gradient placeholder sizes the box the same way when there is no image */
.lead .ph {
  aspect-ratio: 16 / 9;
  max-height: 380px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 80% at 80% 0%, color-mix(in srgb, var(--c-accent) 22%, transparent), transparent 60%),
    linear-gradient(200deg, var(--c-surface-2), color-mix(in srgb, var(--c-hot) 10%, var(--c-surface-2)));
}
.lead:has(.wp-block-post-featured-image) .ph { display: none; } /* real photo wins */

/* Body sits ABSOLUTELY over the bottom of the photo, on a bottom-up scrim.
   The scrim gradient + white on-photo text is the ONE deliberate non-token
   exception, scoped entirely to .lead, so the summary stays legible over any
   photo — dark OR light: strong/dark at the bottom, transparent by ~70% up. */
.lead .lead-body {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s20);
  padding: 5px;
  color: #fff; /* on-photo text — scoped exception */
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent 85%);
}
.lead .lead-body .wp-block-post-title {
  font-size: clamp(1.4rem, 1.1rem + 1.2vw, 1.9rem);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0;
}
.lead .lead-body .wp-block-post-title,
.lead .lead-body .wp-block-post-title a {
  color: #fff; /* on-photo title — scoped exception */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}
/* meta over the photo: white text, understated on-photo labels. */
.lead .lead-body .src,
.lead .lead-body .time,
.lead .lead-body .wp-block-post-date { color: #fff; }
.lead .lead-body .src::before { background: #fff; }

/* meta row: term name (far LEFT) and date (far RIGHT) on one line, opposite ends.
   RTL flex row → the first child (the date) lands at the RIGHT edge, the last
   child (the term chip) at the LEFT edge; space-between opens the gap between. */
.lead .lead-body .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: var(--s30);
  flex-wrap: nowrap;
}
/* here the term is a plain short label, NOT the big accent pill — matches the
   mockup's understated on-photo meta; white with the title's text-shadow. */
.lead .lead-body .meta .chip {
  background: transparent;
  padding: 0;
  color: #fff;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* same as the title */
}
.lead .lead-body .meta .wp-block-post-date {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); /* same as the title */
}

.stack { display: grid; gap: var(--s40); align-content: start; }
.mini {
  display: grid;
  grid-template-columns: 1fr 96px; /* text + thumb (structural) */
  gap: var(--s30);
  background: var(--c-surface);
  border: 1px solid var(--c-faint);
  border-radius: var(--r-lg);
  padding: var(--s30);
  align-items: center;
}
.mini .wp-block-post-title {
  font-size: var(--fs-title);
  line-height: 1.45;
  font-weight: 700;
  margin: 0 0 var(--s20);
}
.mini .wp-block-post-featured-image {
  width: 96px; height: 72px; /* fixed, uniform thumb (structural) */
  flex: none;
  border-radius: var(--r-md);
  margin: 0;
  overflow: hidden;
}
.thumb-fallback {
  border-radius: var(--r-md);
  background-image: linear-gradient(135deg, var(--c-surface-2), color-mix(in srgb, var(--c-accent) 12%, var(--c-surface-2)));
}

/* ============================================================================
   SIGNATURE — timeline-spine feed
   The Query Loop gets .feed; each post-template <li> becomes a .wire.
   ============================================================================ */
.feed { position: relative; }
.feed .wp-block-post-template {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0;
}
/* the spine */
.feed .wp-block-post-template::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  inset-inline-start: 34px; /* spine x-position (structural) */
  width: 2px;
  background: var(--c-faint);
}
.feed .wp-block-post-template > li {
  position: relative;
  padding: var(--s40) 0;
  padding-inline-start: 72px; /* clear the spine gutter (structural) */
  border-bottom: 1px solid var(--c-faint);
  margin: 0;
}
.feed .wp-block-post-template > li:last-child { border-bottom: 0; }
/* the node */
.feed .wp-block-post-template > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 28px; /* node on spine (structural) */
  top: calc(var(--s40) + 4px);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 2px solid var(--c-accent);
  box-shadow: 0 0 0 4px var(--c-paper);
}
/* freshest item pulses (newest post = first) */
.feed .wp-block-post-template > li:first-child::before {
  border-color: var(--c-hot);
  background: var(--c-hot);
  animation: sig-pulse 2.2s ease-out infinite;
}
.feed .wp-block-post-title { margin: 0 0 var(--s20); }
.feed .wp-block-post-title,
.feed .wp-block-post-title a {
  font-size: var(--fs-title);
  line-height: 1.5;
  font-weight: 700;
}
.feed .wp-block-post-title a:hover { color: var(--c-accent); }
.feed .wp-block-post-excerpt {
  margin: 0 0 var(--s30);
  color: var(--c-muted);
  font-size: var(--fs-body);
  line-height: 1.7;
}
.feed .wp-block-post-excerpt__more-text { display: none; }
.feed .wp-block-post-featured-image {
  float: inline-start;
  width: 132px; height: 88px; /* wire thumb (structural) */
  margin: 0 0 var(--s20) var(--s40);
  border-radius: var(--r-md);
  overflow: hidden;
}
.feed .wp-block-post-featured-image img { width: 100%; height: 100%; object-fit: cover; }

@keyframes sig-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c-hot) 55%, transparent), 0 0 0 4px var(--c-paper); }
  70%  { box-shadow: 0 0 0 9px transparent, 0 0 0 4px var(--c-paper); }
  100% { box-shadow: 0 0 0 0 transparent, 0 0 0 4px var(--c-paper); }
}
@media (prefers-reduced-motion: reduce) {
  .feed .wp-block-post-template > li:first-child::before { animation: none; }
}

/* load-more / pagination */
.loadmore,
.wp-block-query-pagination {
  margin: var(--s50) 0;
}
.wp-block-query-pagination { justify-content: center; gap: var(--s30); font-family: var(--f-mono); font-size: var(--fs-meta); }
.wp-block-query-pagination a:hover { color: var(--c-accent); }
.wp-block-query-pagination .wp-block-query-pagination-numbers .page-numbers.current { color: var(--c-accent); font-weight: 700; }

/* ---- sidebar cards -------------------------------------------------------- */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-faint);
  border-radius: var(--r-lg);
  padding: var(--s40);
}
.card .slabel { margin-top: 0; }
.trend {
  display: flex;
  gap: var(--s30);
  padding: var(--s30) 0;
  border-bottom: 1px solid var(--c-faint);
  align-items: start;
}
.trend:last-child { border-bottom: 0; }
.trend .rank {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: var(--fs-title);
  color: var(--c-hot);
  width: 22px; /* structural */
  flex: none;
}
.trend .rank.pin { color: var(--c-accent); }
.trend .wp-block-post-title {
  margin: 0 0 var(--s10);
  font-size: var(--fs-body);
  line-height: 1.5;
  font-weight: 600;
}

.srcfilter { display: flex; flex-wrap: wrap; gap: var(--s20); }
.srcfilter a,
.srcfilter .s {
  font-family: var(--f-mono);
  font-size: var(--fs-meta);
  text-transform: uppercase;
  border: 1px solid var(--c-faint);
  border-radius: var(--r-pill);
  padding: var(--s10) var(--s30);
  color: var(--c-muted);
  cursor: pointer;
}
.srcfilter a:hover,
.srcfilter .s:hover,
.srcfilter .s.on { border-color: var(--c-accent); color: var(--c-accent); }

/* dynamic category chips (core/categories) — outlined pill, same look as
   .srcfilter but body font for Persian names (no mono/uppercase leak) */
.catchips {
  list-style: none;
  margin-inline: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s20);
}
.catchips li { margin: 0; }
.catchips a {
  display: inline-flex;
  font-family: var(--f-body);
  font-size: var(--fs-meta);
  font-weight: 600;
  border: 1px solid var(--c-faint);
  border-radius: var(--r-pill);
  padding: var(--s10) var(--s30);
  color: var(--c-muted);
  text-decoration: none;
}
.catchips a:hover,
.catchips a:focus-visible { border-color: var(--c-accent); color: var(--c-accent); }

/* ---- topic strip / cards -------------------------------------------------- */
.strip .wp-block-post-template,
.strip.wp-block-columns { gap: var(--s40); }
.tcard {
  background: var(--c-surface);
  border: 1px solid var(--c-faint);
  border-radius: var(--r-lg);
  overflow: hidden;
  height: 100%;
}
.tcard .wp-block-post-featured-image {
  aspect-ratio: 16 / 9; /* uniform wide thumb */
  margin: 0;
  overflow: hidden;
}
.tcard .tcard-body { padding: var(--s30); }
.tcard .wp-block-post-title {
  margin: 0 0 var(--s20);
  font-size: var(--fs-title);
  line-height: 1.45;
  font-weight: 700;
}
.tcard .wp-block-post-title a:hover { color: var(--c-accent); }

/* ---- SINGLE --------------------------------------------------------------- */
.article .kicker { display: flex; gap: var(--s30); align-items: center; margin-bottom: var(--s40); }
.article > .wp-block-post-title {
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s40);
}
.byline {
  display: flex;
  gap: var(--s40);
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: var(--s50);
  border-bottom: 1px solid var(--c-faint);
}
.article > .wp-block-post-featured-image,
.article > .wp-block-post-featured-image img {
  width: 100%;
  border-radius: var(--r-lg);
  margin: var(--s50) 0;
}
.prose p,
.prose li {
  font-size: var(--fs-title);
  line-height: 1.95;
}
.prose > * { margin-block: 0 var(--s50); }

.rel { margin-top: var(--s60); }

/* ---- video ---------------------------------------------------------------- */
.vcard .wp-block-post-featured-image { position: relative; }
.vcard .wp-block-post-featured-image::after {
  content: "▶";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: white;
  font-size: 1.4rem;
  background: rgba(0,0,0,.25);
}

/* ---- footer --------------------------------------------------------------- */
.site-footer {
  margin-top: var(--s80);
  border-top: 1px solid var(--c-faint);
  background: var(--c-surface);
}
/* each column's heading reads as a distinct group label: bold, ink, and a
   hairline rule that separates it from its links — critical when the columns
   stack on mobile and would otherwise blur into one long list. */
.site-footer h2,
.site-footer h5,
.site-footer .foot-head {
  font-size: var(--fs-meta);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-ink);
  margin: 0 0 var(--s30);
  padding-bottom: var(--s20);
  border-bottom: 1px solid var(--c-faint);
  font-family: var(--f-mono);
  font-weight: 700;
}
.site-footer a { color: var(--c-muted); font-size: var(--fs-body); }
.site-footer .foot-links a { display: block; padding: var(--s10) 0; }
.site-footer .foot-links p { margin: 0; }
.site-footer a:hover { color: var(--c-accent); }

/* dynamic categories list (parents only, [ainews_footer_cats]) — reset the
   <ul> so its links match the plain stacked links in the other columns */
.site-footer .foot-cats { list-style: none; margin: 0; padding: 0; }
.site-footer .foot-cats li { margin: 0; }

.fbrand p { color: var(--c-muted); font-size: var(--fs-body); line-height: 1.8; margin: var(--s30) 0 0; }
.site-footer .foot-about p { color: var(--c-muted); font-size: var(--fs-body); line-height: 1.8; margin: 0; }

/* MOBILE: once the columns stack (WP's 781px breakpoint), give each group clear
   air above it so heading + links read as one block, distinct from the next. */
@media (max-width: 781px) {
  .site-footer .wp-block-column { margin-top: var(--s60); }
  .site-footer .wp-block-column:first-child { margin-top: 0; }
}

/* ---- empty state (search / 404) ------------------------------------------ */
.emptystate {
  text-align: center;
  padding: var(--s70) var(--s40);
  border: 1px dashed var(--c-faint);
  border-radius: var(--r-lg);
  background: var(--c-surface);
}
.emptystate .big { font-size: var(--fs-hero); font-weight: 800; color: var(--c-ink); margin: 0 0 var(--s30); }
.emptystate p { color: var(--c-muted); margin: 0 auto var(--s40); max-width: 46ch; }

/* ============================================================================
   Patch brief — real-feed hardening (context/Patchbrief.md)
   ============================================================================ */

/* Rule 4: clamp long titles/excerpts. The brief's .lead-title / .card-title /
   .card-excerpt map onto the theme's actual block selectors. Full text stays in
   the DOM (only the overflow is hidden) so screen readers still get it (gate a11y). */
.lead .wp-block-post-title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mini .wp-block-post-title,
.tcard .wp-block-post-title,
.feed .wp-block-post-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.feed .wp-block-post-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Rules 1–3: text-card variant (arXiv, Uncategorized, or no image + no fallback).
   The featured-image filter drops the <figure>, so :has() detects the absence and
   makes the card look deliberate rather than a blank thumbnail slot.
   (The hero .lead already shows its .ph gradient, and the .feed spine is text-first,
   so only .tcard and .mini need adjusting.) */
.tcard:not(:has(.wp-block-post-featured-image)) {
  border-top: 3px solid var(--c-accent); /* deliberate accent ribbon */
}
.tcard:not(:has(.wp-block-post-featured-image)) .tcard-body {
  padding-top: var(--s40);
}
.mini:not(:has(.wp-block-post-featured-image)) {
  grid-template-columns: 1fr; /* reclaim the empty thumb column */
}

/* ---- responsive ----------------------------------------------------------- */
@media (max-width: 900px) {
  .feed .wp-block-post-featured-image { float: none; width: 100%; height: auto; margin: 0 0 var(--s30); }
}
@media (max-width: 600px) {
  .mini { grid-template-columns: 1fr; }
  .mini .wp-block-post-featured-image { display: none; }
}