/*
   Hírek, cikkek, oldalsáv.
*/

.blog-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin:0 0 clamp(28px,4vw,44px)}
.blog-head .section-head{margin:0}
.blog-head .all-link{
  font-family:var(--font-head);font-weight:800;font-size:13px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--blue);display:inline-flex;align-items:center;gap:8px;
  white-space:nowrap;padding-bottom:4px;
}
.blog-head .all-link .icon{width:15px;height:15px;transition:.2s}
.blog-head .all-link:hover .icon{transform:translateX(4px)}

.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}

.bcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;transition:.2s}
.bcard:hover{box-shadow:var(--shadow-lg);transform:translateY(-3px)}
.bimg{display:block;overflow:hidden;aspect-ratio:16/10;background:var(--bg-panel)}
.bimg img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.bcard:hover .bimg img{transform:scale(1.05)}
.bbody{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1}
.bmeta{display:flex;align-items:center;gap:12px;margin-bottom:13px;flex-wrap:wrap}
.btag{
  font-family:var(--font-head);font-weight:800;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--blue);background:var(--bg-soft);
  padding:5px 10px;border-radius:var(--radius);
}
.bdate{font-size:12.5px;color:var(--cnt-mute)}
.bcard h2,.bcard h3{font-size:19px;line-height:1.28;margin-bottom:11px}
.bcard h2 a,.bcard h3 a{transition:color .2s}
.bcard:hover h2 a,.bcard:hover h3 a{color:var(--blue)}
.bbody p{font-size:14px;color:var(--cnt-soft);margin:0 0 18px}
.blink{
  margin-top:auto;font-family:var(--font-head);font-weight:800;font-size:12.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--blue);
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
}
.blink .icon{width:15px;height:15px;transition:.2s}
.bcard:hover .blink .icon{transform:translateX(4px)}

/* ---------- Cikkoldal ---------- */
.single-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(32px,4vw,64px);align-items:start}
.article-head{margin-bottom:clamp(24px,3vw,40px)}
.article-head h1{margin-bottom:16px}
.article-meta{display:flex;align-items:center;gap:16px;flex-wrap:wrap;font-size:13.5px;color:var(--cnt-mute)}
.article-meta .icon{width:15px;height:15px}
.article-meta span{display:inline-flex;align-items:center;gap:7px}
.article-cover{margin-bottom:clamp(24px,3vw,40px)}
.article-cover img{width:100%;border-radius:var(--radius-lg)}

/* ---------- Oldalsáv ---------- */
.sidebar{position:sticky;top:calc(var(--header-height) + 20px);display:grid;gap:24px}
.sidebar .widget{background:var(--bg-soft);border:1px solid var(--line);border-radius:var(--radius-lg);padding:24px}
.sidebar .widget-title{
  font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--blue);margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line);
}
.sidebar ul{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.sidebar a{font-size:14.5px;color:var(--cnt-soft);transition:color .2s}
.sidebar a:hover{color:var(--blue)}

/* ---------- Kapcsolódó cikkek ---------- */
.related-posts{border-top:1px solid var(--line);margin-top:clamp(40px,5vw,64px);padding-top:clamp(32px,4vw,48px)}

/* ---------- Keresés ---------- */
.search-form{display:flex;gap:8px}
.search-form input[type="search"]{
  flex:1;font-family:inherit;font-size:15px;padding:12px 15px;
  border:1px solid var(--line);border-radius:var(--radius);background:#fff;
}
.search-form input[type="search"]:focus{outline:none;border-color:var(--blue)}
.search-form button{
  background:var(--blue);color:#fff;border-radius:var(--radius);
  padding:0 16px;display:flex;align-items:center;justify-content:center;
}

/* ---------- Hírek titlebar (blog-hero) ---------- */
.blog-hero{padding:clamp(36px,5vw,64px) 0 clamp(40px,5vw,72px);background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%)}
.blog-hero .hero-info{max-width:780px}
.blog-hero h1{font-size:clamp(30px,3.4vw,42px);line-height:1.14;margin-bottom:16px}
.blog-hero .lead{font-size:18px;color:var(--cnt-soft)}

