/* Appaza — maps native Gutenberg post/query block output onto the blog UI.
   Loaded after blog.css. */

/* layout shells */
.blog-listing, .blog-single { padding: 0; }
.blog-loop-wrap { padding-top: 10px; padding-bottom: 90px; }
.archive-hero { padding: 64px 0 10px; }
.arch-title, .blog-loop-wrap .gh-title { font-family:"Instrument Serif",serif; font-weight:400; }
.arch-title { font-size:clamp(40px,6vw,84px); letter-spacing:-.03em; line-height:.98; margin:0; }
.grid-head { margin: 40px 0 26px; }
.grid-head .gh-title { font-size:34px; letter-spacing:-.02em; margin:0; }

/* ---- post grid: native query loop → cards ---- */
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.post-grid .wp-block-post { margin:0; }
.post-grid .card { padding:0 !important; gap:0 !important; }
.post-grid .card .thumb { aspect-ratio:16/10; margin:0; overflow:hidden; }
.post-grid .card .thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.post-grid .card .thumb.wp-block-post-featured-image { border-radius:0; }
.post-grid .card .body { padding:24px; display:flex; flex-direction:column; gap:10px; }
/* badge sits in normal flow inside .body (the static .card .badge rule in
   blog.css is position:absolute, meant for hero cards — it would overlap the
   title on these native query-loop cards). Covers the related grid too. */
.post-grid .card .badge,
.rel-grid .card .badge { position:static; align-self:flex-start; display:inline-block; width:max-content;
  background:var(--ink); color:#fff; backdrop-filter:none;
  font-family:"Geist Mono",monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 10px; border-radius:6px; }
