@import "./base.css";

@layer qazana {

/* ============================================================================
   Qazana Strata — CONTENT KIT (blog + long-form / docs).
   Built on the shared tokens; themed by both schemes. Scoped under `.blog`
   (index/listing) and `.prose` (article body). Composes with the Site kit —
   a blog page loads site.css (nav/footer/buttons/container) + this file.
   ============================================================================ */

/* ---- blog index ---------------------------------------------------------- */
.blog .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.blog .post-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius-lg);
  background:var(--surface);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform var(--dur-2) var(--ease),border-color var(--dur-2)}
.blog .post-card:hover{transform:translateY(-4px);border-color:rgb(var(--primary-rgb) / .35)}
.blog .post-thumb{aspect-ratio:16/9;background:var(--surface-2);position:relative;overflow:hidden;display:grid;place-items:center;color:var(--primary-bright)}
.blog .post-thumb::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 80% at 30% 20%,rgb(var(--primary-rgb) / .16),transparent 60%)}
.blog .post-thumb .glyph{font-size:1.8rem;opacity:.85;position:relative}
.blog .post-body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1}
.blog .post-card h3{font-family:var(--body);font-weight:700;letter-spacing:var(--tracking-tighter);font-size:var(--text-lg);line-height:1.25}
.blog .post-card p{color:var(--text-2);font-size:var(--text-md);flex:1}
.blog .post-tag{align-self:flex-start;font-family:var(--mono);font-size:var(--text-2xs);letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--primary-bright);background:rgb(var(--primary-rgb) / .12);padding:4px 9px;border-radius:var(--radius-pill)}
.blog .post-meta{display:flex;align-items:center;gap:9px;margin-top:6px;color:var(--muted);font-size:var(--text-sm)}
.blog .post-meta .av{width:26px;height:26px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-weight:800;font-size:var(--text-xs);font-family:var(--body)}
.blog .post-meta .dot{width:3px;height:3px;border-radius:50%;background:var(--muted)}

/* featured post — spans the row, horizontal on wide screens */
.blog .post-card.featured{grid-column:1 / -1;flex-direction:row}
.blog .post-card.featured .post-thumb{flex:0 0 48%;aspect-ratio:auto}
.blog .post-card.featured .post-body{padding:34px;gap:14px;justify-content:center}
.blog .post-card.featured h3{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.blog .post-card.featured p{font-size:var(--text-base)}
@media (max-width:880px){.blog .post-grid{grid-template-columns:1fr}.blog .post-card.featured{flex-direction:column}.blog .post-card.featured .post-thumb{flex:auto;aspect-ratio:16/9}}

/* category chips + pagination */
.blog .cats{display:flex;flex-wrap:wrap;gap:9px;justify-content:center;margin-bottom:36px}
.blog .cat{font-size:var(--text-md);color:var(--text-2);text-decoration:none;border:1px solid var(--line);border-radius:var(--radius-pill);padding:7px 15px;transition:all var(--dur-1)}
.blog .cat:hover{color:var(--text);border-color:var(--line-strong)}
.blog .cat.on{color:var(--on-primary);background:var(--primary);border-color:var(--primary)}
.blog .pager{display:flex;justify-content:center;gap:6px;margin-top:44px}
.blog .pager a{min-width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--radius);color:var(--text-2);text-decoration:none;font-size:var(--text-md);transition:all var(--dur-1)}
.blog .pager a:hover{color:var(--text);border-color:var(--line-strong)}
.blog .pager a.on{color:var(--on-primary);background:var(--primary);border-color:var(--primary)}

/* newsletter band */
.blog .newsletter{margin-top:56px;padding:44px;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface);text-align:center}
.blog .newsletter h3{font-family:var(--body);font-weight:800;font-size:1.6rem;letter-spacing:var(--tracking-tighter);margin-bottom:8px}
.blog .newsletter p{color:var(--text-2);margin-bottom:20px}
.blog .news-form{display:flex;gap:10px;max-width:440px;margin:0 auto}
.blog .news-form input{flex:1;background:var(--bg);border:1px solid var(--line-strong);border-radius:var(--radius-pill);
  padding:13px 18px;color:var(--text);font-family:var(--body);font-size:var(--text-base);outline:0;transition:border-color var(--dur-1),box-shadow var(--dur-1)}
.blog .news-form input:focus{border-color:var(--primary-bright);box-shadow:0 0 0 3px var(--primary-ring)}
@media (max-width:560px){.blog .news-form{flex-direction:column}}

/* ---- text-only post list (no thumbnails, Medium-style reading list) ------ */
.blog .post-list{max-width:720px;margin:0 auto}
.blog .post-list .post-row{display:block;text-decoration:none;color:inherit;padding:30px 0;border-bottom:1px solid var(--line)}
.blog .post-list .post-row:first-child{padding-top:0}
.blog .post-list .post-row:hover h3{color:var(--primary-bright)}
.blog .post-list h3{font-family:var(--body);font-weight:800;letter-spacing:var(--tracking-tighter);font-size:1.55rem;line-height:1.22;margin:10px 0;transition:color var(--dur-1)}
.blog .post-list p{color:var(--text-2);font-size:var(--text-base);line-height:1.6}
.blog .post-list .post-meta{margin-top:14px}

