/* ==========================================================================
   By Jillian Rose — Category Archive
   Only loaded on real category archives (see functions.php: is_category()),
   never site-wide. Reuses existing design-system tokens throughout — no
   new colors/fonts/spacing introduced. single-post.css is ALSO enqueued
   on category archives (see functions.php) specifically so the reused
   sidebar-card / popular-posts / newsletter-card components render with
   their real existing styles rather than being redefined here.
   ========================================================================== */

/* ---- Hero: text left / photo right, same grid+stretch+object-fit:cover
   technique as the Start Here hero (start-here.css .start-here-hero-*),
   so the photo's real crop is preserved (never stretched/distorted). ---- */
.cat-hero { padding: var(--space-4) 0 var(--space-5); }
.cat-hero-inner {
  display: grid;
  grid-template-columns: 55fr 45fr;
  gap: var(--space-5);
  align-items: stretch;
}
/* Centered per explicit request (was left-aligned) — eyebrow, H1, heart
   graphic, and description all now center within this column, still
   sitting left-of-photo in the desktop grid rather than a full redesign
   to a stacked/centered-over-photo hero. */
.cat-hero-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  justify-content: center;
  gap: var(--space-2);
}
/* Sized up from this site's usual hero-title clamp (used on Start
   Here/Contact/legal, capped at --text-h1) per explicit request — this
   one reads noticeably larger/more prominent than that shared baseline,
   with its own higher ceiling instead of the shared token. */
.cat-hero-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(38px, 5vw, 60px);
  line-height: 1.1;
  color: var(--color-text);
  margin: 0;
}
/* Real hand-drawn heart graphic (attachment #1524), hero-specific —
   replaces the SVG .cat-heading-divider used here previously (that
   shared component/class is untouched and still used in the sidebar's
   "About This Category" block). Sized by width on its real cropped
   ~0.81:1 aspect, height following automatically. */
.cat-hero-divider-img-wrap { line-height: 0; }
.cat-hero-divider-img {
  display: block;
  width: 46px;
  height: auto;
}
/* Reduced from the site's base body-copy size and switched to the
   muted secondary text color — reads as a smaller, more understated
   synopsis line instead of full-weight body text, matching similar
   small accent copy used elsewhere on the site (e.g. .cat-article-
   excerpt, .home-hero-excerpt). */
.cat-hero-desc {
  font-size: 14px;
  line-height: 1.65;
  color: var(--color-text-secondary);
  max-width: 44ch;
  margin: 0;
}
.cat-hero-photo-col { display: flex; }
.cat-hero-photo {
  flex: 1;
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  display: block;
  border-radius: var(--radius);
}
.cat-hero-photo-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  border: 1px dashed var(--color-border-interactive);
}
.cat-hero-photo-placeholder .icon { width: 40px; height: 40px; color: var(--color-text-secondary); }

/* ---- Layout: article feed + sidebar, ~35% sidebar width, matching the
   single-post layout's own grid pattern (single-post.css
   .single-post-layout). ---- */
.cat-content { padding: var(--space-6) 0; }
.cat-layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-5);
  align-items: start;
}

/* ---- "Showing all posts..." + sort ---- */
.cat-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.cat-feed-showing {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0;
}
.cat-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.cat-sort-link { color: var(--color-text-secondary); text-decoration: none; }
.cat-sort-link.is-active { color: var(--color-accent-dark); }
.cat-sort-link:hover { color: var(--color-text); }
.cat-sort-sep { color: var(--color-border-interactive); }

/* ---- Article rows: thin divider lines between rows, not cards with
   shadows/borders — per explicit instruction. ---- */
.cat-article-list { display: flex; flex-direction: column; }
.cat-article-row {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: inherit;
}
.cat-article-list .cat-article-row:first-child { padding-top: 0; }
.cat-article-thumb { width: 220px; flex-shrink: 0; }
.cat-article-img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}
.cat-article-img-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-secondary);
  border: 1px dashed var(--color-border-interactive);
}
.cat-article-img-placeholder .icon { width: 26px; height: 26px; color: var(--color-text-secondary); }
.cat-article-body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cat-article-label {
  display: inline-block;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin-bottom: 4px;
}
.cat-article-title {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  color: var(--color-text);
  margin: 0 0 4px;
}
.cat-article-row:hover .cat-article-title { color: var(--color-accent-dark); }
.cat-article-date {
  font-family: var(--font-sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-1);
}
.cat-article-excerpt {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-1);
}
.cat-article-readmore { margin-top: auto; }

