/*
 * home.css — homepage hero shell, bento grid, redacción strip,
 * homepage motion (cp-motion homepage half), kinetic background, and
 * the JCS-canon hero background recipe (was hero.css + jcs-hero.css,
 * merged 2026-04-28 in Phase 2 Task 2.6).
 *
 * Loaded on every page for now (will become per-template in Phase 3
 * via jacar_assets_per_template()). The .cp-hero / .cp-hero__* shell
 * is reused by /sobre and /lab — sobre.css and lab.css inline only
 * the page-specific overrides on top of these globals.
 *
 * Dependency: jacar-components.
 */

/* CP-MOTION + cp-* primitives moved to assets/css/cp-components.css
 * (Phase 3 Task 3.2). Loaded globally now; home.css went back to
 * is_front_page() only. */

/* ============================================================
   REDACCIÓN (Newsroom section) — newspaper-style tri-column
   ============================================================ */
.redaccion {
  margin-top: 3.5rem;
  padding: 2.5rem 0 3rem;
  border-top: 3px double var(--border);
}

.redaccion__head {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 1.25rem;
}
.redaccion__kicker {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--teal);
  margin: 0;
}
.redaccion__kicker time {
  color: var(--text-faint);
  letter-spacing: .12em;
  font-weight: 500;
  text-transform: none;
}
.redaccion__sep { color: var(--text-faint); }
.redaccion__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--teal) 20%, transparent);
  animation: redaccion-blink 2s ease-in-out infinite;
}
@keyframes redaccion-blink {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}
@media (prefers-reduced-motion: reduce) {
  .redaccion__dot { animation: none; }
}
.redaccion__title {
  font-family: var(--font-heading);
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0;
  color: var(--text);
}

.redaccion__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .redaccion__grid { grid-template-columns: repeat(2, 1fr); column-gap: 2.25rem; row-gap: 2rem; }
}
@media (min-width: 1024px) {
  .redaccion__grid {
    grid-template-columns: 1.1fr 1.1fr 1fr;
    column-gap: 2.5rem;
  }
  /* Newspaper vertical rules between columns */
  .redaccion__col + .redaccion__col {
    border-left: 1px solid var(--border);
    padding-left: 2.5rem;
    margin-left: -.25rem;
  }
}

.redaccion__col-title {
  font-family: var(--font-heading);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--text-muted);
  margin: 0 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--border);
}
.redaccion__subhead {
  font-family: var(--font-heading);
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--text-muted);
  margin: 1.75rem 0 .75rem;
}

/* ── Col 1: Ranked top read ── */

/* Hero (#1) — thumbnail + excerpt, oversized numeral */
.ranked-hero {
  position: relative;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.ranked-hero__rank {
  position: absolute;
  top: -.4rem;
  left: 0;
  font-family: var(--font-heading);
  font-size: 4.25rem;
  font-weight: 900;
  line-height: 1;
  color: color-mix(in srgb, var(--teal) 18%, transparent);
  letter-spacing: -.05em;
  pointer-events: none;
  z-index: 0;
  font-feature-settings: 'tnum' 1;
}
.ranked-hero__link {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: .9rem;
  text-decoration: none;
  color: var(--text);
  position: relative;
  padding-top: 1.6rem;
  z-index: 1;
}
.ranked-hero__thumb {
  width: 84px;
  height: 84px;
  overflow: hidden;
  border-radius: 6px;
  flex-shrink: 0;
}
.ranked-hero__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .4s ease;
}
.ranked-hero__link:hover .ranked-hero__thumb img { transform: scale(1.06); }
.ranked-hero__body {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}
.ranked-hero__title {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  transition: color var(--t);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -.01em;
}
.ranked-hero__link:hover .ranked-hero__title { color: var(--teal); }
.ranked-hero__excerpt {
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: .15rem;
}
.ranked-hero__foot {
  font-size: .72rem;
  color: var(--text-faint);
  margin-top: .35rem;
}
.ranked-hero__foot.post-meta--strip { gap: .25rem .7rem; }
.ranked-hero__foot .post-meta__item-icon svg { width: 12px; height: 12px; }
.ranked-hero__foot .post-meta__stars-track svg,
.ranked-hero__foot .post-meta__stars-fill svg { width: 12px; height: 12px; }

