/* AstroPlus 2.0 „Aura”: artykuł (Astrologia, Numerologia, Tarot, Blog) i karty artykułów.
   Wzorzec: prototyp/artykul.html + styles.css (sekcja article). Długie czytanie w Newsreaderze (.prose w main.css). */

/* ---------- pasek postępu czytania (hairline) ---------- */
.progress { position: fixed; left: 0; top: 0; z-index: 80; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: var(--ink); }
.admin-bar .progress { top: 32px; }

/* ---------- nagłówek ---------- */
.a-hero { position: relative; overflow: hidden; padding-block: clamp(28px, 5vw, 64px) 0; }
.a-hero > .aura { width: min(720px, 110vw); right: -16%; top: -40%; }
.a-hero__in { position: relative; z-index: 1; max-width: 900px; display: grid; gap: 20px; }
.a-hero__cat { text-decoration: none; justify-self: start; border-bottom: 1px solid var(--line-strong); padding-bottom: 2px; }
.a-hero__cat:hover { border-color: currentColor; }
.a-hero h1 { font-size: clamp(2.5rem, 6vw, 4.6rem); line-height: 1; }
.a-hero .lead { --f-lead: "Newsreader", Georgia, serif; --lead-style: italic; --lead-weight: 400; max-width: 46rem; color: var(--ink-lead); }
.a-meta { display: flex; gap: 10px 16px; flex-wrap: wrap; align-items: center; font: var(--t-sm)/1.5 var(--f-ui); color: var(--ink-soft); }
.a-cover { position: relative; z-index: 1; margin: clamp(28px, 4vw, 48px) 0 0; }
.a-cover .cover { aspect-ratio: 21 / 9; border-radius: 4px; }
.a-cover .media--empty .ill { width: 20%; }
.a-cover figcaption { font: var(--t-xs)/1.5 var(--f-ui); color: var(--ink-soft); margin-top: 10px; }
@media (max-width: 640px) { .a-cover .cover { aspect-ratio: 3 / 2; } .a-cover .media--empty .ill { width: 34%; } }

/* ---------- układ: rail spisu treści | tekst | oddech ---------- */
.a-layout { display: grid; grid-template-columns: 220px minmax(0, 680px) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); padding-block: clamp(36px, 6vw, 72px); }
.toc { position: sticky; top: calc(var(--head-h) + 28px); align-self: start; font: var(--t-sm)/1.35 var(--f-ui); }
.admin-bar .toc { top: calc(var(--head-h) + 60px); }
.toc ol { list-style: none; padding: 0; margin: 14px 0 0; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 1px solid transparent; text-decoration: none; color: var(--ink-soft); transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--ink); }
.toc a.is-active { color: var(--ink); border-left-color: var(--ink); }
.toc-m { display: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--f-ui); }
.toc-m summary { padding: 14px 0; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.toc-m summary::-webkit-details-marker { display: none; }
.toc-m[open] summary span:last-child { transform: rotate(45deg); }
.toc-m summary span:last-child { transition: transform .3s; font-size: 1.2rem; }
.toc-m ol { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 8px; font-size: var(--t-sm); line-height: 1.4; }
.toc-m a { text-decoration: none; }
@media (max-width: 1100px) {
  .a-layout { grid-template-columns: minmax(0, 1fr); max-width: calc(760px + 2 * var(--gutter)); }
  .toc, .a-layout__aside { display: none; }
  .toc-m { display: block; }
}

/* ---------- elementy treści ---------- */
.prose__body > * + * { margin-top: 1.15em; }
.prose__body > p:first-child::first-letter {
  font-family: var(--f-display); font-style: italic; float: left; font-size: 4.6em; line-height: .82; padding: .06em .1em 0 0; margin-top: .04em;
}
.summary-box { border: 1px solid var(--line-strong); padding: 26px 28px; position: relative; background: color-mix(in srgb, var(--paper) 70%, white); }
.summary-box .label { position: absolute; top: -.7em; left: 20px; background: var(--paper); padding: 0 10px; }
.summary-box p { font-size: 1.05rem; }
.prose blockquote.quote, .prose .wp-block-pullquote blockquote {
  margin: 2.2em 0; padding: 0; border: 0; font-style: italic; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.25; text-align: center; text-wrap: balance;
}
.prose blockquote.quote::before, .prose blockquote.quote::after { content: ""; display: block; width: 48px; height: 1px; background: var(--line-strong); margin: 0 auto 22px; }
.prose blockquote.quote::after { margin: 22px auto 0; }
.prose ol.steps { counter-reset: s; list-style: none; padding: 0; display: grid; gap: 14px; }
.prose ol.steps li { counter-increment: s; display: grid; grid-template-columns: 2.2em minmax(0, 1fr); gap: 12px; }
.prose ol.steps li::before { content: counter(s); font-family: var(--f-display); font-style: italic; font-size: 1.6rem; line-height: 1; }
.prose .sep { margin-block: 2.6em 0; }
.prose #faq { margin-top: 1.2em; }
.prose .faq { margin-top: 1em; }
.prose .faq summary { font-family: var(--f-text); font-size: 1.15rem; }

/* karta CTA w środku tekstu (zamiast popupu) */
.cta-inline {
  position: relative; overflow: hidden; isolation: isolate; border-radius: 14px; padding: 32px; margin-block: 2.4em;
  display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 24px; align-items: center; font-family: var(--f-ui);
}
.cta-inline > .aura { width: 340px; right: -90px; top: -90px; opacity: .45; }
.cta-inline > div { display: grid; gap: 12px; position: relative; z-index: 1; justify-items: start; }
.cta-inline__title { font: 400 italic 1.7rem/1.15 var(--f-display); color: var(--on-night); }
.cta-inline p.muted { font-size: var(--t-sm); line-height: 1.55; }
.cta-inline__art { position: relative; z-index: 1; color: var(--star); }
.cta-inline a.btn { color: var(--night); }
@media (max-width: 760px) { .cta-inline { grid-template-columns: 1fr; } .cta-inline__art { display: none; } }

/* ramka „Opracowanie” */
.editorial { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 14px; align-items: start; margin-top: 2.6em; padding-top: 18px; border-top: 1px solid var(--line); font: var(--t-sm)/1.55 var(--f-ui); color: var(--ink-soft); }
.editorial__star { width: 16px; height: 16px; margin-top: 3px; color: var(--ink); }
.editorial a { color: var(--ink); }
.editorial__label { margin-top: 10px; font-weight: 600; color: var(--ink); }
.editorial__sources { margin: 4px 0 0; padding-left: 1.1em; display: grid; gap: 4px; }

/* ---------- karty artykułów (powiązane, Magazyn, archiwa) ---------- */
.related-sec { padding-block: clamp(56px, 7vw, 96px); }
.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.card { text-decoration: none; display: grid; gap: 12px; align-content: start; }
.card .cover { aspect-ratio: 3 / 2; border-radius: 4px; }
.card .media--empty .ill { width: 34%; }
.card__title { font-family: var(--f-title); font-weight: var(--title-weight); font-size: 1.35rem; line-height: 1.2; }
.card__desc { font-size: var(--t-sm); color: var(--ink-soft); line-height: 1.5; }
.card:hover .card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .14em; }
@media (max-width: 860px) { .related { grid-template-columns: 1fr; } }

