/**
 * Crucible3D — WP blog block restyling.
 *
 * WP-only. Never imported by Next. Scoped under .crucible-blog-page so rules
 * don't leak into chrome or the shop surfaces (.crucible-shop-page per the
 * Tier-1/Tier-2 architecture in WP_INTEGRATION_PHASE_4B.md). Targets the
 * markup WP's block editor actually emits (.wp-block-*, .wp-element-button).
 *
 * Specificity policy: when winning against WP's runtime-loaded
 * block-library stylesheet, use the double-class pattern (0,3,1+) per
 * memory feedback-wc-block-specificity — NOT !important.
 *
 * Phase 1 covers: post meta line, Buttons block (primary + outline matching
 * QuoteCTA), defensive comment-form hide. Phase 3 will extend with
 * pull-quote, group-as-callout, image-with-caption, table, code, and embed
 * wrappers.
 */

/* -- Post meta line --------------------------------------------------------
 *    Rendered by single.php under the post title. Markup contract:
 *      <div class="crucible-blog-page__meta">
 *        <span>Crucible 3D</span>
 *        <span><time datetime="...">May 25, 2026</time></span>
 *      </div>
 *    Subsequent <span> siblings get a leading separator dot. */

.crucible-blog-page__meta {
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
  color: var(--color-text-tertiary);
  margin-block: 0.5rem 2rem;
}

.crucible-blog-page__meta span + span::before {
  content: " · ";
  margin-inline: 0.25rem;
  color: var(--color-border-strong);
}

/* -- Buttons block (core/buttons + core/button) ---------------------------
 *    Default style ≙ QuoteCTA primary. is-style-outline ≙ QuoteCTA ghost.
 *    Double-class (.wp-block-button__link.wp-element-button) wins the
 *    block-library stylesheet race without !important. WP always emits both
 *    classes on the <a>, so the selector is reliable. */

.crucible-blog-page .wp-block-button__link.wp-element-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-weight: 500;
  padding: 0.75rem 1.5rem;
  font-size: var(--text-body);
  line-height: 1.2;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 100ms ease,
    border-color 100ms ease,
    color 100ms ease;
  background: var(--color-accent);
  color: var(--color-text-primary);
}

.crucible-blog-page .wp-block-button__link.wp-element-button:hover {
  background: var(--color-accent-hover);
}

.crucible-blog-page .wp-block-button__link.wp-element-button:active {
  background: var(--color-accent-pressed);
}

.crucible-blog-page .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button {
  background: transparent;
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
}

.crucible-blog-page .wp-block-button.is-style-outline .wp-block-button__link.wp-element-button:hover {
  background: transparent;
  border-color: var(--color-accent);
}

/* Focus ring matches QuoteCTA + chrome links for visual parity. */
.crucible-blog-page .wp-block-button__link.wp-element-button:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--color-bg),
    0 0 0 4px color-mix(in srgb, var(--color-accent) 40%, transparent);
}

/* Spacing inside a .wp-block-buttons group. */
.crucible-blog-page .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-block: 1.5rem;
}

/* -- Comments — hidden defensively ----------------------------------------
 *    Phase 0 disables comments site-wide via Discussion settings. This rule
 *    is defense-in-depth: if a plugin re-enables comments on a post, or
 *    single.php accidentally calls comments_template(), nothing renders. */

.crucible-blog-page #comments,
.crucible-blog-page .comments-area,
.crucible-blog-page .comment-respond,
.crucible-blog-page #respond {
  display: none;
}

/* -- Index page header ----------------------------------------------------
 *    Single h1 on /blog/ derived from the Posts page title (default "Blog").
 *    Author can rename via wp-admin if they want "Writing" / "Journal" / etc. */

.crucible-blog-index__header {
  margin-block: 2.5rem 0;
}

.crucible-blog-index__title {
  font-family: var(--font-sans);
  font-size: var(--text-h1);
  line-height: var(--text-h1--line-height);
  letter-spacing: var(--tracking-h1);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

/* -- Index tile grid ------------------------------------------------------
 *    Responsive grid of post tiles: minmax(280px, 1fr) naturally lands on
 *    1/2/3 columns from mobile up to the default page-container cap (1152px).
 *    Tiles are equal-height (grid align-items: stretch + .__body flex:1) so
 *    rows don't get ragged when posts have different dek lengths. */

.crucible-blog-index {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  margin-block: 2.5rem;
}

.crucible-blog-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  transition: border-color 200ms ease;
}