/* Compact list (#2–#5) */
.ranked-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.ranked-list__item + .ranked-list__item { border-top: 1px solid var(--border-faint); }
.ranked-list__link {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .15rem 1rem;
  padding: .7rem 0;
  text-decoration: none;
  color: var(--text);
}
.ranked-list__link:hover .ranked-list__title { color: var(--teal); }
.ranked-list__num {
  grid-row: 1 / span 3;
  align-self: start;
  font-family: var(--font-heading);
  font-size: 1.7rem;
  font-weight: 800;
  line-height: 1;
  color: var(--teal);
  letter-spacing: -.04em;
  font-feature-settings: 'tnum' 1;
  opacity: .85;
}
.ranked-list__cat {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.ranked-list__title {
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.35;
  color: var(--text);
  transition: color var(--t);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ranked-list__foot {
  font-size: .7rem;
  color: var(--text-faint);
}
.ranked-list__foot.post-meta--strip { gap: .15rem .5rem; }
.ranked-list__foot .post-meta__item-icon svg { width: 11px; height: 11px; }
.ranked-list__foot .post-meta__stars-track svg,
.ranked-list__foot .post-meta__stars-fill svg { width: 11px; height: 11px; }
.ranked-list__foot .post-meta__item--rating .post-meta__item-val { font-size: .7rem; }
/* Rating column is the lowest priority on this dense list — hide it
   below 720px so the row stays single-line. */
@media (max-width: 720px) {
  .ranked-list__foot .post-meta__item--rating { display: none; }
}

/* ── Col 2: Latest per category ── */
.bycat-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.bycat-list__item + .bycat-list__item { border-top: 1px solid var(--border-faint); }
.bycat-item {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .75rem 0;
  text-decoration: none;
  color: var(--text);
}
.bycat-item__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--teal) 12%, transparent);
  color: var(--teal);
  transition: background var(--t), color var(--t);
}
.bycat-item__icon svg { width: 18px; height: 18px; }
.bycat-item:hover .bycat-item__icon {
  background: var(--teal);
  color: #fff;
}
.bycat-item__body {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  min-width: 0;
}
.bycat-item__cat {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal);
}
.bycat-item__title {
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--text);
  transition: color var(--t);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bycat-item:hover .bycat-item__title { color: var(--teal); }
.bycat-item__date {
  font-size: .72rem;
  color: var(--text-faint);
}
.bycat-item__meta {
  font-size: .68rem;
  color: var(--text-faint);
  margin-top: .25rem;
}
.bycat-item__meta.post-meta--strip { gap: .15rem .55rem; }
.bycat-item__meta .post-meta__item-icon svg { width: 11px; height: 11px; }
.bycat-item__meta .post-meta__stars-track svg,
.bycat-item__meta .post-meta__stars-fill svg { width: 11px; height: 11px; }
@media (max-width: 720px) {
  .bycat-item__meta .post-meta__item--rating,
  .bycat-item__meta .post-meta__item--reading { display: none; }
}

/* ── Col 3: Tag cloud + archive ──────────────────────────────────────
   Trending tags render as a heat-map pill cloud: each .tag-cloud__item
   carries two modifier classes — .tag-cloud__item--t{0..4} (size tier)
   and .tag-cloud__item--c{0..2} (color tier) — derived from a hybrid
   recency-biased trend score in jacar_popular_tags(). On load the items
   fade-up in a staggered cascade driven by the inline `--tc-stagger`
   index. Hover grows the pill, lifts it 2px, and reveals the post-count
   badge with a soft glow.

   Archive renders as a 12-month bar-chart timeline (.archive-spark).
   Each bar's height is set inline via `--bar-h` (0–100%); a CSS-only
   ascending stagger animates the bars rising from the baseline on
   first paint. Hover lifts the bar, brightens the fill, and pops the
   count above the column. The current month carries .is-current and
   gets a brand-teal stroke. Months with zero posts carry .is-empty
   and render as a muted hairline (still occupies its slot so the
   timeline reads as a continuous tail).
   ──────────────────────────────────────────────────────────────── */

