/* Public blog module — 2026-08 redesign.
   Self-contained stylesheet, loaded only on /blog* pages (blog-list.php,
   blog-post.php) so it can't regress anything else on the site. Token names
   are prefixed --pf- (from the approved reference mockup pack) to avoid any
   collision with assets/css/app.css's own --ink/--primary/--line variables,
   which the rest of the site still uses untouched. */

:root{
  --pf-bg:#FBFAF7; --pf-surface:#FFFFFF; --pf-surface-2:#F3F1EA; --pf-border:#E7E3D8;
  --pf-ink:#1C1A15; --pf-ink-soft:#5B5748; --pf-ink-mute:#8C8770;
  --pf-accent:#B5502F; --pf-accent-ink:#8A3B21; --pf-accent-tint:#FBEAE2;
  --pf-gold:#A9832E; --pf-gold-tint:#F7F0DD;
  --pf-success:#1F7A4D; --pf-success-tint:#E4F3EA;
  --pf-info:#2A5F8A; --pf-info-tint:#E7F0F7;
  --pf-radius:14px; --pf-radius-sm:9px;
}
[data-theme="dark"]{
  --pf-bg:#16140F; --pf-surface:#1E1B15; --pf-surface-2:#252119; --pf-border:#332D22;
  --pf-ink:#F1EEE6; --pf-ink-soft:#C7C0AE; --pf-ink-mute:#8E8672;
  --pf-accent:#E07A54; --pf-accent-ink:#F2A587; --pf-accent-tint:#3A2318;
  --pf-gold:#D4AE5C; --pf-gold-tint:#332C18;
  --pf-success:#4CAF7D; --pf-success-tint:#173226;
  --pf-info:#6FA8D6; --pf-info-tint:#17293A;
}

.pf-blog{ background:var(--pf-bg); color:var(--pf-ink); font-family:'Inter',-apple-system,sans-serif; }
.pf-blog h1,.pf-blog h2,.pf-blog h3{ font-family:'Fraunces',Georgia,serif; color:var(--pf-ink); text-wrap:balance; }
.pf-blog a{ color:inherit }
.pf-mono{ font-family:'IBM Plex Mono',monospace; }

/* Eyebrow / category link */
.pf-eyebrow{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--pf-accent-ink); text-decoration:none; }
.pf-eyebrow:hover{ text-decoration:underline; }

/* Format + featured badges */
.pf-badge{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:3px 9px; border-radius:999px; }
.pf-badge-news{ background:var(--pf-accent-tint); color:var(--pf-accent-ink); }
.pf-badge-listicle{ background:var(--pf-info-tint); color:var(--pf-info); }
.pf-badge-guide{ background:var(--pf-success-tint); color:var(--pf-success); }
.pf-badge-gallery{ background:var(--pf-gold-tint); color:var(--pf-gold); }
.pf-badge-video{ background:var(--pf-info-tint); color:var(--pf-info); }
.pf-badge-announcement{ background:var(--pf-accent-tint); color:var(--pf-accent-ink); }
.pf-badge-featured{ background:var(--pf-gold-tint); color:var(--pf-gold); }

/* Article header */
.pf-title{ font-size:clamp(1.6rem,3.4vw,2.5rem); font-weight:700; line-height:1.15; margin:10px 0 14px; }
.pf-byline{ color:var(--pf-ink-mute); font-size:13px; display:flex; flex-wrap:wrap; gap:4px 6px; align-items:center; }
.pf-byline strong{ color:var(--pf-ink-soft); font-weight:600; }
.pf-cover{ width:100%; max-height:440px; object-fit:cover; border-radius:var(--pf-radius); margin:18px 0; background:var(--pf-surface-2); }

