/* ==========================================================================
   Blog styles — archive + single post
   Loaded conditionally on blog views only (see inc/blog.php).
   ========================================================================== */

/* --- Post meta (shared between card + single) -------------------------- */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: baseline;
  font-family: var(--brand-font-heading);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.post-meta__category {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.75em;
  background: var(--brand-red);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-pill);
  letter-spacing: 0.08em;
  line-height: 1;
  transition: background-color .15s ease;
}
.post-meta__category:hover {
  background: var(--color-primary-hover);
  color: #fff;
}

.post-meta__date,
.post-meta__author,
.post-meta__reading {
  font-weight: 500;
}
.post-meta__date::before,
.post-meta__author::before,
.post-meta__reading::before {
  content: "·";
  margin-right: var(--space-sm);
  opacity: 0.5;
}
/* First meta child after category doesn't need the dot separator */
.post-meta__category + .post-meta__date::before,
.post-meta > .post-meta__date:first-child::before {
  content: none;
  margin-right: 0;
}

/* ==========================================================================
   ARCHIVE
   ========================================================================== */
.blog-archive {
  padding-block: var(--space-3xl);
}
.blog-archive__header {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
  align-items: end;
}
.blog-archive__heading {
  grid-column: 1 / span 8;
  font-size: var(--text-5xl);
  line-height: 1.05;
  letter-spacing: -0.035em;
}
.blog-archive__intro {
  grid-column: 9 / -1;
  color: var(--color-text-muted);
  font-size: var(--text-md);
  max-width: 40ch;
  align-self: end;
}
.blog-archive .eyebrow {
  grid-column: 1 / -1;
}

/* Grid layout for cards — 3 per row at wide, 2 at tablet, 1 at mobile */
.blog-archive__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

.blog-archive__empty {
  padding: var(--space-2xl) 0;
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

/* Pagination */
.blog-archive__pagination {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}
.blog-archive__pagination .nav-links {
  display: flex;
  gap: var(--space-xs);
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.blog-archive__pagination a,
.blog-archive__pagination span {
  display: inline-flex;
  align-items: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 var(--space-sm);
  font-family: var(--brand-font-heading);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  justify-content: center;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.blog-archive__pagination a:hover {
  border-color: var(--brand-black);
  background: var(--brand-black);
  color: #fff;
}
.blog-archive__pagination .current {
  background: var(--brand-red);
  border-color: var(--brand-red);
  color: #fff;
}
.blog-archive__pagination .dots {
  border: 0;
  color: var(--color-text-muted);
}

/* ==========================================================================
   POST CARD
   ========================================================================== */
/* ==========================================================================
   POST CARD
   Stretched-link pattern: the title's <a> extends invisibly to cover the
   whole card. The category badge has a higher z-index so it remains
   independently clickable (linking to the category archive).
   ========================================================================== */
.post-card {
  position: relative;
  display: flex;
  flex-direction: column;
  transition: transform .25s ease;
}
.post-card:hover {
  transform: translateY(-4px);
}
.post-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--brand-neutral-200);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
}
.post-card__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(0.22, 1, 0.36, 1);
}
.post-card:hover .post-card__image {
  transform: scale(1.03);
}
.post-card__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: linear-gradient(135deg, var(--brand-neutral-200), var(--brand-neutral-300));
}
.post-card__placeholder-mark {
  font-family: var(--brand-font-heading);
  font-size: var(--text-6xl);
  font-weight: 700;
  color: var(--brand-neutral-400);
  line-height: 1;
}
.post-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
}

