/* ============================================================
   REASONS.CSS — /assets/css/reasons.css
   "25 Reasons Jesus is False" — square-image card grid.

   Square source images mean no cropping tradeoff here (unlike the
   proof/witnesses timeline, where object-fit:cover would have cut off
   baked-in text on tall infographics) — a clean grid works fine.

   .topic-trigger / .topic-reveal (hover-to-reveal subtitle) are
   shared, universal classes already defined in post.css — reused
   here rather than redefined, same as every other topic page.
   ============================================================ */

/* ── HERO ── */
.reasons-hero{background:linear-gradient(135deg,#2A0A0A,#4A1010);padding:3rem 1.5rem 2.4rem;text-align:center;transition:background .35s;}
.reasons-hero-inner{max-width:1100px;margin:0 auto;}
.reasons-hero h1{font-family:'Manakahthey',var(--font-serif);font-size:clamp(1.7rem,4.5vw,2.6rem);font-weight:700;color:#fff;line-height:1.2;}
.reasons-hero h1 em{color:#E8503A;font-style:italic;}
.reasons-hero-title{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;}
.reasons-hero-icon{width:44px;height:44px;object-fit:contain;flex-shrink:0;}
.reasons-hero-icon-dark{display:none;}
#site[data-theme="dark"] .reasons-hero-icon-light{display:none;}
#site[data-theme="dark"] .reasons-hero-icon-dark{display:block;}
@media(max-width:600px){
  .reasons-hero-icon{width:32px;height:32px;}
}

/* ── GRID ── */
.reasons-main{max-width:900px;margin:0 auto;padding:2.2rem 1.2rem 3rem;}
.reasons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1rem;}

.reason-card{display:block;text-decoration:none;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:var(--card);transition:transform .18s,box-shadow .18s,border-color .18s;}
.reason-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.12);border-color:#E8503A;}

.reason-img{position:relative;width:100%;aspect-ratio:1/1;background:linear-gradient(135deg,#2A0A0A,#4A1010);}
.reason-img img{width:100%;height:100%;object-fit:cover;display:block;}
.reason-num{position:absolute;top:8px;left:8px;font-family:var(--font-sans);font-size:.68rem;font-weight:800;padding:3px 9px;border-radius:20px;background:rgba(0,0,0,.6);color:#fff;letter-spacing:.03em;}

.reason-body{padding:.7rem .85rem .85rem;}
.reason-title{font-family:'Manakahthey',var(--font-serif);font-size:.9rem;font-weight:700;color:var(--text);line-height:1.32;margin:0;}

/* ── EMPTY ── */
.reasons-empty{text-align:center;padding:3rem 1rem;color:var(--text3);}
.reasons-empty-ico{font-size:2.5rem;margin-bottom:.8rem;opacity:.4;}
.reasons-empty h3{font-family:var(--font-serif);font-size:1rem;color:var(--text);margin-bottom:.4rem;}
.reasons-empty p{font-family:var(--font-sans);font-size:.82rem;color:var(--text2);}

/* ── RESPONSIVE ── */
@media(max-width:600px){
  .reasons-hero{padding:2rem 1rem 1.8rem;}
  .reasons-main{padding:1.4rem .9rem 2.2rem;}
  .reasons-grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.7rem;}
  .reason-title{font-size:.84rem;}
}