/* Body typography */
.pf-body{ font-size:17px; line-height:1.8; color:var(--pf-ink-soft); }
.pf-body p{ margin:0 0 1.2em; }
.pf-listicle{ list-style:none; counter-reset:pf-li; padding:0; margin:0; display:flex; flex-direction:column; gap:14px; }
.pf-listicle li{ counter-increment:pf-li; position:relative; padding:14px 16px 14px 54px; background:var(--pf-surface); border:1px solid var(--pf-border); border-radius:var(--pf-radius-sm); }
.pf-listicle li::before{ content:counter(pf-li); position:absolute; left:14px; top:14px; width:26px; height:26px; border-radius:50%; background:var(--pf-info-tint); color:var(--pf-info); font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
.pf-guide-step{ display:flex; gap:14px; margin-bottom:22px; }
.pf-guide-num{ flex-shrink:0; width:32px; height:32px; border-radius:50%; background:var(--pf-success-tint); color:var(--pf-success); display:flex; align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace; font-weight:700; font-size:13px; }
.pf-gallery-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px; margin:0 0 1.4em; }
.pf-gallery-grid img{ width:100%; height:150px; object-fit:cover; border-radius:var(--pf-radius-sm); }
.pf-video-frame{ border-radius:var(--pf-radius); overflow:hidden; margin:0 0 1.4em; background:#000; }

/* Tags */
.pf-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; padding-top:20px; border-top:1px solid var(--pf-border); }
.pf-tag{ font-size:12.5px; font-weight:500; padding:5px 12px; border-radius:999px; background:var(--pf-surface-2); border:1px solid var(--pf-border); color:var(--pf-ink-soft); text-decoration:none; }
.pf-tag:hover{ border-color:var(--pf-accent); color:var(--pf-accent-ink); }

/* Comments */
.pf-comments{ margin-top:40px; padding-top:28px; border-top:1px solid var(--pf-border); }
.pf-comment{ padding:14px 0; border-bottom:1px solid var(--pf-border); }
.pf-comment-head{ display:flex; justify-content:space-between; gap:8px; font-size:13.5px; margin-bottom:4px; }
.pf-comment-name{ font-weight:600; color:var(--pf-ink); }
.pf-comment-time{ color:var(--pf-ink-mute); font-size:12px; }
.pf-comment-body{ font-size:14.5px; color:var(--pf-ink-soft); }
.pf-comment-form{ background:var(--pf-surface); border:1px solid var(--pf-border); border-radius:var(--pf-radius); padding:18px; margin-top:16px; }
.pf-input{ width:100%; padding:9px 12px; border:1px solid var(--pf-border); border-radius:var(--pf-radius-sm); background:var(--pf-bg); color:var(--pf-ink); font:inherit; font-size:14px; }
.pf-input:focus{ outline:2px solid var(--pf-accent); outline-offset:1px; }
.pf-btn{ display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border-radius:999px; background:var(--pf-accent); color:#fff; border:none; font-weight:600; font-size:14px; cursor:pointer; text-decoration:none; }
.pf-btn:hover{ background:var(--pf-accent-ink); color:#fff; }

/* Sidebar */
.pf-card{ background:var(--pf-surface); border:1px solid var(--pf-border); border-radius:var(--pf-radius); padding:18px; }
.pf-card + .pf-card{ margin-top:16px; }
.pf-card h2{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--pf-ink-mute); font-family:'IBM Plex Mono',monospace; margin:0 0 12px; }
.pf-cat-link{ display:block; padding:6px 0; font-size:14px; color:var(--pf-ink-soft); text-decoration:none; }
.pf-cat-link:hover,.pf-cat-link.is-active{ color:var(--pf-accent-ink); font-weight:600; }
.pf-related-item{ display:block; padding:10px 0; text-decoration:none; border-bottom:1px solid var(--pf-border); }
.pf-related-item:last-child{ border-bottom:none; }
.pf-related-title{ font-weight:600; font-size:14px; color:var(--pf-ink); line-height:1.4; }
.pf-related-meta{ color:var(--pf-ink-mute); font-size:12px; margin-top:3px; }

/* Related posts component (views/components/related-posts.php) — 3 density
   variants per the approved mockup pack: grid (4-up), compact (3-up), list
   (row). Used full-width below an article's content/tags. */
.pf-rp-block{ margin:40px 0; }
.pf-rp-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:18px; }
.pf-rp-head h2{ font-family:'Fraunces',Georgia,serif; font-size:1.3rem; margin:0; color:var(--pf-ink); }
.pf-rp-viewall{ font-size:13px; font-weight:600; color:var(--pf-accent-ink); text-decoration:none; white-space:nowrap; }
.pf-rp-viewall:hover{ text-decoration:underline; }

