/* ===================================================================
   Stockpile Reports — Blog Styles
   Shared across blog.html and all individual blog post pages.
   =================================================================== */

/* Blog listing grid */
.blog-listing{max-width:980px;margin:0 auto}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.875rem}
.blog-card{background:var(--white);border-radius:8px;overflow:hidden;border:1px solid var(--border);transition:box-shadow .2s}
.blog-card:hover{box-shadow:0 4px 20px rgba(0,0,0,0.1)}
.blog-card a{text-decoration:none;color:inherit;display:block}
.blog-card-img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.blog-card-body{padding:1.25rem}
.blog-card-date{font-size:0.8125rem;color:var(--gray);font-weight:400;margin-bottom:0.5rem}
.blog-card-title{font-size:1.0625rem;font-weight:500;color:var(--body);line-height:1.4;margin-bottom:0.625rem}
.blog-card-excerpt{font-size:0.875rem;color:var(--subtle);line-height:1.6}

/* Post page */
.post-header{max-width:780px;margin:0 auto;text-align:center;padding-bottom:2rem}
.post-title{font-size:2.25rem;font-weight:500;color:var(--body);line-height:1.3;margin-bottom:1rem}
.post-meta{font-size:0.875rem;color:var(--gray);font-weight:400}
.post-featured-img{max-width:780px;margin:0 auto 2.5rem;border-radius:8px;overflow:hidden}
.post-featured-img img{width:100%;height:auto;display:block}
.post-content{max-width:780px;margin:0 auto}
.post-content p{font-size:1.0625rem;line-height:1.8;color:var(--body);margin-bottom:1.25rem}
.post-content h2{font-size:1.75rem;font-weight:500;color:var(--body);margin:2.5rem 0 1rem}
.post-content h3{font-size:1.375rem;font-weight:500;color:var(--body);margin:2rem 0 0.75rem}
.post-content h4{font-size:1.125rem;font-weight:500;color:var(--body);margin:1.5rem 0 0.625rem}
.post-content img{max-width:100%;height:auto;border-radius:6px;margin:1.25rem 0}
.post-content video,.post-content iframe{max-width:100%;height:auto}
.post-content .video-embed-wrapper{position:relative;padding-bottom:56.25%;height:0;overflow:hidden}
.post-content .video-embed-wrapper iframe{position:absolute;top:0;left:0;width:100%;height:100%}
.post-content figure{margin:1.5rem 0}
.post-content figcaption{font-size:0.8125rem;color:var(--gray);text-align:center;margin-top:0.5rem}
.post-content ul,.post-content ol{margin:1rem 0 1.25rem 1.5rem;font-size:1.0625rem;line-height:1.8;color:var(--body)}
.post-content ul{list-style:disc}
.post-content ol{list-style:decimal}
.post-content li{margin-bottom:0.5rem}
.post-content blockquote{border-left:3px solid var(--yellow);margin:1.5rem 0;padding:1rem 1.5rem;font-style:italic;color:var(--muted)}
.post-content a{color:var(--yellow);font-weight:500}
.post-content a:hover{text-decoration:underline}
.post-back{display:inline-block;font-size:0.875rem;font-weight:500;color:var(--yellow);margin-bottom:2rem;text-decoration:none;min-height:44px;display:flex;align-items:center}
.post-back:hover{text-decoration:underline}

/* Blog post footer navigation */
.post-nav{display:flex;justify-content:space-between;align-items:center;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)}
.post-nav a{font-size:0.875rem;color:var(--yellow);font-weight:500;text-decoration:none;min-height:44px;display:flex;align-items:center}
.post-nav a:hover{text-decoration:underline}

/* Responsive */
@media(max-width:768px){
  .blog-grid{grid-template-columns:1fr}
  .post-title{font-size:1.75rem}
  .post-content p,.post-content ul,.post-content ol{font-size:1rem}
}


/* Related posts section */
.related-posts{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--border)}
.related-posts h3{font-size:1.25rem;color:var(--body);margin-bottom:1rem;font-weight:500}
.related-posts-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.related-post-card{padding:1rem;border:1px solid var(--border);border-radius:0.5rem;text-decoration:none;transition:border-color 0.2s}
.related-post-card:hover{border-color:var(--yellow)}
.related-post-title{font-size:0.9375rem;color:var(--body);font-weight:500;display:block}

/* Responsive */
@media(max-width:768px){
  .related-posts-grid{grid-template-columns:1fr}
}