/* =============================================================
   ATHANELEON — article.css  (Blog · σελίδα άρθρου)
   prefix .ar-  ·  design tokens του global.css
   (χρησιμοποιεί και .bl-card / .bl-ph / .bl-cat από το blog.css; γι' αυτό
    στη σελίδα άρθρου φορτώνεται ΜΟΝΟ το article.css — τα reuse styles τα
    επαναδηλώνουμε εδώ ώστε να μη χρειάζεται το blog.css)
   ============================================================= */

.bl-ph { width: 100%; height: 100%; display: grid; place-items: center; text-align: center; color: var(--text-muted); font-size: var(--fs-200); background: radial-gradient(120% 80% at 50% 20%, rgba(196,162,78,.10), transparent 60%), var(--c-black); }
.bl-cat { position: absolute; top: var(--space-sm); left: var(--space-sm); font-size: var(--fs-200); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--c-black); background: var(--accent); padding: .3em .7em; border-radius: 999px; }
.bl-section-title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-600); margin-bottom: var(--space-lg); }
.bl-meta { display: block; margin-top: var(--space-md); font-size: var(--fs-200); letter-spacing: .04em; color: var(--text-muted); text-transform: uppercase; }
.bl-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg); transition: transform var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.bl-card:hover { transform: translateY(-6px); border-color: var(--accent); }
.bl-card-media { position: relative; aspect-ratio: 16 / 10; }
.bl-card-body { padding: var(--space-lg); }
.bl-card-body h3 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-500); line-height: 1.12; }

/* ---------------- HEADER ---------------- */
.ar-header { background: radial-gradient(120% 90% at 80% 0%, rgba(196,162,78,.10), transparent 55%), var(--bg); padding-block: clamp(7rem, 6rem + 8vw, 10rem) var(--space-xl); border-bottom: 1px solid var(--line); }
.ar-header-inner { max-width: 70ch; margin-inline: auto; }
.ar-crumbs { font-size: var(--fs-200); letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-md); }
.ar-crumbs a { color: var(--text-muted); }
.ar-crumbs a:hover { color: var(--accent-bright); }
.ar-cat { position: static; display: inline-block; margin-bottom: var(--space-sm); }
.ar-title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-800); line-height: 1.04; letter-spacing: -0.02em; }
.ar-lead { color: var(--text-muted); font-size: var(--fs-500); margin-top: var(--space-md); }
.ar-byline { display: flex; flex-wrap: wrap; align-items: center; gap: .5em; margin-top: var(--space-lg); color: var(--text-muted); font-size: var(--fs-300); }
.ar-dot { opacity: .5; }
.ar-share { display: flex; align-items: center; gap: var(--space-2xs); margin-top: var(--space-lg); }
.ar-share-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--line); border-radius: 50%; color: var(--text); background: var(--bg-alt); cursor: pointer; transition: all var(--dur-fast) var(--ease); }
.ar-share-btn:hover { border-color: var(--accent); color: var(--accent-bright); transform: translateY(-2px); }
.ar-copied { font-size: var(--fs-200); color: var(--accent-bright); margin-left: var(--space-2xs); }

/* ---------------- COVER ---------------- */
.ar-cover { max-width: 80ch; margin: var(--space-xl) auto 0; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }

/* ---------------- BODY (prose) ---------------- */
.ar-body { max-width: 70ch; margin-inline: auto; padding-block: var(--space-2xl); }
.ar-body > * + * { margin-top: var(--space-md); }
.ar-body h2 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-600); margin-top: var(--space-2xl); line-height: 1.15; }
.ar-body h3 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-500); margin-top: var(--space-xl); }
.ar-body p { color: var(--text); font-size: var(--fs-450, 1.05rem); line-height: 1.75; }
.ar-body a { color: var(--accent-bright); text-decoration: underline; text-underline-offset: 3px; }
.ar-body ul, .ar-body ol { padding-left: 1.3em; color: var(--text); line-height: 1.7; }
.ar-body li + li { margin-top: .4em; }
.ar-body blockquote { border-left: 3px solid var(--accent); padding-left: var(--space-md); color: var(--text-muted); font-style: italic; font-size: var(--fs-500); }
.ar-body img { width: 100%; border-radius: var(--radius-lg); }

/* ---------------- RECIPE CARD ---------------- */
.ar-recipe { margin-top: var(--space-2xl); padding: var(--space-xl); border: 1px solid var(--accent); border-radius: var(--radius-lg); background: rgba(196,162,78,.06); }
.ar-recipe-title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-600); }
.ar-recipe-meta { display: flex; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-xs); color: var(--text-muted); font-size: var(--fs-300); }
.ar-recipe-cols { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-top: var(--space-lg); }
@media (min-width: 40em) { .ar-recipe-cols { grid-template-columns: 1fr 1.3fr; } }
.ar-recipe h3 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-500); margin-bottom: var(--space-xs); }
.ar-ing { list-style: none; padding: 0; }
.ar-ing li { position: relative; padding-left: 1.3em; color: var(--text); }
.ar-ing li::before { content: ""; position: absolute; left: 0; top: .6em; width: .5em; height: .5em; border-radius: 50%; background: var(--accent); }
.ar-ing li + li, .ar-steps li + li { margin-top: .5em; }
.ar-steps { padding-left: 1.2em; color: var(--text); }

