/* Blog templates only — enqueued on is_home() || is_category() || is_singular('post') */

/* ---------- Breadcrumb ---------- */
.blog-breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:0.5rem;font-family:var(--font-sans);font-size:0.75rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-muted);margin-bottom:1.5rem}
.blog-breadcrumb a{color:var(--forest-800);text-decoration:none}
.blog-breadcrumb a:hover{color:var(--forest-700);text-decoration:underline}
.blog-breadcrumb span{opacity:.5}

/* ---------- Index / category card grid ---------- */
.blog-index__head{max-width:42rem;margin:0 auto 4rem;text-align:center}
.blog-index__intro{font-family:var(--font-serif);font-style:italic;font-size:1.25rem;line-height:1.55;color:var(--fg-muted);margin-top:1.25rem}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;max-width:78rem;margin:0 auto}
.blog-card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:var(--bg-elevated);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-xs);transition:box-shadow 220ms ease,transform 220ms ease}
.blog-card:hover{box-shadow:var(--shadow-sm);transform:translateY(-3px)}
.blog-card:hover .blog-card__title{color:var(--forest-700)}
.blog-card__media{aspect-ratio:4/3;background:var(--nude-200) center/cover no-repeat;position:relative}
.blog-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.blog-card__body{padding:1.5rem 1.5rem 1.75rem;display:flex;flex-direction:column;flex:1}
.blog-card__cat{font-family:var(--font-sans);font-size:0.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--forest-800);margin-bottom:0.75rem}
.blog-card__title{font-family:var(--font-serif);font-weight:400;font-size:1.375rem;line-height:1.3;color:var(--fg);margin:0 0 0.625rem;transition:color 180ms ease}
.blog-card__excerpt{font-family:var(--font-sans);font-size:0.9375rem;line-height:1.6;color:var(--fg-muted);margin:0 0 1.25rem;flex:1}
.blog-card__date{font-family:var(--font-sans);font-size:0.75rem;letter-spacing:.04em;color:var(--fg-subtle);margin-top:auto}

/* ---------- Article shell ---------- */
/* margin-bottom (not padding) so it collapses with .blog-related's margin-top when related
   posts follow — same breathing room either way, no double gap when both are present, and
   still clears the footer when a post (like a lone category's only entry) has no related
   posts to fall back on. */
.blog-article{max-width:70ch;margin:0 auto 6rem;padding:0 3rem}
.blog-article__meta{display:flex;align-items:center;gap:0.75rem;margin:1.25rem 0 1.75rem}
.blog-article__meta time{font-family:var(--font-sans);font-size:0.8125rem;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-subtle)}
.blog-article__hero{margin:0 0 3rem;border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.blog-article__hero img{width:100%;height:auto;display:block}

/* ---------- Table of contents ---------- */
.blog-toc{background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);margin:0 0 3rem;padding:0}
.blog-toc__summary{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;padding:1.125rem 1.375rem;font-family:var(--font-sans);font-size:0.8125rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--forest-800)}
.blog-toc__summary::-webkit-details-marker{display:none}
.blog-toc__summary .blog-toc__chevron{width:0.875rem;height:0.875rem;flex-shrink:0;transition:transform 200ms ease;color:var(--forest-800)}
.blog-toc[open] .blog-toc__chevron{transform:rotate(180deg)}
.blog-toc__list{list-style:none;margin:0;padding:0 1.375rem 1.375rem;display:flex;flex-direction:column;gap:0.625rem}
.blog-toc__list a{font-family:var(--font-sans);font-size:0.9375rem;color:var(--fg-muted);text-decoration:none;line-height:1.5}
.blog-toc__list a:hover{color:var(--forest-800);text-decoration:underline}

