/**
 * Single-article styling, enqueued only on `is_singular('post')` (see
 * functions.php). Ported from:
 *   - src/components/sections/blog/BlogArticle.astro  (.article/.article-hero/
 *     .article-title layout + column width/margins)
 *   - src/components/common/ArticleBody.astro          (body typography,
 *     .article-quote / .article-figure LOOK — reproduced here against the
 *     actual Gutenberg markup WP renders: wp-block-quote/cite,
 *     wp-block-image/figcaption, not the article-quote-* / article-figure-*
 *     classes the Astro side transforms markdown into)
 *   - src/components/common/Tag.astro                  (.tag pill, shared
 *     with post-category-tag/blog-filter/blog-posts blocks)
 *
 * Targets the raw class names WP's core content blocks actually render
 * (.entry-content, .wp-block-quote, .wp-block-image, .wp-element-caption)
 * rather than porting article.ts's markdown-to-Astro-class transform —
 * there is no such transform step in WP; the classes ARE the seeded markup
 * (see wordpress/seed/build/posts.build.json's `bodyBlocks`).
 *
 * Uses the theme's global design tokens (tokens.css) — never redefines them
 * here. Loaded after base.css, so single-element selectors it relies on
 * (`a`, `ul`, `h2`, `p`, ...) still cascade from there; this file only
 * needs to out-specify them where the article's LOOK genuinely differs
 * (headings inside content are smaller than sitewide h2, links are
 * underlined here, lists get real bullets, etc.) — see each rule's comment.
 */

/* ---- .article column: BlogArticle.astro's <article class="article"> ---- */

.article {
  display: flex;
  flex-direction: column;
  gap: 48px;
  width: 100%;
  max-width: 864px;
  margin: 0 auto;
  padding: var(--section-margin);
}

.article-hero {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 28px;
}

.article-title.wp-block-post-title {
  font-family: var(--font-bold);
  font-size: var(--text-headline-lg);
  line-height: var(--linehight-headline-lg);
  margin: -8px 0 -10px;
}

@media (min-width: 600px) {
  .article-title.wp-block-post-title {
    font-size: var(--text-headline-xl);
    line-height: var(--linehight-headline-xl);
    margin: -11px 0 -15px;
  }
}

@media (min-width: 1024px) {
  .article {
    gap: 64px;
    padding: 0;
  }

  .article-hero {
    gap: 32px;
    padding-top: 128px;
    margin-bottom: 56px;
  }

  .article-title.wp-block-post-title {
    max-width: 540px;
    margin: -17px 0 -21px;
  }
}

/* ---- Featured image: BlogArticle.astro's .article-cover img ---- */

.article-cover.wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* ---- Meta row: BlogArticle.astro's <div class="article-meta"> wrapping
   AuthorByline + ShareLinks side by side right after the cover. Stacks
   centered on mobile, splits into a byline-left/share-right row at the
   same 1024px breakpoint the reference uses. ---- */

.article-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 64px;
}

@media (min-width: 1024px) {
  .article-meta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
}

/* ---- Body typography: ArticleBody.astro's .article-body rules,
   targeted at core/post-content's real wrapper class ---- */

.entry-content.wp-block-post-content > * {
  margin: 48px 0 0;
}

.entry-content.wp-block-post-content > *:first-child {
  margin-top: 0;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
  font-family: var(--font-bold);
  font-size: var(--text-headline-md);
  line-height: var(--linehight-headline-md);
}

.entry-content p,
.entry-content li {
  font-family: var(--font-regular);
  font-size: var(--text-copy-lg);
  line-height: var(--linehight-copy-lg);
  white-space: normal;
}

.entry-content > h1 + *,
.entry-content > h2 + *,
.entry-content > h3 + *,
.entry-content > h4 + *,
.entry-content > p + p {
  margin-top: 24px;
}

.entry-content a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.entry-content ul,
.entry-content ol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 24px;
  list-style: disc;
}

.entry-content ol {
  list-style: decimal;
}

/*
 * The seeded lead paragraph (`<p class="post-lead">`) is moved out of
 * .entry-content and into .article-hero by functions.php's render_block
 * filter (`simsalasim_get_post_lead_html()` / `simsalasim_strip_post_lead()`),
 * landing it right after the title — matching BlogArticle.astro's
 * `<header class="article-hero"><h1/><p class="article-lead"/></header>`.
 * It deliberately gets NO special typography here: `.article-lead` in the
 * reference carries no font rule of its own either, so it renders with
 * nothing but the shared base paragraph style (bare `p`, `--text-copy-lg`)
 * — confirmed byte-for-byte live (16px/26px below 1024px, 20px/29px at
 * ≥1024px, weight 400, regular family). The only override needed is the
 * narrower lede column at desktop, matching `.article-lead{max-width:540px}`.
 */
@media (min-width: 1024px) {
  .article-hero .post-lead {
    max-width: 540px;
  }
}

/* ---- Quote: ArticleBody.astro's .article-quote / .article-quote-author /
   .article-quote-role LOOK, applied to wp-block-quote/cite.
   Splitting "Name · Role" out of <cite> into name/role spans (bold name,
   secondary-color role) is done by assets/js/article.js — see there and
   functions.php for why a tiny script instead of a CSS-only split. ---- */

.entry-content blockquote.wp-block-quote {
  display: flex;
  flex-direction: column;
  gap: 32px;
  border: none;
  padding: 0;
  margin-left: 0;
  margin-right: 0;
}

.entry-content blockquote.wp-block-quote p {
  font-family: var(--font-bold);
  font-size: var(--text-headline-lg);
  line-height: var(--linehight-headline-lg);
  margin: 0;
}

.entry-content blockquote.wp-block-quote cite {
  display: flex;
  gap: 24px;
  font-style: normal;
  font-family: var(--font-regular);
  font-size: var(--text-copy-lg);
  line-height: var(--linehight-copy-lg);
}

/* Split spans injected by article.js. */
.entry-content blockquote.wp-block-quote cite .article-quote-name {
  font-family: var(--font-bold);
}

.entry-content blockquote.wp-block-quote cite .article-quote-role {
  color: var(--text-color-secondary);
}

/* ---- Figure/image: ArticleBody.astro's .article-figure /
   .article-figure-caption LOOK, applied to wp-block-image /
   wp-element-caption. ---- */

.entry-content figure.wp-block-image {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.entry-content figure.wp-block-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-md);
}

.entry-content figure.wp-block-image figcaption {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--text-copy-md);
  line-height: var(--linehight-copy-md);
  color: var(--text-color-secondary);
}

.entry-content figure.wp-block-image figcaption::before {
  content: '';
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M8 13.3333V2.66667M12 6.66667L8 2.66667L4 6.66667' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

@media (min-width: 1024px) {
  .entry-content.wp-block-post-content > * {
    margin-top: 64px;
  }

  .entry-content.wp-block-post-content > *:first-child {
    margin-top: 0;
  }

  .entry-content > h1 + *,
  .entry-content > h2 + *,
  .entry-content > h3 + *,
  .entry-content > h4 + *,
  .entry-content > p + p {
    margin-top: 24px;
  }
}