/* ---------- Hírlevél CTA-sáv ---------- */
.cta-band{background:var(--blue);color:#fff;border-radius:var(--radius-lg);padding:clamp(26px,3.5vw,42px);display:flex;align-items:center;gap:28px;justify-content:space-between;flex-wrap:wrap;box-shadow:var(--shadow)}
.cta-band .ct-ic{width:62px;height:62px;border-radius:var(--radius);background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;flex:none}
.cta-band .ct-ic svg{width:30px;height:30px;color:#fff}
.cta-band .ct-main{flex:1;min-width:280px}
.cta-band .ct-eyebrow{font-family:var(--font-head);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:#bcd3ec;margin-bottom:9px}
.cta-band h3{color:#fff;font-size:clamp(20px,2.3vw,26px);margin-bottom:9px}
.cta-band p{color:#dbe6f3;font-size:15px;margin:0;max-width:660px}
.cta-band .btn-ghost{flex:none}
@media (max-width:680px){ .cta-band{flex-direction:column;align-items:flex-start} }

/* =====================================================================
   CIKK-ELRENDEZÉSEK (a DEMO-SITES designok szerint)
   A — Útmutató (tg-*) · B — Esettanulmány (cs-*) · C — Magazin (mag-*)
   ===================================================================== */

/* ---------- Közös: „vissza" link + meta + záró CTA ---------- */
.tg-back,.cs-back,.mag-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--cnt-mute);margin-bottom:20px;transition:.2s}
.tg-back:hover,.cs-back:hover{color:var(--blue)}
.tg-back svg,.cs-back svg,.mag-back svg{width:16px;height:16px}
.tg-meta,.cs-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13.5px;color:var(--cnt-mute);margin-bottom:16px}

.art-cta{margin-top:36px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 28px;box-shadow:var(--shadow);display:flex;gap:20px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.art-cta .txt h4{font-size:18px;margin-bottom:6px}
.art-cta .txt p{font-size:14px;color:var(--cnt-mute);margin:0}
.art-cta .acts{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- A — Útmutató (technical guide, wide + TOC) ---------- */
.tg-head h1{font-size:clamp(30px,3.8vw,46px);line-height:1.12;max-width:940px;margin-bottom:18px}
.tg-lead{font-size:clamp(18px,1.9vw,22px);line-height:1.55;color:var(--cnt-soft);max-width:900px;margin:0}
.tg-hero{margin:clamp(28px,3.5vw,44px) 0 0}
.tg-hero img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--line)}
.tg-grid{display:grid;grid-template-columns:1fr 290px;gap:clamp(36px,4.5vw,68px);align-items:start;margin-top:clamp(32px,4vw,52px)}
.tg-main{min-width:0}
.tg-main h2{font-size:clamp(21px,2.2vw,27px);margin:1.8em 0 .55em;display:flex;gap:14px;align-items:baseline;scroll-margin-top:var(--horgony-eltolas,112px)}
.tg-main h2:first-child{margin-top:0}
.tg-main h2 .n{font-family:var(--font-head);font-weight:900;color:var(--tan);font-size:.8em;flex:none}
.tg-main p{font-size:17px;line-height:1.8;color:var(--cnt-soft);margin:0 0 1.25em}
.tg-main ul,.tg-main ol{font-size:17px;line-height:1.8;color:var(--cnt-soft);margin:0 0 1.25em;padding-left:1.3em}
.tg-main li{margin-bottom:.4em}
.tg-main strong{color:var(--cnt);font-weight:700}
.tg-side{position:sticky;top:var(--horgony-eltolas,112px);display:grid;gap:20px}
.tg-toc{border:1px solid var(--line);border-radius:var(--radius-lg);background:#fff;padding:22px;box-shadow:var(--shadow)}
.tg-toc h4{font-size:12px;font-family:var(--font-head);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin:0 0 12px}
.tg-toc ol{margin:0;padding:0;list-style:none;counter-reset:toc;display:grid;gap:1px}
.tg-toc li a{display:flex;gap:11px;padding:8px 6px;font-size:14px;color:var(--cnt-soft);border-radius:var(--radius);transition:.15s;align-items:baseline}
.tg-toc li a:hover{color:var(--blue);background:var(--bg-soft)}
.tg-toc li a::before{counter-increment:toc;content:counter(toc,decimal-leading-zero);font-family:var(--font-head);font-weight:800;color:var(--tan-dark);font-size:12px;flex:none}
.tg-aside-cta{background:var(--cnt);color:#fff;border-radius:var(--radius-lg);padding:24px 22px}
.tg-aside-cta h4{color:#fff;font-size:16px;margin:0 0 8px}
.tg-aside-cta p{color:#c9ced5;font-size:13.5px;margin:0 0 16px;line-height:1.55}
.tg-aside-cta .btn{width:100%}
.takeaways{background:var(--bg-soft);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:var(--radius);padding:24px 28px;margin:34px 0}
.takeaways h4{font-size:13px;font-family:var(--font-head);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);margin:0 0 14px}
.takeaways ul{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.takeaways li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;color:var(--cnt-soft)}
.takeaways li svg{width:18px;height:18px;color:var(--blue);flex:none;margin-top:2px}

/* ---------- B — Esettanulmány (case study, sticky sidebar) ---------- */
.cs-title{font-size:clamp(28px,3.6vw,40px);line-height:1.15;max-width:840px}
.cs-lead{font-size:20px;color:var(--cnt-soft);max-width:840px;margin:16px 0 0}
.cs-figure{margin:clamp(26px,4vw,40px) 0 0}
.cs-figure img{width:100%;aspect-ratio:16/7;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--line)}
.cs-grid{display:grid;grid-template-columns:1fr 320px;gap:clamp(32px,5vw,60px);align-items:start;margin-top:clamp(32px,4vw,48px)}
.cs-main p{font-size:17px;line-height:1.78;color:var(--cnt-soft);margin:0 0 1.3em}
.cs-main ul,.cs-main ol{font-size:17px;line-height:1.78;color:var(--cnt-soft);margin:0 0 1.3em;padding-left:1.3em}
.cs-main h2{font-size:clamp(20px,2.1vw,25px);margin:1.6em 0 .5em}
.cs-main h2:first-child{margin-top:0}
.cs-main strong{color:var(--cnt);font-weight:700}
.cs-side{position:sticky;top:var(--horgony-eltolas,120px);display:grid;gap:18px}
.cs-fact{background:var(--cnt);color:#fff;border-radius:var(--radius-lg);padding:26px 24px}
.cs-fact h4{font-size:12px;font-family:var(--font-head);font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#cfd4da;margin:0 0 18px}
.cs-fact .row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:14.5px;color:#c9ced5}
.cs-fact .row:last-child{border-bottom:0}
.cs-fact .row b{font-family:var(--font-head);color:#fff;font-weight:800}
.cs-prod{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden}
.cs-prod img{width:100%;aspect-ratio:4/3;object-fit:cover;background:var(--bg-soft)}
.cs-prod .pb{padding:18px 20px}
.cs-prod .pb .t{font-family:var(--font-head);font-weight:800;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--tan-dark);margin-bottom:6px}
.cs-prod .pb h4{font-size:16px;margin-bottom:12px}
.cs-prod .pb .btn{width:100%}

/* ---------- C — Magazin (overlay hero) ---------- */
.article-c{overflow:hidden}
.mag-hero{position:relative;min-height:clamp(360px,46vw,520px);display:flex;align-items:flex-end;overflow:hidden}
.mag-hero > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mag-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,26,38,.2) 0%,rgba(18,26,38,.55) 55%,rgba(18,26,38,.88) 100%)}
.mag-hero .mh-inner{position:relative;z-index:2;color:#fff;padding-top:48px;padding-bottom:clamp(30px,4vw,52px);max-width:880px}
.mag-hero .mh-cat{font-family:var(--font-head);font-weight:800;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:var(--blue);display:inline-block;padding:6px 12px;border-radius:var(--radius);margin-bottom:18px}
.mag-hero h1{color:#fff;font-size:clamp(28px,4.2vw,50px);line-height:1.08;margin-bottom:16px}
.mag-hero .mh-meta{font-size:14px;color:#d4dae2;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.mag-back{color:#dfe4ea}
.mag-back:hover{color:#fff}
.mag-lead{max-width:820px;margin:0 auto;font-family:var(--font-head);font-weight:800;font-size:clamp(20px,2.3vw,26px);line-height:1.4;color:var(--cnt);text-align:center}
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin:clamp(34px,4.5vw,52px) 0}
.stat-row-1{grid-template-columns:1fr;max-width:320px;margin-left:auto;margin-right:auto}
.stat-row-2{grid-template-columns:repeat(2,1fr);max-width:640px;margin-left:auto;margin-right:auto}
.stat-row-3{grid-template-columns:repeat(3,1fr)}
.stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);padding:26px 18px;text-align:center;box-shadow:var(--shadow)}
.stat .v{font-family:var(--font-head);font-weight:900;font-size:clamp(28px,3vw,36px);color:var(--blue);line-height:1}
.stat .l{font-size:13px;color:var(--cnt-mute);margin-top:9px;line-height:1.4}
.mag-body{max-width:760px;margin:0 auto}
.mag-body p{font-size:17px;line-height:1.78;color:var(--cnt-soft);margin:0 0 1.3em}
.mag-body ul,.mag-body ol{font-size:17px;line-height:1.78;color:var(--cnt-soft);margin:0 0 1.3em;padding-left:1.3em}
.mag-body h2{font-size:clamp(21px,2.2vw,26px);margin:1.7em 0 .5em}
.mag-body strong{color:var(--cnt);font-weight:700}
.pullquote{border-left:4px solid var(--tan);padding:6px 0 6px 26px;margin:36px 0;font-family:var(--font-head);font-weight:800;font-size:clamp(20px,2.4vw,27px);line-height:1.32;color:var(--cnt)}
.mag-note{font-size:12.5px;color:var(--cnt-mute);text-align:center;margin-top:-20px;margin-bottom:8px}

/* ---------- Szövegközi hivatkozások a cikk törzsében (a gombok kivételével) ---------- */
.tg-main a:not(.btn),.cs-main a:not(.btn),.mag-body a:not(.btn),.entry-content a:not(.btn){color:var(--blue);text-decoration:none}
.tg-main a:not(.btn):hover,.cs-main a:not(.btn):hover,.mag-body a:not(.btn):hover,.entry-content a:not(.btn):hover{text-decoration:underline;text-underline-offset:2px}

/* ---------- Illusztrációk a cikk törzsében ---------- */
.tg-main figure,.cs-main figure,.mag-body figure,.entry-content figure{margin:30px 0}
.tg-main figure img,.cs-main figure img,.mag-body figure img,.entry-content figure img{width:100%;height:auto;border-radius:var(--radius-lg);border:1px solid var(--line);display:block}
.tg-main figcaption,.cs-main figcaption,.mag-body figcaption,.entry-content figcaption{font-size:13px;color:var(--cnt-mute);margin-top:9px;text-align:center;line-height:1.5}

/* ---------- Cikk-elrendezések reszponzív ---------- */
@media (max-width:900px){
  .tg-grid,.cs-grid{grid-template-columns:1fr}
  .tg-side,.cs-side{position:static}
  .tg-toc{display:none}
}
@media (max-width:760px){
  .stat-row,.stat-row-3{grid-template-columns:repeat(2,1fr)}
  .art-cta{flex-direction:column;align-items:flex-start}
}