/* The title link stretches invisibly to cover the whole card */
.post-card__link {
  color: inherit;
  text-decoration: none;
}
.post-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.post-card__link:focus-visible {
  outline: none;
}
.post-card__link:focus-visible::after {
  outline: 2px solid var(--brand-red);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

/* Inside post cards: pull category badge left by its own padding so the
   visible text aligns flush-left with the card's image edge, AND raise it
   above the stretched link overlay so it remains clickable to the category
   archive. */
.post-card .post-meta__category {
  position: relative;
  z-index: 2;
  margin-left: -0.75em;
}
.post-card__content .post-meta {
  margin-bottom: var(--space-2xs);
}
.post-card__title {
  font-family: var(--brand-font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0;
  text-wrap: balance;
}
.post-card:hover .post-card__title {
  color: var(--brand-red);
}
.post-card__excerpt {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.55;
  margin: 0;
}
.post-card__more {
  margin-top: auto;
  padding-top: var(--space-sm);
  font-family: var(--brand-font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
}
.post-card:hover .post-card__more {
  color: var(--brand-red);
}

@media (max-width: 64rem) {
  .blog-archive__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40rem) {
  .blog-archive__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
  .blog-archive__header { grid-template-columns: 1fr; }
  .blog-archive__heading, .blog-archive__intro { grid-column: 1; }
}

/* ==========================================================================
   SINGLE POST
   ========================================================================== */

/* No padding on the outer article — the sticky nav can sit flush against it
   and the footer can too. All vertical rhythm happens internally on the
   header (top margin) and the post nav at the bottom (bottom margin). */
.single-post {
  padding: 0;
}

/* Header spans the wide container — title can breathe at full page width */
.single-post__header {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--color-border);
}

/* Content and footer stay in a reading-width column inside the wide container */
.single-post__content,
.single-post__footer {
  max-width: 42rem;
  margin-inline: auto;
}

.single-post__footer {
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-3xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}
.single-post__title {
  font-family: var(--brand-font-heading);
  font-size: var(--text-5xl);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin: 0 0 var(--space-md);
  color: var(--color-text);
  text-wrap: balance;
}
.single-post__dek {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.45;
  margin: 0;
  font-family: var(--brand-font-body);
  font-weight: 400;
  max-width: 48ch;
  text-wrap: pretty;
}

/* Content column — editorial type rhythm.
 * Paragraph spacing uses margin-bottom rather than lobotomised-owl because
 * Gutenberg output and wpautop output wrap paragraphs differently — this
 * approach is more forgiving across both. */
.single-post__content {
  font-size: var(--text-md);
  line-height: 1.65;
  color: var(--color-text);
  font-family: var(--brand-font-body);
}
.single-post__content p {
  margin: 0 0 var(--space-md);
  text-wrap: pretty;
}
.single-post__content p:last-child {
  margin-bottom: 0;
}
.single-post__content > *:last-child {
  margin-bottom: 0;
}
.single-post__content h2 {
  font-family: var(--brand-font-heading);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.025em;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-xs);
  text-wrap: balance;
}
.single-post__content h3 {
  font-family: var(--brand-font-heading);
  font-size: var(--text-xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-xs);
  text-wrap: balance;
}
.single-post__content h4 {
  font-family: var(--brand-font-heading);
  font-size: var(--text-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-2xs);
}
.single-post__content a {
  color: var(--color-text);
  text-decoration: underline;
  text-decoration-color: var(--brand-red);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  transition: color .15s ease;
}
.single-post__content a:hover {
  color: var(--brand-red);
}
.single-post__content strong {
  font-weight: 700;
  color: var(--color-text);
}
.single-post__content em {
  font-style: italic;
}
.single-post__content ul,
.single-post__content ol {
  padding-left: 1.5em;
  margin: 0;
}
.single-post__content ul { list-style: disc; }
.single-post__content ol { list-style: decimal; }
.single-post__content li {
  margin-bottom: var(--space-2xs);
  line-height: 1.6;
}
.single-post__content li::marker {
  color: var(--brand-red);
}
.single-post__content blockquote,
.single-post__content .wp-block-quote {
  border-left: 3px solid var(--brand-red);
  padding-left: var(--space-md);
  margin: var(--space-lg) 0;
  font-family: var(--brand-font-heading);
  font-size: var(--text-lg);
  font-weight: 500;
  line-height: 1.4;
  color: var(--color-text);
  font-style: normal;
}
.single-post__content blockquote p {
  margin-bottom: var(--space-xs);
}
.single-post__content blockquote cite,
.single-post__content .wp-block-quote cite {
  display: block;
  margin-top: var(--space-xs);
  font-family: var(--brand-font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-style: normal;
}
.single-post__content .wp-block-pullquote {
  border-top: 2px solid var(--brand-black);
  border-bottom: 2px solid var(--brand-black);
  padding: var(--space-lg) 0;
  margin: var(--space-xl) 0;
  text-align: center;
}
.single-post__content .wp-block-pullquote p {
  font-family: var(--brand-font-heading);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.025em;
  color: var(--brand-black);
}
.single-post__content code {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: 0.9em;
  padding: 0.15em 0.4em;
  background: var(--brand-neutral-200);
  border-radius: var(--radius-xs);
  color: var(--color-text);
}
.single-post__content pre,
.single-post__content .wp-block-code {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: var(--text-sm);
  line-height: 1.5;
  padding: var(--space-md);
  background: var(--brand-neutral-900);
  color: var(--color-text-inverse);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin: var(--space-md) 0;
}
.single-post__content pre code,
.single-post__content .wp-block-code code {
  background: transparent;
  color: inherit;
  padding: 0;
}
.single-post__content hr,
.single-post__content .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-xl) auto;
  max-width: 4rem;
  opacity: 1;
}
.single-post__content .wp-block-separator.is-style-wide {
  max-width: 100%;
}
.single-post__content figure,
.single-post__content .wp-block-image {
  margin: var(--space-lg) 0;
}
.single-post__content figure img,
.single-post__content .wp-block-image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.single-post__content figcaption,
.single-post__content .wp-element-caption {
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-align: center;
  font-family: var(--brand-font-body);
}
.single-post__content .wp-block-table {
  margin: var(--space-lg) 0;
  overflow-x: auto;
}
.single-post__content .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.single-post__content .wp-block-table th,
.single-post__content .wp-block-table td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
.single-post__content .wp-block-table th {
  font-family: var(--brand-font-heading);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* --- Post footer (tags, author, nav) --- */
.single-post__footer-row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
  align-items: baseline;
}
.single-post__footer-label {
  font-family: var(--brand-font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.single-post__tax {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.single-post__tax a {
  font-family: var(--brand-font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.35em 0.75em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.single-post__tax a:hover {
  background: var(--brand-black);
  color: #fff;
  border-color: var(--brand-black);
}
.single-post__author {
  font-family: var(--brand-font-heading);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
}

.single-post__nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}
.single-post__nav-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-md);
  text-decoration: none;
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color .15s ease, background-color .15s ease;
}
.single-post__nav-link:hover {
  border-color: var(--brand-black);
  background: var(--color-bg-alt);
}
.single-post__nav-link--next {
  text-align: right;
}
.single-post__nav-label {
  font-family: var(--brand-font-heading);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.single-post__nav-title {
  font-family: var(--brand-font-heading);
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text);
  text-wrap: balance;
}
.single-post__nav-link:hover .single-post__nav-title {
  color: var(--brand-red);
}

@media (max-width: 40rem) {
  .single-post__title { font-size: var(--text-4xl); }
  .single-post__footer-row { grid-template-columns: 1fr; gap: var(--space-3xs); }
  .single-post__nav { grid-template-columns: 1fr; }
  .single-post__nav-link--next { text-align: left; }
}