.cat-empty {
  padding: var(--space-5) 0;
  text-align: center;
  color: var(--color-text-secondary);
}

/* ---- Pagination: WP core's the_posts_pagination() markup
   (nav.pagination > div.nav-links > .page-numbers) — real numbered
   links, not infinite scroll. ---- */
.pagination { margin-top: var(--space-4); }
.pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
}
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
}
.pagination a.page-numbers:hover { border-color: var(--color-accent); color: var(--color-accent-dark); }
.pagination .page-numbers.current {
  background: var(--color-button-fill);
  border-color: var(--color-button-fill);
  color: var(--color-white);
}
.pagination .page-numbers.dots { border: none; color: var(--color-text-secondary); }
.pagination .page-numbers.prev, .pagination .page-numbers.next { padding: 0 14px; }

/* ---- Sidebar ---- */
.cat-sidebar { display: flex; flex-direction: column; gap: var(--space-4); }
/* Same card look as single-post.css's .single-sidebar-card (also
   enqueued on this template) — redeclared here under a category-scoped
   class since About This Category / Browse Topics are new blocks on
   this page, not literal reuses of an existing single-post element (the
   real Popular Posts / Newsletter blocks below ARE literal reuses and
   already carry .single-sidebar-card themselves from that shared
   component, so they're untouched here). */
.cat-sidebar-card {
  background: var(--color-bg-secondary);
  border-radius: var(--radius);
  padding: var(--space-4);
  text-align: center;
}
.cat-sidebar-heading {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text);
  margin: 0 0 var(--space-2);
}
.cat-sidebar-about .cat-heading-divider { margin: 0 auto var(--space-2); }
.cat-sidebar-about p { font-size: 13.5px; color: var(--color-text-secondary); margin: 0; }

.cat-topics-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; background: var(--color-white); border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; text-align: left; }
.cat-topics-list li { border-bottom: 1px solid var(--color-border); }
.cat-topics-list li:last-child { border-bottom: none; }
.cat-topics-list a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-2) var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 500;
}
.cat-topics-list a:hover { color: var(--color-accent-dark); background: var(--color-bg-secondary); }
.cat-topics-list .icon { width: 15px; height: 15px; color: var(--color-accent-dark); }

/* Desktop order (real DOM/source order already matches this — these
   are explicit for clarity and to give the mobile override below
   something predictable to change): About(1) -> Browse Topics(2) ->
   Popular Posts(3, .single-sidebar-popular from single-post.css) ->
   Newsletter(4, .single-sidebar-newsletter from single-post.css). Both
   newsletters (this sidebar card AND the global full-width one called
   at the bottom of category.php) show on desktop — only mobile needs
   exactly one, per explicit instruction. */
.cat-sidebar-about { order: 1; }
.cat-sidebar-topics { order: 2; }
.cat-sidebar .single-sidebar-popular { order: 3; }
.cat-sidebar .single-sidebar-newsletter { order: 4; }

@media (max-width: 900px) {
  .cat-hero-inner { grid-template-columns: 1fr; }
  .cat-hero-photo { min-height: 240px; }
  .cat-layout { grid-template-columns: 1fr; }
  .cat-article-thumb { width: 160px; }

  /* Mobile order per explicit instruction: Browse Topics -> Newsletter
     -> Popular Posts. About This Category is hidden entirely (already
     shown in the hero). The sidebar newsletter card STAYS visible here
     (just repositioned) — it's now the page's one-and-only mobile
     newsletter CTA, so the separate global full-width one (below the
     feed/sidebar, before the footer) is hidden at this breakpoint
     instead, avoiding the two-CTA duplication explicitly flagged.
     Scoped to body.category (the real WP body class on every category
     archive) even though this stylesheet only loads on category pages
     anyway, just to keep the intent unambiguous. */
  .cat-sidebar-topics { order: 1; }
  .cat-sidebar .single-sidebar-newsletter { order: 2; }
  .cat-sidebar .single-sidebar-popular { order: 3; }
  .cat-sidebar-about { display: none; }
  .category .home-newsletter { display: none; }
}

@media (max-width: 560px) {
  .cat-article-row { flex-direction: column; }
  .cat-article-thumb { width: 100%; }
}