.post-grid .card .badge a,
.rel-grid .card .badge a { color:#fff; text-decoration:none; }
.post-grid .card .wp-block-post-title { font-family:"Instrument Serif",serif; font-weight:400;
  font-size:24px; line-height:1.12; letter-spacing:-.02em; margin:0; }
.post-grid .card .wp-block-post-title a { text-decoration:none; }
.post-grid .card .wp-block-post-excerpt { font-size:14px; line-height:1.55; color:var(--ink-soft); margin:0; }
.post-grid .card .wp-block-post-excerpt__excerpt { margin:0; }
.post-grid .card .meta { margin-top:auto; gap:9px; align-items:center; font-size:12px; color:var(--mute); }
.post-grid .card .meta .wp-block-post-date,
.post-grid .card .meta .wp-block-post-author-name { font-size:12px; color:var(--mute); }

/* pagination */
.pagination { grid-column:1/-1; display:flex; gap:10px; justify-content:center; margin-top:40px; flex-wrap:wrap; }
.pagination .wp-block-query-pagination-numbers .page-numbers,
.pagination a, .pagination .wp-block-query-pagination-previous, .pagination .wp-block-query-pagination-next {
  display:grid; place-items:center; min-width:44px; height:44px; padding:0 14px;
  border:1px solid var(--line); border-radius:999px; font-size:14px; text-decoration:none; transition:.2s; }
.pagination .current, .pagination a:hover { background:var(--ink); color:#fff; }

/* ---- single article ---- */
.blog-single .art-hero { padding:56px 0 0; }
.blog-single .art-head { text-align:center; max-width:820px; margin:0 auto; }
.blog-single .art-head .badge { display:inline-block; background:var(--c-violet); color:#fff;
  font-family:"Geist Mono",monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase;
  padding:7px 13px; border-radius:6px; margin-bottom:22px; }
.blog-single .art-head .badge a { color:#fff; text-decoration:none; }
.blog-single .art-head .wp-block-post-title { font-family:"Instrument Serif",serif; font-weight:400;
  font-size:clamp(38px,5.4vw,72px); line-height:1.02; letter-spacing:-.03em; margin:0; }
.blog-single .by { justify-content:center; gap:14px; margin-top:26px; font-size:14px; color:var(--ink-soft); }
.blog-single .art-cover { max-width:1000px; margin:46px auto 0; }
.blog-single .art-cover img { width:100%; aspect-ratio:21/9; object-fit:cover; border-radius:24px; }

/* article body: native post-content */
.article.wp-block-post-content { max-width:720px; margin:0 auto; padding:56px 32px 40px; }
.article.wp-block-post-content > * { margin-top:0; margin-bottom:24px; }
.article.wp-block-post-content p { font-size:18px; line-height:1.75; color:var(--ink-soft); }
.article.wp-block-post-content h2 { font-family:"Instrument Serif",serif; font-weight:400; font-size:36px;
  letter-spacing:-.02em; line-height:1.08; margin:44px 0 6px; color:var(--ink); }
.article.wp-block-post-content h3 { font-family:"Instrument Serif",serif; font-weight:400; font-size:27px;
  letter-spacing:-.015em; margin:34px 0 4px; color:var(--ink); }
.article.wp-block-post-content ul, .article.wp-block-post-content ol { padding-left:24px; }
.article.wp-block-post-content li { font-size:18px; line-height:1.7; color:var(--ink-soft); margin-bottom:10px; }
.article.wp-block-post-content blockquote { border-left:3px solid var(--c-violet); margin:34px 0;
  padding:6px 0 6px 26px; font-family:"Instrument Serif",serif; font-size:27px; font-style:italic;
  line-height:1.3; color:var(--ink); }
.article.wp-block-post-content img { border-radius:16px; }

/* related */
.rel-wrap { padding:80px 32px 0; }
.rel-head { font-family:"Instrument Serif",serif; font-weight:400; font-size:32px; letter-spacing:-.02em; margin:0 0 26px; }
.rel-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.rel-grid .wp-block-post { margin:0; }
.rel-grid .card .thumb { aspect-ratio:16/10; }
.rel-grid .card .thumb img { width:100%; height:100%; object-fit:cover; }
.rel-grid .card .body { padding:22px; }

/* generic page */
.page-default .page-hero-wrap { padding:90px 32px 30px; }
.page-default .page-title { font-family:"Instrument Serif",serif; font-weight:400;
  font-size:clamp(40px,7vw,96px); line-height:.98; letter-spacing:-.03em; margin:0; }
.page-default .page-cover img { width:100%; max-height:460px; object-fit:cover; border-radius:24px; margin:20px auto; }
/* page content spans the site width and aligns with the title (same 1200px
   container + 32px padding as .page-hero-wrap) instead of a narrow centred column */
.page-default .article.wp-block-post-content { max-width:1200px; padding-top:30px; }
/* keep legal/long-form text readable: cap the text measure but stay left-aligned to the title */
.page-default .article.wp-block-post-content > * { max-width:80ch; }
.no-res { font-size:18px; color:var(--ink-soft); }

@media (max-width:1000px){ .post-grid,.rel-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:680px){ .post-grid,.rel-grid{grid-template-columns:1fr;} }

/* ---- blog features: native-block bridges -------------------------------- */
/* byline: drop default margins off post-author-name / post-date, style RT */
.art-head .by .wp-block-post-author-name,
.art-head .by .wp-block-post-date,
.art-head .by .wp-block-post-date time { margin:0; }
.art-head .by .rt { color:var(--ink-soft); }

/* author box: core/avatar image + author-name link + tidy column spacing */
.author .av { overflow:hidden; }
.author .av img { display:block; width:100%; height:100%; border-radius:50%; object-fit:cover; }
.author .who-col { min-width:0; }
:where(.author .who-col) > * { margin-block-start:0; }
.author .nm { margin:0; }
.author .nm a { color:inherit; text-decoration:none; }
.author .nm a:hover { text-decoration:underline; }
.author .bio { margin:8px 0 0; }

/* category filter sits above the loop on listing/archive pages */
.blog-loop-wrap > .cats { margin:0 0 30px; }

/* The core query loop nests cards inside <ul.wp-block-post-template>, so the
   grid must live on that list, not on the .post-grid / .rel-grid wrapper. */
.post-grid, .rel-grid { display:block; }
.post-grid > .wp-block-post-template,
.rel-grid  > .wp-block-post-template {
  display:grid; grid-template-columns:repeat(3,1fr); gap:24px;
  margin:0; padding:0; list-style:none;
}
.post-grid > .wp-block-post-template > .wp-block-post,
.rel-grid  > .wp-block-post-template > .wp-block-post { margin:0; }
@media (max-width:1000px){
  .post-grid > .wp-block-post-template,
  .rel-grid  > .wp-block-post-template { grid-template-columns:repeat(2,1fr); }
}
@media (max-width:680px){
  .post-grid > .wp-block-post-template,
  .rel-grid  > .wp-block-post-template { grid-template-columns:1fr; }
}