.pf-rp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.pf-rp-grid.pf-rp-grid-compact{ grid-template-columns:repeat(3,1fr); }
@media (max-width:1024px){ .pf-rp-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:640px){ .pf-rp-grid, .pf-rp-grid.pf-rp-grid-compact{ grid-template-columns:1fr; } }

.pf-rp-card{ display:block; background:var(--pf-surface); border:1px solid var(--pf-border); border-radius:var(--pf-radius); overflow:hidden; text-decoration:none; color:inherit; }
.pf-rp-card .pf-rp-thumb{ height:130px; background:var(--pf-surface-2); }
.pf-rp-card .pf-rp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pf-rp-thumb-fallback{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; color:var(--pf-ink-mute); font-size:22px; }
.pf-rp-card .pf-rp-body{ padding:13px 15px 15px; }

.pf-rp-cat{ display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--pf-accent-ink); margin-bottom:6px; }
.pf-rp-body h3{ font-family:'Fraunces',Georgia,serif; font-size:15px; line-height:1.32; margin:0 0 10px; color:var(--pf-ink); }
.pf-rp-meta{ display:flex; justify-content:space-between; font-size:12px; color:var(--pf-ink-mute); }
.pf-rp-meta .pf-rp-rt{ font-family:'IBM Plex Mono',monospace; }

.pf-rp-list{ display:flex; flex-direction:column; gap:10px; }
.pf-rp-row{ display:grid; grid-template-columns:80px 1fr; gap:12px; align-items:center; padding:8px; border-radius:var(--pf-radius-sm); text-decoration:none; color:inherit; }
.pf-rp-row:hover{ background:var(--pf-surface-2); }
.pf-rp-row .pf-rp-thumb{ height:58px; width:80px; border-radius:var(--pf-radius-sm); overflow:hidden; background:var(--pf-surface-2); }
.pf-rp-row .pf-rp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.pf-rp-row .pf-rp-body{ padding:0; }
.pf-rp-row .pf-rp-body h3{ font-size:13.5px; margin:0 0 4px; }
.pf-rp-row .pf-rp-cat{ margin-bottom:3px; }

/* Archive / list */
.pf-page-head{ margin-bottom:28px; }
.pf-page-title{ font-size:clamp(1.8rem,3.6vw,2.6rem); font-weight:700; margin:4px 0; }
.pf-page-sub{ color:var(--pf-ink-mute); font-size:14px; }
.pf-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:22px; }
.pf-post-card{ display:block; text-decoration:none; }
.pf-post-cover{ width:100%; height:170px; object-fit:cover; border-radius:var(--pf-radius-sm); background:var(--pf-surface-2); margin-bottom:10px; }
.pf-post-badges{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:6px; }
.pf-post-title{ font-size:18px; font-weight:700; line-height:1.3; margin:0 0 6px; }
.pf-post-excerpt{ font-size:13.5px; color:var(--pf-ink-mute); line-height:1.55; margin:0 0 8px; }
.pf-post-meta{ font-size:12px; color:var(--pf-ink-mute); }
.pf-empty{ text-align:center; padding:60px 20px; color:var(--pf-ink-mute); }

/* Preview banner (unpublished / scheduled) */
.pf-preview-banner{ background:var(--pf-gold-tint); color:var(--pf-gold); border:1px solid var(--pf-gold); border-radius:var(--pf-radius-sm); padding:12px 16px; font-size:13.5px; margin-bottom:20px; display:flex; align-items:center; gap:8px; }

@media (max-width:767px){
  .pf-grid{ grid-template-columns:1fr; }
}