/* ============================================================
   blog.css  —  The Student Life blog / guides
   Loaded after styles.css. Uses the global :root tokens.
   Components mirror the guide format: tldr callout, comparison
   cards, price cards, stat table, faq, post CTA, blog index.
   ============================================================ */

/* ---------- solid nav on blog pages (no dark hero behind it) ---------- */
body.blog-page .nav{ position:fixed; left:0; right:0; top:0; z-index:1100; background:rgba(255,246,240,.94);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 1px 0 var(--line), 0 8px 30px -22px rgba(40,20,10,.5); }
body.blog-page .nav-links a, body.blog-page .nav-burger{ color:var(--ink); }
body.blog-page .nav-socials a{ color:var(--ink); }

/* ---------- article shell ---------- */
.blog-main{ padding-top:84px; }
.article-wrap{ max-width:820px; margin:0 auto; padding:0 22px; }
.breadcrumb{ font-size:13px; color:#8a766b; margin:26px 0 0; }
.breadcrumb a{ color:#8a766b; text-decoration:none; }
.breadcrumb a:hover{ color:var(--orange); }

.blog-head{ padding:18px 0 8px; }
.blog-eyebrow{ display:inline-block; font-weight:800; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--orange); background:var(--orange-soft); border-radius:999px; padding:6px 14px; }
.blog-head h1{ font-size:clamp(30px,4.6vw,50px); line-height:1.08; margin:16px 0 12px; letter-spacing:-.01em; }
.blog-meta{ font-size:14px; color:#8a766b; font-weight:600; }
.blog-meta strong{ color:var(--ink); }

.blog-hero-img{ margin:22px 0 8px; border:2px solid var(--ink); border-radius:20px; overflow:hidden; box-shadow:6px 6px 0 var(--ink); }
.blog-hero-img > img{ width:100%; height:clamp(220px,34vw,420px); object-fit:cover; display:block; }
/* editorial VS header for comparison posts */
.blog-hero-split{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:0; }
.hsplit-half{ position:relative; min-width:0; }
.hsplit-half img{ width:100%; height:clamp(230px,30vw,380px); object-fit:cover; display:block; }
.hsplit-half:first-child{ border-right:2px solid var(--ink); }
.hsplit-half::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.12) 50%,rgba(0,0,0,.6) 100%); }
.hsplit-label{ position:absolute; bottom:15px; left:20px; z-index:2; color:#fff; font-weight:900; letter-spacing:-.01em;
  font-size:clamp(20px,2.7vw,30px); text-shadow:0 2px 16px rgba(0,0,0,.55); }
.hsplit-label.right{ left:auto; right:20px; }
.vs-badge{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  width:clamp(48px,6.4vw,64px); height:clamp(48px,6.4vw,64px); display:grid; place-items:center; border-radius:50%;
  background:var(--orange); color:#fff; border:3px solid var(--ink); box-shadow:4px 4px 0 var(--ink);
  font-weight:900; font-size:clamp(15px,1.9vw,20px); }