.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .5rem;
  align-items: center;
  /* Slight randomized look without JS: a small bottom padding gives the
     larger tier-4 pills room to grow on hover. */
  padding-bottom: .25rem;
}
.tag-cloud__item {
  --tc-bg: color-mix(in srgb, var(--teal) 8%, var(--bg));
  --tc-fg: var(--text-muted);
  --tc-bd: color-mix(in srgb, var(--teal) 18%, var(--border));
  --tc-glow: rgba(43, 138, 148, .25);
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  padding: .25rem .65rem;
  border: 1px solid var(--tc-bd);
  border-radius: 999px;
  background: var(--tc-bg);
  color: var(--tc-fg);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.005em;
  /* Animate in on first paint, ~30 ms per index — 20 tags → 600 ms total. */
  opacity: 0;
  transform: translateY(6px);
  animation: jacar-tagcloud-in .42s cubic-bezier(.22, 1.5, .36, 1) forwards;
  animation-delay: calc(var(--tc-stagger, 0) * 30ms);
  transition:
    transform .22s cubic-bezier(.22, 1.5, .36, 1),
    background .2s ease,
    border-color .2s ease,
    box-shadow .25s ease,
    color .2s ease;
  will-change: transform;
}
@keyframes jacar-tagcloud-in {
  from { opacity: 0; transform: translateY(6px) scale(.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .tag-cloud__item {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
/* Size tiers — t0 (cold tail) → t4 (hottest). Font-size scales legibly
   so the heat-map reads at a glance. */
.tag-cloud__item--t0 { font-size: .72rem; padding: .18rem .55rem; }
.tag-cloud__item--t1 { font-size: .82rem; }
.tag-cloud__item--t2 { font-size: .92rem; padding: .3rem .75rem; }
.tag-cloud__item--t3 { font-size: 1.04rem; padding: .32rem .85rem; font-weight: 700; }
.tag-cloud__item--t4 { font-size: 1.18rem; padding: .35rem .95rem; font-weight: 700; letter-spacing: -.015em; }
/* Color tiers — c0 (teal/cool) baseline, c1 (lime/warm) mid, c2 (coral/hot) top. */
.tag-cloud__item--c0 {
  --tc-bg: color-mix(in srgb, var(--teal) 6%, var(--bg));
  --tc-fg: color-mix(in srgb, var(--teal) 60%, var(--text-muted));
  --tc-bd: color-mix(in srgb, var(--teal) 22%, var(--border));
  --tc-glow: rgba(43, 138, 148, .25);
}
.tag-cloud__item--c1 {
  --tc-bg: color-mix(in srgb, #B4C878 14%, var(--bg));
  --tc-fg: color-mix(in srgb, #6B7F2A 82%, var(--text));
  --tc-bd: color-mix(in srgb, #B4C878 35%, var(--border));
  --tc-glow: rgba(180, 200, 120, .35);
}
.tag-cloud__item--c2 {
  --tc-bg: color-mix(in srgb, #ff8a5c 16%, var(--bg));
  --tc-fg: color-mix(in srgb, #c9512a 92%, var(--text));
  --tc-bd: color-mix(in srgb, #ff8a5c 42%, var(--border));
  --tc-glow: rgba(255, 138, 92, .42);
}
.tag-cloud__item:hover,
.tag-cloud__item:focus-visible {
  transform: translateY(-2px) scale(1.04);
  box-shadow:
    0 6px 16px -6px var(--tc-glow),
    0 0 0 4px color-mix(in srgb, var(--tc-glow) 60%, transparent);
}
.tag-cloud__item:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
.tag-cloud__item:active {
  transform: translateY(0) scale(.98);
  transition-duration: .1s;
}
.tag-cloud__name {
  font-feature-settings: "ss01" on, "tnum" on;
}
.tag-cloud__count {
  font-size: .68em;
  font-weight: 700;
  color: color-mix(in srgb, var(--tc-fg) 55%, transparent);
  font-variant-numeric: tabular-nums;
  padding: 0 .15em;
  border-radius: 4px;
  transition: color .2s ease, background .2s ease;
}
.tag-cloud__item:hover .tag-cloud__count,
.tag-cloud__item:focus-visible .tag-cloud__count {
  color: color-mix(in srgb, var(--tc-fg) 95%, transparent);
  background: color-mix(in srgb, var(--tc-glow) 30%, transparent);
}

/* ── Archive bar-chart timeline ─────────────────────────────────── */
.archive-spark {
  --spark-h: 92px;
  --spark-gap: 4px;
  position: relative;
  margin-top: .6rem;
  padding-top: 1.4rem;          /* room for hover count to pop above */
  padding-bottom: 1.2rem;       /* room for month label below the axis */
}
.archive-spark__bars {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--spark-gap);
  align-items: end;
  height: var(--spark-h);
  position: relative;
  z-index: 1;
}
.archive-spark__bar {
  position: relative;
  display: block;
  height: 100%;
  margin: 0;
}
.archive-spark__link {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: var(--text-muted);
  border-radius: 4px 4px 0 0;
  transition: transform .22s cubic-bezier(.22, 1.5, .36, 1);
}
.archive-spark__fill {
  display: block;
  width: 100%;
  /* Bar grows from baseline; the height starts at 0 and animates to the
     inline `--bar-h` percentage on load. The animation is staggered via
     animation-delay derived from the column index using `:nth-child`. */
  height: 0;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--teal) 70%, transparent) 0%,
    color-mix(in srgb, var(--teal) 35%, transparent) 100%);
  border-top: 1px solid color-mix(in srgb, var(--teal) 90%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15);
  animation: jacar-spark-rise .9s cubic-bezier(.22, 1.5, .36, 1) forwards;
  animation-delay: calc(var(--bar-i, 0) * 60ms);
  transition: filter .2s ease, background .2s ease;
}
@keyframes jacar-spark-rise {
  from { height: 0; }
  to   { height: var(--bar-h, 0%); }
}
@media (prefers-reduced-motion: reduce) {
  .archive-spark__fill {
    animation: none;
    height: var(--bar-h, 0%);
  }
}
/* Stagger by column position — 12 explicit rules so we don't need JS. */
.archive-spark__bar:nth-child(1)  .archive-spark__fill { --bar-i: 0; }
.archive-spark__bar:nth-child(2)  .archive-spark__fill { --bar-i: 1; }
.archive-spark__bar:nth-child(3)  .archive-spark__fill { --bar-i: 2; }
.archive-spark__bar:nth-child(4)  .archive-spark__fill { --bar-i: 3; }
.archive-spark__bar:nth-child(5)  .archive-spark__fill { --bar-i: 4; }
.archive-spark__bar:nth-child(6)  .archive-spark__fill { --bar-i: 5; }
.archive-spark__bar:nth-child(7)  .archive-spark__fill { --bar-i: 6; }
.archive-spark__bar:nth-child(8)  .archive-spark__fill { --bar-i: 7; }
.archive-spark__bar:nth-child(9)  .archive-spark__fill { --bar-i: 8; }
.archive-spark__bar:nth-child(10) .archive-spark__fill { --bar-i: 9; }
.archive-spark__bar:nth-child(11) .archive-spark__fill { --bar-i: 10; }
.archive-spark__bar:nth-child(12) .archive-spark__fill { --bar-i: 11; }

.archive-spark__count {
  position: absolute;
  top: -1.15rem;
  left: 50%;
  transform: translate(-50%, 4px);
  font-size: .7rem;
  font-weight: 700;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
  white-space: nowrap;
}
.archive-spark__lbl {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .03em;
  color: var(--text-faint);
  text-transform: uppercase;
  white-space: nowrap;
}
.archive-spark__link:hover,
.archive-spark__link:focus-visible {
  transform: translateY(-2px);
}
.archive-spark__link:hover .archive-spark__fill,
.archive-spark__link:focus-visible .archive-spark__fill {
  filter: brightness(1.15) saturate(1.15);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--teal) 90%, transparent) 0%,
    color-mix(in srgb, var(--teal) 55%, transparent) 100%);
  box-shadow: 0 6px 14px -6px rgba(43, 138, 148, .55);
}
.archive-spark__link:hover .archive-spark__count,
.archive-spark__link:focus-visible .archive-spark__count {
  opacity: 1;
  transform: translate(-50%, 0);
  color: var(--text);
}
.archive-spark__link:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 4px;
}
.archive-spark__link--inert {
  cursor: default;
}
.archive-spark__bar.is-empty .archive-spark__fill {
  background: color-mix(in srgb, var(--text-faint) 35%, transparent);
  border-top-color: color-mix(in srgb, var(--text-faint) 60%, transparent);
  box-shadow: none;
  /* Empty months still render as a 2px hairline along the axis so the
     timeline reads as continuous. */
  min-height: 2px;
}
.archive-spark__bar.is-empty .archive-spark__lbl {
  color: var(--text-faint);
}
.archive-spark__bar.is-current .archive-spark__fill {
  background: linear-gradient(180deg,
    color-mix(in srgb, #B4C878 80%, var(--teal)) 0%,
    color-mix(in srgb, var(--teal) 70%, transparent) 100%);
  border-top: 2px solid #B4C878;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .25),
    0 0 0 1px color-mix(in srgb, #B4C878 30%, transparent);
}
.archive-spark__bar.is-current .archive-spark__lbl {
  color: var(--teal);
  font-weight: 700;
}
/* Baseline axis under the bars. */
.archive-spark__axis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1.2rem;          /* matches padding-bottom */
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--border) 8%,
    var(--border) 92%,
    transparent 100%);
  z-index: 0;
}

/* ============================================================
   ÚLTIMAS ENTRADAS — 10 latest posts as a polished list.
   List rows: index · thumbnail · meta+title+excerpt · arrow.
   Hover: row lifts, thumb scales, arrow translates, title shifts
   to teal. Top rule on each item gives editorial rhythm; the
   top-most rule is a brand-teal-gradient bar that separates the
   section visually from the bento above it.
   ============================================================ */

.home-latest {
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2.5rem, 5vw, 4.5rem);
  background:
    radial-gradient(1100px 350px at 0% 0%, rgba(43, 138, 148, 0.06) 0%, transparent 60%),
    radial-gradient(900px 300px at 100% 100%, rgba(180, 200, 120, 0.06) 0%, transparent 60%);
}