/* ---- article / prose ----------------------------------------------------- */
.article{max-width:740px;margin:0 auto;padding:0 24px}
.article-head{text-align:center;padding:56px 24px 24px;max-width:780px;margin:0 auto}
.article-head .post-tag{display:inline-block}
.article-head h1{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.08;
  font-size:clamp(2rem,4.5vw,3.2rem);margin:16px 0}
.article-head .article-meta{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:var(--text-md)}
.article-head .article-meta .av{width:34px;height:34px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-weight:800;font-family:var(--body)}
.article-hero{max-width:980px;margin:24px auto 0;padding:0 24px}
.article-hero .ph{aspect-ratio:21/9;border-radius:var(--radius-lg);border:1px solid var(--line);background:var(--surface-2);
  display:grid;place-items:center;color:var(--primary-bright);position:relative;overflow:hidden}
.article-hero .ph::after{content:"";position:absolute;inset:0;background:radial-gradient(80% 90% at 70% 10%,rgb(var(--accent-rgb) / .16),transparent 60%)}

/* prose typography — the reading column */
.prose{font-size:var(--text-lg);line-height:var(--leading-relaxed);color:var(--text);max-width:var(--measure)}
.prose > * + *{margin-top:1.2em}
.prose .lead{font-size:var(--text-xl);line-height:1.6;color:var(--text-2)}
.prose h2{font-family:var(--body);font-weight:800;letter-spacing:var(--tracking-tighter);font-size:1.7rem;line-height:1.2;margin-top:1.9em}
.prose h3{font-family:var(--body);font-weight:700;font-size:var(--text-xl);line-height:1.25;margin-top:1.6em}
.prose h4{font-weight:700;font-size:var(--text-lg);margin-top:1.4em}
.prose p,.prose ul,.prose ol{color:var(--text)}
.prose a{color:var(--primary-bright);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}
.prose strong{font-weight:700}
.prose ul,.prose ol{padding-inline-start:1.3em}
.prose li{margin-top:.5em}
.prose ul li::marker{color:var(--primary-bright)}
.prose blockquote{border-inline-start:3px solid var(--primary);padding:4px 0;padding-inline-start:22px;margin-inline-start:0;color:var(--text-2);font-size:var(--text-lg);font-style:italic}
.prose code{font-family:var(--mono);font-size:.88em;background:var(--surface-sunken);border:1px solid var(--line);border-radius:5px;padding:2px 6px}
.prose pre{background:var(--surface-sunken);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;overflow-x:auto;font-size:var(--text-md);line-height:1.6}
.prose pre code{background:none;border:0;padding:0;font-size:inherit;color:var(--text-2)}
.prose figure{margin-inline-start:0;margin-inline-end:0}
.prose figure .ph{aspect-ratio:16/9;border-radius:var(--radius);border:1px solid var(--line);background:var(--surface-2);display:grid;place-items:center;color:var(--primary-bright)}
.prose figcaption{margin-top:10px;text-align:center;color:var(--muted);font-size:var(--text-md)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.4em 0}
.prose table{width:100%;border-collapse:collapse;font-size:var(--text-base)}
.prose th,.prose td{text-align:start;padding:11px 14px;border-bottom:1px solid var(--line)}
.prose th{font-weight:700;color:var(--text)}
.prose td{color:var(--text-2)}
/* callouts */
.prose .callout{border:1px solid var(--line);border-inline-start-width:3px;border-radius:var(--radius);padding:16px 18px;background:var(--surface);font-size:var(--text-base)}
.prose .callout.note{border-inline-start-color:var(--info);background:var(--info-soft)}
.prose .callout.tip{border-inline-start-color:var(--primary);background:var(--primary-soft)}
.prose .callout.warn{border-inline-start-color:var(--warning);background:var(--warning-soft)}
.prose .callout b{display:block;margin-bottom:4px}

/* article footer — tags, share, author bio */
.article-foot{max-width:740px;margin:48px auto 0;padding:0 24px}
.article-foot .tags{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.author-bio{display:flex;gap:16px;align-items:center;padding:28px 0}
.author-bio .av{width:56px;height:56px;flex:0 0 56px;border-radius:50%;background:var(--primary);color:var(--on-primary);display:grid;place-items:center;font-weight:800;font-size:var(--text-xl);font-family:var(--body)}
.author-bio b{display:block;font-size:var(--text-base)}
.author-bio p{color:var(--text-2);font-size:var(--text-md);margin-top:2px}


/* ---- table of contents (docs scrollspy) ---- */
.toc{position:sticky;top:84px;font-size:var(--text-md);align-self:start}
.toc .toc-h{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:var(--muted);margin-bottom:8px}
.toc a{display:block;padding:5px 12px;color:var(--text-2);text-decoration:none;border-inline-start:2px solid var(--line)}
.toc a:hover{color:var(--text)}
.toc a.active{color:var(--primary-bright);border-inline-start-color:var(--primary-bright)}

/* docs layout: prose + a sticky TOC rail (collapses to one column on narrow) */
.doc-layout{max-width:1040px;margin:0 auto;padding:0 24px;display:grid;gap:40px}
@media (min-width:920px){.doc-layout{grid-template-columns:1fr 220px}.doc-layout .toc{order:2}}
/* grid hygiene: let columns shrink below content min-size, break long words/URLs
   so prose never forces horizontal page overflow on phones */
.doc-layout > *{min-width:0}
.prose{overflow-wrap:break-word}

/* honor reduced motion: kill the content kit's transitions */
@media (prefers-reduced-motion: reduce){.blog *{transition:none}}
}