/* ---------- prose ---------- */
.prose{ font-size:17.5px; line-height:1.72; color:#2c2420; }
.prose > p, .prose > ul, .prose > ol{ margin:0 0 20px; }
.prose h2{ font-size:clamp(23px,3vw,32px); line-height:1.18; margin:42px 0 14px; letter-spacing:-.01em; }
.prose h3{ font-size:19px; margin:26px 0 10px; }
.prose strong{ font-weight:800; color:var(--ink); }
.prose a{ color:var(--orange-deep); font-weight:700; text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1.5px; }
.prose a:hover{ color:var(--orange); }
.prose ul, .prose ol{ padding-left:22px; }
.prose li{ margin:0 0 9px; }
.prose blockquote{ margin:24px 0; padding:14px 20px; border-left:4px solid var(--orange); background:#fff; border-radius:0 12px 12px 0; }

/* ---------- TL;DR callout ---------- */
.tldr{ background:var(--orange-soft); border:2px solid var(--ink); border-radius:18px; box-shadow:5px 5px 0 var(--ink);
  padding:20px 24px; margin:8px 0 30px; }
.tldr .tldr-tag{ display:inline-block; font-weight:900; font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--orange-deep); margin-bottom:8px; }
.tldr p{ margin:0; font-size:16.5px; line-height:1.6; color:#2c2420; }
.tldr strong{ color:var(--ink); font-weight:800; }

/* ---------- comparison cards ---------- */
.comparison-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:8px 0 26px; }
.comparison-card{ background:#fff; border:2px solid var(--ink); border-radius:18px; box-shadow:4px 4px 0 var(--ink); padding:0; overflow:hidden; }
.comparison-card .cc-photo{ height:132px; overflow:hidden; border-bottom:2px solid var(--ink); position:relative; }
.comparison-card .cc-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.comparison-card .cc-in{ padding:16px 20px 18px; }
.comparison-card h3{ margin:0 0 12px; font-size:20px; }
.comparison-card ul{ margin:0; padding-left:0; list-style:none; }
.comparison-card li{ font-size:15px; line-height:1.5; margin:0 0 9px; color:#4a3d36; }
.comparison-card li:last-child{ margin-bottom:0; }
.comparison-card li strong{ color:var(--ink); }

/* ---------- price cards ---------- */
.price-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:16px; margin:8px 0 26px; }
.price-card{ background:#fff; border:2px solid var(--ink); border-radius:16px; box-shadow:3px 3px 0 var(--ink); padding:16px 18px; }
.price-card h3{ margin:0 0 6px; font-size:15px; }
.price-card .price-main{ margin:0 0 6px; font-size:20px; color:var(--orange-deep); font-weight:800; }
.price-card p{ margin:0; font-size:14px; line-height:1.5; color:#5a4d45; }

/* ---------- stat comparison table ---------- */
.cmp-table-wrap{ overflow-x:auto; margin:8px 0 28px; border:2px solid var(--ink); border-radius:16px; box-shadow:5px 5px 0 var(--ink); background:#fff; }
table.cmp{ width:100%; border-collapse:collapse; font-size:15px; }
table.cmp th, table.cmp td{ text-align:left; padding:12px 15px; border-bottom:1.5px solid var(--line); vertical-align:middle; white-space:nowrap; }
table.cmp thead th{ background:var(--ink); color:#fff; font-size:12.5px; letter-spacing:.03em; text-transform:uppercase; font-weight:800; }
table.cmp tbody tr:last-child td{ border-bottom:0; }
table.cmp td:first-child, table.cmp th:first-child{ font-weight:800; color:var(--ink); background:var(--paper-2); position:sticky; left:0; }
table.cmp tbody tr:nth-child(even) td:not(:first-child){ background:#fdf3ee; }
table.cmp td .hl{ color:var(--orange-deep); font-weight:800; }

/* ---------- FAQ ---------- */
.faq-block{ margin:34px 0 10px; }
.faq-q{ background:#fff; border:2px solid var(--ink); border-radius:14px; box-shadow:3px 3px 0 var(--ink); padding:16px 20px; margin:0 0 14px; }
.faq-q h3{ margin:0 0 7px; font-size:17px; }
.faq-q p{ margin:0; font-size:15.5px; line-height:1.6; color:#4a3d36; }

/* ---------- post CTA ---------- */
/* CTA: warm orange card matching the landing page, with soft white circles (not flat orange) */
.post-cta{ position:relative; overflow:hidden; background:var(--orange); color:#fff; border-radius:28px; padding:40px 30px; margin:40px 0; text-align:center;
  box-shadow:6px 6px 0 var(--ink); border:2px solid var(--ink); }
.post-cta .blob{ filter:blur(0); opacity:.16; }
.post-cta .cta-in{ position:relative; z-index:2; }
.post-cta h3{ margin:0 0 10px; font-size:clamp(24px,3.2vw,34px); color:#fff; }
.post-cta p{ margin:0 auto 22px; max-width:48ch; color:rgba(255,255,255,.95); font-size:17px; line-height:1.5; }
.post-cta .btn{ margin:5px 6px; }
/* buttons must NOT inherit the underlined prose-link style; keep them readable on the orange card */
.prose a.btn, .prose a.btn:hover, .post-cta a.btn, .post-cta a.btn:hover{ text-decoration:none; }
.prose a.btn-white, .prose a.btn-white:hover, .post-cta a.btn-white, .post-cta a.btn-white:hover{ color:var(--ink); }
.prose a.btn-ink, .post-cta a.btn-ink, .post-cta a.btn-ink:hover{ color:#fff; }

/* in-line related links footer */
.related{ border-top:2px solid var(--line); margin-top:40px; padding-top:22px; }
.related h4{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:#8a766b; margin:0 0 12px; }
.related a{ display:block; color:var(--orange-deep); font-weight:700; text-decoration:none; margin:0 0 8px; }
.related a:hover{ color:var(--orange); }

/* ---------- blog index ---------- */
.blog-index-head{ text-align:center; max-width:680px; margin:30px auto 8px; }
.blog-index-head h1{ font-size:clamp(32px,5vw,54px); margin:14px 0 10px; }
.blog-index-head p{ color:#5a4d45; font-size:18px; }
.blog-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; max-width:1140px; margin:34px auto 10px; padding:0 22px; }
.blog-card{ background:#fff; border:2px solid var(--ink); border-radius:18px; box-shadow:5px 5px 0 var(--ink); overflow:hidden;
  display:flex; flex-direction:column; text-decoration:none; color:var(--ink); transition:transform .14s, box-shadow .14s; }
.blog-card:hover{ transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink); }
.blog-card.soon{ opacity:.62; pointer-events:none; box-shadow:4px 4px 0 var(--line); border-color:#d8c8ba; }
.blog-card .bc-img{ height:168px; background:var(--paper-2); overflow:hidden; position:relative; }
.blog-card .bc-img img{ width:100%; height:100%; object-fit:cover; }
.blog-card .bc-tag{ position:absolute; top:12px; left:12px; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  background:var(--orange); color:#fff; border:2px solid var(--ink); border-radius:999px; padding:3px 10px; }
.blog-card .bc-tag.soontag{ background:#fff; color:#8a766b; }
.blog-card .bc-body{ padding:16px 18px 18px; display:flex; flex-direction:column; gap:8px; }
.blog-card .bc-body h3{ margin:0; font-size:17.5px; line-height:1.25; }
.blog-card .bc-body p{ margin:0; font-size:14px; color:#6a5d54; line-height:1.5; }

@media (max-width:680px){
  .comparison-grid{ grid-template-columns:1fr; }
  .blog-hero-split{ grid-template-columns:1fr; }
  .prose{ font-size:16.5px; }
}