/* ===========================================================
   A sections.css SZETBONTASABOL szarmazo darab: blog
   2026-09-09, Optimus. Ok: a fooldal a 209 KB-os egyesitett fajlnak
   MERVE 11%-at hasznalta, es az elso festes arra a fajlra vart.
   A darabok oldaltipus szerint toltodnek (lasd functions.php).
   Uj szekcio: a nevterenek megfelelo darabba, ha nincs ilyen, a core-ba.
   =========================================================== */

/* =========================================================================
   BLOG — single-post dizájn (.wr-blog-*) — 2026-09-04
   Lovable: webraketa2.lovable.app/blog/<slug> port. A cikk /blog/<slug>/ child-
   Page-ként jön létre (post_parent=Blog id 15). Teljes dizájn a post_content-ben.
   Újrahasznál: .eyebrow token-rendszer. Az űrlapok INERTek.
   ========================================================================= */
.wr-blog { --wr-blog-measure: 44rem; }
.wr-blog-wrap { max-width: 52rem; margin-inline:auto; padding-inline: var(--container-pad-mobile); }
@media (min-width:1024px){ .wr-blog-wrap { padding-inline: var(--container-pad-desktop); } }

/* HERO */
.wr-blog-hero { padding-top:2.5rem; }
@media (min-width:1024px){ .wr-blog-hero { padding-top:3.5rem; } }
.wr-blog-crumb { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; font-family: var(--wr-font-mono); font-size: var(--wr-font-label); text-transform:uppercase; letter-spacing: var(--wr-ls-label); color: var(--muted-foreground); }
.wr-blog-crumb a { color:inherit; text-decoration:none; }
.wr-blog-crumb a:hover { color: var(--coral); }
.wr-blog-crumb .sep { opacity:.5; }
.wr-blog-metaline { margin-top:1.5rem; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem; }
.wr-blog-cat { display:inline-flex; align-items:center; justify-content:center; text-align:center; border-radius:999px; background: var(--coral); color:#fff; padding:.3rem .8rem; font-family: var(--wr-font-mono); font-size: var(--wr-font-label); text-transform:uppercase; letter-spacing: var(--wr-ls-label); } /* Wrike #21: feher betu (a lenti :not() vedi a muted-felulirastol) + fuggoleges/vizszintes kozepre */
.wr-blog-metaline .dot { width:.3rem; height:.3rem; border-radius:999px; background: var(--muted-foreground); opacity:.5; }
.wr-blog-metaline span:not(.wr-blog-cat) { font-family: var(--wr-font-mono); font-size: var(--wr-font-label); text-transform:uppercase; letter-spacing: var(--wr-ls-label); color: var(--muted-foreground); } /* Wrike #21: a piros kategoria-pill (.wr-blog-cat) kimarad, hogy a sajat feher szine ervenyesuljon */
.wr-blog-title { margin:1.25rem 0 0; font-family: var(--wr-font-display); font-weight:600; font-size: var(--wr-font-hero-service); line-height:1.08; letter-spacing: var(--wr-ls-hero); color: var(--ink); }
@media (max-width:640px){ .wr-blog-title { font-size: clamp(2rem, 8vw, 2.75rem); } }
.wr-blog-lead { margin:1.25rem 0 0; font-family: var(--font-sans); font-size: var(--wr-font-lead); line-height: var(--wr-lh-lead); color: var(--muted-foreground); }
.wr-blog-author { margin-top:1.5rem; display:flex; align-items:center; gap:.75rem; }
.wr-blog-author__av { display:grid; place-items:center; width:2.75rem; height:2.75rem; border-radius:999px; background: var(--ink); color: var(--paper); font-family: var(--wr-font-display); font-weight:600; }
.wr-blog-author__n { margin:0; font-family: var(--font-sans); font-weight:600; color: var(--ink); }
.wr-blog-author__r { margin:.1rem 0 0; font-family: var(--wr-font-mono); font-size: var(--wr-font-xs); text-transform:uppercase; letter-spacing: var(--wr-ls-label); color: var(--muted-foreground); }

/* FEATURED */
.wr-blog-featured { margin:2rem 0 0; overflow:hidden; border-radius: var(--radius-3xl); border:1px solid var(--line); }
.wr-blog-featured img { display:block; width:100%; height:auto; }

/* KEY FACTS */
.wr-blog-facts { margin:2rem 0 0; display:grid; gap:1px; overflow:hidden; border-radius: var(--radius-2xl); border:1px solid var(--line); background: var(--line); }
@media (min-width:640px){ .wr-blog-facts { grid-template-columns: repeat(2,1fr); } }
@media (min-width:1024px){ .wr-blog-facts { grid-template-columns: repeat(4,1fr); } }
.wr-blog-facts__c { background: var(--paper); padding:1.25rem; }
.wr-blog-facts__v { margin:0; font-family: var(--wr-font-display); font-weight:600; font-size:1.25rem; color: var(--ink); }
.wr-blog-facts__l { margin:.25rem 0 0; font-family: var(--wr-font-mono); font-size:10px; text-transform:uppercase; letter-spacing: var(--wr-ls-label); color: var(--muted-foreground); }

/* BODY / PROSE */
.wr-blog-body { margin:2.5rem 0 0; font-family: var(--font-sans); font-size:1.0625rem; line-height:1.75; color: color-mix(in oklab, var(--ink) 88%, transparent); }
.wr-blog-body > * { max-width: var(--wr-blog-measure); }
.wr-blog-body p { margin:1.25rem 0 0; }
.wr-blog-body strong { color: var(--ink); font-weight:600; }
.wr-blog-body mark { background: color-mix(in oklab, var(--coral) 20%, transparent); color: var(--ink); padding:0 .25rem; font-weight:500; border-radius:3px; }
.wr-blog-a { color: var(--coral); font-weight:500; text-decoration:underline; text-decoration-color: color-mix(in oklab, var(--coral) 40%, transparent); text-decoration-thickness:2px; text-underline-offset:4px; transition:text-decoration-color .2s ease; }
.wr-blog-a:hover { text-decoration-color: var(--coral); }
.wr-blog-body h2 { max-width: var(--wr-blog-measure); margin:2.75rem 0 0; padding-left:1rem; border-left:4px solid var(--coral); font-family: var(--wr-font-display); font-weight:600; font-size:1.75rem; line-height:1.2; letter-spacing: var(--wr-ls-card); color: var(--ink); }
.wr-blog-body h3 { max-width: var(--wr-blog-measure); margin:2rem 0 0; font-family: var(--wr-font-display); font-weight:600; font-size:1.3rem; line-height:1.3; color: var(--ink); }
.wr-blog-h4 { max-width: var(--wr-blog-measure); margin:1.75rem 0 .5rem; font-family: var(--wr-font-mono); font-size: var(--wr-font-label); text-transform:uppercase; letter-spacing: var(--wr-ls-label); color: var(--coral); }
.wr-blog-ul { max-width: var(--wr-blog-measure); list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.65rem; }
.wr-blog-ul > li { display:flex; gap:.65rem; }
.wr-blog-ul > li::before { content:""; flex:0 0 auto; margin-top:.65rem; width:.375rem; height:.375rem; border-radius:999px; background: var(--coral); }
.wr-blog-ul--check > li::before { display:none; }
.wr-blog-ul--check > li > svg { width:1rem; height:1rem; flex:0 0 auto; margin-top:.3rem; color: var(--coral); }

/* PRICE CARDS */
.wr-blog-price { max-width: var(--wr-blog-measure); position:relative; margin:1.5rem 0 0; border:1px solid var(--line); border-radius: var(--radius-2xl); background: var(--paper); padding:1.75rem; }
.wr-blog-price--pop { border:2px solid var(--coral); background: color-mix(in oklab, var(--coral) 4%, transparent); }
.wr-blog-price__pop { position:absolute; top:-.75rem; left:1.75rem; border-radius:999px; background: var(--coral); color:#fff; padding:.25rem .75rem; font-family: var(--wr-font-mono); font-size:10px; text-transform:uppercase; letter-spacing: var(--wr-ls-label); }
.wr-blog-price__name { margin:0; font-family: var(--wr-font-display); font-weight:600; font-size:1.25rem; color: var(--ink); }
.wr-blog-price__amt { margin:.25rem 0 0; font-family: var(--wr-font-display); font-weight:600; font-size:1.5rem; color: var(--coral); }
.wr-blog-price__for { margin:.75rem 0 0; font-family: var(--font-sans); font-size: var(--wr-font-sm); color: var(--muted-foreground); }
.wr-blog-price__for strong { color: var(--ink); font-weight:600; }
.wr-blog-price .wr-blog-ul { margin-top:1rem; }
.wr-blog-price__note { margin:1rem 0 0; font-family: var(--font-sans); font-size: var(--wr-font-sm); color: var(--muted-foreground); }

/* CALLOUTS */
.wr-blog-callout { max-width: var(--wr-blog-measure); display:flex; align-items:flex-start; gap:1rem; margin:2rem 0 0; border-radius: var(--radius-2xl); padding:1.5rem; }
.wr-blog-callout__b { flex:0 0 auto; display:grid; place-items:center; width:2rem; height:2rem; border-radius:999px; background: var(--coral); color: var(--paper); font-family: var(--wr-font-display); font-weight:700; font-size:.9rem; }
.wr-blog-callout__t { margin:0; font-family: var(--wr-font-display); font-weight:600; font-size:1.1rem; color: var(--ink); }
.wr-blog-callout__d { margin:.5rem 0 0; font-family: var(--font-sans); line-height:1.7; color: color-mix(in oklab, var(--ink) 80%, transparent); }
.wr-blog-callout--note { border:2px solid var(--line); background: var(--paper); }
.wr-blog-callout--warn { border:2px solid var(--coral); background: color-mix(in oklab, var(--coral) 7%, transparent); }
.wr-blog-callout--tip { border:2px solid color-mix(in oklab, var(--ink) 25%, transparent); background: color-mix(in oklab, var(--secondary) 50%, transparent); }
.wr-blog-quote { max-width: var(--wr-blog-measure); margin:2rem 0 0; border-left:4px solid var(--coral); background: color-mix(in oklab, var(--coral) 5%, transparent); padding:1.5rem; font-family: var(--wr-font-display); font-size:1.25rem; font-style:italic; color: var(--ink); }
.wr-blog-quote footer { margin-top:.75rem; font-family: var(--font-sans); font-size: var(--wr-font-sm); font-style:normal; color: var(--muted-foreground); }

/* SUMMARY (dark) */
.wr-blog-summary { max-width: var(--wr-blog-measure); margin:2.5rem 0 0; border-radius: var(--radius-3xl); background: var(--ink); color: var(--paper); padding:1.75rem; }
@media (min-width:1024px){ .wr-blog-summary { padding:2rem; } }
.wr-blog-summary .eyebrow { color: var(--coral); }
.wr-blog-summary__t { margin:.75rem 0 0; font-family: var(--wr-font-display); font-weight:600; font-size:1.5rem; }
.wr-blog-summary__list { margin:1.25rem 0 0; list-style:none; padding:0; display:grid; gap:.75rem; }
.wr-blog-summary__list li { display:flex; gap:.75rem; color: color-mix(in oklab, var(--paper) 85%, transparent); }
.wr-blog-summary__list .n { font-family: var(--wr-font-mono); font-size: var(--wr-font-xs); color: var(--coral); flex:0 0 auto; }
.wr-blog-summary__list strong { color: var(--paper); font-weight:600; }

/* SHARE */
.wr-blog-share { max-width: var(--wr-blog-measure); margin:2.5rem 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:1rem; border:1px solid var(--line); border-radius: var(--radius-2xl); background: var(--paper); padding:1.25rem 1.5rem; }
.wr-blog-share__l { display:flex; align-items:center; gap:.5rem; font-family: var(--font-sans); font-size: var(--wr-font-sm); font-weight:600; color: var(--ink); }
.wr-blog-share__l svg { width:1rem; height:1rem; color: var(--coral); }
.wr-blog-share__links { display:flex; gap:.5rem; }
/* A "Link masolasa" vezerlo VALODI <button>: nem navigal sehova, tehat nem
   link. Ugyanezt a kor-stilust kapja, hogy a szemantikat ne kelljen a
   megjelenesert felaldozni. Erno 2026-09-09-i megosztas-sav kerese. */
.wr-blog-share__links a,
.wr-blog-share__links button { font: inherit; background: none; display:grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:999px; border:1px solid var(--line); color: var(--muted-foreground); transition: border-color .2s, color .2s; }
.wr-blog-share__links a:hover,
.wr-blog-share__links button:hover { border-color: var(--coral); color: var(--coral); }
.wr-blog-share__links svg { width:1rem; height:1rem; }

/* FAQ */
.wr-blog-faq { max-width: var(--wr-blog-measure); margin:3rem 0 0; }
.wr-blog-faq__h { font-family: var(--wr-font-display); font-weight:600; font-size:1.5rem; color: var(--ink); }
.wr-blog-faq__list { margin:1.25rem 0 0; }
.wr-blog-faq__item { border-bottom:1px solid var(--line); }
.wr-blog-faq__q { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.1rem 0; font-family: var(--wr-font-display); font-weight:600; font-size:1.05rem; color: var(--ink); }
.wr-blog-faq__q::-webkit-details-marker { display:none; }
.wr-blog-faq__q::after { content:""; flex:0 0 auto; width:.55rem; height:.55rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .25s; }
.wr-blog-faq__item[open] .wr-blog-faq__q::after { transform:rotate(-135deg); }
.wr-blog-faq__q:hover { color: var(--coral); }
.wr-blog-faq__a { padding:0 0 1.1rem; font-family: var(--font-sans); line-height:1.7; color: var(--muted-foreground); }

/* CTA (gradient) */
/* A --wr-blog-measure csak a .wr-blog konteneren belul letezik. Amikor a
   blokk azon KIVUL all (2026-09-09 ota a /sikeres-feliratkozas/ oldalon is),
   a max-width feloldatlan marad, es a blokk a teljes 1280px-et kitolti,
   balra tapadva. MERVE. Ezert kap tartalek-erteket es kozepre igazitast:
   a .wr-blog konteneren belul ez semmit nem valtoztat. */
.wr-blog-cta { max-width: var(--wr-blog-measure, 48rem); margin:3rem auto 0; overflow:hidden; border-radius: var(--radius-3xl); background: linear-gradient(135deg, var(--ink) 0%, var(--ink) 55%, var(--coral) 100%); color: var(--paper); padding:2.25rem; }
@media (min-width:1024px){ .wr-blog-cta { padding:3rem; } }
.wr-blog-cta .eyebrow { color: color-mix(in oklab, var(--paper) 90%, transparent); }
.wr-blog-cta__t { margin:.75rem 0 0; font-family: var(--wr-font-display); font-weight:600; font-size:2rem; }
.wr-blog-cta__d { margin:1rem 0 0; max-width:34rem; font-family: var(--font-sans); color: color-mix(in oklab, var(--paper) 80%, transparent); }
.wr-blog-cta__btns { margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.75rem; }

/* NEWSLETTER (inert) */
.wr-blog-news { max-width: var(--wr-blog-measure); margin:2.5rem 0 0; border:1px solid var(--line); border-radius: var(--radius-3xl); background: var(--paper); padding:2rem; }
@media (min-width:1024px){ .wr-blog-news { padding:2.5rem; } }
.wr-blog-news__t { margin:.75rem 0 0; font-family: var(--wr-font-display); font-weight:600; font-size:1.5rem; color: var(--ink); }
.wr-blog-news__d { margin:.75rem 0 0; max-width:28rem; font-family: var(--font-sans); color: var(--muted-foreground); }
.wr-blog-news__form { margin-top:1.5rem; display:flex; flex-wrap:wrap; gap:.75rem; }
.wr-blog-news__form input { flex:1 1 16rem; border:1px solid var(--line); border-radius:999px; background: var(--paper); padding:.85rem 1.25rem; font-family: var(--font-sans); font-size: var(--wr-font-sm); color: var(--ink); outline:none; }
.wr-blog-news__form input:focus { border-color: var(--coral); }

/* RELATED */
.wr-blog-related { margin:3.5rem 0 0; }
.wr-blog-related__h { font-family: var(--wr-font-display); font-weight:600; font-size:1.75rem; color: var(--ink); }
.wr-blog-related__grid { margin-top:1.5rem; display:grid; gap:1.5rem; }
@media (min-width:768px){ .wr-blog-related__grid { grid-template-columns: repeat(2,1fr); } }
.wr-blog-relcard { display:block; border:1px solid var(--line); border-radius: var(--radius-2xl); background: var(--paper); padding:1.5rem; text-decoration:none; transition: border-color .2s, transform .2s; }
.wr-blog-relcard:hover { border-color: color-mix(in oklab, var(--coral) 55%, transparent); transform: translateY(-2px); }
.wr-blog-relcard__cat { font-family: var(--wr-font-mono); font-size: var(--wr-font-label); text-transform:uppercase; letter-spacing: var(--wr-ls-label); color: var(--coral); }
.wr-blog-relcard__t { margin:.6rem 0 0; font-family: var(--wr-font-display); font-weight:600; font-size:1.15rem; line-height:1.35; color: var(--ink); }
.wr-blog-bottompad { padding-bottom:5rem; }

/* =========================================================================
   BLOG LISTA (/blog/, Page 15) — [wr_blog_list] shortcode dizájnja — 2026-09-04
   Lovable: webraketa2.lovable.app/blog. Kiemelt kártya + rács. .wr-bloglist-*
   ========================================================================= */
.wr-bloglist { max-width: var(--container-max); margin-inline:auto; padding-inline: var(--container-pad-mobile); }
@media (min-width:1024px){ .wr-bloglist { padding-inline: var(--container-pad-desktop); } }
.wr-bloglist-empty { text-align:center; color: var(--muted-foreground); padding-block:3rem; }
.wr-bloglist-badge { display:inline-flex; align-items:center; border-radius:999px; border:1px solid color-mix(in oklab, var(--coral) 45%, transparent); color: var(--coral); padding:.2rem .65rem; font-family: var(--wr-font-mono); font-size:10px; text-transform:uppercase; letter-spacing: var(--wr-ls-label); }
.wr-bloglist-cat, .wr-bloglist-rt, .wr-bloglist-idx { font-family: var(--wr-font-mono); font-size: var(--wr-font-label); text-transform:uppercase; letter-spacing: var(--wr-ls-label); color: var(--muted-foreground); }
.wr-bloglist-idx { color: var(--coral); }
.wr-bloglist-dot { width:.25rem; height:.25rem; border-radius:999px; background: var(--muted-foreground); opacity:.5; }

/* FEATURED */
.wr-bloglist-feat { display:grid; gap:0; overflow:hidden; border:1px solid var(--line); border-radius: var(--radius-3xl); background: var(--paper); text-decoration:none; transition: border-color .2s, box-shadow .2s; }
@media (min-width:900px){ .wr-bloglist-feat { grid-template-columns: 1.05fr 1fr; } }
.wr-bloglist-feat:hover { border-color: color-mix(in oklab, var(--coral) 45%, transparent); box-shadow: 0 24px 60px -40px rgba(15,23,42,.4); }
.wr-bloglist-feat__body { padding:2rem; display:flex; flex-direction:column; }
@media (min-width:1024px){ .wr-bloglist-feat__body { padding:2.5rem; } }
.wr-bloglist-feat__meta, .wr-bloglist-card__meta { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; }
.wr-bloglist-feat__t { margin:1.1rem 0 0; font-family: var(--wr-font-display); font-weight:600; font-size:1.75rem; line-height:1.15; color: var(--ink); }
.wr-bloglist-feat__ex { margin:1rem 0 0; font-family: var(--font-sans); font-size: var(--wr-font-body); line-height:1.6; color: var(--muted-foreground); }
.wr-bloglist-feat__more { margin-top:1.5rem; display:inline-flex; align-items:center; gap:.5rem; font-family: var(--font-sans); font-weight:600; color: var(--coral); }
.wr-bloglist-feat__more svg { width:1.1rem; height:1.1rem; transition: transform .2s; }
.wr-bloglist-feat:hover .wr-bloglist-feat__more svg { transform: translateX(3px); }
.wr-bloglist-feat__media { min-height:16rem; background: linear-gradient(135deg, color-mix(in oklab, var(--coral) 55%, #fff) 0%, var(--coral) 50%, var(--ink) 100%); background-size:cover; background-position:center; }

/* GRID */
.wr-bloglist-grid { margin-top:1.5rem; display:grid; gap:1px; overflow:hidden; border:1px solid var(--line); border-radius: var(--radius-3xl); background: var(--line); }
@media (min-width:768px){ .wr-bloglist-grid { grid-template-columns: repeat(2,1fr); } }
.wr-bloglist-card { display:flex; flex-direction:column; background: var(--paper); padding:1.75rem; text-decoration:none; transition: background .2s; }
.wr-bloglist-card:hover { background:#fff; }
.wr-bloglist-card__t { margin:1rem 0 0; font-family: var(--wr-font-display); font-weight:600; font-size:1.25rem; line-height:1.25; color: var(--ink); }
.wr-bloglist-card__ex { margin:.75rem 0 0; font-family: var(--font-sans); font-size: var(--wr-font-sm); line-height:1.6; color: var(--muted-foreground); }
.wr-bloglist-card__foot { margin-top:auto; padding-top:1.5rem; display:flex; align-items:center; justify-content:space-between; font-family: var(--wr-font-mono); font-size: var(--wr-font-label); letter-spacing: var(--wr-ls-label); color: var(--muted-foreground); }
.wr-bloglist-card__foot svg { width:1.1rem; height:1.1rem; color: var(--coral); }

/* /blog/ oldal hero + hírlevél */
.wr-blogindex-hero { max-width: var(--container-max); margin-inline:auto; padding: 3rem var(--container-pad-mobile) 2.5rem; }
@media (min-width:1024px){ .wr-blogindex-hero { padding: 4rem var(--container-pad-desktop) 3rem; } }
.wr-blogindex-hero .eyebrow { color: var(--coral); }
.wr-blogindex-hero__t { margin:1.25rem 0 0; font-family: var(--wr-font-display); font-weight:600; font-size: var(--wr-font-hero-service); line-height:1.05; letter-spacing: var(--wr-ls-hero); color: var(--ink); }
.wr-blogindex-hero__lead { margin:1.25rem 0 0; max-width:36rem; font-family: var(--font-sans); font-size: var(--wr-font-lead); line-height: var(--wr-lh-lead); color: var(--muted-foreground); }
.wr-blogindex-news { max-width: var(--container-max); margin:3rem auto 5rem; padding-inline: var(--container-pad-mobile); }
@media (min-width:1024px){ .wr-blogindex-news { padding-inline: var(--container-pad-desktop); } }
.wr-blogindex-news__box { border-radius: var(--radius-3xl); background: var(--ink); color: var(--paper); padding:2rem; display:grid; gap:1.5rem; align-items:center; }
@media (min-width:900px){ .wr-blogindex-news__box { grid-template-columns: 1.1fr .9fr; padding:2.5rem 3rem; } }
.wr-blogindex-news__box .eyebrow { color: var(--coral); }
.wr-blogindex-news__t { margin:.75rem 0 0; font-family: var(--wr-font-display); font-weight:600; font-size:1.5rem; }
.wr-blogindex-news__d { margin:.75rem 0 0; font-family: var(--font-sans); color: color-mix(in oklab, var(--paper) 75%, transparent); }
.wr-blogindex-news__form { display:flex; flex-wrap:wrap; gap:.75rem; }
.wr-blogindex-news__form input { flex:1 1 14rem; border:1px solid color-mix(in oklab, var(--paper) 25%, transparent); border-radius:999px; background: color-mix(in oklab, var(--paper) 8%, transparent); padding:.85rem 1.25rem; font-family: var(--font-sans); font-size: var(--wr-font-sm); color: var(--paper); outline:none; }
.wr-blogindex-news__form input::placeholder { color: color-mix(in oklab, var(--paper) 55%, transparent); }
.wr-blogindex-news__form input:focus { border-color: var(--coral); }

/* Blog body: ol + inline képek (F2 import) — 2026-09-04 */
.wr-blog-ol { max-width: var(--wr-blog-measure); margin:1rem 0 0; padding-left:1.4rem; display:grid; gap:.5rem; }
.wr-blog-ol > li { padding-left:.25rem; }
.wr-blog-ol > li::marker { color: var(--coral); font-family: var(--wr-font-mono); font-weight:600; }
.wr-blog-figure { max-width: var(--wr-blog-measure); margin:1.75rem 0 0; overflow:hidden; border-radius: var(--radius-2xl); border:1px solid var(--line); }
.wr-blog-figure img { display:block; width:100%; height:auto; }

/* ==========================================================================
   BLOG HÍRLEVÉL-DOBOZ, 2026-09-09 (Ernő új Lovable-dizájnja)
   Sötét kártya, kétoszlopos név + e-mail, hozzájárulás-jelölő.
   A .wr-blog-news és a .wr-blogindex-news UGYANEZT a belsőt kapja, hogy a
   cikkek alján és a blog gyűjtőoldalon azonos legyen (78 helyen ugyanaz).
   ========================================================================== */
.wr-blog-news,
.wr-blogindex-news__box {
  position: relative;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-3xl);
  background: var(--ink);
  color: var(--paper);
  padding: 2rem;
}
@media (min-width: 1024px) {
  .wr-blog-news,
  .wr-blogindex-news__box { padding: 2.5rem 3rem; }
}
.wr-blogindex-news__box { display: block; }

.wr-blog-news__t,
.wr-blogindex-news__t {
  margin: .75rem 0 0; max-width: 34rem;
  font-family: var(--wr-font-display); font-weight: 600;
  font-size: clamp(1.375rem, 1.2rem + .8vw, 1.875rem); line-height: 1.2;
  color: var(--paper);
}

.wr-blog-news__form,
.wr-blogindex-news__form {
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid color-mix(in oklab, var(--paper) 10%, transparent);
  display: grid; gap: 1rem;
}
.wr-blog-news__form input[type="text"],
.wr-blog-news__form input[type="email"],
.wr-blogindex-news__form input[type="text"],
.wr-blogindex-news__form input[type="email"] {
  width: 100%; box-sizing: border-box;
  border: 1px solid color-mix(in oklab, var(--paper) 25%, transparent);
  border-radius: 999px;
  background: color-mix(in oklab, var(--paper) 8%, transparent);
  padding: .85rem 1.25rem;
  font-family: var(--font-sans); font-size: var(--wr-font-sm);
  color: var(--paper); outline: none;
}
.wr-blog-news__form input::placeholder,
.wr-blogindex-news__form input::placeholder { color: color-mix(in oklab, var(--paper) 45%, transparent); }
.wr-blog-news__form input:focus,
.wr-blogindex-news__form input:focus { border-color: var(--coral); }

.wr-blog-news__form .btn-launch,
.wr-blogindex-news__form .btn-launch { justify-self: start; }

/* --------------------------------------------------------------------------
   HÍRLEVÉL-DOBOZ: szélesebb és animált (Ernő, 2026-09-09)
   A Lovable-változat szélesebb a cikk szövegoszlopánál, és négy finom
   animációja van. MINDET CSS-ből oldjuk meg, ÚJ MARKUP NÉLKÜL, mert a blokk
   HTML-jét közben Pixel emeli ki egyetlen közös helyre: ha most elemeket
   adnék hozzá, a két munka egymásra írna.
   -------------------------------------------------------------------------- */

/* Szélesség: a .wr-blog-wrap 40px belső térközén kilépve a doboz a teljes
   832px-et kapja a 752 helyett. Csak nagy képernyőn, mert mobilon a kilépés
   vízszintes túlcsordulást okozna. */
@media (min-width: 900px) {
  .wr-blog-news { max-width: none; margin-inline: -2.5rem; }
}

/* 2. Fénypászma: ferde, halvány sáv fut át a kártyán. Pszeudo-elem, hogy ne
      kelljen új elem a markupba. */
.wr-blog-news::after,
.wr-blogindex-news__box::after {
  content: ""; position: absolute; inset-block: 0; width: 7rem;
  transform: skewX(-18deg) translateX(-120%);
  background: linear-gradient(to right, transparent, color-mix(in oklab, var(--paper) 8%, transparent), transparent);
  pointer-events: none;
  animation: wr-nl-sweep 3.4s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   HÍRLEVÉL-DOBOZ: a wpautop által beszúrt <p> burkolók kezelése
   (Ernő 2026-09-09: "mobilon nagyon összefolynak az elemek", asztalin ugyanez
   a hozzájárulás és a gomb között.)

   OK, MÉRVE: a blogcikkeken fut a wpautop, és az a hozzájárulás-címkét ÉS a
   gombot EGYETLEN <p>-be csomagolta. Az űrlap rács-térköze így a <p> KÖRÉ
   került, a <p>-n BELÜL pedig 0 maradt. Az űrlap gyermekei ezek voltak:
   DIV.wr-nl-fields, P (benne a hozzájárulás + a gomb), INPUT (mézesbödön).
   Ezért nem látszott térköz ott, ahová Ernő a nyilat tette.

   Két baj volt, mindkettő javítva:
   1. a <p> burkoló nem adott térközt a benne lévő elemek közé,
   2. a .wr-nl-fields 640px alatt NEM volt rács, tehát a név-mező és az
      e-mail címke között 0 térköz volt (mérve: pontosan 0px).

   Ez a szabály akkor is helyes marad, amikor a blokk már egyetlen közös
   helyről jön és nincs benne <p> burkoló: akkor a szelektor egyszerűen nem
   illeszkedik semmire.
   -------------------------------------------------------------------------- */
.wr-blog-news__form > p,
.wr-blogindex-news__form > p {
  margin: 0;
  display: grid;
  gap: 1.25rem;
  justify-items: start;
}