/* assets/css/v2/pages-home.css — Layout of the Phase 6B homepage: hero, section heads, featured strip, grids, chips, ranked list, archive strip, subscribe band
   keywords: homepage, hero, grid, featured, chips, subscribe, mobile first, logical properties, no animation
   Needs tokens-news, base, ad, components-cards. Static blocks only: no sticky, fixed, transform, opacity or animation. Ad slots get their gap from ad.css. */

.hm-sec { padding-block-start: var(--sp-7); }
.hm-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); margin-block-end: var(--sp-5); padding-block-start: var(--sp-3); border-block-start: var(--rule); }
.hm-head h2 { font-size: var(--fs-h3); }
.hm-head h2 a { color: var(--c-text); text-decoration: none; }
.hm-head h2 a:hover { color: var(--c-brand); }
.hm-more { display: inline-flex; align-items: center; min-height: 44px; min-inline-size: 44px; font-weight: var(--fw-strong); text-decoration: none; }
.hm-more::after { content: "\2192"; margin-inline-start: var(--sp-2); }
[dir="rtl"] .hm-more::after { content: "\2190"; }

/* ---- hero ---- */
.hm-hero { padding-block: var(--sp-7) var(--sp-5); background: var(--c-surface); border-block-end: var(--rule); }
.hm-hero-inner { border-inline-start: 8px solid var(--c-brand); padding-inline-start: var(--sp-5); }
.hm-eyebrow { margin-block-end: var(--sp-3); color: var(--c-brand); font-weight: var(--fw-strong); text-transform: uppercase; letter-spacing: .08em; font-size: var(--fs-sm); }
.hm-hero h1 { max-inline-size: 24ch; }
.hm-lede { max-inline-size: 60ch; margin-block-start: var(--sp-4); color: var(--c-muted); font-size: var(--fs-lg); }
.hm-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-5); }

/* ---- grids: one column on phones, more as the screen allows ---- */
.hm-grid, .hm-featured-grid { display: grid; gap: var(--sp-6) var(--sp-5); grid-template-columns: minmax(0, 1fr); }
.hm-grid--four { gap: var(--sp-5); }
@media (min-width: 600px) { .hm-grid, .hm-featured-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hm-featured-grid .card--lead { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .hm-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hm-featured-grid { grid-template-columns: 2fr 1fr; grid-template-rows: auto auto; }
  .hm-featured-grid .card--lead { grid-column: 1; grid-row: 1 / span 2; }
}
@media (max-width: 599px) { .hm-grid--four { gap: var(--sp-4); } }

/* ---- topic chips ---- */
.hm-chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); list-style: none; }

/* ---- most read ---- */
.hm-rank { counter-reset: rank; list-style: none; display: grid; gap: 0; }
.hm-rank li { counter-increment: rank; display: grid; grid-template-columns: 56px minmax(0, 1fr); align-items: start; column-gap: var(--sp-4); padding-block: var(--sp-4); border-block-end: 1px solid var(--c-line); }
.hm-rank li::before { content: counter(rank); grid-row: 1 / span 2; color: var(--c-brand); font-family: var(--font-display); font-weight: var(--fw-display); font-size: 2.4rem; line-height: 1; }
.hm-rank h3 { font-size: var(--fs-lg); line-height: 1.35; overflow-wrap: anywhere; }
.hm-rank h3 a { display: inline-block; min-block-size: 44px; color: var(--c-text); text-decoration: none; }
.hm-rank h3 a:hover { color: var(--c-brand); text-decoration: underline; }
@media (min-width: 768px) { .hm-rank { grid-template-columns: 1fr 1fr; column-gap: var(--sp-6); } }

/* ---- archive strip ---- */
.hm-archive-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-block: var(--sp-5); border-block: var(--rule); }
.hm-archive-inner strong { color: var(--c-brand); font-size: var(--fs-h3); }

/* ---- subscribe band (in the page flow, never floating) ---- */
.hm-subscribe { margin-block-start: var(--sp-7); padding-block: var(--sp-6); background: var(--c-inverse-bg); color: var(--c-inverse-text); }
.hm-sub-inner { display: grid; gap: var(--sp-5); }
.hm-subscribe h2 { font-size: var(--fs-h3); }
.hm-subscribe p { color: #d6d6dc; font-size: 1rem; }
.hm-subscribe form { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.hm-subscribe input[type="email"] { flex: 1 1 220px; min-inline-size: 0; min-block-size: 48px; padding-inline: var(--sp-4); border: 2px solid var(--c-bg); border-radius: var(--radius); background: var(--c-bg); color: var(--c-text); }
.hm-note { margin-block-start: var(--sp-2); font-size: var(--fs-sm); }
.newsletter-status { min-block-size: 1.6em; margin-block-start: var(--sp-2); font-weight: var(--fw-strong); }
.newsletter-status.ok { color: #9dffb0; }
.newsletter-status.err { color: #ffb3bf; }
.honeypot { position: absolute; inset-inline-start: -9999px; inline-size: 1px; block-size: 1px; overflow: hidden; }
@media (min-width: 768px) { .hm-sub-inner { grid-template-columns: 1fr 1fr; align-items: center; } }

/* ---- footer joins the subscribe band when no ad sits between them; keyboard focus on dark bands ---- */
.hm-flush .hm-footer { margin-block-start: 0; }
.hm-subscribe :focus-visible, .hm-footer :focus-visible { outline-color: #fff; }
.hm-more:focus-visible, .hm-head h2 a:focus-visible, .hm-rank h3 a:focus-visible { outline-offset: 3px; }

/* ---- phones: tighter vertical rhythm so a full page stays short ---- */
@media (max-width: 599px) {
  .hm-sec { padding-block-start: var(--sp-6); }
  .hm-head { margin-block-end: var(--sp-4); }
  .hm-hero { padding-block: var(--sp-4) var(--sp-3); }
  .hm-lede { margin-block-start: var(--sp-3); font-size: 1.0625rem; line-height: 1.6; }
  .hm-actions { margin-block-start: var(--sp-4); }
  .hm-grid, .hm-featured-grid { gap: var(--sp-4); }
  .hm-chips { gap: var(--sp-2); }
  .hm-rank li { padding-block: var(--sp-2); }
  .hm-archive-inner { padding-block: var(--sp-3); }
  .hm-subscribe { padding-block: var(--sp-5); margin-block-start: var(--sp-6); }
  .card--lead .card-excerpt { -webkit-line-clamp: 2; line-clamp: 2; }
}

/* ---- 0 published articles: quiet notice under the hero (plain text, no links, no ads) ---- */
.hm-soon h2 { font-size: var(--fs-h3); }
.hm-soon p { max-inline-size: 60ch; margin-block-start: var(--sp-2); color: var(--c-muted); font-size: var(--fs-lg); }
.hm-soon-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-4); list-style: none; }
.hm-soon-list li { padding: var(--sp-2) var(--sp-4); border: 1px solid var(--c-line); border-radius: 999px; font-weight: var(--fw-strong); }