/* ---------- strona Magazynu (/magazyn/) ---------- */
.mag-hero .lead { font-family: var(--f-lead); }
/* hub działu nie ma okładki pod nagłówkiem, więc aura nie może dochodzić do jego dolnej krawędzi;
   dół hero zamyka linia z gwiazdką (main.css) */
.mag-hero { padding-bottom: clamp(44px, 5vw, 60px); }
.mag-hero > .aura { width: min(460px, 90vw); right: -6%; top: -70%; }
@media (max-width: 700px) {
  /* na telefonie aura nie jest smugą ucinaną przez nagłówek, tylko poświatą w prawym dolnym rogu */
  .mag-hero > .aura { width: 340px; right: -150px; top: auto; bottom: -120px; opacity: .6; }
  .mag-hero .lead { font-size: 1.125rem; line-height: 1.5; }
}
.mag { padding-top: clamp(32px, 4vw, 56px); }
.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: clamp(24px, 4vw, 40px); }
.tab {
  font: var(--ui-weight) var(--t-xs)/1 var(--f-ui); letter-spacing: .14em; text-transform: uppercase; border-radius: 999px;
  background: none; border: 1px solid var(--line); color: var(--ink); padding: .9em 1.2em; cursor: pointer; display: inline-flex; gap: 8px; align-items: center;
}
.tab[aria-selected="true"], .tab[aria-current="page"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
a.tab { text-decoration: none; }
.mag .pager { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 32px; font: var(--t-sm)/1 var(--f-ui); }
.mag .pager .page-numbers { padding: .7em .95em; border: 1px solid var(--line-strong); text-decoration: none; }
.mag .pager .current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tab__n { font-size: .65rem; opacity: .6; }
.mag__grid { row-gap: 40px; }
.mag__grid .card__title { font-size: 1.3rem; }
.mag__archives { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: clamp(40px, 6vw, 64px); padding-top: 24px; border-top: 1px solid var(--line); }
.empty { display: grid; justify-items: center; gap: 18px; padding: 48px 0; text-align: center; font-family: var(--f-ui); color: var(--ink-soft); }
.empty__ill { width: 120px; color: var(--ink); }