.crucible-blog-card__media {
  display: block;
  overflow: hidden;
  background: var(--color-surface-2);
  aspect-ratio: 16 / 9;
}

.crucible-blog-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms cubic-bezier(0.16, 1, 0.3, 1);
}

.crucible-blog-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.25rem;
  flex: 1;
}

.crucible-blog-card__title {
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
  letter-spacing: var(--tracking-h3);
  font-weight: 500;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.crucible-blog-card__title a {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color 100ms ease;
}

.crucible-blog-card__dek {
  font-size: var(--text-body);
  line-height: var(--text-body--line-height);
  color: var(--color-text-secondary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.crucible-blog-card__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-mono-sm);
  line-height: var(--text-mono-sm--line-height);
  letter-spacing: var(--tracking-mono-sm);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0;
}

.crucible-blog-card__eyebrow span + span::before {
  content: " · ";
  margin-inline: 0.25rem;
  color: var(--color-border-strong);
}

/* Coordinated tile hover — pointing at either the media or the title link
   shifts the tile border, highlights the title, and subtly scales the
   image, so the whole tile reads as one composed unit. The two-anchor
   markup keeps screen-reader semantics clean (the media link is decorative
   and aria-hidden; the title link carries the label). */

.crucible-blog-card:has(a:hover) {
  border-color: var(--color-border-strong);
}

.crucible-blog-card:has(a:hover) .crucible-blog-card__title a {
  color: var(--color-accent);
}

.crucible-blog-card:has(a:hover) .crucible-blog-card__media img {
  transform: scale(1.03);
}

/* -- Empty state ----------------------------------------------------------- */

.crucible-blog-empty {
  margin-block: 4rem;
  text-align: center;
  color: var(--color-text-tertiary);
}

/* -- Pagination (the_posts_pagination output) ----------------------------
 *    WP emits:
 *      <nav class="navigation pagination">
 *        <div class="nav-links">
 *          <a class="prev page-numbers" href="...">← Newer</a>
 *          <a class="page-numbers" href="...">1</a>
 *          <span class="page-numbers current">2</span>
 *          <a class="next page-numbers" href="...">Older →</a>
 *        </div>
 *      </nav> */

.crucible-blog-page .pagination {
  margin-block: 3rem 1rem;
}

.crucible-blog-page .pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}

.crucible-blog-page .pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  padding: 0.5rem 0.75rem;
  font-family: var(--font-sans);
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-btn);
  text-decoration: none;
  transition: border-color 100ms ease, color 100ms ease;
}

.crucible-blog-page .pagination a.page-numbers:hover {
  border-color: var(--color-accent);
  color: var(--color-text-primary);
}

.crucible-blog-page .pagination .page-numbers.current {
  border-color: var(--color-border-strong);
  color: var(--color-text-primary);
  background: var(--color-surface-1);
}

/* -- Single post hero / header --------------------------------------------- */

.crucible-blog-post__hero {
  margin-block: 1rem 2rem;
  border-radius: var(--radius-card);
  overflow: hidden;
  background: var(--color-surface-1);
}

.crucible-blog-post__hero img {
  display: block;
  width: 100%;
  height: auto;
}

.crucible-blog-post__header {
  margin-block: 0 2rem;
}

