/**
 * Article cards, listing grids and query pagination.
 *
 * One card component serves every surface that lists posts — the Learn grid,
 * the home "Featured Articles" row, category/tag archives, search results and
 * the related-posts strip under a single post — so the blog reads as one
 * system no matter where a post is surfaced.
 */

/* ─────────────────────────────────────────────────────────────────
   Listing section headers
   ───────────────────────────────────────────────────────────────── */

.c-section-link {
  font-size: var(--text-micro);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.c-section-link a {
  padding-bottom: .25rem;
  border-bottom: 2px solid var(--color-accent);
  color: var(--color-ink) !important;
}

.c-learn-articles > .wp-block-query {
  padding-top: clamp(var(--space-8), 4vw, var(--space-12));
}

/* !important: overrides WP core's per-instance inline block-gap style,
   which core emits with higher effective specificity than a class rule. */
.wp-block-post-template.is-layout-grid,
.wp-block-query .wp-block-post-template {
  gap: clamp(1.5rem, 3vw, 1.875rem) var(--grid-gap) !important;
}

/* ─────────────────────────────────────────────────────────────────
   Article card
   ───────────────────────────────────────────────────────────────── */

.c-article-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  background: var(--color-surface-raised);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard);
}

.c-article-card:hover,
.c-article-card:focus-within {
  border-color: var(--color-border-input);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.c-article-card__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--color-tan-400), var(--color-tan-500));
}

/* The core/post-featured-image block renders
   <figure class="wp-block-post-featured-image"><a><img></a></figure>, and
   both wrappers are auto-height. A percentage height resolved against an
   auto-height containing block computes to `auto`, so `height: 100%` on the
   img alone did nothing and the image kept its intrinsic ratio inside the
   16/10 box. Anything wider than 16/10 (production's featured images are
   1600x900 = 1.78) then came up short and exposed a band of the tan
   placeholder gradient below it. Stretching the wrappers to fill the box
   gives the percentage a definite height to resolve against. */
.c-article-card__media .wp-block-post-featured-image {
  position: absolute;
  inset: 0;
  margin: 0;
}

.c-article-card__media > a,
.c-article-card__media .wp-block-post-featured-image > a {
  display: block;
  width: 100%;
  height: 100%;
}

/* !important: same `:where(img) { height: auto }` core rule as the
   featured image above — without it the crop never applies. */
.c-article-card__media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform var(--duration-slow) var(--ease-standard);
}

.c-article-card:hover .c-article-card__media img,
.c-article-card:focus-within .c-article-card__media img {
  transform: scale(1.04);
}

.c-article-card__badge {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-white);
  color: var(--color-accent-text) !important;
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.c-article-card__badge a {
  color: inherit !important;
}

.c-article-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
}

.c-article-card__title {
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.28;
}

.c-article-card__title a {
  color: var(--color-ink) !important;
  transition: color var(--duration-fast) var(--ease-standard);
}

.c-article-card__title a:hover,
.c-article-card__title a:focus-visible {
  color: var(--color-accent-text) !important;
}

.c-article-card__excerpt {
  max-width: none;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: 1.6;
}

.c-article-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: auto;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.c-article-card__date,
.c-article-card__read {
  color: var(--color-text-muted);
  font-size: var(--text-label);
  font-weight: 700;
  letter-spacing: .04em;
}

.c-article-card__read {
  color: var(--color-accent-text) !important;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────────
   Related posts

   A different object from the boxed .c-article-card above: this module
   closes a finished article, so the cards are borderless and
   image-forward, numbered 01-03 to echo the article's table of contents.
   ───────────────────────────────────────────────────────────────── */

/* Caps the content width inside the full-bleed section. Deliberately a
   separate element from the section itself — see the note in
   Article_Parts::render_related_posts(). */
.c-related__inner {
  width: min(100% - (2 * var(--gutter)), var(--container-2xl));
  margin-inline: auto;
}

.c-related__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  margin-bottom: clamp(var(--space-10), 5vw, var(--space-16));
  padding-bottom: var(--space-6);
  border-bottom: 2px solid var(--color-border-input);
}

.c-related__headings {
  display: grid;
  gap: var(--space-2);
}

.c-related__title {
  font-size: var(--text-h2);
  line-height: 1.05;
}

.c-related__all {
  padding-bottom: .2rem;
  border-bottom: 2px solid var(--color-accent);
  color: var(--color-ink) !important;
  font-size: var(--text-micro);
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-standard);
}

