/* A Villmérnök — különálló, keresőbarát blognézet.
   A főoldal Dimension felugró ablakait nem módosítja. */
body.blog-page { background:#1b1f22; min-height:100vh; }
body.blog-page #wrapper { justify-content:flex-start; gap:0; padding:2.5rem 1.25rem 2rem; }
body.blog-page #wrapper:before { display:none; }
body.blog-page #bg { pointer-events:none; }
.blog-shell { width:100%; max-width:59rem; margin:0 auto; }
.blog-header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding:0 0 1.3rem; border-bottom:1px solid rgba(255,255,255,.28); }
.blog-brand { display:inline-flex; align-items:center; gap:.7rem; text-decoration:none; border-bottom:0; font-size:1.1rem; font-weight:600; letter-spacing:.08rem; }
.blog-brand img { width:2.7rem; height:2.7rem; object-fit:contain; }
.blog-topnav { display:flex; flex-wrap:wrap; gap:.5rem 1.2rem; align-items:center; }
.blog-topnav a { font-size:.76rem; font-weight:600; letter-spacing:.08rem; text-transform:uppercase; border-bottom:1px solid transparent; padding:.4rem 0; }
.blog-topnav a[aria-current=page],.blog-topnav a:hover { border-bottom-color:#fff; }
.blog-main { width:100%; max-width:59rem; margin:0 auto; padding:2.8rem 0 1rem; }
.blog-eyebrow { color:rgba(255,255,255,.75); font-weight:600; font-size:.76rem; text-transform:uppercase; letter-spacing:.16rem; margin-bottom:.85rem; }
.blog-title { font-size:clamp(1.65rem,3.4vw,2.65rem); line-height:1.24; letter-spacing:.085rem; text-transform:none; overflow-wrap:anywhere; margin-bottom:1rem; }
.blog-lead { font-size:1.08rem; line-height:1.85; max-width:44rem; color:rgba(255,255,255,.9); margin-bottom:1.45rem; }
.blog-meta { color:rgba(255,255,255,.72); font-size:.85rem; margin-bottom:1.4rem; }
.blog-highlight { background:rgba(255,255,255,.06); padding:1.4rem 1.5rem; border:1px solid rgba(255,255,255,.2); border-left:3px solid #fff; border-radius:6px; margin:1.7rem 0 2rem; }
.blog-highlight p:last-child { margin-bottom:0; }
.blog-post-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.1rem; margin:1.6rem 0 2.4rem; }
.blog-post-card { background:rgba(27,31,34,.9); border:1px solid rgba(255,255,255,.23); border-radius:8px; padding:1.5rem; display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.blog-post-card h2 { font-size:1.13rem; line-height:1.5; letter-spacing:.045rem; text-transform:none; overflow-wrap:anywhere; margin:.55rem 0 .85rem; }
.blog-post-card p { font-size:.93rem; margin:0 0 1rem; line-height:1.75; }
.blog-post-card a.read-more { margin-top:auto; font-weight:600; border-bottom:solid 1px rgba(255,255,255,.7); padding-bottom:.15rem; }
.blog-tag { font-size:.72rem; letter-spacing:.06rem; text-transform:uppercase; color:rgba(255,255,255,.8); margin:0; }
.blog-article { max-width:47rem; margin:0 auto; padding:2.3rem 2.5rem; background:rgba(27,31,34,.94); border:1px solid rgba(255,255,255,.16); border-radius:8px; }
.blog-article h2 { font-size:1.15rem; text-transform:none; letter-spacing:.05rem; line-height:1.5; margin:2.2rem 0 .9rem; overflow-wrap:anywhere; }
.blog-article h3 { font-size:1rem; text-transform:none; letter-spacing:.04rem; margin:1.4rem 0 .55rem; }
.blog-article p { line-height:1.86; margin-bottom:1.15rem; }
.blog-article ul { list-style:disc; margin:0 0 1.5rem; padding-left:1.25rem; }
.blog-article li { padding-left:.25rem; margin:.5rem 0; line-height:1.8; }
.blog-article .blog-title { font-size:clamp(1.55rem,3.2vw,2.15rem); }
.blog-article .blog-lead { font-size:1.03rem; margin-bottom:1.6rem; }
.blog-article .blog-related { border-top:1px solid rgba(255,255,255,.2); padding-top:1.35rem; margin-top:2.4rem; }
.blog-cta { background:rgba(255,255,255,.065); border:1px solid rgba(255,255,255,.2); border-radius:7px; padding:1.5rem; margin:2rem 0; }
.blog-cta h2 { margin-top:0; }
.blog-actions { display:flex; flex-wrap:wrap; gap:.65rem; align-items:center; }
.blog-actions .button { height:auto; min-height:2.65rem; line-height:1.45; padding:.65rem 1rem; white-space:normal; text-align:center; margin:0; }
.blog-footer { text-align:center; font-size:.8rem; opacity:.85; padding:2rem 1rem 0; }
.blog-footer p { margin-bottom:0; }
.blog-back { display:inline-block; margin:0 0 1.5rem; font-size:.85rem; }
.blog-post-card a:focus-visible,.blog-header a:focus-visible,.blog-article a:focus-visible,.blog-actions a:focus-visible { outline:2px solid #fff; outline-offset:4px; }
@media screen and (max-width:736px) {
  body.blog-page #wrapper { padding:1.25rem 1rem 2rem; }
  .blog-main { padding-top:1.65rem; }
  .blog-header { align-items:flex-start; }
  .blog-topnav { width:100%; gap:.45rem 1rem; }
  .blog-post-grid { grid-template-columns:1fr; }
  .blog-article { padding:1.6rem 1.25rem; }
  .blog-highlight,.blog-cta { padding:1.2rem; }
}
@media screen and (max-width:380px) {
  .blog-brand { font-size:.97rem; }
  .blog-topnav a { font-size:.7rem; }
}