/*
  MJ Labs — blog styles, loaded after home.css on the blog pages
  ========================================
  @author    Jimmy Lindmark
  @copyright MJ STRATEGI TECH SOLUTIONS SL
  @license   All Rights Reserved

  home.css holds the site's colours, type, buttons, header and footer. This file only
  styles what is specific to the blog: the list, the cards, the article and the side column.
*/
.muted { color: var(--muted); }
.blog-page h1 { line-height: 1.08; }
.blog-body a { text-underline-offset: 3px; }
.blog-crumbs a, .blog-back, .side-toc a, .side-cats a { display: inline-flex; align-items: center; min-height: 32px; }
.blog-wide {max-width:1160px;margin:0 auto;padding:0 clamp(16px,5vw,32px)}
.blog-hero {background:var(--peach);padding:clamp(32px,5vw,56px) 0 clamp(24px,4vw,36px)}
.blog-crumbs {font-size:.95rem;color:var(--muted);margin:0 0 .9rem}
.blog-crumbs a {color:var(--blue);text-decoration:none}
.blog-crumbs a:hover {text-decoration:underline}
.blog-hero h1 {font-size:clamp(2.2rem,4.5vw,3.6rem);margin:0 0 .6rem;max-width:1100px}
.blog-lead {font-size:1.2rem;max-width:860px;margin:0 0 1.2rem;color:var(--ink)}
.blog-cats {display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0 0}
.blog-cats a {display:inline-flex;align-items:center;min-height:44px;font:700 1rem/1 Rajdhani,sans-serif;padding:.6rem 1.05rem;border-radius:999px;background:#fff;border:1px solid var(--line);color:var(--navy);text-decoration:none;transition:.2s}
.blog-cats a span {opacity:.55;font-weight:600;margin-left:.2rem}
.blog-cats a.on,.blog-cats a:hover {background:var(--blue);border-color:var(--blue);color:#fff}
.blog-subs a {font-size:.9rem;padding:.45rem .85rem;min-height:40px}
.blog-listing {padding:36px 0 80px}
.blog-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
@media(max-width:900px) {.blog-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px) {.blog-grid{grid-template-columns:1fr}}
.blog-card {display:flex;flex-direction:column;gap:.65rem;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 24px 20px;text-decoration:none;transition:transform .25s,box-shadow .25s}
.blog-card:hover {transform:translateY(-5px);box-shadow:var(--shadow)}
.blog-tag {font:700 .8rem/1 Rajdhani,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--c,var(--blue))}
.blog-card h2 {font-size:1.3rem;line-height:1.22;margin:0;color:var(--navy)}
.blog-card p {margin:0;font-size:.96rem;color:var(--muted)}
.blog-card-meta {margin-top:auto;padding-top:.4rem;font-size:.9rem;color:var(--muted)}
.blog-card-meta b {color:var(--c,var(--blue))}
.blog-feature {display:grid;gap:.8rem;margin:0 0 28px;padding:clamp(24px,4vw,40px);border-radius:var(--r);background:var(--navy);color:#d5def2;text-decoration:none;transition:transform .25s}
.blog-feature:hover {transform:translateY(-4px)}
.blog-feature .blog-tag {color:var(--amber)}
.blog-feature h2 {font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.15;margin:0;color:#fff;max-width:960px}
.blog-feature p {margin:0;font-size:1.1rem;max-width:860px;color:#d5def2}
.blog-feature .blog-card-meta,.blog-feature .blog-card-meta b {color:#fff}
.blog-pager {display:flex;gap:.4rem;flex-wrap:wrap;justify-content:center;margin-top:2.4rem}
.blog-pager a {min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:.6rem .8rem;border-radius:12px;border:1px solid var(--line);text-decoration:none;color:var(--navy);font-weight:700}
.blog-pager a.on {background:var(--blue);color:#fff;border-color:var(--blue)}
.blog-hero-post h1 {max-width:1200px}
.blog-meta {display:flex;flex-wrap:wrap;gap:.5rem .9rem;align-items:center;margin:.2rem 0 0;color:var(--muted)}
.blog-meta .blog-tag {background:#fff;border:1px solid var(--line);padding:.45rem .75rem;border-radius:999px}
.blog-post-wrap {padding:40px 0 30px}
.blog-post-grid {display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:clamp(28px,4vw,56px);align-items:start}
@media(max-width:1100px) {.blog-post-grid{grid-template-columns:1fr;gap:30px}.blog-side{order:2}.side-toc{display:none}}
.blog-article {min-width:0}
.blog-body {font-size:1.14rem;line-height:1.85;color:var(--ink)}
.blog-body p {margin:0 0 1.15rem}
.blog-body h2 {font-size:clamp(1.7rem,2.4vw,2.2rem);margin:2.6rem 0 .9rem;padding-top:.4rem;scroll-margin-top:100px;border-top:3px solid var(--line)}
.blog-body h3 {font-size:1.45rem;margin:1.9rem 0 .6rem;scroll-margin-top:100px}
.blog-body ul,.blog-body ol {padding-left:1.5rem;margin:0 0 1.3rem}
.blog-body li {margin:.45rem 0}
.blog-body li::marker {color:var(--c,var(--blue));font-weight:700}
.blog-body strong {color:var(--navy)}
.blog-body code {background:var(--peach);padding:.12rem .4rem;border-radius:6px;font-size:.92em}
.blog-body pre {background:#0f172a;color:#e2e8f0;padding:16px 18px;border-radius:14px;overflow:auto;font-size:.95rem;line-height:1.6;margin:0 0 1.4rem}
.blog-body pre code {background:none;padding:0}
.blog-body table {width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:1rem;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.blog-body th,.blog-body td {border:1px solid var(--line);padding:.7rem .9rem;text-align:left;vertical-align:top}
.blog-body th {background:var(--peach);font-family:Rajdhani,sans-serif;font-size:1.05rem}
.blog-body img {max-width:100%;height:auto;border-radius:14px}
.blog-body blockquote {margin:1.5rem 0;padding:.6rem 1.3rem;border-left:5px solid var(--amber);background:var(--peach);border-radius:0 12px 12px 0}
.blog-toc-m {display:none;margin:0 0 1.6rem;background:var(--peach);border-radius:16px;padding:14px 18px}
.blog-toc-m summary {font:700 1.1rem Rajdhani,sans-serif;cursor:pointer;color:var(--navy)}
.blog-toc-m ol {margin:.6rem 0 0;padding-left:1.2rem}
@media(max-width:1100px) {.blog-toc-m{display:block}}
.blog-side {position:sticky;top:96px;display:grid;gap:18px}
.side-card {background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 22px 20px}
.side-card h3 {font-size:1.25rem;margin:0 0 .7rem}
.side-card p {margin:0 0 1rem;font-size:.98rem}
.side-toc ol {margin:0;padding-left:1.15rem;display:grid;gap:.5rem}
.side-toc a {color:var(--ink);text-decoration:none;font-size:.98rem;line-height:1.35}
.side-toc a:hover {color:var(--blue)}
.side-cta {background:var(--blue);border-color:var(--blue);color:#e6efff}
.side-cta h3 {color:#fff}
.side-cta .btn {background:var(--amber);color:var(--navy);box-shadow:none;width:100%}
.side-phone {display:block;margin-top:.9rem;text-align:center;color:#fff;font:700 1.2rem Rajdhani,sans-serif;text-decoration:none}
.side-cats {list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.side-cats li {display:flex;justify-content:space-between;gap:10px}
.side-cats a {color:var(--navy);text-decoration:none;font-weight:600}
.side-cats a:hover {color:var(--blue)}
.side-cats span {color:var(--muted)}
.blog-cta {margin:3rem 0 1.2rem;padding:2.2rem;border-radius:var(--r);background:var(--blue);color:#e6efff;text-align:center}
.blog-cta h2 {color:#fff;margin:0 0 .5rem;border:0;padding:0}
.blog-cta .btn {background:var(--amber);color:var(--navy);box-shadow:none}
.blog-back {color:var(--blue);font-weight:700;text-decoration:none}
.blog-related {padding:20px 0 90px;background:var(--peach)}
.blog-related h2 {margin:1.8rem 0 1.2rem;font-size:1.9rem}

/* Policy pages reuse the article styles; long tables scroll sideways on narrow screens */
.policy-body { max-width: 900px; font-size: 1.06rem; line-height: 1.75; }
.policy-body h2 { font-size: clamp(1.4rem, 2vw, 1.75rem); }
.table-scroll { overflow-x: auto; margin: 1.5rem 0; }
.table-scroll table { margin: 0; min-width: 760px; font-size: .95rem; }