/*
  GAST Tech blog styles. Blog index, single post, archive, search and 404.
  Plain CSS, reuses the variables and patterns from main.css. Add only what
  the blog needs on top of the shared tokens.

  Enqueue from functions.php (gast_assets), after gast-main:
  wp_enqueue_style('gast-blog', $uri . '/assets/css/blog.css', ['gast-main'], $ver);
*/

/* ---------------------------------------------------------------------------
   Blog index + archive header
--------------------------------------------------------------------------- */
.blog-header {
  max-width: 60ch;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.blog-header .section-title {
  max-width: 18ch;
}

/* ---------------------------------------------------------------------------
   Blog index: editorial list. Each post is a row with the date (mono, narrow
   gutter on the left) and the title + excerpt + "lees meer" on the right.
   Hairline rules between rows. No card chrome, no thumbnails on the index:
   trust the typography. Replaces the .post-grid / .post-card 3-column grid.
--------------------------------------------------------------------------- */
.post-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border);
}
.post-list > li {
  border-bottom: 1px solid var(--border);
}
.post-row {
  display: grid;
  grid-template-columns: clamp(6rem, 13vw, 10.5rem) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 3rem);
  padding: clamp(2rem, 4vw, 3rem) 0;
  align-items: baseline;
  position: relative;
}
.post-row-date {
  margin: 0;
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, monospace;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--muted);
  align-self: start;
  /* Nudge the mono date down to baseline-align visually with the title cap. */
  margin-top: 0.6rem;
}
.post-row-body {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-width: 0;
}
.post-row-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text);
  text-wrap: pretty;
  transition: color 0.15s ease;
}
.post-row-title a {
  color: inherit;
  text-decoration: none;
}
/* Stretched link: the title's anchor covers the whole row so any click opens
   the post, not just the title text. */
.post-row-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.post-row:hover .post-row-title,
.post-row:focus-within .post-row-title {
  color: var(--accent);
}
.post-row-excerpt {
  margin: 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 60ch;
}
.post-row-more {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.01em;
}
.post-row:hover .post-row-more {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
@media (max-width: 760px) {
  .post-row {
    grid-template-columns: 1fr;
    row-gap: 0.75rem;
  }
  .post-row-date {
    margin-top: 0;
  }
}

/* ---------------------------------------------------------------------------
   Pagination
--------------------------------------------------------------------------- */
.post-pagination {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.post-pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.post-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.post-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-soft);
  text-decoration: none;
  background: var(--bg);
  transition: border-color 0.15s ease, color 0.15s ease;
}
.post-pagination a.page-numbers:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.post-pagination .page-numbers.current {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.post-pagination .page-numbers.dots {
  border-color: transparent;
  background: transparent;
}

/* ---------------------------------------------------------------------------
   Readable column for single posts and pages (~70ch), centered in the
   surrounding home-container so the page reads balanced instead of left-hung.
--------------------------------------------------------------------------- */
.post-column {
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}

.post-single-header,
.page-single-header {
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.post-single-title {
  max-width: 24ch;
}
.post-breadcrumb {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4em;
  line-height: 1.4;
}
.post-breadcrumb a {
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease;
}
.post-breadcrumb a:hover,
.post-breadcrumb a:focus-visible {
  color: var(--text);
  border-bottom-color: var(--accent);
}
.post-breadcrumb [aria-current="page"] {
  color: var(--text-soft);
}
.post-breadcrumb [aria-hidden] {
  color: var(--border);
}
/* Editorial hairline under the title, at reading-column width. */
.post-single-header .post-column,
.page-single-header .post-column {
  border-bottom: 1px solid var(--border);
  padding-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Body wrapper gets real breathing room before the footer. */
.post-single-content {
  padding-bottom: clamp(3.5rem, 8vw, 6.5rem);
}

/* A leading paragraph that is purely an emphasised note (e.g. the privacy
   disclaimer) renders as a soft callout instead of loose italics. */
.post-body > p:first-child:has(> em:only-child) {
  margin-bottom: 2rem;
  padding: 1rem 1.25rem;
  background: var(--bg-warm);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
}
.post-body > p:first-child:has(> em:only-child) em {
  font-style: normal;
  color: var(--text-soft);
  font-size: 0.97rem;
  line-height: 1.6;
}

/* Featured image: a touch wider than the reading column, still centered. */
.post-single-media {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.post-single-photo {
  max-width: 880px;
  aspect-ratio: 16 / 9;
}

/* ---------------------------------------------------------------------------
   Post body typography. Styles the raw editor output (no theme classes),
   so target plain elements inside .post-body.
--------------------------------------------------------------------------- */
.post-body {
  color: var(--text-soft);
  font-size: 1.08rem;
  line-height: 1.7;
  /* 3-column grid: text reads in the centered 70ch column, figures break out
     to a wider band so diagrams have room to breathe. */
  display: grid;
  grid-template-columns: 1fr min(70ch, 100%) 1fr;
  align-items: start;
}
.post-body > * {
  grid-column: 2;
  min-width: 0;
}
.post-body > figure {
  grid-column: 1 / -1;
  width: 100%;
  max-width: min(100%, 940px);
  margin-left: auto;
  margin-right: auto;
  margin-top: 2.25rem;
  margin-bottom: 2.25rem;
}
.post-body > * + * {
  margin-top: 1.25rem;
}

.post-body h2,
.post-body h3,
.post-body h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--text);
  line-height: 1.15;
}
.post-body h2 {
  font-size: 1.7rem;
  margin-top: 2.5rem;
}
.post-body h3 {
  font-size: 1.35rem;
  margin-top: 2rem;
}
.post-body h4 {
  font-size: 1.15rem;
  margin-top: 1.75rem;
}

.post-body p {
  max-width: 70ch;
}

.post-body a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.post-body a:hover {
  color: var(--text-soft);
}

.post-body strong {
  color: var(--text);
  font-weight: 700;
}

.post-body ul,
.post-body ol {
  padding-left: 1.4rem;
  max-width: 68ch;
}
.post-body li + li {
  margin-top: 0.4rem;
}
.post-body ul {
  list-style: none;
  padding-left: 0;
}
.post-body ul > li {
  position: relative;
  padding-left: 1.6rem;
}
.post-body ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--accent);
}