.crucible-blog-post__title {
  font-family: var(--font-sans);
  font-size: var(--text-h1);
  line-height: var(--text-h1--line-height);
  letter-spacing: var(--tracking-h1);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

/* -- Prev/next strip ------------------------------------------------------
 *    Two-column grid. Empty <span> placeholders keep the prev slot on the
 *    left and next slot on the right even when one neighbor doesn't exist. */

.crucible-blog-prev-next {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-block: 4rem 1rem;
  padding-block: 2rem 0;
  border-top: 1px solid var(--color-border);
}

.crucible-blog-prev-next__link {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: border-color 100ms ease;
}

.crucible-blog-prev-next__link:hover {
  border-color: var(--color-border-strong);
}

.crucible-blog-prev-next__link--next {
  text-align: end;
}

.crucible-blog-prev-next__label {
  font-size: var(--text-caption);
  line-height: var(--text-caption--line-height);
  letter-spacing: var(--tracking-caption);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.crucible-blog-prev-next__title {
  font-size: var(--text-body);
  line-height: 1.3;
  font-weight: 500;
  color: var(--color-text-primary);
}

/* ─── Editorial primitives (Phase 3) ──────────────────────────────────────
   WP-block-specific styling for the allowed-block list. Lives in blog.css
   (not prose.css) because each rule targets a .wp-block-* selector or
   WP-specific markup quirk. Regular blockquote, p, headings, lists, hr,
   inline code, and plain pre/code are styled by prose.css. ────────────── */

/* -- Image with optional caption -----------------------------------------
 *    WP emits <figure class="wp-block-image"><img><figcaption>. We move
 *    the vertical margin onto the figure (so the caption sits flush below
 *    the image) and zero out the img margin that prose.css applies to
 *    raw <img>. Higher specificity here (0,2,1) wins prose.css's (0,1,1). */

.crucible-blog-page .wp-block-image {
  margin-block: 1.5rem;
}

.crucible-blog-page .wp-block-image img {
  margin: 0;
  border-radius: var(--radius-card);
}

.crucible-blog-page .wp-block-image figcaption,
.crucible-blog-page .wp-element-caption {
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
  color: var(--color-text-tertiary);
  text-align: center;
  margin-block: 0.75rem 0;
  font-style: italic;
}

/* -- Pull-quote ---------------------------------------------------------
 *    Visually distinct from a regular quote: centered, larger, italic,
 *    with hr-style separators above and below. Resets the prose.css
 *    blockquote treatment (accent left border) inside the pullquote
 *    wrapper. */

.crucible-blog-page .wp-block-pullquote {
  margin-block: 2.5rem;
  padding-block: 2rem;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  text-align: center;
}

.crucible-blog-page .wp-block-pullquote blockquote {
  border: 0;
  padding: 0;
  margin: 0;
  font-style: normal;
  color: var(--color-text-primary);
}

.crucible-blog-page .wp-block-pullquote p {
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
  letter-spacing: var(--tracking-h3);
  font-style: italic;
  color: var(--color-text-primary);
  margin: 0;
}

.crucible-blog-page .wp-block-pullquote cite {
  display: block;
  margin-top: 1rem;
  font-size: var(--text-body-sm);
  color: var(--color-text-tertiary);
  font-style: normal;
}

/* -- Group block as callout / note --------------------------------------
 *    Any group block with a background color (set via the editor sidebar)
 *    becomes a padded, rounded callout container. Generic enough to cover
 *    note/tip/warning variants when the author picks a palette swatch. */

.crucible-blog-page .wp-block-group.has-background {
  padding: 1.5rem;
  border-radius: var(--radius-container);
  margin-block: 1.5rem;
}

/* -- Table -------------------------------------------------------------- */

.crucible-blog-page .wp-block-table {
  margin-block: 1.5rem;
  overflow-x: auto;
}

.crucible-blog-page .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body-sm);
  line-height: var(--text-body-sm--line-height);
}

.crucible-blog-page .wp-block-table th,
.crucible-blog-page .wp-block-table td {
  padding: 0.75rem 1rem;
  text-align: start;
  border-bottom: 1px solid var(--color-border);
}

.crucible-blog-page .wp-block-table th {
  font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-surface-1);
}

/* -- Embed (responsive video wrapper) -----------------------------------
 *    YouTube/Vimeo embeds use a padding-bottom hack to maintain 16:9 as
 *    the container scales. The inner iframe absolute-fills it. */

.crucible-blog-page .wp-block-embed {
  margin-block: 1.5rem;
}

.crucible-blog-page .wp-block-embed.is-type-video .wp-block-embed__wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--color-surface-2);
}

.crucible-blog-page .wp-block-embed.is-type-video .wp-block-embed__wrapper iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* -- CTA banner (reusable pattern target) -------------------------------
 *    Markup comes from the "Get a quote CTA banner" pattern registered
 *    in inc/blog.php. Surface-1 elevated block, centered text, brand
 *    button inside. Heading/paragraph margin resets here win over
 *    prose.css's defaults (0,3,0 vs 0,1,1). */

.crucible-blog-page .wp-block-group.crucible-cta-banner {
  background: var(--color-surface-1);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-container);
  padding: 2.5rem 1.5rem;
  margin-block: 2.5rem;
  text-align: center;
}

.crucible-blog-page .crucible-cta-banner h2,
.crucible-blog-page .crucible-cta-banner h3,
.crucible-blog-page .crucible-cta-banner h4 {
  margin-block: 0 0.5rem;
}

.crucible-blog-page .crucible-cta-banner p {
  margin-block: 0 1.5rem;
  color: var(--color-text-secondary);
}

.crucible-blog-page .crucible-cta-banner .wp-block-buttons {
  margin-block: 0;
  justify-content: center;
}