.c-related__all:hover,
.c-related__all:focus-visible {
  color: var(--color-accent-text) !important;
}

/* Fixed column counts rather than auto-fit: with only two related posts,
   auto-fit stretched each card to half the 1360px container, which blew the
   3:2 media up to ~550px tall and dwarfed the article above it. Fixed
   columns keep a related card the same size as a Learn-grid card no matter
   how many the query returned. */
.c-related__grid {
  display: grid;
  gap: clamp(var(--space-8), 4vw, var(--space-12)) var(--grid-gap);
  margin: 0;
  padding: 0;
  grid-template-columns: 1fr;
  list-style: none;
}

@media (min-width: 40rem) {
  .c-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 64rem) {
  .c-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.c-related-card {
  display: grid;
  gap: var(--space-5);
  align-content: start;
}

.c-related-card__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, var(--color-tan-400), var(--color-tan-500));
}

/* Absolute rather than height:100% — the same reason as the card media
   above: it removes any dependence on the anchor's height being treated as
   definite for percentage resolution, so the crop holds for a featured
   image of any aspect ratio.
   !important: core's `:where(img) { height: auto }` global image rule
   otherwise leaves the crop unapplied. */
.c-related-card__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform var(--duration-slow) var(--ease-standard);
}

.c-related-card:hover .c-related-card__media img,
.c-related-card:focus-within .c-related-card__media img {
  transform: scale(1.05);
}

/* The running index doubles as the scrim that keeps the image edge from
   running straight into the copy below it. */
.c-related-card__index {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: var(--space-2) var(--space-4);
  background: var(--color-ink);
  color: var(--color-page);
  font-family: var(--font-display);
  font-size: var(--text-micro);
  font-weight: 800;
  letter-spacing: .12em;
  line-height: 1.4;
}

.c-related-card__body {
  display: grid;
  gap: var(--space-3);
}

.c-related-card__category {
  margin-bottom: var(--space-1);
  color: var(--color-accent-text);
  font-size: var(--text-label);
  font-weight: 800;
  letter-spacing: var(--tracking-label);
  line-height: 1.2;
  text-transform: uppercase;
}

.c-related-card__title {
  font-size: clamp(1.25rem, .6vw + 1.1rem, 1.4375rem);
  line-height: 1.22;
  text-wrap: balance;
}

.c-related-card__title a {
  color: var(--color-ink) !important;
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 2px;
  transition:
    background-size var(--duration-base) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.c-related-card__title a:hover,
.c-related-card__title a:focus-visible {
  color: var(--color-accent-text) !important;
  background-size: 100% 2px;
}

.c-related-card__excerpt {
  max-width: none;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: 1.65;
}

/* The meta line closes the card, so it gets more air above it than the
   title and excerpt get between themselves, plus a hairline to sit on. */
.c-related-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-micro);
  font-weight: 600;
}

.c-related-card__dot {
  width: 3px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-tan-500);
}

/* ─────────────────────────────────────────────────────────────────
   Query pagination
   ───────────────────────────────────────────────────────────────── */

.wp-block-query-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-top: clamp(var(--space-10), 5vw, var(--space-16)) !important;
}

.wp-block-query-pagination-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.wp-block-query-pagination :is(a, span.current, span.page-numbers) {
  display: inline-grid;
  min-width: 2.75rem;
  height: 2.75rem;
  padding-inline: var(--space-3);
  border: 1px solid var(--color-border-input);
  color: var(--color-text-secondary) !important;
  font-size: var(--text-small);
  font-weight: 700;
  place-items: center;
  text-decoration: none;
  transition:
    background var(--duration-fast) var(--ease-standard),
    border-color var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.wp-block-query-pagination a:hover,
.wp-block-query-pagination a:focus-visible {
  border-color: var(--color-accent-fill);
  background: var(--color-accent-fill);
  color: var(--color-white) !important;
}

.wp-block-query-pagination .page-numbers.current {
  border-color: var(--color-ink);
  background: var(--color-ink);
  color: var(--color-white) !important;
}

.wp-block-query-pagination .page-numbers.dots {
  border-color: transparent;
  background: none;
}

.wp-block-query-no-results {
  padding: clamp(var(--space-8), 4vw, var(--space-12));
  border: 1px dashed var(--color-border-input);
  background: var(--color-surface-soft);
  text-align: center;
}