/* ═══════════════════════════════════════════════════════════════
   VYTHO AI AGENCY — article + legal pages (Oct 2026 redesign)

   Loaded after css/site.css on the 60 SEO articles (/<slug>, /en/<slug>)
   and on /terms, /privacy. Only the reading layout lives here: tokens,
   header, footer, buttons, cards, FAQ list and the CTA band come from
   site.css. Palette stays black / white / grey only.

   Markup (unchanged from the old pages):
   article > header.article-hero > .wrap > .crumbs .kicker .article-h1
                                            .article-lead .article-meta
           > .wrap.article-body > .prose (+ .callout) + aside.article-aside
                                  > .aside-card.aside-toc / .aside-card.aside-cta
           > section.faq.wrap > .faq-h2 + .faq-list
           > section.related.wrap > .related-head + .card-grid > a.card
           > .wrap > .cta-band
   ═══════════════════════════════════════════════════════════════ */

:root {
  --article-w: 1180px;      /* reading column + aside, narrower than --maxw */
  --aside-w: 300px;
  --ink-text: #D2D2D2;      /* prose colour from site.css, reused for lists */
}

main.page-main > article .wrap { max-width: var(--article-w); }

/* ─── hero ──────────────────────────────────────────────────── */
.article-hero {
  position: relative;
  padding: calc(var(--head-h) + clamp(44px, 9vh, 104px)) 0 clamp(40px, 7vh, 72px);
  border-bottom: 1px solid var(--line);
}
.article-hero .crumbs { margin-bottom: clamp(26px, 4vh, 40px); }
.article-hero .crumbs span[aria-current] { color: var(--fog); }
.article-hero .kicker { margin-bottom: 20px; }
.article-h1 {
  font-weight: 800;
  font-size: clamp(2.3rem, 5.2vw, 5rem);
  line-height: 1.0;
  letter-spacing: -0.036em;
  text-wrap: balance;
  overflow-wrap: break-word;
  max-width: 19ch;
  color: var(--white);
}
.article-lead {
  margin-top: 26px;
  max-width: 58ch;
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  line-height: 1.55;
  color: var(--fog);
  text-wrap: pretty;
}
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  margin-top: 30px;
  font-size: 14px; font-weight: 500; letter-spacing: 0.005em;
  color: var(--grey);
}
.article-meta span { display: inline-flex; align-items: center; }
.article-meta i { width: 4px; height: 4px; border-radius: 50%; background: var(--grey-dim); }

/* ─── body: prose + sticky aside ────────────────────────────── */
.article-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--aside-w);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
  padding: clamp(44px, 7vh, 84px) var(--pad) clamp(64px, 9vh, 120px);
}

/* reading typography: site.css sets 70ch / 18px / 1.75 on .prose */
.prose p { text-wrap: pretty; }
.prose > :first-child { margin-top: 0; }
.prose h2, .prose h3 { scroll-margin-top: calc(var(--head-h) + 28px); text-wrap: balance; }
.prose li { color: var(--ink-text); }
.prose em { color: var(--white); }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 2.4em 0; }
.prose img { width: 100%; border-radius: var(--r-card); border: 1px solid var(--line); }
.prose figcaption { margin-top: 10px; font-size: 13.5px; color: var(--grey); }

/* key points card inside the text */
.prose .callout {
  border: 1px solid var(--line); border-radius: var(--r-card); background: var(--ink-1);
  padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 30px);
  margin-top: 1.8em;
  font-size: 16.5px; line-height: 1.6;
}
.prose .callout > strong { display: block; color: var(--white); font-size: 1.05em; margin-bottom: 10px; }
.prose .callout p { color: var(--fog); }
.prose .callout p + p { margin-top: 0.7em; }
.prose .callout ul, .prose .callout ol { margin: 0; padding-left: 1.15em; }
.prose .callout li { color: var(--fog); }
.prose .callout li + li { margin-top: 0.4em; }
.prose .lead-stat { font-family: var(--font-mono); color: var(--white); }

