/* ==========================================================================
   By Jillian Rose — Articles Landing Page (is_home(), /blog/)
   Only loaded when is_home() is true (see index.php) — never on category
   archives, search, 404, or any other fallback context that also shares
   index.php. Reuses existing design-system tokens throughout; no new
   colors/fonts/spacing values introduced. newsletter.css is ALSO enqueued
   on this page (see index.php) specifically so the real, approved
   .newsletter-final-invite component (banner at the bottom of this page)
   renders with its existing styles rather than being redefined here.
   ========================================================================== */

/* ---------------------------------------------------------------------
   Shared: neutral placeholder for a real published post with no
   featured image set — same established "clearly a fallback, not a
   fabricated photo" visual language used sitewide (category.php's
   .cat-article-img-placeholder, homepage's placeholder cards): muted
   fill, dashed border, generic image-icon glyph.
   --------------------------------------------------------------------- */
.articles-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  border: 1px dashed var(--color-border-interactive);
}
.articles-photo-placeholder .icon { width: 32px; height: 32px; color: var(--color-text-secondary); }

/* ---------------------------------------------------------------------
   1. Intro — centered, generous but controlled spacing (the old page's
   main complaint was oversized empty gaps, so padding here is
   deliberately moderate, not maximal).
   --------------------------------------------------------------------- */
.articles-intro { padding: var(--space-6) 0 var(--space-4); text-align: center; }
.articles-intro-inner { max-width: 640px; margin: 0 auto; }
.articles-intro .eyebrow { display: block; }
/* Sept 2026: the supporting copy paragraph beneath the heading was
   removed (no longer approved). The heading now carries no bottom
   margin of its own, relying solely on the section's own reduced
   bottom padding for the gap down to the featured article below,
   rather than compounding two separate spacing sources into an
   oversized gap. */
.articles-intro-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(36px, 5vw, var(--text-h1));
  line-height: 1.1;
  color: var(--color-text);
  margin: var(--space-1) 0 0;
}

/* ---------------------------------------------------------------------
   2. Featured article — 60/40 image/text split (3fr/2fr), image left,
   text vertically centered beside it via align-items:center on the
   grid itself. Structural precedent: bjr_shop_featured() in shop.php
   (image plain/not linked, title plain text, only the CTA is a real
   anchor) — same pattern here for consistency.
   --------------------------------------------------------------------- */
.articles-featured { padding: 0 0 var(--space-5); }
.articles-featured-inner {
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--space-4);
  align-items: center;
}
.articles-featured-media { display: block; }
.articles-featured-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.articles-featured-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); }
/* Sept 2026 refinement: title sizes increased across this page for a
   noticeably stronger treatment, closer to the approved mockup. Weight
   stays 600 — the only real shipped weight for this face (fonts.css) is
   500, so 600 already relies on the browser's own bold synthesis, same
   as every other heading sitewide (no stronger real weight exists to
   switch to); size is the genuine, reliable lever here, same reasoning
   already documented for BJR Great Vibes in fonts.css, which also ships
   only one real weight. Featured title kept meaningfully larger than
   .articles-card-title below to preserve hierarchy. */
.articles-featured-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(32px, 3.6vw, 42px);
  line-height: 1.2;
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}
.articles-featured-excerpt {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-2);
}

/* ---------------------------------------------------------------------
   Shared: article link ("Read the Story") — used by both the featured
   CTA (a real <a>) and each grid card's CTA (a plain <span>, since the
   whole card is already one real link — see .articles-card below), so
   both render identically. No arrow icon: the sitewide .btn-tertiary
   component's arrow (components.css) is used consistently for non-
   article CTAs (Shop Hub's "Shop Now"/"Get It Free"), but the only
   other ARTICLE-specific instance of this pattern (category.php's
   .cat-article-readmore) is a single, isolated case — not a
   consistently-used sitewide article-link convention — so the arrow is
   dropped here per instruction rather than kept for "consistency" with
   something that isn't actually consistent. Uses --color-accent-dark,
   not the raw --color-accent, per this design system's own hard rule
   (tokens.css): --color-accent fails text contrast and is reserved for
   decorative/border use only.
   --------------------------------------------------------------------- */
.articles-link {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  text-decoration: none;
}
a.articles-link:hover,
.articles-card:hover .articles-link { color: var(--color-text); }

