/* ═══════════════════════════════════════
   DESIRE PUBLIC SCHOOL — BLOG STYLES
═══════════════════════════════════════ */

.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:3rem; }
.blog-card { background:#fff; border-radius:18px; overflow:hidden; border:1px solid var(--sand-d); box-shadow:var(--shadow); transition:all 0.3s cubic-bezier(0.16,1,0.3,1); display:flex; flex-direction:column; }
.blog-card:hover { transform:translateY(-6px); box-shadow:0 20px 56px rgba(196,83,26,0.1); border-color:rgba(196,83,26,0.2); }
.blog-card-thumb { height:180px; display:flex; align-items:center; justify-content:center; font-size:3.5rem; flex-shrink:0; }
.blog-card-body { padding:1.5rem; flex:1; display:flex; flex-direction:column; }
.blog-card-cat { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--flame); margin-bottom:0.5rem; }
.blog-card-title { font-family:'Fraunces',serif; font-size:1.15rem; font-weight:700; color:var(--ink); line-height:1.35; margin-bottom:0.75rem; text-decoration:none; display:block; }
.blog-card-title:hover { color:var(--flame); }
.blog-card-excerpt { font-size:13px; color:var(--ink-200); line-height:1.75; font-weight:300; flex:1; }
.blog-card-meta { display:flex; align-items:center; justify-content:space-between; margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--sand-d); }
.blog-card-date { font-size:11px; color:var(--ink-200); }
.blog-card-read { font-size:11px; font-weight:700; color:var(--flame); text-transform:uppercase; letter-spacing:1px; text-decoration:none; }
.blog-card-read:hover { text-decoration:underline; }

/* POST HERO */
.post-hero { background:linear-gradient(135deg,var(--ink) 0%,#112647 100%); padding:4rem 2rem 3rem; position:relative; overflow:hidden; }
.post-hero::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse 60% 80% at 70% 50%,rgba(196,83,26,0.1) 0%,transparent 60%); }
.post-hero .container { position:relative; z-index:2; }
.post-cat { display:inline-block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:2px; color:var(--flame-l); background:rgba(196,83,26,0.12); border:1px solid rgba(196,83,26,0.3); border-radius:100px; padding:5px 14px; margin-bottom:1.25rem; }
.post-h1 { font-size:clamp(1.8rem,4vw,3rem); font-weight:900; color:#fff; letter-spacing:-1px; line-height:1.15; margin-bottom:1.25rem; }
.post-meta { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.post-meta-item { font-size:12px; color:rgba(255,255,255,0.45); }

/* POST LAYOUT */
.post-layout { display:grid; grid-template-columns:1fr 300px; gap:4rem; align-items:start; max-width:1100px; margin:0 auto; padding:4rem 2rem; }
.post-content { min-width:0; }
.post-content h2 { font-family:'Fraunces',serif; font-size:1.6rem; font-weight:700; color:var(--ink); margin:2.5rem 0 1rem; letter-spacing:-0.5px; }
.post-content h3 { font-family:'Fraunces',serif; font-size:1.2rem; font-weight:700; color:var(--ink); margin:2rem 0 0.75rem; }
.post-content p { font-size:16px; color:var(--ink-400); line-height:1.9; margin-bottom:1.25rem; font-weight:300; }
.post-content p strong { color:var(--ink); font-weight:600; }
.post-content ul,.post-content ol { margin:1.25rem 0 1.25rem 1.5rem; }
.post-content li { font-size:15px; color:var(--ink-400); line-height:1.8; margin-bottom:0.5rem; font-weight:300; }
.post-content a { color:var(--flame); text-decoration:underline; }

/* CALLOUT */
.post-callout { background:var(--sand); border-left:4px solid var(--flame); border-radius:0 12px 12px 0; padding:1.25rem 1.5rem; margin:2rem 0; }
.post-callout p { margin:0; font-size:15px; color:var(--ink-400); }

/* KEY POINTS */
.key-points { background:var(--ink); border-radius:16px; padding:2rem; margin:2rem 0; }
.key-points h4 { font-family:'Fraunces',serif; color:var(--flame-l); font-size:1rem; font-weight:700; margin-bottom:1rem; }
.key-points li { color:rgba(255,255,255,0.7) !important; font-size:14px !important; }

/* FAQ */
.post-faq-item { border-bottom:1px solid var(--sand-d); padding:1rem 0; }
.post-faq-q { font-family:'Fraunces',serif; font-size:1.05rem; font-weight:700; color:var(--ink); margin-bottom:0.5rem; }
.post-faq-a { font-size:14px; color:var(--ink-400); line-height:1.8; font-weight:300; }

/* SIDEBAR */
.post-sidebar { position:sticky; top:90px; }
.sidebar-card { background:var(--sand); border-radius:16px; padding:1.5rem; margin-bottom:1.5rem; border:1px solid var(--sand-d); }
.sidebar-card-title { font-family:'Fraunces',serif; font-size:1rem; font-weight:700; color:var(--ink); margin-bottom:1rem; padding-bottom:0.75rem; border-bottom:1px solid var(--sand-d); }
.sidebar-cta { background:var(--flame); border-radius:16px; padding:1.75rem; text-align:center; }
.sidebar-links { display:flex; flex-direction:column; gap:0.5rem; }
.sidebar-links a { font-size:13px; color:var(--ink-400); padding:0.5rem 0; border-bottom:1px solid var(--sand-d); transition:color 0.2s; text-decoration:none; }
.sidebar-links a:hover { color:var(--flame); }
.sidebar-links a:last-child { border-bottom:none; }

/* TAGS */
.post-bottom { background:var(--sand); border-top:1px solid var(--sand-d); padding:2rem; }
.post-bottom-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; }
.post-tags { display:flex; flex-wrap:wrap; gap:0.5rem; }
.post-tag { font-size:11px; font-weight:600; color:var(--ink-400); background:#fff; border:1px solid var(--sand-d); border-radius:100px; padding:5px 12px; text-decoration:none; }
.post-tag:hover { border-color:var(--flame); color:var(--flame); }

/* RELATED */
.related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2rem; }

/* MOBILE */
@media(max-width:900px){
  .post-layout{grid-template-columns:1fr;gap:2rem;padding:2.5rem 1.25rem;}
  .post-sidebar{position:static;}
  .related-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
  .blog-grid{grid-template-columns:1fr 1fr;gap:1.25rem;}
}
@media(max-width:640px){
  .blog-grid{grid-template-columns:1fr;}
  .post-hero{padding:3rem 1.25rem 2rem;}
  .post-h1{font-size:clamp(1.6rem,7vw,2.2rem);}
  .post-content h2{font-size:1.35rem;}
  .post-content p{font-size:15px;}
  .related-grid{grid-template-columns:1fr;}
  .post-bottom-inner{flex-direction:column;}
}