/* ============================================================================
   SimplePadel — category / tag archive card layout
   Overrides Twenty Twenty's stacked archive into a branded responsive card grid.
   Scoped to body.archive so it never touches singular posts/pages.
   Mechanism: #site-content becomes a CSS grid; the header + pagination span all
   columns, each <article class="post"> flows in as a card.
   NOTE: the theme sets html{font-size:62.5%} (10px root) so this file uses px
   for type to stay predictable.
   ============================================================================ */

body.archive {
  --sp-paper:#fff; --sp-line:#E7E3DA;
  --sp-ink:#16140F; --sp-ink-soft:#54514A; --sp-ink-faint:#8A877E;
  --sp-green:#C2E03A; --sp-green-deep:#4F6B0A;
}

/* ---- branded intro (term title + lede; output by the plugin's archive filters) ---- */
body.archive .archive-header {
  padding: 56px 0 12px !important;
  border-bottom: 0 !important;
}
body.archive .archive-header.has-text-align-center { text-align: left !important; }
body.archive .archive-header-inner {
  max-width: 1200px !important; margin: 0 auto !important; padding: 0 32px !important;
}
body.archive .archive-title {
  font-family: "Playfair Display", Georgia, serif !important;
  font-weight: 800 !important; font-size: clamp(34px, 4.6vw, 54px) !important;
  line-height: 1.05 !important; letter-spacing: -0.02em !important;
  text-align: left !important; color: var(--sp-ink) !important; margin: 0 !important;
  max-width: none !important;
}
body.archive .archive-title .color-accent { color: var(--sp-green-deep); }
body.archive .archive-title .hl {
  background-image: linear-gradient(180deg, transparent 0 56%, var(--sp-green) 56% 92%, transparent 92%);
  padding-inline: .05em;
}
body.archive .archive-subtitle {
  max-width: 64ch !important; margin: 20px 0 0 !important; padding: 0 !important;
  text-align: left !important; float: none !important;
}
body.archive .sp-arch-lede {
  font-size: 18px !important; line-height: 1.55 !important; color: var(--sp-ink-soft) !important; margin: 0 !important;
}
body.archive .sp-arch-trust {
  margin: 16px 0 0 !important; font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--sp-ink-faint);
}
body.archive .sp-arch-trust .dot { color: var(--sp-green-deep); margin: 0 8px; }

/* ---- #site-content -> centered card grid ---- */
body.archive #site-content {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 0 32px 64px !important;
  box-sizing: border-box;
}
body.archive .archive-header,
body.archive .pagination-wrapper,
body.archive .no-search-results-form,
body.archive .pagination-single { grid-column: 1 / -1; }
/* Twenty Twenty injects <hr class="post-separator"> between posts — they'd take
   grid cells and stagger the layout. Remove them in the card grid. */
body.archive #site-content > .post-separator { display: none !important; }

/* ---- each post -> card ---- */
body.archive .post {
  margin: 0 !important;
  padding: 0 !important;
  background: var(--sp-paper);
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
body.archive .post:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 42px -26px rgba(0,0,0,.4);
  border-color: #d8d2c6;
}

/* image first, full-bleed 4:3 */
body.archive .post .featured-media { order: 1; margin: 0 !important; }
body.archive .post .featured-media-inner {
  max-width: none !important; margin: 0 !important; padding: 0 !important;
}
body.archive .post .featured-media img {
  width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block;
}
body.archive .post .featured-media figcaption { display: none; }
body.archive .post:not(.has-post-thumbnail) .featured-media { display: none; }

/* title */
body.archive .post .entry-header {
  order: 2; margin: 0 !important; padding: 0 !important; text-align: left !important;
}
body.archive .post .entry-header-inner {
  max-width: none !important; margin: 0 !important; padding: 20px 22px 0 !important;
}
body.archive .post .entry-title {
  font-size: 21px !important; line-height: 1.18 !important; margin: 0 !important;
  text-align: left !important; letter-spacing: -0.01em;
}
body.archive .post .entry-title a { color: var(--sp-ink); text-decoration: none; }
body.archive .post:hover .entry-title a { color: var(--sp-green-deep); }

/* meta line: keep the date, drop the redundant category (this IS a category page) */
body.archive .post .post-meta-wrapper { margin: 10px 0 0 !important; }
body.archive .post .post-meta {
  justify-content: flex-start !important; gap: 0 !important;
  font-size: 13px; color: var(--sp-ink-faint);
}
body.archive .post .post-categories { display: none !important; }
body.archive .post .post-meta .meta-icon { margin-right: 6px !important; }
body.archive .post .post-meta .meta-icon svg { width: 14px; height: 14px; }

/* body: hide the prose/breadcrumb in the card; keep only a tidy read-more link */
body.archive .post .post-inner {
  order: 3; margin: 0 !important; padding: 0 !important;
  display: flex; flex-direction: column; flex: 1;
}
body.archive .post .entry-content {
  max-width: none !important; margin: 0 !important; padding: 0 !important;
  display: flex; flex-direction: column; flex: 1;
  font-size: 0 !important; /* collapse stray bare text nodes (posts with no <!--more--> tag); read-more sets its own size */
}
/* Hide ALL card-body content (paragraphs, breadcrumb, funnel/group boxes, lists,
   tables, images — whatever a post leads with) and keep only the read-more link,
   so every card is uniform regardless of how the post content starts. */
body.archive .post .entry-content > * { display: none !important; }
body.archive .post .entry-content > .read-more-button-wrap { display: block !important; }
body.archive .post .post-inner > .section-inner { display: none !important; } /* per-post tags footer */

/* read-more -> small brand link pinned to card bottom */
body.archive .post .read-more-button-wrap {
  margin: auto 0 0 !important; padding: 16px 22px 22px !important;
}
/* the actual pill is a nested <span class="faux-button"> — flatten it to a text link */
body.archive .post .read-more-button-wrap .more-link .faux-button {
  display: inline-block !important;
  background: none !important; border: 0 !important; box-shadow: none !important;
  padding: 0 !important; min-width: 0 !important; border-radius: 0 !important;
  font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important;
  color: var(--sp-green-deep) !important; letter-spacing: 0 !important; text-transform: none !important;
}
body.archive .post .read-more-button-wrap .more-link .faux-button::after { content: " \2192"; }
body.archive .post .read-more-button-wrap .more-link:hover .faux-button { color: var(--sp-ink) !important; }

/* ---- pagination ---- */
body.archive .pagination-wrapper { padding-top: 8px !important; }

/* ---- responsive ---- */
@media (max-width: 900px) { body.archive #site-content { grid-template-columns: 1fr 1fr; gap: 22px; } }
@media (max-width: 600px) { body.archive #site-content { grid-template-columns: 1fr; padding: 0 20px 48px !important; } }
@media (prefers-reduced-motion: reduce) { body.archive .post { transition: none; } }