/* ---------------------------------------------------------------------
   3. Article grid — 3-column desktop, no card boxes/shadows (per
   explicit instruction): images uniform via aspect-ratio + object-fit,
   text flows naturally beneath with no fixed-height container, so
   varying title lengths never look "uneven" (there's no visible card
   boundary to break). Whole card is one real link, matching the
   sitewide .card convention.
   --------------------------------------------------------------------- */
.articles-grid-section { padding: 0 0 var(--space-5); }
.articles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4) var(--space-3);
}
.articles-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.articles-card-photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: var(--space-2);
}
.articles-card-body { display: flex; flex-direction: column; }
/* Sept 2026: bumped 23px -> 26px (+3px, a modest further increase per
   explicit request) — font-family/weight/color/line-height untouched.
   One flat value at every breakpoint, deliberately not responsive:
   the rest of this card's own type (.articles-card-excerpt,
   .articles-link) is also flat-sized across breakpoints, and the grid
   itself already reflows 3 -> 2 -> 1 columns (see the responsive block
   below), which is what actually keeps card width — and so title
   balance — reasonable at each size, not a shrinking title. */
.articles-card-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 26px;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0 0 var(--space-1);
}
.articles-card:hover .articles-card-title { color: var(--color-accent-dark); }
.articles-card-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-1);
}
.articles-empty { text-align: center; color: var(--color-text-secondary); padding: var(--space-4) 0; }

/* ---------------------------------------------------------------------
   4. Pagination — WP core's the_posts_pagination() default markup
   (nav.pagination > div.nav-links > a/span.page-numbers), same real
   structure already proven working in category.php. Scoped to
   body.blog (the real WP body class on the posts page) even though
   this stylesheet only loads there anyway, to keep the intent
   unambiguous — same convention category.css uses for body.category.
   --------------------------------------------------------------------- */
body.blog .pagination { margin: var(--space-2) 0 var(--space-6); }
body.blog .pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
body.blog .pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 var(--space-2);
  border-radius: var(--radius);
  border: 1px solid var(--color-border-interactive);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--color-text);
  text-decoration: none;
}
body.blog .pagination a.page-numbers:hover { border-color: var(--color-accent-dark); color: var(--color-accent-dark); }
body.blog .pagination .page-numbers.current {
  background: var(--color-button-fill);
  border-color: var(--color-button-fill);
  color: var(--color-white);
}
body.blog .pagination .page-numbers.dots { border: none; color: var(--color-text-secondary); }
body.blog .pagination .page-numbers.prev { padding: 0 var(--space-3); }
/* The "next" link is literally "View More Stories" (see index.php) —
   styled as the page's one prominent outlined button per the approved
   mockup: dusty-rose text/border, wide tracking, comfortable padding,
   filling with the same accessible --color-button-fill on hover as
   every other outlined button sitewide (.btn-secondary). As of this
   refinement only 4 posts are published in total (1 featured + 3 in
   the grid, all fitting on page 1 with room to spare), so this link
   does not currently render at all — the_posts_pagination() only ever
   outputs it once a real second page of posts exists, so nothing
   decorative/non-functional is live today. */
body.blog .pagination .page-numbers.next {
  padding: 0 var(--space-4);
  border-color: var(--color-accent-dark);
  color: var(--color-accent-dark);
  letter-spacing: .12em;
}
body.blog .pagination a.page-numbers.next:hover {
  background: var(--color-button-fill);
  border-color: var(--color-button-fill);
  color: var(--color-white);
}

/* ---------------------------------------------------------------------
   5. Newsletter banner — only page-specific override needed on top of
   the reused .newsletter-final-invite component: its own margin-top
   (var(--space-6), tuned for the Newsletter page's own preceding
   section) is replaced with a smaller value that fits this page's
   tighter rhythm after the grid/pagination above, without touching the
   shared component's own rule in newsletter.css.
   --------------------------------------------------------------------- */
.articles-newsletter-invite { margin-top: 0; }

/* ---------------------------------------------------------------------
   Responsive — same breakpoints used sitewide (900 / 680 / 560px).
   Tablet: grid drops to 2 columns; featured stays 2-column (fits
   cleanly at this width, per explicit allowance). Mobile: everything
   stacks 1-column, image before text (already true via source order).
   --------------------------------------------------------------------- */
@media (max-width: 900px) {
  .articles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .articles-intro { padding: var(--space-5) 0 var(--space-4); }
  .articles-featured-inner { grid-template-columns: 1fr; gap: var(--space-3); }
  .articles-featured-text { align-items: flex-start; }
  .articles-grid { grid-template-columns: 1fr; gap: var(--space-4); }
}