/* ---------------- TAGS ---------------- */
.ar-tags-row { max-width: 70ch; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2xs); padding-top: var(--space-md); }
.ar-tags-label { color: var(--text-muted); font-size: var(--fs-300); margin-right: var(--space-2xs); }
.ar-tag { font-size: var(--fs-300); color: var(--text); padding: .35em .85em; border: 1px solid var(--line); border-radius: 999px; transition: all var(--dur-fast) var(--ease); }
.ar-tag:hover { border-color: var(--accent); color: var(--accent-bright); }

/* ---------------- NEWSLETTER ---------------- */
.ar-news { max-width: 70ch; margin: var(--space-2xl) auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-xl); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-alt); }
.ar-news h2 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-500); }
.ar-news p { color: var(--text-muted); margin-top: var(--space-2xs); }

/* ---------------- RELATED ---------------- */
.ar-related { padding-block: var(--space-2xl); }
.ar-related-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); }
@media (min-width: 48em) { .ar-related-grid { grid-template-columns: repeat(3, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .ar-share-btn:hover, .bl-card:hover { transform: none; }
}

/* ============================================================
   ΝΕΑ (Batch 4) — Progress bar · TOC · Author box · Inline CTA
   ============================================================ */
.ar-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: transparent; z-index: 60; }
.ar-progress span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .1s linear; }

/* Auto TOC (δημιουργείται από JS· εμφανίζεται σε μεγάλες οθόνες) */
.ar-toc { display: none; }
@media (min-width: 80em) {
  .ar-toc { display: block; position: fixed; top: 120px; left: max(1rem, calc(50% - 640px)); width: 200px; z-index: 20; }
  .ar-toc-title { font-size: var(--fs-200); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--space-xs); }
  .ar-toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); display: grid; gap: 2px; }
  .ar-toc a { display: block; padding: .35em .8em; margin-left: -1px; border-left: 2px solid transparent; color: var(--text-muted); font-size: var(--fs-200); line-height: 1.3; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
  .ar-toc a:hover { color: var(--text); }
  .ar-toc a.is-active { color: var(--accent-bright); border-color: var(--accent); }
}

.ar-promo { display: flex; align-items: center; gap: var(--space-md); margin: var(--space-xl) 0; padding: var(--space-md) var(--space-lg); border: 1px solid var(--accent); border-radius: var(--radius-lg); background: rgba(196,162,78,.06); }
.ar-promo-ph { flex-shrink: 0; min-width: 120px; height: 54px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: var(--radius); color: var(--text-muted); font-size: var(--fs-100, .7rem); background: var(--c-black); padding: 0 var(--space-sm); }
.ar-promo-ph img { max-width: 120px; height: auto; display: block; }
.ar-promo-text { flex: 1; }
.ar-promo-text strong { display: block; font-family: var(--font-display); font-weight: var(--weight-display); color: var(--accent-bright); }
.ar-promo-text p { margin: 2px 0 0; color: var(--text-muted); font-size: var(--fs-300); }

.ar-author-box { max-width: 70ch; margin: 0 auto; display: flex; gap: var(--space-lg); align-items: center; padding: var(--space-lg); border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--bg-alt); }
.ar-author-ph { flex-shrink: 0; min-width: 150px; height: 64px; border-radius: var(--radius); display: grid; place-items: center; padding: 0 var(--space-md); color: var(--text-muted); font-size: var(--fs-200); background: var(--c-black); border: 1px solid var(--line); }
.ar-author-ph img { max-width: 150px; height: auto; display: block; }
.ar-author-eyebrow { font-size: var(--fs-200); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--accent); }
.ar-author-info h3 { font-family: var(--font-display); font-weight: var(--weight-display); font-size: var(--fs-500); margin: 2px 0; }
.ar-author-info p { color: var(--text-muted); font-size: var(--fs-300); }

@media (prefers-reduced-motion: reduce) { .ar-progress span { transition: none; } }

/* review fixes: TOC να κρύβεται εκτός σώματος, promo button χρώμα, newsletter πλάτος */
.ar-toc--hidden { display: none !important; }
.ar-body a.btn { color: var(--btn-fg); text-decoration: none; }
.ar-news .newsletter { max-width: 34rem; width: 100%; }
/* Εικόνες blog/άρθρων μέσα στα placeholder κουτιά (.bl-ph) — γεμίζουν με
   object-fit:cover. Αν λείπει το blogN.png, παραμένει το gradient ως fallback. */
.bl-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── Mobile: στοίβαξη promo & author-box (τέλος στο overflow / στριμωγμένο 2-col) ── */
@media (max-width: 40em) {
  .ar-promo { flex-direction: column; align-items: stretch; text-align: center; gap: var(--space-sm); }
  .ar-promo-ph { width: 100%; }
  .ar-promo-text { flex: none; }
  .ar-promo .btn { width: 100%; }
  .ar-author-box { flex-direction: column; text-align: center; gap: var(--space-md); }
  .ar-author-ph { width: 100%; }
}