/* ==========================================================================
   Circle webdesign — tudastar.css
   Tudástár: blog-listaoldal (home/category/search) + cikk-sablon (single).
   A base.css UTÁN töltődik. Csak az itt egyedi komponensek — a tokenek,
   fejléc, lábléc, gombok, .hl, .eyebrow a base.css-ből jönnek.
   ========================================================================== */

/* Egységes háttér: a tudásbázis oldalain nincs tiszta fehér — minden #f1f3f2.
   Csak világos témában; sötétben a base.css tokenjei maradnak. */
:root[data-theme="light"] .is-tudastar{
  --bg-2:#f1f3f2; --surface:#f1f3f2; --surface-2:#e8ebea; --border:#d5dad8;
}

/* ==========================================================================
   LISTAOLDAL (home.php / category.php / search.php)
   ========================================================================== */
.arch-head{padding-top:calc(var(--header-h) + clamp(2rem,5vw,3.5rem));padding-bottom:clamp(1.5rem,3vw,2.2rem)}
.arch-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap}
.arch-title h1{font-family:var(--font-display);font-size:var(--step-5);line-height:1;letter-spacing:-.01em}
.arch-title p{margin-top:var(--space-3);color:var(--text-soft);max-width:40rem}
.arch-search{position:relative;flex-shrink:0}
.arch-search input{font-family:var(--font-body);font-size:var(--step-0);padding:.7rem 1rem .7rem 2.6rem;border-radius:var(--radius-pill);border:2px solid var(--border);background:var(--surface);color:var(--text);width:min(78vw,20rem)}
.arch-search input:focus{border-color:var(--orange);outline:none}
.arch-search .s-ic{position:absolute;left:.95rem;top:50%;transform:translateY(-50%);inline-size:18px;block-size:18px;color:var(--text-soft);pointer-events:none}
.arch-search button{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}

/* Kategória-chipek (linkek) */
.cat-bar{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--bg-2)}
.cat-bar-inner{display:flex;gap:.6rem;flex-wrap:wrap;padding-block:1rem}
.chip{font-family:var(--font-body);font-size:var(--step--1);font-weight:600;padding:.5rem 1.05rem;border-radius:var(--radius-pill);border:1.5px solid var(--border);background:transparent;color:var(--text);cursor:pointer;text-decoration:none;display:inline-block;transition:background var(--motion-fast),color var(--motion-fast),border-color var(--motion-fast)}
.chip:hover{border-color:var(--text)}
.chip[aria-current="true"],.chip.is-active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
:root[data-theme="dark"] .chip[aria-current="true"],:root[data-theme="dark"] .chip.is-active{background:var(--air);color:var(--ink);border-color:var(--air)}

