/* SOLSPRO blog, pages and project pages. Uses the tokens from solspro-v3.css (black, sky blue, white). */
body.is-blog { background: var(--bg); }
.page { padding: clamp(110px, 12vw, 150px) var(--pad) clamp(60px, 8vw, 110px); max-width: 1400px; margin: 0 auto; }
.is-blog .hdr::before { opacity: 1; }
.crumbs { margin-bottom: 26px; font: 500 .88rem var(--display); color: var(--muted); }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; list-style: none; padding: 0; margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: 10px; opacity: .5; }
.crumbs a:hover { color: var(--brand-hi); }

/* blog list */
.bloghead { margin-bottom: clamp(32px, 5vw, 60px); }
.bloghead__h { font: 800 clamp(2.6rem, 7vw, 6rem)/1 var(--display); letter-spacing: -.03em; margin: 22px 0 14px; }
.bloghead__p { color: var(--muted); font-size: clamp(1.05rem, 1.6vw, 1.3rem); max-width: 40em; }
.catnav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.catnav a { padding: 9px 18px; border: 1px solid var(--line); font: 600 .95rem var(--display); transition: background .25s, color .25s, border-color .25s; }
.catnav a:hover { border-color: var(--brand); color: var(--brand-hi); } .catnav a.is-on { background: #fff; color: #000; border-color: #fff; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: clamp(18px, 2.4vw, 32px); }
.card { background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform .45s var(--ease), border-color .3s; position: relative; }
.card:hover { transform: translateY(-6px); border-color: var(--brand); }
.card__img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #000; }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .card:hover .card__img img { transform: scale(1.05); }
.card__ph { position: relative; display: grid; place-items: center; width: 100%; height: 100%; background: linear-gradient(135deg, #07121a, #0b2a3b); overflow: hidden; }
.card__ph i { position: absolute; background: var(--brand); } .card__ph i:nth-child(1) { width: 34px; height: 34px; left: 10%; top: 16%; } .card__ph i:nth-child(2) { width: 18px; height: 18px; right: 18%; top: 30%; opacity: .6; } .card__ph i:nth-child(3) { width: 60px; height: 60px; right: 8%; bottom: 10%; opacity: .22; }
.card__ph b { position: relative; font: 800 clamp(1.2rem, 2.4vw, 1.7rem) var(--display); letter-spacing: -.01em; padding: 0 20px; text-align: center; }
.card__body { padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card__cat { font: 700 .72rem var(--display); letter-spacing: .22em; text-transform: uppercase; color: var(--brand-hi); }
.card__title { font: 700 1.3rem/1.25 var(--display); } .card__title a:hover { color: var(--brand-hi); }
.card__ex { color: var(--muted); font-size: .98rem; flex: 1; }
.card__meta { color: var(--muted); font-size: .85rem; }
.pager { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-top: 40px; font: 600 1rem var(--display); flex-wrap: wrap; }
.pager a { padding: 12px 20px; border: 1px solid var(--line); transition: border-color .25s, color .25s; } .pager a:hover { border-color: var(--brand); color: var(--brand-hi); } .pager span { color: var(--muted); }
.empty { padding: 40px; border: 1px dashed var(--line); color: var(--muted); text-align: center; }

/* article */
.post { max-width: 860px; margin: 0 auto; }
.post__title { font: 800 clamp(2.2rem, 5.6vw, 4.2rem)/1.05 var(--display); letter-spacing: -.025em; margin: 18px 0 18px; text-wrap: balance; }
.post__meta { display: flex; flex-wrap: wrap; gap: 6px 22px; color: var(--muted); font: 500 .95rem var(--display); }
.post__hero { margin: 34px 0 38px; background: #000; } .post__hero img { width: 100%; height: auto; display: block; }
.toc { border: 1px solid var(--line); border-left: 4px solid var(--brand); padding: 20px 24px; margin: 0 0 38px; background: var(--panel); }
.toc__t { font: 700 .8rem var(--display); letter-spacing: .2em; text-transform: uppercase; margin-bottom: 10px; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .toc li.l3 { padding-left: 18px; font-size: .95rem; } .toc a { color: #dbe3ea; } .toc a:hover { color: var(--brand-hi); }
.prose { font: 400 clamp(1.05rem, 1.25vw, 1.2rem)/1.8 var(--body); color: #E3E9EF; overflow-wrap: anywhere; }
.prose > * + * { margin-top: 1.25em; }
.prose h2 { font: 800 clamp(1.7rem, 3.2vw, 2.4rem)/1.15 var(--display); letter-spacing: -.02em; margin-top: 2em; color: #fff; scroll-margin-top: 100px; }
.prose h3 { font: 700 clamp(1.3rem, 2.2vw, 1.7rem)/1.2 var(--display); margin-top: 1.7em; color: #fff; scroll-margin-top: 100px; }
.prose h4 { font: 700 1.15rem var(--display); margin-top: 1.5em; color: #fff; }
.prose a { color: var(--brand-hi); text-decoration: underline; text-underline-offset: 3px; } .prose a:hover { color: #fff; }
.prose ul, .prose ol { padding-left: 1.4em; } .prose ul { list-style: disc; } .prose ol { list-style: decimal; } .prose li { margin: .35em 0; } .prose li::marker { color: var(--brand); }
.prose blockquote { border-left: 4px solid var(--brand); padding: .3em 0 .3em 1.2em; font-style: italic; color: #fff; }
.prose img { max-width: 100%; height: auto; display: block; margin-inline: auto; } .prose figure { margin-inline: 0; } .prose figcaption { color: var(--muted); font-size: .9rem; margin-top: 8px; text-align: center; }
.prose code { background: #0d1520; padding: .1em .4em; font-size: .92em; } .prose pre { background: #000; border: 1px solid var(--line); padding: 16px; overflow: auto; } .prose pre code { background: none; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; } .prose th, .prose td { border: 1px solid var(--line); padding: 10px 14px; text-align: left; } .prose th { background: var(--panel); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.post__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; } .post__tags span { border: 1px solid var(--line); padding: 5px 12px; font-size: .85rem; color: var(--muted); }
.ctaband { display: flex; gap: 28px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin: clamp(50px, 7vw, 90px) auto 0; max-width: 1100px; padding: clamp(26px, 4vw, 48px); background: #fff; color: #000; position: relative; }
.ctaband::after { content: ""; position: absolute; right: 0; bottom: 0; width: clamp(44px, 6vw, 80px); aspect-ratio: 1; background: var(--brand); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.ctaband h2 { font: 800 clamp(1.6rem, 3vw, 2.4rem)/1.1 var(--display); margin: 14px 0 8px; letter-spacing: -.02em; } .ctaband p { max-width: 36em; } .ctaband .btn { position: relative; z-index: 1; }
.related { margin-top: clamp(50px, 7vw, 90px); } .related__h { font: 800 clamp(1.8rem, 3.4vw, 2.6rem) var(--display); margin-bottom: 24px; letter-spacing: -.02em; }

/* latest posts on the home page */
.latest { padding: clamp(70px, 9vw, 130px) var(--pad); max-width: 1400px; margin: 0 auto; }
.latest__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); }
@media (max-width: 700px) { .page { padding-top: 100px; } .ctaband { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .card, .card__img img { transition: none; } .card:hover { transform: none; } }
.ctaband .tagbar { background: #000; color: #fff; }


/* ---------- Blog list: 3 per row on laptops and desktops (added 6 Nov 2026) ---------- */
@media (min-width: 900px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) and (max-width: 1100px) { .card__title { font-size: 1.15rem; } .card__body { padding: 18px 18px 20px; } }