/* ---------- Prose ---------- */
.blog-content{font-family:var(--font-sans);font-size:1.1875rem;line-height:1.75;color:var(--fg)}
.blog-content p{margin:0 0 1.5rem}
.blog-content h2{font-family:var(--font-serif);font-weight:500;font-size:1.875rem;line-height:1.25;letter-spacing:-.005em;color:var(--fg);margin:3rem 0 1.25rem;scroll-margin-top:2rem}
.blog-content h3{font-family:var(--font-serif);font-weight:500;font-size:1.4375rem;line-height:1.3;color:var(--forest-800);margin:2.25rem 0 1rem;scroll-margin-top:2rem}
.blog-content h2:first-child,.blog-content h3:first-child{margin-top:0}
.blog-content a{color:var(--forest-800);text-decoration-color:var(--border-strong)}
.blog-content a:hover{color:var(--forest-700)}
.blog-content ul,.blog-content ol{margin:0 0 1.5rem;padding-left:1.375rem}
.blog-content li{margin:0 0 0.625rem;line-height:1.7}
.blog-content li::marker{color:var(--forest-800)}
.blog-content blockquote{margin:2.5rem 0;padding:0.25rem 0 0.25rem 1.5rem;border-left:3px solid var(--gold);font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:1.375rem;line-height:1.5;color:var(--forest-800)}
.blog-content img{max-width:100%;height:auto;border-radius:var(--radius-md);margin:2rem 0}
.blog-content .blog-callout{background:var(--forest-050);border:1px solid var(--forest-100);border-radius:var(--radius-md);padding:1.375rem 1.625rem;margin:2.5rem 0}
.blog-content .blog-callout p{margin:0;font-size:1.0625rem;line-height:1.65}
.blog-content .blog-callout strong{color:var(--forest-800)}

/* ---------- Mid-post price teaser ([aj_price_teaser] shortcode) ----------
   A sibling of .blog-callout in weight, not a button-heavy ad block: an icon, one line of
   text, and an inline link. */
.blog-content .blog-price-teaser{display:flex;align-items:center;gap:0.875rem;background:var(--nude-100);border:1px solid var(--border);border-radius:var(--radius-md);padding:1.125rem 1.5rem;margin:2.5rem 0;font-family:var(--font-sans);font-size:1.0625rem;line-height:1.5;color:var(--fg)}
.blog-price-teaser svg{flex-shrink:0;color:var(--forest-800)}
.blog-price-teaser a{color:var(--forest-800);font-weight:700;text-decoration:none;white-space:nowrap}
.blog-price-teaser a:hover{text-decoration:underline}

/* ---------- CTA block ---------- */
.blog-cta{background:var(--forest-800);color:var(--nude-100);border-radius:var(--radius-md);padding:2.75rem 2.5rem;text-align:center;margin:3.5rem 0}
.blog-cta__h{font-family:var(--font-serif);font-weight:300;font-size:1.875rem;line-height:1.25;color:var(--nude-100);margin:0 0 1.75rem}
.blog-cta em{color:var(--gold-300);font-style:italic}

/* ---------- Author box ---------- */
.blog-author{display:flex;align-items:center;gap:1.25rem;padding:2rem;background:var(--bg-elevated);border:1px solid var(--border);border-radius:var(--radius-md);margin:3.5rem 0 0}
.blog-author__avatar{width:4rem;height:4rem;border-radius:50%;object-fit:cover;flex-shrink:0;background:var(--nude-200)}
.blog-author__name{font-family:var(--font-sans);font-size:0.9375rem;font-weight:700;letter-spacing:.04em;color:var(--fg);margin:0 0 0.25rem}
.blog-author__bio{font-family:var(--font-sans);font-size:0.9375rem;line-height:1.55;color:var(--fg-muted);margin:0}

/* ---------- Pagination ---------- */
.blog-pagination{display:flex;justify-content:center;gap:2.5rem;margin-top:4rem;font-family:var(--font-sans);font-size:0.8125rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.blog-pagination a{color:var(--forest-800);text-decoration:none}
.blog-pagination a:hover{color:var(--forest-700);text-decoration:underline}

/* ---------- Related posts ---------- */
.blog-related{max-width:78rem;margin:5rem auto 0;padding:0 3rem}
.blog-related__h{text-align:center;margin-bottom:2.5rem}

/* ============ Tablet / mobile ============ */
@media(max-width:1024px){
  .blog-grid{grid-template-columns:repeat(2,1fr);gap:2rem}
}

@media(max-width:768px){
  .blog-article{margin-bottom:4rem}
  .blog-article,.blog-index__head,.blog-related{padding-left:1.5rem;padding-right:1.5rem}
  .blog-grid{padding-left:1.5rem;padding-right:1.5rem}
  .blog-content{font-size:1.0625rem;line-height:1.7}
  .blog-content h2{font-size:1.5rem;margin:2.5rem 0 1rem}
  .blog-content h3{font-size:1.1875rem;margin:1.875rem 0 0.875rem}
  .blog-content blockquote{font-size:1.1875rem}
  .blog-cta{padding:2.25rem 1.5rem}
  .blog-cta__h{font-size:1.5rem}
  .blog-author{flex-direction:column;text-align:center}
}

@media(max-width:640px){
  .blog-grid{grid-template-columns:1fr}
  .blog-article,.blog-index__head,.blog-related,.blog-grid{padding-left:1.25rem;padding-right:1.25rem}
}