/* aside: table of contents + call to action */
.article-aside {
  position: sticky; top: calc(var(--head-h) + 24px);
  display: grid; gap: 14px;
}
.aside-card {
  background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 22px 22px 20px;
}
.aside-card .kicker { display: block; font-size: 13px; margin-bottom: 10px; }
.aside-toc nav { display: grid; }
.aside-toc a {
  display: block; padding: 9px 0;
  font-size: 14.5px; font-weight: 500; line-height: 1.35; color: var(--fog);
  border-top: 1px solid var(--line);
  transition: color 0.3s var(--ease), padding-left 0.35s var(--ease);
}
.aside-toc a:hover { color: var(--white); padding-left: 4px; }
.aside-cta p { font-size: 15px; line-height: 1.55; color: var(--fog); margin: 0 0 18px; }
.aside-cta .btn { width: 100%; }

/* button arrow kept from the old markup: <span class="btn-arrow">→</span> */
.btn .btn-arrow { display: inline-block; transition: transform 0.45s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }

/* ─── FAQ ───────────────────────────────────────────────────── */
.faq { padding: clamp(48px, 8vh, 96px) var(--pad); border-top: 1px solid var(--line); }
.faq-h2, .related-head h2 {
  font-weight: 780;
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  line-height: 1.02; letter-spacing: -0.03em;
  text-wrap: balance; color: var(--white);
}
.faq-h2 { margin-bottom: clamp(24px, 4vh, 40px); }
.faq .faq-list { max-width: 860px; }
.faq-item summary { color: var(--white); line-height: 1.3; }
.faq-answer { font-size: 16.5px; line-height: 1.7; }
.faq-answer a { color: var(--white); border-bottom: 1px solid var(--line-strong); transition: border-color 0.3s; }
.faq-answer a:hover { border-color: var(--white); }

/* ─── related articles ──────────────────────────────────────── */
.related { padding: clamp(48px, 8vh, 96px) var(--pad); border-top: 1px solid var(--line); }
.related-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-bottom: clamp(22px, 4vh, 36px);
}
.related .card-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 14px; }
.related .card { display: flex; flex-direction: column; height: 100%; }
.related .card .kicker { margin-bottom: 4px; }
.related .card h3 { margin: 4px 0 8px; }
.related .card .card-go { margin-top: auto; padding-top: 18px; }
.card-go span { display: inline-block; transition: transform 0.4s var(--ease); }
a.card:hover .card-go span { transform: translateX(4px); }

/* ─── closing CTA band ──────────────────────────────────────── */
main.page-main > article > .wrap:last-child { padding-bottom: clamp(64px, 10vh, 128px); }
.cta-band .kicker { margin-bottom: 0; }

/* ─── legal pages (/terms, /privacy) ────────────────────────── */
.legal-page .article-h1 { font-size: clamp(2.2rem, 4.6vw, 4.2rem); }
.article-body--single {
  grid-template-columns: minmax(0, 1fr);
  padding-bottom: clamp(72px, 11vh, 140px);
}
.prose.legal { max-width: 72ch; font-size: 17px; }
.prose.legal h2 { font-size: clamp(1.25rem, 1.7vw, 1.5rem); margin-top: 2em; }
.prose.legal ul { margin-top: 0.6em; }
.prose.legal li + li { margin-top: 0.5em; }
/* there is no English twin of the legal text, so the ΕΛ/EN switch stays hidden here */
body.is-legal .lang-pill { display: none !important; }

/* ─── responsive ────────────────────────────────────────────── */
@media (max-width: 1080px) {
  :root { --aside-w: 260px; }
}
@media (max-width: 900px) {
  .article-body { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .article-aside { position: static; order: 2; }
  .aside-toc { display: none; }           /* a contents list under the text is noise */
  .related .card-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
}
@media (max-width: 560px) {
  .article-hero { padding-top: calc(var(--head-h) + 36px); padding-bottom: 36px; }
  .article-h1 { font-size: clamp(2rem, 9vw, 2.5rem); letter-spacing: -0.03em; }
  .article-lead { margin-top: 20px; font-size: 1.08rem; }
  .article-meta { margin-top: 22px; gap: 8px 12px; font-size: 13.5px; }
  .article-body { padding-top: 36px; padding-bottom: 56px; }
  .prose { font-size: 17px; line-height: 1.7; }
  .prose .callout { padding: 18px; font-size: 16px; }
  .faq, .related { padding-top: 48px; padding-bottom: 48px; }
  .cta-band .btn, .aside-cta .btn { width: 100%; }
}