.home-latest__head {
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  padding-left: clamp(0px, 2vw, 24px);
  position: relative;
}
.home-latest__head::before {
  content: "";
  display: block;
  height: 3px;
  width: clamp(3rem, 8vw, 6rem);
  margin-bottom: 1rem;
  background: linear-gradient(90deg, var(--brand-teal, #2B8A94), var(--brand-lime, #B4C878));
  border-radius: 999px;
}
.home-latest__kicker {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: var(--color-text-muted, #64748b);
  margin: 0 0 0.5rem;
}
.home-latest__pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--brand-teal, #2B8A94);
  box-shadow: 0 0 0 0 rgba(43, 138, 148, 0.6);
  animation: home-latest-pulse 2.6s ease-out infinite;
}
@keyframes home-latest-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(43, 138, 148, 0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(43, 138, 148, 0); }
  100% { box-shadow: 0 0 0 0 rgba(43, 138, 148, 0); }
}
.home-latest__sep { color: var(--color-border, #e2e8f0); margin: 0 0.25rem; }
.home-latest__title {
  font-family: var(--font-heading, var(--font-sans));
  font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-weight: 800;
  margin: 0;
  text-wrap: balance;
  color: var(--color-text-body);
  background: linear-gradient(96deg, var(--color-text-body) 30%, var(--brand-teal, #2B8A94) 100%);
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
}

.home-latest__list {
  list-style: none;
  margin: 0; padding: 0;
}

.home-latest__item {
  position: relative;
  border-top: 1px solid var(--color-border, rgba(0,0,0,0.08));
}
.home-latest__item:first-child { border-top: 0; }
.home-latest__item:last-child  { border-bottom: 1px solid var(--color-border, rgba(0,0,0,0.08)); }

.home-latest__link {
  display: grid;
  grid-template-columns: 3rem 200px 1fr auto;
  gap: clamp(0.75rem, 2vw, 1.5rem);
  align-items: center;
  padding: clamp(1rem, 2.5vw, 1.5rem) 0.5rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.25s ease, transform 0.25s ease;
}
.home-latest__link:hover,
.home-latest__link:focus-visible {
  background: linear-gradient(90deg, rgba(43,138,148,0.04) 0%, transparent 100%);
  outline: none;
}

.home-latest__index {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #94a3b8);
  text-align: right;
  font-variant-numeric: tabular-nums;
  transition: color 0.25s ease;
}
.home-latest__link:hover .home-latest__index { color: var(--brand-teal, #2B8A94); }

.home-latest__thumb {
  display: block;
  width: 200px; height: 124px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-bg-elevated, #f8fafc);
  border: 1px solid var(--color-border, rgba(0,0,0,0.08));
  position: relative;
  flex-shrink: 0;
}
.home-latest__thumb-img,
.home-latest__thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.home-latest__link:hover .home-latest__thumb-img,
.home-latest__link:hover .home-latest__thumb img {
  transform: scale(1.06);
}
.home-latest__thumb-fallback {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(43,138,148,0.15), rgba(180,200,120,0.15)),
    radial-gradient(circle at 30% 30%, rgba(43,138,148,0.20) 0%, transparent 50%);
}

.home-latest__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.home-latest__meta {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, #64748b);
  margin-top: .35rem;
}
.home-latest__meta.post-meta--strip { gap: .25rem .8rem; }
.home-latest__meta .post-meta__item-icon svg { width: 12px; height: 12px; }
.home-latest__meta .post-meta__stars,
.home-latest__meta .post-meta__stars-track svg,
.home-latest__meta .post-meta__stars-fill svg { height: 12px; }
.home-latest__meta .post-meta__stars-track svg,
.home-latest__meta .post-meta__stars-fill svg { width: 12px; }
.home-latest__cat {
  color: var(--brand-teal, #2B8A94);
  font-weight: 700;
}
.home-latest__heading {
  font-family: var(--font-heading, var(--font-sans));
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.25;
  font-weight: 700;
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: balance;
  color: var(--color-text-body);
  transition: color 0.25s ease;
}
.home-latest__link:hover .home-latest__heading { color: var(--brand-teal, #2B8A94); }
.home-latest__excerpt {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--color-text-muted, #475569);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.home-latest__arrow {
  font-size: 1.5rem;
  color: var(--color-text-muted, #94a3b8);
  transition: color 0.25s ease, transform 0.25s ease;
  padding: 0 0.5rem;
}
.home-latest__link:hover .home-latest__arrow {
  color: var(--brand-teal, #2B8A94);
  transform: translateX(6px);
}

/* Tablet */
@media (max-width: 1023px) {
  .home-latest__link {
    grid-template-columns: 2.5rem 160px 1fr 1.5rem;
    gap: 1rem;
  }
  .home-latest__thumb { width: 160px; height: 104px; }
  .home-latest__excerpt { -webkit-line-clamp: 2; }
}
/* Mobile */
@media (max-width: 639px) {
  .home-latest__link {
    grid-template-columns: 2rem 100px 1fr;
    gap: 0.75rem;
    padding: 1rem 0.25rem;
  }
  .home-latest__thumb { width: 100px; height: 76px; border-radius: 10px; }
  .home-latest__heading { font-size: 1rem; }
  .home-latest__excerpt { font-size: 0.85rem; -webkit-line-clamp: 2; }
  .home-latest__arrow { display: none; }
  .home-latest__index { font-size: 0.8rem; }
}

/* Reduced-motion: kill thumbnail scale, pulse */
@media (prefers-reduced-motion: reduce) {
  .home-latest__pulse { animation: none; box-shadow: 0 0 0 4px rgba(43,138,148,0.18); }
  .home-latest__thumb-img,
  .home-latest__thumb img { transition: none; }
  .home-latest__link:hover .home-latest__thumb-img,
  .home-latest__link:hover .home-latest__thumb img { transform: none; }
  .home-latest__link:hover .home-latest__arrow { transform: none; }
}

/* Dark theme adjustments */
[data-theme="dark"] .home-latest {
  background:
    radial-gradient(1100px 350px at 0% 0%, rgba(62, 203, 216, 0.05) 0%, transparent 60%),
    radial-gradient(900px 300px at 100% 100%, rgba(200, 216, 138, 0.04) 0%, transparent 60%);
}
[data-theme="dark"] .home-latest__link:hover,
[data-theme="dark"] .home-latest__link:focus-visible {
  background: linear-gradient(90deg, rgba(62,203,216,0.06) 0%, transparent 100%);
}
@media (prefers-color-scheme: dark) {
  [data-theme="system"] .home-latest {
    background:
      radial-gradient(1100px 350px at 0% 0%, rgba(62, 203, 216, 0.05) 0%, transparent 60%),
      radial-gradient(900px 300px at 100% 100%, rgba(200, 216, 138, 0.04) 0%, transparent 60%);
  }
  [data-theme="system"] .home-latest__link:hover,
  [data-theme="system"] .home-latest__link:focus-visible {
    background: linear-gradient(90deg, rgba(62,203,216,0.06) 0%, transparent 100%);
  }
}

/* ============================================================
   BENTO RESPONSIVE TWEAKS — homepage editorial grid sizing.
   The base bento system (.bento-section, .bento-grid, card variants)
   lives in components.css; these media-query overrides shape the
   homepage layout at <768px (1-col stack) and 768–1023px (2-col).
   ============================================================ */

/* ── Mobile: single column ── */
@media (max-width: 767px) {
  .bento-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .bento-card--featured {
    grid-column: 1;
    grid-row: auto;
    height: 360px;
  }
  .bento-card--medium .bento-card__img { height: 180px; }
  .bento-section { padding: 1.5rem 0 2.5rem; }
}

/* ── Tablet: 2 columns ── */
@media (min-width: 768px) and (max-width: 1023px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 320px 320px auto auto;
  }
  .bento-card--featured {
    grid-column: 1 / span 2;
    grid-row: 1 / span 1;
    height: 320px;
  }
}

/* ============================================================
   Legacy homepage hero responsive tweak — the old .home-hero markup
   was retired but the .hero-title selector lingered in style.css's
   responsive block. Kept here in case any legacy template fragment
   still ships .hero-title; safe to delete in Task 5.x once verified.
   ============================================================ */
@media (max-width: 640px) {
  .hero-title { font-size: clamp(1.75rem, 7vw, 2.5rem); }
}

/* The Hero shell (.cp-hero / .cp-hero__* / .cp-cta / .cp-status-* /
 * .cp-signal) and its mobile + RM blocks moved to cp-components.css
 * (Phase 3 Task 3.2). The JCS hero recipe below is homepage-specific
 * (background visuals only) and stays here. */

/* ============================================================
 * JCS hero recipe — was assets/css/jcs-hero.css (merged 2026-04-28).
 * JCS-canon hero background recipe — homepage variant only here.
 *   .cp-hero       — full "wow" treatment (homepage)
 * The sibling .page-header variant (archive / category / tag / author /
 * search / date hero) lives in layout.css, since home.css only loads on
 * is_front_page() per Phase 3 (Task 3.1).
 *
 * Adapted verbatim from jacarsystems.com (.jacar-hero-wow + .jacar-hero).
 * Brand pair: teal #2B8A94, lime #B4C878, deep blue #0b1730.
 *
 * Order matters: this block must follow the "Hero" block above so its
 * .cp-hero__title .cp-hero__tail override (lime-on-paper gradient + the
 * dark-hero white-text rules) wins the cascade — same outcome as the
 * pre-merge enqueue order in inc/hero-page.php (jacar-hero, then jacar-jcs-hero).
 * ============================================================ */

/* ==== keyframes — gradient drift + blob float + parallax-on-scroll ==== */
@keyframes jcs-hero-gradient-shift {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}
@keyframes jcs-hero-float {
  0%, 100% { transform: translate(0, 0)   scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.08); }
  66%      { transform: translate(-30px, 40px) scale(0.95); }
}
@keyframes jcs-hero-parallax {
  to { transform: translateY(-12%); }
}

/* ==== shared bg layers (homepage hero — full "wow") ==== */
.cp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(1200px 700px at 15% 25%, rgba(69, 123, 157, 0.60) 0%, transparent 55%),
    radial-gradient( 900px 550px at 85% 70%, rgba(43, 138, 148, 0.32) 0%, transparent 55%),
    radial-gradient( 700px 450px at 50% 10%, rgba(180, 200, 120, 0.18) 0%, transparent 60%),
    linear-gradient(135deg, #0b1730 0%, #152949 35%, #1a1a1a 65%, #0d1f3a 100%);
  background-size: 200% 200%;
  animation: jcs-hero-gradient-shift 24s ease-in-out infinite;
}

.cp-hero::before {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23A8DADC' stroke-width='0.5' stroke-opacity='0.15'%3E%3Cpath d='M0 0h60v60H0z'/%3E%3Cpath d='M30 0v60M0 30h60'/%3E%3C/g%3E%3Ccircle cx='30' cy='30' r='1.5' fill='%23A8DADC' fill-opacity='0.30'/%3E%3C/svg%3E");
  background-size: 60px 60px;
  /* parallax via scroll-driven animation where supported (no-op elsewhere) */
  animation: jcs-hero-parallax linear;
  animation-timeline: scroll();
  animation-range: 0 400px;
}

.cp-hero::after {
  content: "";
  position: absolute;
  top: -25%; right: -15%;
  width: 550px; height: 550px;
  background: radial-gradient(circle, rgba(43, 138, 148, 0.28) 0%, transparent 70%);
  border-radius: 50%;
  filter: blur(50px);
  animation: jcs-hero-float 22s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

/* Make sure inner content sits above the texture layers. */
.cp-hero > .cp-hero__inner,
.cp-hero > .cp-hero__ctas,
.cp-hero > .cp-status-strip { position: relative; z-index: 2; }

/* Headlines on the dark hero are always white (text-shadow for AAA on the
   varied gradient stops) — overrides the brand-gradient text-fill from
   the Hero block above's .cp-hero__title .cp-hero__tail when we *don't*
   want gradient. */
.cp-hero h1,
.cp-hero h2,
.cp-hero .cp-hero__title { color: #ffffff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.25); }
/* Tail keeps its lime-on-paper gradient — it's the rotating accent, intentional. */
.cp-hero .cp-hero__title .cp-hero__tail {
  background: linear-gradient(120deg, #B4C878 0%, #ffffff 50%, #B4C878 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  text-shadow: none;
}

/* ==== reduced motion: kill the drifting gradient + floating blob + parallax ==== */
/* (.page-header companion rules live in layout.css alongside the .page-header
 *  recipe itself, since archive/category/tag/author/search/date pages don't
 *  load home.css.) */
@media (prefers-reduced-motion: reduce) {
  .cp-hero {
    animation: none !important;
    background-size: 100% 100% !important;
  }
  .cp-hero::before,
  .cp-hero::after {
    animation: none !important;
  }
}

/* ============================================================
   HOME SECTION DIVIDER — small face peeks between bento + latest
   ============================================================ */
.cp-home__divider {
  display: block;
  width: clamp(220px, 40vw, 320px);
  margin: clamp(1rem, 2vw, 1.75rem) auto clamp(0.5rem, 1.5vw, 1rem);
  pointer-events: none;
  --mx: 0; --my: 0; --mouse-near: 0;
}
.cp-home__divider__svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  pointer-events: auto;
}
.cp-home__divider__face {
  transform-box: fill-box;
  transform-origin: center;
  transform: rotate(calc(var(--mx) * 4deg));
  transition: transform 220ms var(--ease-out);
}
.cp-home__divider__pupil {
  transform-box: fill-box;
  transform-origin: center;
  transform: translate(calc(var(--mx) * 1.6px), calc(var(--my) * 1.4px));
  transition: transform 90ms linear;
}
@media (prefers-reduced-motion: reduce) {
  .cp-home__divider__face,
  .cp-home__divider__pupil {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
}