/* ==========================================================================
   Klass360 – Blog, case studies, free tools & legal pages. Mobile-first.
   1. Blog index   2. Article hero   3. Article layout   4. Prose
   5. Aside (TOC, CTA, links)   6. Case-study blocks   7. Free tools
   ========================================================================== */

/* ---------- 1. Blog index ---------- */
.blog__all { margin-top: var(--space-10); text-align: center; }
.post-featured {
  display: grid; gap: var(--space-6);
  margin-bottom: var(--space-10);
  padding: 8px;
  border-radius: var(--r-xl);
  background: var(--c-surface);
  box-shadow: var(--shadow-sm);
}
.post-featured .post__media { aspect-ratio: 16 / 9; }
.post-featured__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: 0 var(--space-4) var(--space-5); }
.post-featured__title { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); line-height: 1.25; }
.post-featured__title a:hover { color: var(--c-secondary); }
.blog-filter { display: flex; gap: var(--space-2); margin-bottom: var(--space-8); padding-bottom: 4px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.blog-filter::-webkit-scrollbar { display: none; }
.blog-filter .pill-tab { flex-shrink: 0; white-space: nowrap; }
.blog-filter .pill-tab[aria-pressed="true"] { background: var(--c-secondary); border-color: var(--c-secondary); color: #fff; }
.post.is-hidden { display: none; }
@media (min-width: 768px) {
  .blog__grid--2 { grid-template-columns: repeat(2, 1fr); }
  .blog-filter { flex-wrap: wrap; justify-content: center; overflow: visible; }
}
@media (min-width: 992px) {
  .post-featured { grid-template-columns: 1.1fr 1fr; align-items: center; }
  .post-featured__body { padding: var(--space-8); }
}

/* ---------- 2. Article hero ---------- */
.article-hero {
  padding: var(--space-10) 0 var(--space-12);
  background:
    radial-gradient(40% 80% at 100% 100%, rgba(150, 207, 0, 0.35), transparent 70%),
    radial-gradient(40% 70% at 0% 100%, rgba(10, 98, 134, 0.9), transparent 70%),
    var(--c-ink);
  color: var(--c-on-dark-muted);
}
.article-hero__inner > * { max-width: 860px; }
.article-hero .breadcrumb ol { justify-content: flex-start; }
.article-hero .breadcrumb li:last-child { display: none; }
.article-hero__title { margin: var(--space-4) 0; color: #fff; font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.25rem); line-height: 1.12; letter-spacing: -0.02em; }
.article-hero__lead { margin-bottom: var(--space-6); font-size: var(--fs-md); }
.article-hero__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-size: var(--fs-sm); }
.article-hero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.article-hero__meta .icon { color: var(--c-primary); }

/* ---------- 3. Article layout ---------- */
.article__grid { display: grid; gap: var(--space-10); }
.article__main { min-width: 0; }
.article__aside { display: flex; flex-direction: column; gap: var(--space-5); }
@media (min-width: 992px) {
  .article__grid { grid-template-columns: minmax(0, 1fr) 300px; gap: var(--space-12); align-items: start; }
  .article__aside { position: sticky; top: calc(var(--header-h) + 24px); }
}
@media (min-width: 1200px) { .article__grid { grid-template-columns: minmax(0, 760px) 320px; justify-content: space-between; } }
/* On mobile, show TOC before the article, CTA after */
@media (max-width: 991.98px) {
  .article__grid { display: flex; flex-direction: column; }
  .article__aside { display: contents; }
  .article__aside .toc { order: -1; }
}

.article__summary {
  margin-bottom: var(--space-8);
  padding: var(--space-5) var(--space-6);
  border-left: 4px solid var(--c-primary);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--c-primary-soft);
}
.article__summary-title { margin-bottom: var(--space-2); color: var(--c-heading); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: 0.06em; }
.article__summary p:last-child { color: var(--c-heading); }
.article__disclaimer {
  display: flex; gap: var(--space-3); align-items: flex-start;
  margin-bottom: var(--space-6); padding: var(--space-4) var(--space-5);
  border: 1px dashed #D9A441; border-radius: var(--r-md);
  background: #FFF8E8; color: #7A5300; font-size: var(--fs-sm);
}
.article__disclaimer .icon { flex-shrink: 0; margin-top: 3px; }
.article__share { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-10); padding-top: var(--space-6); border-top: 1px solid var(--c-border); color: var(--c-heading); font-weight: var(--fw-medium); }
.article__share a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--c-border-strong); border-radius: 50%; color: var(--c-secondary); transition: background var(--t-fast), color var(--t-fast); }
.article__share a:hover { background: var(--c-secondary); color: #fff; }

/* ---------- 4. Prose ---------- */
.prose { color: var(--c-text); font-size: 1.0625rem; line-height: 1.8; overflow-wrap: break-word; }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { margin-top: var(--space-12); color: var(--c-heading); font-size: clamp(1.4rem, 1.15rem + 1vw, 1.875rem); line-height: 1.25; scroll-margin-top: calc(var(--header-h) + 20px); }
.prose h3 { margin-top: var(--space-8); color: var(--c-heading); font-size: var(--fs-lg); line-height: 1.35; }
.prose h2 + *, .prose h3 + * { margin-top: var(--space-3); }
.prose strong { color: var(--c-heading); font-weight: var(--fw-semibold); }
.prose a:not(.btn) { color: var(--c-secondary); font-weight: var(--fw-medium); text-decoration: underline; text-decoration-color: var(--c-primary); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose a:not(.btn):hover { color: var(--c-heading); }
.prose ul, .prose ol { padding-left: 1.4rem; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: var(--space-2); }
.prose li::marker { color: var(--c-secondary); font-weight: var(--fw-semibold); }
.prose blockquote { padding: var(--space-4) var(--space-5); border-left: 4px solid var(--c-secondary); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--c-surface); color: var(--c-heading); font-style: italic; }
.prose .table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); -webkit-overflow-scrolling: touch; }
.prose table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.5; }
.prose th, .prose td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; }
.prose th { background: var(--c-surface-alt); color: var(--c-heading); font-weight: var(--fw-semibold); }
.prose tr:last-child td { border-bottom: 0; }
.prose .template {
  padding: var(--space-5); border: 1px solid var(--c-border-strong); border-radius: var(--r-md);
  background: var(--c-surface); color: var(--c-heading); font-size: 0.95rem; line-height: 1.65; white-space: pre-line;
}
.prose .callout { padding: var(--space-5); border-radius: var(--r-md); background: var(--c-surface); box-shadow: var(--shadow-sm); }
.prose .callout > :first-child { margin-top: 0; }