.post-body blockquote {
  margin: 2rem 0;
  padding: 0.5rem 0 0.5rem 1.5rem;
  border-left: 3px solid var(--accent);
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.4;
  color: var(--text);
}
.post-body blockquote p {
  margin-top: 0;
}
.post-body blockquote cite {
  display: block;
  margin-top: 0.75rem;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-style: normal;
  color: var(--muted);
}

.post-body img,
.post-body figure {
  max-width: 100%;
  height: auto;
}
.post-body img {
  border-radius: 12px;
}
.post-body figure {
  margin: 2rem 0;
}
.post-body figcaption {
  margin-top: 0.6rem;
  font-size: 0.88rem;
  color: var(--muted);
  text-align: center;
}

.post-body code {
  font-family: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.1rem 0.4rem;
}
.post-body pre {
  background: var(--dark-bg);
  color: var(--dark-text);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  font-size: 0.92rem;
  line-height: 1.55;
}
.post-body pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
}

.post-body hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

/* Honour the editor alignment options without breaking the column. */
.post-body .alignwide {
  max-width: min(100%, 880px);
}
.post-body .alignfull {
  max-width: none;
}

.post-single-footer {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

/* ---------------------------------------------------------------------------
   Author card at the foot of a post. A small round avatar plus one line of
   bio in Gaetan's voice and a CTA, in a warm panel. Sits in the reading
   column, above the "back to blog" footer.
--------------------------------------------------------------------------- */
.post-author {
  display: flex;
  gap: 1.1rem;
  align-items: center;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding: clamp(1.25rem, 3vw, 1.6rem);
  background: var(--bg-warm);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.post-author-avatar {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 28%;
}
.post-author-text {
  min-width: 0;
}
.post-author-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  color: var(--text);
}
.post-author-bio {
  margin: 0.3rem 0 0;
  color: var(--text-soft);
  font-size: 0.97rem;
  line-height: 1.55;
}
.post-author-bio a {
  color: var(--accent);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.post-author-bio a:hover {
  color: var(--text-soft);
}
@media (max-width: 540px) {
  .post-author {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ---------------------------------------------------------------------------
   Search results list
--------------------------------------------------------------------------- */
.search-results {
  list-style: none;
  border-top: 1px solid var(--border);
}
.search-result {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.search-result-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.15;
  color: var(--text);
}
.search-result-title a {
  color: inherit;
  text-decoration: none;
}
.search-result-title a:hover {
  color: var(--accent);
}
.search-result-excerpt {
  color: var(--text-soft);
  line-height: 1.55;
  max-width: 70ch;
}

/* ---------------------------------------------------------------------------
   Empty states (blog index, search) and 404
--------------------------------------------------------------------------- */
.blog-empty {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.2;
  color: var(--text);
}
.blog-empty-state {
  max-width: 60ch;
}
.blog-empty-sub {
  margin-top: 1rem;
  color: var(--text-soft);
  line-height: 1.6;
  font-size: 1.1rem;
  max-width: 54ch;
}
.blog-empty-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  margin-top: 2rem;
}