/**
 * related-posts.css — related-article cards for SmartMowBot article pages
 *
 * ⚠️ ERP contract: post_optimizer emits `.related-posts-section` / `.related-posts-list`
 * / `.related-posts-card` / `.related-posts-card-image` / `-title` / `-excerpt`, and
 * shared_assets.py flags the site if this file is missing. Class names stay identical.
 *
 * Tokens: #16A34A turf · #15803D deep green · #1F2937 ink · #E2E5DE line
 *         #F5F7F4 wash · #6B7280 muted · Archivo (titles) + Inter (body)
 */

/* ========== Section container ========== */
.related-posts-section,
[data-post-optimizer="related-posts"] {
  box-sizing: border-box;
  margin: 4rem 0 2rem;
  padding: 3rem 0 1rem;
  border-top: 1px solid #E2E5DE;
}

.related-posts-header {
  text-align: center;
  margin-bottom: 2rem;
}

.related-posts-title,
.related-posts-section > .container > h2 {
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: #1F2937;
  margin: 0 0 0.5rem;
}

/* ========== Structure A: post_optimizer grid ========== */
.related-posts-list {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Grid children must be able to shrink below min-content, otherwise a long unbroken
   title or a wide image pushes the whole grid past the viewport on mobile. */
.related-posts-list > * { min-width: 0; }

@media (min-width: 992px) {
  .related-posts-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .related-posts-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767.98px) {
  .related-posts-list {
    grid-template-columns: 1fr;
  }
}

/* ========== Cards (both structures share the look) ========== */
.related-posts-card,
.related-post-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #fff;
  border: 1px solid #E2E5DE;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(31, 41, 55, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  text-decoration: none;
}

.related-posts-card:hover,
.related-post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(31, 41, 55, 0.12);
}

/* ========== Media / image ========== */
.related-posts-card-media {
  display: block;
  overflow: hidden;
  background: #F5F7F4;
}

.related-posts-card-image,
.related-post-image {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
  transition: transform 0.4s ease;
}

.related-posts-card:hover .related-posts-card-image,
.related-post-card:hover .related-post-image {
  transform: scale(1.04);
}

/* ========== Content / body ========== */
.related-posts-card-content,
.related-post-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.25rem 1.5rem;
}

/* ========== Category badge (structure B) ==========
   Deep green, not the turf green — this is 0.72rem uppercase text on white, where
   #16A34A only reaches 3.2:1. #15803D gets it to 4.9:1. */
.related-post-category {
  display: inline-block;
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-color, #15803D);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

/* ========== Titles ========== */
.related-posts-card-title,
.related-post-title {
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1F2937;
  margin: 0 0 0.6rem;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

.related-posts-card-link,
.related-post-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.25s ease;
}

.related-posts-card-link:hover,
.related-post-title a:hover {
  color: #15803D;
  text-decoration: none;
}

/* ========== Excerpt ========== */
.related-posts-card-excerpt,
.related-post-excerpt {
  flex: 1;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #6B7280;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}

/* Bootstrap row equal-height support */
.related-posts-section .row.g-4 > [class*="col-"] {
  display: flex;
}

/* ========== render_article.py literal markup ==========
   _inject_plan_blocks() emits exactly this shape (no wrapper <div class="container">,
   no -media/-content/-title suffixes):
     <section class="related-posts-section"><h2>Related Articles</h2>
       <div class="related-posts-list">
         <a href="/{slug}" class="related-posts-card">
           <img src="{thumb}" alt="{title}" loading="lazy">
           <div class="related-posts-card-body"><h3>{title}</h3></div>
         </a>
       </div>
     </section>
   Style that shape directly — it never carries the -media/-content/-title classes. */
.related-posts-section > h2 {
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  font-size: 1.75rem;
  font-weight: 800;
  color: #1F2937;
  margin: 0 0 1.5rem;
  text-align: center;
}

.related-posts-card > img {
  display: block;
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
  flex-shrink: 0;
  background: #F5F7F4;
  transition: transform 0.4s ease;
}

.related-posts-card:hover > img {
  transform: scale(1.04);
}

.related-posts-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.25rem 1.5rem;
}

.related-posts-card-body h3 {
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1F2937;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* ========== Empty state ==========
   Shown when an article has no siblings yet. Keeps the section from collapsing into
   a bare heading with nothing under it. */
.related-posts-list:empty::after,
.related-posts-empty {
  grid-column: 1 / -1;
  display: block;
  content: 'More SmartMowBot articles are on the way.';
  padding: 2.5rem 1.25rem;
  background: #F5F7F4;
  border: 1px dashed #E2E5DE;
  border-radius: 10px;
  color: #6B7280;
  font-size: 0.95rem;
  text-align: center;
}