/* Blog (/blog és /blog/<cikk>): "Napirend" sablon. A cikk egy idővonal: a fejezetek számozott körök egy függőleges tengelyen, a lépések kis pontok ugyanazon,
   a Röviden a tengely kezdete, a záró felhívás a vége. A /blog lista ugyanezt a tengelyt használja (egy bejegyzés = egy csomópont).
   Nincs oldalsó tartalomjegyzék és nincs JS. Kis animációk (lásd lent): CSS-only, csak levél-elemeken, a szöveg sosem rejtett; csökkentett mozgásnál nincs.
   A refresh.css UTÁN töltődik; minden érték a meglévő tokenekből jön (--v-*). */

/* a törzsszöveg színe: sötétebb, mint a --v-text (olvashatóbb); a jelölő a kulcsmondatok kiemelése */
:root{ --blog-ink:#2E2A44; --blog-mark:rgba(185,175,230,.55); }

.blog-wrap{ max-width:860px; margin:0 auto; padding:0 24px; }

/* ---------- Hero: a jogi oldalakéval azonos színháló, a fejléc alá nyúlik ---------- */
body .blog-hero{ margin-top:-96px; padding:calc(64px + 96px) 0 clamp(40px,5vw,64px); background:var(--v-mesh), linear-gradient(180deg,#F6F2FF 0%,var(--v-paper) 100%); border-radius:0 0 var(--v-r-lg) var(--v-r-lg); }
@media (max-width:1020px){
  body:has(.blog-hero) > main{ padding-top:0 !important; }
  body .blog-hero{ margin-top:0; padding-top:calc(64px + 96px + env(safe-area-inset-top)); }
}
@media (max-width:720px){ body .blog-hero{ padding-top:calc(64px + 80px + env(safe-area-inset-top)); } }

.blog-crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px; margin:0 0 20px; font:500 14px/1.4 var(--font-body); color:var(--v-muted); }
.blog-crumbs a{ color:var(--v-muted); text-decoration:none; }
.blog-crumbs a:hover{ color:var(--v-ink); text-decoration:underline; text-underline-offset:3px; }
.blog-crumbs span{ opacity:.6; }

.blog-chip{ display:inline-flex; align-items:center; gap:10px; margin:0; padding:7px 14px 7px 12px; border-radius:999px; border:1px solid var(--v-glass-line); background:var(--v-glass); font:600 13px/1 var(--font-display); color:var(--v-ink); }
.blog-chip::before{ content:""; width:8px; height:8px; border-radius:50%; background:#3FBF9F; }

body .blog-h1{ margin:18px 0 0; max-width:20ch; font:600 clamp(34px,4vw,56px)/1.04 var(--font-display); letter-spacing:-.04em; color:var(--v-ink); }
.blog-h1 .accent, .blog-end h2 .accent{
  font-family:var(--v-serif); font-style:italic; font-weight:400; letter-spacing:-.01em; font-size:1.1em; line-height:.9; padding:0 .06em .04em 0;
  background:var(--v-grad); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
}
.blog-lede{ max-width:58ch; margin:20px 0 0; font:400 clamp(17px,1.5vw,19.5px)/1.6 var(--font-body); color:var(--blog-ink); }
.blog-meta{ display:flex; flex-wrap:wrap; gap:4px 22px; margin:22px 0 0; font:500 14px/1.5 var(--font-body); color:var(--v-muted); }
.blog-meta a{ color:var(--v-ink); font-weight:600; text-decoration:underline; text-decoration-color:rgba(107,90,196,.4); text-underline-offset:3px; }
.blog-meta a:hover{ text-decoration-color:var(--v-accent); }
.blog-meta time{ color:var(--v-ink); font-weight:600; }

/* ---------- Törzsszöveg ---------- */
.blog-prose{ font:400 18px/1.72 var(--font-body); color:var(--blog-ink); min-width:0; }
.blog-prose p{ max-width:64ch; margin:18px 0 0; }
.blog-prose > :first-child{ margin-top:0; }
.blog-prose ul, .blog-prose ol{ max-width:66ch; margin:16px 0 0; padding-left:22px; list-style:disc; }
.blog-prose ol{ list-style:decimal; }
.blog-prose li{ margin-top:11px; }
.blog-prose li::marker{ color:var(--lavender-600); }
.blog-prose strong, .blog-prose b{ color:var(--v-ink); font-weight:700; }
/* kulcsmondat: halvány jelölő a sor alsó felén (a szöveg színe nem változik) */
.blog-prose mark{ padding:0 .12em; margin:0 -.12em; color:inherit; background:linear-gradient(transparent 58%, var(--blog-mark) 58%) no-repeat; background-size:100% 100%; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.blog-prose a{ color:var(--v-accent); text-decoration:underline; text-decoration-color:rgba(107,90,196,.35); text-underline-offset:3px; }
.blog-prose a:hover{ text-decoration-color:var(--v-accent); }
body .blog-prose h2{ margin:0 0 24px; font:600 clamp(26px,3vw,36px)/1.14 var(--font-display); letter-spacing:-.035em; color:var(--v-ink); text-wrap:balance; }

/* kiemelt megjegyzés: vonal, nem doboz */
.blog-prose .blog-note{ margin:28px 0 0; padding:2px 0 2px 22px; border-left:2px solid var(--v-accent); }
.blog-prose .blog-note p{ max-width:60ch; margin:0; font-size:17px; }

/* másolható prompt: halvány, egyszintes felület (nincs keret a keretben), a szöveg tördelve marad */
.blog-prose .blog-prompt{ margin:16px 0 0; padding:18px 22px; border-radius:20px; background:var(--lavender-050,#F4F1FA); }
.blog-prose .blog-prompt p{ max-width:none; margin:0; font:500 16px/1.7 var(--font-body); color:var(--v-ink); overflow-wrap:anywhere; }

/* táblázat: hajszálvonalak, telefonon egymás alatti sorok */
.blog-prose .blog-table{ display:table; width:100%; margin-top:24px; border-collapse:collapse; font:400 15.5px/1.6 var(--font-body); border-top:1px solid var(--v-line); }
.blog-prose .blog-table th{ padding:14px 20px 10px 0; border-bottom:1px solid var(--v-line); font:700 11.5px/1.3 var(--font-body); letter-spacing:.09em; text-transform:uppercase; color:var(--v-muted); text-align:left; }
.blog-prose .blog-table td{ min-width:0; padding:16px 20px 16px 0; border-bottom:1px solid var(--v-line); vertical-align:top; }
.blog-prose .blog-table td:first-child{ width:27%; font:600 15.5px/1.5 var(--font-display); color:var(--v-ink); font-variant-numeric:tabular-nums; white-space:nowrap; }
.blog-prose .blog-table td:last-child, .blog-prose .blog-table th:last-child{ padding-right:0; }

/* GYIK: kérdés = címsor, válasz = bekezdés, hajszálvonallal elválasztva */
.blog-faq h3{ margin:0; padding:0; font:600 20px/1.35 var(--font-display); letter-spacing:-.015em; color:var(--v-ink); }
.blog-faq h3 + p{ margin-top:8px; }
.blog-faq h3:not(:first-of-type){ margin-top:26px; padding-top:26px; border-top:1px solid var(--v-line); }

.blog-actions{ display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 0; }
.blog-prose .blog-actions a.btn{ text-decoration:none; }

/* ---------- Az idővonal-tengely ---------- */
.blog-article{ padding:clamp(24px,4vw,48px) 0 clamp(48px,6vw,80px); }
.blog-flow{ --pad:76px; --node:40px; counter-reset:blog-ch; position:relative; padding-left:var(--pad); }

/* minden szakasz a tengely egy szakaszát viseli, így a vonal folytonos (nincs magasság-mérés) */
.blog-sec{ position:relative; padding:0 0 clamp(52px,6vw,76px); counter-increment:blog-ch; }
.blog-sec::after{ content:""; position:absolute; z-index:0; left:calc(var(--node) / 2 - 1px - var(--pad)); top:0; bottom:0; width:2px; background:var(--v-line); }

/* csomópont: a fejezet száma körben, a tengelyen */
.blog-sec .blog-prose > h2{ position:relative; min-height:var(--node); padding-top:2px; }
.blog-sec .blog-prose > h2::before{
  content:counter(blog-ch, decimal-leading-zero); position:absolute; z-index:1; left:calc(var(--pad) * -1); top:-1px; box-sizing:border-box; width:var(--node); height:var(--node);
  display:grid; place-items:center; border-radius:50%; background:#fff; border:2px solid var(--v-line); font:600 14px/1 var(--font-display); color:var(--v-ink); font-variant-numeric:tabular-nums; letter-spacing:0;
}
.blog-faq-sec .blog-prose > h2::before{ content:"?"; font-size:17px; }

/* a Röviden a tengely kezdete: kitöltött, színátmenetes pont */
.blog-start{ counter-increment:none; }
.blog-start::after{ top:calc(var(--node) / 2); }
.blog-start::before{ content:""; position:absolute; z-index:1; left:calc(var(--pad) * -1); top:0; width:var(--node); height:var(--node); border-radius:50%; background:radial-gradient(circle at center, #fff 0 4px, transparent 5px), var(--v-grad-violet); }
.blog-kicker{ display:flex; align-items:center; min-height:var(--node); margin:0; padding-top:2px; font:700 12px/1.3 var(--font-body); letter-spacing:.09em; text-transform:uppercase; color:var(--v-accent); }
.blog-tldr{ margin-top:6px; font:500 clamp(19px,2vw,22px)/1.55 var(--font-body); color:var(--v-ink); }
.blog-tldr p{ max-width:none; margin:0; }
.blog-tldr strong{ font-weight:700; }

/* a lépések: kis pontok ugyanazon a tengelyen */
.blog-prose ol.blog-steps{ list-style:none; max-width:none; margin:24px 0 0; padding:0; border-bottom:1px solid var(--v-line); }
.blog-prose ol.blog-steps > li{ position:relative; margin:0; padding:20px 0; border-top:1px solid var(--v-line); }
.blog-prose ol.blog-steps > li::before{
  content:""; position:absolute; z-index:1; left:calc(var(--node) / 2 - var(--pad) - 5px); top:32px; box-sizing:border-box; width:10px; height:10px; border-radius:50%; background:#fff; border:2px solid var(--v-accent);
}
.blog-prose ol.blog-steps > li{ padding:24px 0; }
.blog-prose ol.blog-steps b{ display:block; font:600 20px/1.35 var(--font-display); letter-spacing:-.02em; color:var(--v-ink); }
/* az időigény külön jelzés a lépés címe mellett: egy pillantással átfutható */
.blog-dur{ display:inline-block; margin-left:10px; padding:3px 11px; border-radius:999px; background:var(--lavender-100); color:var(--lavender-700); font:600 12.5px/1.5 var(--font-display); letter-spacing:.01em; white-space:nowrap; vertical-align:3px; }
.blog-prose ol.blog-steps p{ margin-top:8px; max-width:62ch; }

/* a záró fejezet: gyűrű a tengely végén */
.blog-end{ padding-bottom:0; }
.blog-end::after{ bottom:auto; height:calc(var(--node) / 2); }
.blog-end .blog-prose > h2::before{ content:""; border:2px solid transparent; background:linear-gradient(#fff,#fff) padding-box, var(--v-grad-violet) border-box; }
body .blog-end h2{ max-width:22ch; }

/* kapcsolódó cikkek: a tengely után, hajszálvonalas lista */
.blog-related{ margin:clamp(40px,5vw,64px) 0 0; }
body .blog-related h2{ margin:0 0 6px; font:600 21px/1.3 var(--font-display); letter-spacing:-.02em; color:var(--v-ink); }
.blog-related ul{ list-style:none; margin:12px 0 0; padding:0; border-bottom:1px solid var(--v-line); }
.blog-related li{ margin:0; padding:18px 0; border-top:1px solid var(--v-line); }
.blog-related li a{ display:block; font:600 18px/1.35 var(--font-display); letter-spacing:-.015em; color:var(--v-ink); text-decoration:none; }
.blog-related li a:hover{ color:var(--v-accent); }
.blog-related li span{ display:block; margin-top:6px; max-width:64ch; font:400 15.5px/1.6 var(--font-body); color:var(--v-muted); }

/* ---------- Kis animációk ----------
   Csak CSS, csak levél-elemeken (hero-szövegek, a tengely csomópontjai és pontjai, a kiemelő jelölő); a szöveg sosem rejtett, a szerkezet nem mozog.
   Csökkentett mozgásnál semmi sem fut. A görgetésvezérelt rész (view()) csak ott van, ahol a böngésző ismeri; máshol a statikus kép marad. */
@keyframes blog-rise{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
@keyframes blog-pulse{ 0%{ box-shadow:0 0 0 0 rgba(124,92,255,.38); } 100%{ box-shadow:0 0 0 16px rgba(124,92,255,0); } }
@keyframes blog-node-lit{
  from{ border-color:var(--v-line); color:var(--v-muted); box-shadow:0 0 0 0 rgba(107,90,196,0); }
  to{ border-color:var(--v-accent); color:var(--v-ink); box-shadow:0 0 0 6px rgba(107,90,196,.12); }
}
@keyframes blog-dot-lit{
  from{ background-color:#fff; box-shadow:0 0 0 0 rgba(107,90,196,0); }
  to{ background-color:var(--v-accent); box-shadow:0 0 0 4px rgba(107,90,196,.14); }
}
@keyframes blog-mark-paint{ from{ background-size:0% 100%; } to{ background-size:100% 100%; } }

@media (prefers-reduced-motion:no-preference){
  .blog-hero .blog-crumbs, .blog-hero .blog-chip, .blog-hero .blog-h1, .blog-hero .blog-lede, .blog-hero .blog-meta{ animation:blog-rise .7s cubic-bezier(.22,1,.36,1) both; }
  .blog-hero .blog-chip{ animation-delay:.06s; }
  .blog-hero .blog-h1{ animation-delay:.12s; }
  .blog-hero .blog-lede{ animation-delay:.2s; }
  .blog-hero .blog-meta{ animation-delay:.28s; }
  .blog-start::before{ animation:blog-pulse 1.8s ease-out .9s 2; }
  .blog-art-chip{ animation:blog-rise .8s cubic-bezier(.22,1,.36,1) both; }
  .blog-art-chip:nth-child(1){ animation-delay:.35s; }
  .blog-art-chip:nth-child(2){ animation-delay:.5s; }
  .blog-art-chip:nth-child(3){ animation-delay:.65s; }
}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion:no-preference){
    /* a csomópontok és a lépéspontok "felgyulladnak", ahogy a nézet közepén áthaladnak; visszagörgetve visszaállnak */
    .blog-sec:not(.blog-end) .blog-prose > h2::before{ animation:blog-node-lit linear both; animation-timeline:view(); animation-range:cover 42% cover 54%; }
    .blog-prose ol.blog-steps > li::before{ animation:blog-dot-lit linear both; animation-timeline:view(); animation-range:cover 42% cover 54%; }
    /* a kulcsmondat jelölője "rajzolódik", amikor a szöveg a nézet közepére ér */
    .blog-prose mark{ background-size:0% 100%; animation:blog-mark-paint linear both; animation-timeline:view(); animation-range:cover 46% cover 60%; }
  }
}

/* ---------- Lista (/blog): hero két oszlopban, ugyanaz a tengely, kártyák tipográfiai borítóval, záró panel ---------- */
.blog-wrap-wide{ max-width:1120px; }

/* hero: bal oldalt a szöveg, jobb oldalt egy kis napirend-részlet üveg-csempékkel (díszítés, a cikk példanapját idézi) */
.blog-hero-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px); column-gap:clamp(32px,5vw,72px); align-items:center; }
.blog-hero-grid .blog-lede{ max-width:52ch; }
.blog-art{ position:relative; height:268px; }
.blog-art-chip{
  position:absolute; display:flex; align-items:center; gap:16px; width:min(320px,100%); box-sizing:border-box; padding:15px 20px; border-radius:22px;
  background:rgba(255,255,255,.74); border:1px solid var(--v-glass-line); box-shadow:var(--v-sh);
}
.blog-art-chip:nth-child(1){ top:0; left:0; }
.blog-art-chip:nth-child(2){ top:92px; left:64px; }
.blog-art-chip:nth-child(3){ top:184px; left:24px; border-color:rgba(134,217,198,.8); }
.blog-art-chip time{ flex:none; min-width:46px; font:600 14px/1 var(--font-display); color:var(--v-accent); font-variant-numeric:tabular-nums; }
.blog-art-chip:nth-child(3) time{ color:#1F8A72; }
.blog-art-chip b{ display:block; font:600 15.5px/1.3 var(--font-display); letter-spacing:-.01em; color:var(--v-ink); }
.blog-art-chip small{ display:block; margin-top:3px; font:400 13px/1.4 var(--font-body); color:var(--v-muted); }

.blog-list{ padding:clamp(32px,4vw,56px) 0 clamp(56px,7vw,96px); }
.blog-empty{ font:400 17px/1.6 var(--font-body); color:var(--v-text); }

/* záró panel: a főoldal éjszakai szakaszának nyelve */
.blog-index-cta{
  position:relative; overflow:hidden; margin-top:clamp(8px,2vw,24px); padding:clamp(36px,5vw,60px); border-radius:var(--v-r-lg); color:#fff;
  background:radial-gradient(60% 50% at 50% 0%, rgba(124,92,255,.32), transparent 70%), radial-gradient(40% 40% at 100% 100%, rgba(240,98,142,.16), transparent 70%), var(--v-night);
}
body .blog-index-cta h2{ margin:0; max-width:22ch; font:600 clamp(26px,3.2vw,38px)/1.1 var(--font-display); letter-spacing:-.035em; color:#fff; }
.blog-index-cta h2 .accent{ font-family:var(--v-serif); font-style:italic; font-weight:400; font-size:1.1em; line-height:.9; letter-spacing:-.01em; padding:0 .06em .04em 0; background:var(--v-grad-night); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.blog-index-cta p{ max-width:56ch; margin:16px 0 0; font:400 17px/1.65 var(--font-body); color:rgba(233,229,250,.8); }
.blog-index-cta .blog-actions{ margin-top:26px; }
.blog-index-cta a:focus-visible{ outline-color:#fff; }

a:focus-visible{ outline:2px solid var(--v-accent); outline-offset:3px; }

/* ---------- Telefon és keskeny képernyő ---------- */
@media (max-width:900px){
  .blog-hero-grid{ display:block; }
  .blog-art{ display:none; }
}
@media (max-width:640px){
  .blog-wrap{ padding:0 20px; }
  .blog-prose{ font-size:17px; }
  .blog-sec .blog-prose > h2{ padding-top:0; }
  .blog-sec .blog-prose > h2::before{ font-size:12px; }
  .blog-faq-sec .blog-prose > h2::before{ font-size:15px; }
  .blog-kicker{ padding-top:0; }
  .blog-prose ol.blog-steps > li{ padding:20px 0; }
  .blog-prose ol.blog-steps > li::before{ top:28px; }
  .blog-prose ol.blog-steps b{ font-size:18px; }
  .blog-dur{ margin-left:8px; font-size:12px; }
  .blog-end .blog-actions .btn, .blog-index-cta .blog-actions .btn{ flex:1 1 100%; justify-content:center; min-height:44px; }
  .blog-index-cta{ padding:32px 22px 34px; border-radius:28px; }
  .blog-prose .blog-table, .blog-prose .blog-table tbody, .blog-prose .blog-table tr, .blog-prose .blog-table td{ display:block; width:auto; }
  .blog-prose .blog-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .blog-prose .blog-table{ border-top:0; }
  .blog-prose .blog-table tr{ padding:16px 0; border-bottom:1px solid var(--v-line); }
  .blog-prose .blog-table tr:first-child{ border-top:1px solid var(--v-line); }
  .blog-prose .blog-table td{ padding:2px 0; border:0; white-space:normal; }
  .blog-prose .blog-table td:first-child{ width:auto; padding-bottom:2px; font-size:16.5px; white-space:normal; }
  .blog-prose .blog-table td[data-label]::before{ content:attr(data-label); display:block; margin-top:8px; font:700 11px/1.4 var(--font-body); letter-spacing:.09em; text-transform:uppercase; color:var(--v-muted); }
  /* a "Mi" címke felesleges (idő, tevékenység, megjegyzés sorrendje magától értetődik): rövidebb a telefonos lista; a generikus címke-szabály UTÁN kell állnia */
  .blog-prose .blog-table td[data-label="Mi"]{ font-weight:600; color:var(--v-ink); }
  .blog-prose .blog-table td[data-label="Mi"]::before{ display:none; }
}

/* ---------- Nyomtatás: csak a cikk ---------- */
@media print{
  .site-header, .app-dock, .site-footer, #vcc, .vcc, .blog-crumbs, .blog-end .blog-actions, .blog-related{ display:none !important; }
  body .blog-hero{ margin:0 !important; padding:0 0 12px !important; background:none !important; border-radius:0 !important; }
  .blog-prose, .blog-tldr{ color:#000; }
  .blog-sec{ break-inside:avoid-page; }
  .blog-hero *, .blog-sec *{ animation:none !important; }
  .blog-prose mark{ background-size:100% 100% !important; }
}

/* ---------- /blog lista: kiemelt cikk, kategória-csempék, kategória-szakaszok ---------- */
.blog-list .blog-wrap-wide{ max-width:1240px; }
.blog-list img{ display:block; width:100%; height:100%; object-fit:cover; }
.blog-list a{ color:inherit; text-decoration:none; }
.blog-list :focus-visible{ outline:2px solid var(--v-accent); outline-offset:3px; }
.bl-kicker{ margin:0; font:700 12px/1.3 var(--font-body); letter-spacing:.1em; text-transform:uppercase; color:var(--v-accent); }
.bl-meta{ display:flex; flex-wrap:wrap; gap:2px 12px; margin:0; font:500 13px/1.5 var(--font-body); color:var(--v-muted); }
.bl-meta time{ color:var(--v-ink); font-weight:600; }

.bl-feature{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(24px,4vw,56px); align-items:center; }
.bl-feature-img{ display:block; aspect-ratio:1200 / 630; border-radius:28px; overflow:hidden; background:#F3EEFF; }
.bl-feature-body h2{ margin:12px 0 0; font:600 clamp(26px,3vw,38px)/1.12 var(--font-display); letter-spacing:-.035em; color:var(--v-ink); text-wrap:balance; }
.bl-feature-body h2 a:hover{ color:var(--v-accent); }
.bl-feature-body > p:not(.bl-kicker):not(.bl-meta){ max-width:52ch; margin:14px 0 0; font:400 17px/1.65 var(--font-body); color:var(--blog-ink); }
.bl-feature-body .bl-meta{ margin:16px 0 22px; }

.bl-tiles{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; margin:clamp(40px,5vw,72px) 0 clamp(48px,6vw,88px); }
.bl-tile{ position:relative; display:flex; flex-direction:column; gap:6px; min-height:168px; padding:22px 24px 20px; border-radius:24px; background:#F6F2FF; transition:transform .25s cubic-bezier(.22,1,.36,1); }
.bl-t2{ background:#F1F8F6; } .bl-t3{ background:#FFF4F6; } .bl-t4{ background:#F3F7FF; } .bl-t5{ background:#FFF7EE; } .bl-t6{ background:#F4F1FF; }
.bl-tile-n{ font:700 12px/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--v-accent); }
.bl-tile b{ margin-top:auto; font:600 22px/1.15 var(--font-display); letter-spacing:-.025em; color:var(--v-ink); }
.bl-tile small{ max-width:34ch; font:400 14.5px/1.5 var(--font-body); color:var(--v-muted); }
.bl-tile-go{ position:absolute; top:18px; right:22px; font:600 20px/1 var(--font-display); color:var(--v-accent); transition:transform .25s cubic-bezier(.22,1,.36,1); }
.bl-tile:hover{ transform:translateY(-3px); }
.bl-tile:hover .bl-tile-go{ transform:translateX(4px); }

.bl-group{ scroll-margin-top:96px; }
.bl-group + .bl-group{ margin-top:clamp(48px,6vw,88px); }
.bl-group-head{ display:flex; flex-direction:column; gap:8px; margin:0 0 clamp(20px,2.6vw,30px); padding-bottom:clamp(14px,1.8vw,20px); border-bottom:1px solid var(--v-line); }
.bl-group-head h2{ margin:0; font:600 clamp(28px,3.4vw,42px)/1.08 var(--font-display); letter-spacing:-.04em; color:var(--v-ink); }
.bl-group-head p{ margin:0; max-width:60ch; font:400 16px/1.55 var(--font-body); color:var(--v-muted); }
.bl-grid{ list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:clamp(28px,3vw,40px) clamp(18px,2vw,28px); margin:0; padding:0; }
.bl-card{ display:flex; flex-direction:column; gap:12px; height:100%; }
.bl-card-img{ display:block; aspect-ratio:1200 / 630; border-radius:20px; overflow:hidden; background:#F3EEFF; transition:transform .35s cubic-bezier(.22,1,.36,1); }
.bl-card:hover .bl-card-img{ transform:translateY(-3px); }
.bl-card h3{ margin:0; font:600 clamp(18px,1.6vw,21px)/1.28 var(--font-display); letter-spacing:-.02em; color:var(--v-ink); text-wrap:balance; }
.bl-card:hover h3{ color:var(--v-accent); }
.blog-chip a{ color:inherit; text-decoration:none; }
.blog-chip a:hover{ text-decoration:underline; text-underline-offset:3px; }
@media (prefers-reduced-motion:reduce){ .bl-tile, .bl-tile-go, .bl-card-img{ transition:none; } }
@media (max-width:1100px){
  .bl-grid, .bl-tiles{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:760px){
  .bl-feature{ grid-template-columns:minmax(0, 1fr); }
}
@media (max-width:600px){
  .bl-grid, .bl-tiles{ grid-template-columns:minmax(0, 1fr); }
  .bl-tile{ min-height:0; }
  .bl-feature-body .btn{ width:100%; justify-content:center; min-height:44px; }
}

/* vissza a lap tetejére: lebegő nyíl a /blog listán (gépen és telefonon; telefonon az alsó dokk fölött). Görgetés nélkül rejtett (CSS, JS nélkül), a nem támogató böngészőben mindig látszik */
.bl-top{ position:fixed; right:clamp(16px,2.4vw,32px); bottom:clamp(20px,2.4vw,32px); z-index:40; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; color:#fff; background:var(--v-grad-violet); box-shadow:0 10px 26px rgba(107,79,224,.42), inset 0 1px 0 rgba(255,255,255,.35); transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s; }
.blog-list .bl-top{ color:#fff; }
.bl-top svg{ width:22px; height:22px; stroke:#fff; transition:transform .25s cubic-bezier(.22,1,.36,1); }
.bl-top:hover{ transform:translateY(-3px); box-shadow:0 14px 32px rgba(107,79,224,.5), inset 0 1px 0 rgba(255,255,255,.35); }
.bl-top:hover svg{ transform:translateY(-2px); }
.bl-top:focus-visible{ outline:2px solid var(--v-accent); outline-offset:3px; }
@media (max-width:1020px){ .bl-top{ bottom:calc(92px + env(safe-area-inset-bottom)); width:48px; height:48px; } }
@supports (animation-timeline: scroll()){
  .bl-top{ animation:bl-top-in linear both; animation-timeline:scroll(root); animation-range:360px 520px; }
  @keyframes bl-top-in{ from{ opacity:0; visibility:hidden; } to{ opacity:1; visibility:visible; } }
}
@media (prefers-reduced-motion:no-preference){ html:has(.bl-top){ scroll-behavior:smooth; } }
@media (prefers-reduced-motion:reduce){ .bl-top, .bl-top svg{ transition:none; } }