/* Cikk-rács */
.arch-body{padding-block:clamp(2.5rem,6vw,4rem)}
.result-meta{color:var(--text-soft);font-size:var(--step--1);margin-bottom:var(--space-4)}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.8vw,2.2rem)}
.acard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-medium);overflow:hidden;text-decoration:none;color:var(--text);box-shadow:var(--shadow-1);transition:transform var(--motion-default),box-shadow var(--motion-default)}
.acard:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.acard .a-media{aspect-ratio:3/2;position:relative;background:linear-gradient(150deg,#e3ebe9,#cdd9d6);overflow:hidden}
.acard .a-media img{width:100%;height:100%;object-fit:cover;display:block}
.acard .a-media .frame{position:absolute;inset:12px;border:1.5px dashed rgba(39,60,44,.35);border-radius:4px}
.acard .a-media .a-badge{position:absolute;left:.85rem;top:.85rem;background:rgba(255,255,255,.94);color:var(--teal);font-size:var(--step--1);font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:.28rem .75rem;border-radius:var(--radius-pill);z-index:2}
.acard .a-body{padding:1.3rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
.acard h2{font-family:var(--font-display);font-size:var(--step-2);line-height:1.08}
.acard .a-exc{color:var(--text-soft);font-size:var(--step--1);line-height:1.55}
.acard .a-meta{margin-top:auto;padding-top:.5rem;font-size:var(--step--1);color:var(--text-soft);display:flex;gap:.6rem;align-items:center}
.acard .a-meta .dot{opacity:.5}

/* Lapozó */
.pager{display:flex;justify-content:center;gap:.4rem;margin-top:var(--space-6);flex-wrap:wrap}
.pager a,.pager span{min-width:44px;height:44px;padding:0 .6rem;display:inline-flex;align-items:center;justify-content:center;border:1.5px solid var(--border);border-radius:var(--radius-small);text-decoration:none;color:var(--text);font-weight:600}
.pager .current{background:var(--ink);color:var(--paper);border-color:var(--ink)}
:root[data-theme="dark"] .pager .current{background:var(--air);color:var(--ink);border-color:var(--air)}
.pager .dots{border:0}

/* ==========================================================================
   CIKK-SABLON (single.php)
   ========================================================================== */
.article-head{padding-top:calc(var(--header-h) + clamp(1.5rem,4vw,2.5rem));padding-bottom:clamp(1.5rem,4vw,2.5rem);background:var(--bg-2);border-bottom:1px solid var(--border)}
.head-inner{width:min(100% - clamp(3rem,8vw,10rem),74rem);margin-inline:auto}
.breadcrumb{font-size:var(--step--1);color:var(--text-soft);display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin-bottom:var(--space-4)}
.breadcrumb a{color:var(--text-soft);text-decoration:none}
.breadcrumb a:hover{color:var(--text);text-decoration:underline}
.breadcrumb .sep{opacity:.5}
.breadcrumb [aria-current]{color:var(--text)}
.pill-tag{background:var(--air);color:var(--ink);font-weight:700;text-transform:uppercase;letter-spacing:.08em;padding:.3rem .85rem;border-radius:var(--radius-pill);font-size:calc(var(--step--1) * .95);display:inline-block;text-decoration:none}
.pill-tag--head{margin-bottom:var(--space-4)}
.article-head h1{font-family:var(--font-display);font-size:var(--step-5);line-height:.99;letter-spacing:-.01em;max-width:20ch;margin-bottom:var(--space-4)}
/* Cím alatti, jól látható meta-sáv: olvasási idő + dátum */
.meta-under{display:flex;flex-wrap:wrap;gap:1.6rem;align-items:center;margin-bottom:var(--space-5);padding:.9rem 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-size:var(--step-0);color:var(--text)}
.meta-under .mu-item{display:inline-flex;align-items:center;gap:.5rem;font-weight:600}
.meta-under .mu-item svg{inline-size:19px;block-size:19px;color:var(--orange);flex-shrink:0}
.meta-under .mu-item .mu-soft{color:var(--text-soft);font-weight:400}
.lede{font-size:var(--step-1);color:var(--text);max-width:44rem;line-height:1.5}
.lede .hl{font-weight:500}
.article-hero-media{width:min(100% - clamp(3rem,8vw,10rem),74rem);margin:clamp(1.5rem,4vw,2.5rem) auto 0;position:relative;aspect-ratio:16/9;border-radius:var(--radius-medium);overflow:hidden;background:linear-gradient(150deg,#dfe7e6,#c3d3d0);box-shadow:var(--shadow-2)}
.article-hero-media img{width:100%;height:100%;object-fit:cover;display:block}
.article-hero-media .frame{position:absolute;inset:16px;border:1.5px dashed rgba(39,60,44,.4);border-radius:4px}

/* Törzs + sticky TOC */
.article-body{padding-block:clamp(2.5rem,6vw,4.5rem)}
.article-grid{width:min(100% - clamp(3rem,8vw,10rem),74rem);margin-inline:auto;display:grid;grid-template-columns:minmax(0,1fr) 15rem;gap:clamp(2rem,5vw,4rem);align-items:start}
/* Ha nincs elég címsor a tartalomjegyzékhez, egy oszlopra vált. */
.article-grid.no-toc{grid-template-columns:1fr}
.article-grid.no-toc .toc{display:none}
.prose{max-width:42rem;font-size:var(--step-0)}
.prose > * + *{margin-top:var(--space-4)}
.prose h2{font-family:var(--font-display);font-size:var(--step-3);line-height:1.08;margin-top:var(--space-6);letter-spacing:-.01em;scroll-margin-top:calc(var(--header-h) + 1rem)}
.prose h3{font-family:var(--font-display);font-size:var(--step-2);margin-top:var(--space-5);scroll-margin-top:calc(var(--header-h) + 1rem)}
.prose p{line-height:1.75}
.prose ul,.prose ol{margin:0;padding-left:1.3rem;line-height:1.7}
.prose li + li{margin-top:.4rem}
.prose a{text-underline-offset:.2em}
.prose blockquote{margin:var(--space-5) 0;padding-left:var(--space-4);border-left:3px solid var(--orange);font-family:var(--font-display);font-size:var(--step-2);line-height:1.28;color:var(--text)}
.prose figure{margin:var(--space-5) 0}
.prose figure img{border-radius:var(--radius-medium)}
.prose figcaption{margin-top:.6rem;font-family:var(--font-hand);font-size:var(--step-0);color:var(--text-soft);text-align:center}

/* Callout blokkok (blokk-mintaként beszúrható Group + osztály) */
.callout{border-radius:var(--radius-medium);padding:1.2rem 1.4rem;border:1px solid var(--border);background:var(--surface)}
.callout .c-label{font-size:var(--step--1);font-weight:700;text-transform:uppercase;letter-spacing:.1em;display:inline-flex;align-items:center;gap:.5rem;margin-bottom:.5rem}
.callout .c-label::before{content:"";inline-size:.7rem;block-size:.7rem;border-radius:50%;display:inline-block}
.callout p{line-height:1.65}
.callout.tipp{background:rgba(117,184,200,.12);border-color:rgba(117,184,200,.5)}
.callout.tipp .c-label{color:#2b6b7a}.callout.tipp .c-label::before{background:var(--air)}
.callout.hiba{background:rgba(250,72,1,.07);border-color:rgba(250,72,1,.4)}
.callout.hiba .c-label{color:#c53a06}.callout.hiba .c-label::before{background:var(--orange)}
.callout.jo{background:rgba(39,60,44,.07);border-color:rgba(39,60,44,.35)}
.callout.jo .c-label{color:var(--teal)}.callout.jo .c-label::before{background:var(--teal)}
:root[data-theme="dark"] .callout.tipp .c-label,:root[data-theme="dark"] .callout.jo .c-label{color:var(--air-bright)}
/* Megjegyzés: keret nélkül, teljes szélességben, kézírásos betűtípus */
.callout.megj{background:none;border:0;padding:0;border-radius:0}
.callout.megj .c-label{color:var(--text-soft)}.callout.megj .c-label::before{background:var(--text-soft)}
.callout.megj p{font-family:var(--font-hand);font-size:calc(var(--step-0) * 1.18);line-height:1.45}

/* Checklist */
.checklist-box{background:var(--surface);border:1px dashed var(--border);border-radius:var(--radius-medium);padding:1.4rem 1.5rem}
.checklist-box h4{font-family:var(--font-display);font-size:var(--step-1);margin-bottom:var(--space-3)}
.checklist{list-style:none;padding:0;margin:0;display:grid;gap:.7rem}
.checklist li{position:relative;padding-left:2.1rem;line-height:1.55}
.checklist li::before{content:"✓";position:absolute;left:0;top:0;inline-size:1.4rem;block-size:1.4rem;border-radius:50%;background:var(--teal);color:var(--paper);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700}

/* Sticky TOC */
.toc{position:sticky;top:calc(var(--header-h) + 1.5rem);font-size:var(--step--1)}
.toc .toc-title{text-transform:uppercase;letter-spacing:.14em;font-weight:700;color:var(--text-soft);margin-bottom:.8rem;font-size:calc(var(--step--1) * .95)}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.1rem;border-left:2px solid var(--border)}
.toc a{display:block;padding:.4rem .9rem;color:var(--text-soft);text-decoration:none;border-left:2px solid transparent;margin-left:-2px;line-height:1.3;transition:color var(--motion-fast),border-color var(--motion-fast)}
.toc a:hover{color:var(--text)}
.toc a.is-active{color:var(--text);border-left-color:var(--orange);font-weight:600}
.toc-mobile{display:none}

/* Összegzés (kulcspontok) */
.takeaways{margin-top:var(--space-6);background:var(--teal);color:var(--paper);border-radius:var(--radius-large);padding:clamp(1.5rem,3vw,2.4rem)}
.takeaways h2{font-family:var(--font-display);font-size:var(--step-2);color:var(--paper);margin-top:0;margin-bottom:var(--space-4)}
.takeaways ul{list-style:none;margin:0;padding:0;display:grid;gap:.8rem}
.takeaways li{position:relative;padding-left:1.8rem;line-height:1.5;color:rgba(241,243,242,.92)}
.takeaways li::before{content:"→";position:absolute;left:0;top:0;color:var(--air-bright);font-weight:700}

/* Szerző-blokk */
.author{margin-top:var(--space-6);display:flex;gap:var(--space-4);align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-large);padding:clamp(1.4rem,3vw,2rem)}
.author .a-photo{inline-size:88px;block-size:88px;border-radius:50%;flex-shrink:0;overflow:hidden;border:3px solid var(--orange);background:linear-gradient(150deg,#dfe7e6,#c3d3d0)}
.author .a-photo img{width:100%;height:100%;object-fit:cover;display:block}
.author .a-info .a-k{font-size:var(--step--1);text-transform:uppercase;letter-spacing:.12em;color:var(--teal);font-weight:700}
:root[data-theme="dark"] .author .a-info .a-k{color:var(--air-bright)}
.author .a-info h2,.author .a-info h3{font-family:var(--font-display);font-size:var(--step-2);margin:.15rem 0 .4rem}
.author .a-info p{color:var(--text-soft);font-size:var(--step--1);line-height:1.55;max-width:40rem}

/* Olvass tovább — legfrissebb ajánló */
.related{background:var(--bg-2);border-top:1px solid var(--border);padding-block:clamp(3rem,7vw,5rem)}
.related-inner{width:min(100% - clamp(3rem,8vw,10rem),74rem);margin-inline:auto}
.rel-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-5)}
.related h2{font-family:var(--font-display);font-size:var(--step-3)}
.rel-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,1.9rem)}
.lcard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-medium);overflow:hidden;text-decoration:none;color:var(--text);box-shadow:var(--shadow-1);transition:transform var(--motion-default),box-shadow var(--motion-default)}
.lcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.lcard .l-media{aspect-ratio:3/2;position:relative;background:linear-gradient(150deg,#e3ebe9,#cdd9d6);overflow:hidden}
.lcard .l-media img{width:100%;height:100%;object-fit:cover;display:block}
.lcard .l-media .frame{position:absolute;inset:12px;border:1.5px dashed rgba(39,60,44,.35);border-radius:4px}
.lcard .l-media .l-badge{position:absolute;left:.8rem;top:.8rem;background:rgba(255,255,255,.94);color:var(--teal);font-size:var(--step--1);font-weight:700;text-transform:uppercase;letter-spacing:.07em;padding:.25rem .7rem;border-radius:var(--radius-pill);z-index:2}
.lcard .l-body{padding:1.1rem 1.25rem 1.3rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.lcard h3{font-family:var(--font-display);font-size:var(--step-1);line-height:1.12}
.lcard .l-meta{margin-top:auto;font-size:var(--step--1);color:var(--text-soft)}

/* Kontextusfüggő CTA */
.article-cta{background:var(--air);color:var(--ink)}
.article-cta-inner{width:min(100% - clamp(3rem,8vw,10rem),74rem);margin-inline:auto;padding-block:clamp(3rem,7vw,5rem)}
.article-cta .eyebrow{color:var(--ink)}
.article-cta h2{font-family:var(--font-display);font-size:var(--step-4);line-height:1.05;margin-bottom:var(--space-3);color:var(--ink);max-width:16ch}
.article-cta p{color:var(--ink);font-size:var(--step-1);max-width:34rem;margin-bottom:var(--space-4)}

/* ==========================================================================
   RESZPONZÍV
   ========================================================================== */
@media (max-width:1000px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .article-grid{grid-template-columns:1fr}
  .prose{max-width:none}
  .toc{position:static;display:none}
  .toc-mobile{display:block;margin-bottom:var(--space-5);border:1px solid var(--border);border-radius:var(--radius-medium);background:var(--surface);padding:.4rem 1rem}
  .toc-mobile summary{font-weight:700;padding:.7rem 0;cursor:pointer}
  .toc-mobile ol{list-style:none;margin:.4rem 0 .8rem;padding:0;display:grid;gap:.3rem}
  .toc-mobile a{color:var(--text-soft);text-decoration:none;font-size:var(--step--1)}
  .rel-cards{grid-template-columns:1fr}
}
@media (max-width:620px){
  .card-grid{grid-template-columns:1fr}
  .arch-search,.arch-search input{width:100%}
}