.inline-cta {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4);
  margin: var(--space-10) 0 !important;
  padding: var(--space-6);
  border-radius: var(--r-lg);
  background: radial-gradient(60% 120% at 100% 100%, rgba(150, 207, 0, 0.35), transparent 70%), var(--c-secondary);
  color: var(--c-on-dark-muted);
  font-size: var(--fs-base);
}
.inline-cta__title { margin-bottom: var(--space-1); color: #fff; font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.inline-cta p { margin: 0; }
@media (min-width: 768px) { .inline-cta { flex-direction: row; align-items: center; justify-content: space-between; } .inline-cta .btn { flex-shrink: 0; } }

/* ---------- 5. Aside ---------- */
.toc { padding: var(--space-5); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); }
.toc__title { margin-bottom: var(--space-3); color: var(--c-heading); font-weight: var(--fw-semibold); }
.toc ol { display: grid; gap: var(--space-2); padding-left: 1.2rem; list-style: decimal; font-size: var(--fs-sm); line-height: 1.45; }
.toc li::marker { color: var(--c-secondary); }
.toc a { transition: color var(--t-fast); }
.toc a:hover { color: var(--c-secondary); text-decoration: underline; }
.aside-cta { padding: var(--space-6); border-radius: var(--r-lg); background: var(--c-ink); color: var(--c-on-dark-muted); font-size: var(--fs-sm); }
.aside-cta__title { margin-bottom: var(--space-2); color: #fff; font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: 1.3; }
.aside-cta .btn { width: 100%; margin-top: var(--space-5); }
.aside-link { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.aside-link:hover { border-color: var(--c-secondary); box-shadow: var(--shadow-sm); }
.aside-link small { display: block; color: var(--c-text-light); font-size: var(--fs-xs); }
.aside-link b { color: var(--c-heading); font-size: var(--fs-sm); }

/* ---------- 6. Case-study blocks ---------- */
.case-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-bottom: var(--space-8); }
.case-stats__item { padding: var(--space-5) var(--space-4); border-radius: var(--r-md); background: var(--c-secondary); color: var(--c-on-dark-muted); font-size: var(--fs-sm); line-height: 1.4; }
.case-stats__item:nth-child(even) { background: var(--c-primary); color: var(--c-heading); }
.case-stats__item b { display: block; margin-bottom: var(--space-1); color: inherit; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); line-height: 1.1; }
.case-stats__item:nth-child(odd) b { color: #fff; }
@media (min-width: 768px) { .case-stats { grid-template-columns: repeat(4, 1fr); } }

/* ---------- 7. Free tools ---------- */
.tool { display: grid; gap: var(--space-8); }
.tool__panel { padding: var(--space-6); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--shadow-sm); }
.tool__panel h2 { margin-bottom: var(--space-5); font-size: var(--fs-xl); }
.tool__fields { display: grid; gap: var(--space-4); }
.tool__out { min-width: 0; }
.tool__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); }
.tool__note { margin-top: var(--space-4); color: var(--c-text-light); font-size: var(--fs-xs); }
.tool-result { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
.tool-result div { padding: var(--space-4); border-radius: var(--r-md); background: var(--c-surface-alt); font-size: var(--fs-xs); }
.tool-result b { display: block; color: var(--c-heading); font-size: var(--fs-lg); }
.tool-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tool-table th, .tool-table td { padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--c-border); text-align: left; }
.tool-table th { color: var(--c-heading); font-weight: var(--fw-semibold); }
.tool-table td:last-child, .tool-table th:last-child { text-align: right; }
.tool-msg { padding: var(--space-5); border-radius: var(--r-md); background: #E7F7DC; color: var(--c-heading); font-size: 0.95rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.tool-hub { display: grid; gap: var(--space-5); }
.tool-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); transition: transform var(--t-base) var(--ease), box-shadow var(--t-base); }
.tool-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tool-card h2, .tool-card h3 { font-size: var(--fs-lg); }
.tool-card p { flex: 1; font-size: var(--fs-sm); }
.tool-card .post__more { align-self: flex-start; }
@media (min-width: 768px) {
  .tool__fields--2 { grid-template-columns: 1fr 1fr; }
  .tool-hub { grid-template-columns: repeat(2, 1fr); }
  .tool-result { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 992px) { .tool { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } }

/* Receipt preview (printable) */
.receipt { padding: var(--space-6); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: #fff; color: #111; font-size: var(--fs-sm); line-height: 1.5; }
.receipt__head { display: flex; justify-content: space-between; gap: var(--space-4); padding-bottom: var(--space-4); border-bottom: 2px solid #111; }
.receipt__head b { display: block; font-size: var(--fs-lg); }
.receipt__title { margin: var(--space-4) 0; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-align: center; text-transform: uppercase; }
.receipt__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
.receipt__grid span { display: block; color: #666; font-size: var(--fs-xs); }
.receipt__total { display: flex; justify-content: space-between; padding: var(--space-3) 0; border-top: 1px solid #111; border-bottom: 1px solid #111; font-weight: var(--fw-bold); }
.receipt__words { margin-top: var(--space-3); font-style: italic; }
.receipt__sign { display: flex; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-10); font-size: var(--fs-xs); }
.receipt__sign span { padding-top: var(--space-2); border-top: 1px solid #111; }
@media print {
  body.tool-print-receipt * { visibility: hidden !important; }
  body.tool-print-receipt .receipt, body.tool-print-receipt .receipt * { visibility: visible !important; }
  body.tool-print-receipt .receipt { position: absolute; inset: 0 auto auto 0; width: 100%; border: 0; }
}

/* ---------- 8. Legal / about prose pages ---------- */
.legal { max-width: 820px; margin-inline: auto; }
.legal__note { margin-bottom: var(--space-8); }

/* ---------- 9. Solutions pages (solutions/*.php) ---------- */
.sol-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); padding: var(--space-6) var(--space-2) var(--space-3); }
.sol-links__label { width: 100%; margin-bottom: var(--space-1); color: var(--c-text); font-size: var(--fs-sm); text-align: center; }
.sol-links a { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 8px 14px; border: 1px solid var(--c-border); border-radius: var(--r-pill); background: var(--c-surface); color: var(--c-secondary); font-size: var(--fs-sm); font-weight: var(--fw-semibold); transition: border-color var(--t-fast), color var(--t-fast); }
.sol-links a:hover { border-color: var(--c-primary); color: var(--c-heading); }
.sol-intro { max-width: 760px; margin: 0 auto var(--space-8); text-align: center; }
.sol-intro p + p { margin-top: var(--space-3); }
.tool-card .chip { align-self: flex-start; }
@media (min-width: 992px) { .tool-hub--3 { grid-template-columns: repeat(3, 1fr); } }

/* ---------- 10. About, compare & legal pages (about.php, compare/, privacy-policy, terms, refund-policy) ---------- */
.page-hero--slim { padding-bottom: var(--space-12); }
.page-hero--slim .page-hero__title { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
.page-hero--slim .page-hero__lead { margin-bottom: 0; }
.legal .article__disclaimer { margin-bottom: var(--space-8); }
.legal__meta { color: var(--c-text); font-size: var(--fs-sm); }
.compare-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-surface); box-shadow: var(--shadow-sm); -webkit-overflow-scrolling: touch; }
.compare-wrap:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.compare-table { width: 100%; min-width: 860px; border-collapse: collapse; font-size: var(--fs-sm); line-height: 1.5; }
.compare-table caption { padding: var(--space-4) var(--space-5) 0; color: var(--c-text); font-size: var(--fs-xs); text-align: left; caption-side: top; }
.compare-table th, .compare-table td { padding: 0.8rem 0.9rem; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; }
.compare-table thead th { background: var(--c-surface-alt); color: var(--c-heading); font-weight: var(--fw-semibold); }
.compare-table tbody th { position: sticky; left: 0; z-index: 1; min-width: 140px; background: var(--c-surface); color: var(--c-heading); font-weight: var(--fw-semibold); box-shadow: 1px 0 0 var(--c-border); }
.compare-table thead th:first-child { position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 var(--c-border); }
.compare-table .is-k360 { background: var(--c-primary-soft); color: var(--c-heading); }
.compare-table thead .is-k360 { background: var(--c-secondary); color: #fff; }
.compare-table tr:last-child th, .compare-table tr:last-child td { border-bottom: 0; }
.compare-hint { margin-top: var(--space-3); color: var(--c-text); font-size: var(--fs-xs); text-align: center; }
@media (min-width: 992px) { .compare-hint { display: none; } }
.about-prose { max-width: 760px; margin-inline: auto; }
.about-links { margin-top: var(--space-8); text-align: center; }
.contact-card h3 { font-size: var(--fs-lg); }
.about-links a:not(.btn) { color: var(--c-secondary); font-weight: var(--fw-semibold); text-decoration: underline; text-decoration-color: var(--c-primary); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- 9. Free tools – page extras (used with assets/js/tools.js) ---------- */
.tool-section .tool__panel h2 { font-size: var(--fs-lg); }
.tool__status { min-height: 1.25em; margin-top: var(--space-3); color: var(--c-secondary); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.tool__status:empty { display: none; }
.tool__warn { margin-bottom: var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--r-sm); background: #FDF1E4; color: #7A4510; font-size: var(--fs-sm); }
.tool__warn[hidden] { display: none; }
.tool__inline { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--space-2); }
.tool__privacy { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-6); padding: var(--space-4); border-radius: var(--r-md); background: var(--c-surface-alt); color: var(--c-heading); font-size: var(--fs-sm); line-height: 1.5; }
.tool__privacy .icon { flex-shrink: 0; margin-top: 2px; color: var(--c-secondary); }
.tool-section .tool > * { min-width: 0; }
.tool-section .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tool__actions .btn { max-width: 100%; white-space: normal; }
.tool-section .tool-table { min-width: 280px; }
.receipt__sign > span { display: block; }
.tool-table tfoot td { border-bottom: 0; color: var(--c-heading); font-weight: var(--fw-semibold); }
.tool-result small { display: block; margin-top: 2px; color: var(--c-text-light); }
.tool-result div { min-width: 0; overflow-wrap: anywhere; }
.tool-card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r-md); background: var(--c-primary); color: var(--c-heading); }
.tool-links { display: grid; gap: var(--space-3); margin-top: var(--space-8); }
.receipt { overflow-wrap: anywhere; }
.receipt__head > div:last-child { text-align: right; }
.receipt__foot { margin-top: var(--space-3); font-size: var(--fs-xs); color: #444; }
@media (min-width: 768px) { .tool-links { grid-template-columns: 1fr 1fr; } }
/* Print only the receipt on the receipt generator page (body.tool-print-receipt) */
@media print {
  body.tool-print-receipt > *:not(main), body.tool-print-receipt main > *:not(.tool-section) { display: none !important; }
  body.tool-print-receipt .tool-section { padding: 0; }
  body.tool-print-receipt .tool__panel--inputs, body.tool-print-receipt .tool__privacy { display: none !important; }
  body.tool-print-receipt .receipt { padding: 0; }
  body.tool-print-receipt .tool__panel { padding: 0; border: 0; box-shadow: none; }
}