/* =========================================================
   BLOG CIKK – modern, de az Ági Nyelvi Műhely arculatához igazítva
   ========================================================= */

.blog-modern-page{
    --bm-accent:#8d6147;
    --bm-accent-2:#b88969;
    --bm-accent-3:#d8b9a4;
    --bm-ink:#2e2926;
    --bm-muted:#81766f;
    --bm-line:rgba(112,79,57,.16);
    --bm-surface:rgba(255,255,255,.72);
    --bm-surface-2:rgba(255,255,255,.48);
    --bm-soft:rgba(184,137,105,.09);
    --bm-shadow:0 20px 56px rgba(62,43,31,.09);
    --bm-shadow-soft:0 10px 28px rgba(62,43,31,.06);

    max-width:1180px;
    padding-top:2rem;
    padding-bottom:5rem;
}

html.dark-mode .blog-modern-page{
    --bm-accent:#d2a381;
    --bm-accent-2:#b98363;
    --bm-accent-3:#8f6249;
    --bm-ink:#f2ece8;
    --bm-muted:#b9aaa1;
    --bm-line:rgba(255,255,255,.11);
    --bm-surface:rgba(255,255,255,.055);
    --bm-surface-2:rgba(255,255,255,.035);
    --bm-soft:rgba(210,163,129,.08);
    --bm-shadow:0 22px 60px rgba(0,0,0,.24);
    --bm-shadow-soft:0 12px 30px rgba(0,0,0,.18);
}

/* Olvasási progress */
.blog-reading-progress{
    position:fixed;
    left:0;
    top:0;
    width:0;
    height:3px;
    z-index:99999;
    background:linear-gradient(90deg,#8d6147,#c89878,#e2baa0);
    box-shadow:0 0 12px rgba(184,137,105,.35);
}

/* Hero */
.blog-modern-hero{
    position:relative;
    padding:clamp(2.5rem,6vw,5.5rem) 0 clamp(2.2rem,5vw,4rem);
}

.blog-modern-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(300px,.85fr);
    gap:clamp(2rem,5vw,4.5rem);
    align-items:center;
}

.blog-modern-back{
    display:inline-flex;
    align-items:center;
    gap:.5rem;
    margin-bottom:1.35rem;
    color:var(--bm-muted);
    text-decoration:none;
    font-size:.94rem;
    transition:.2s ease;
}

.blog-modern-back:hover{
    color:var(--bm-accent);
    transform:translateX(-2px);
}

.blog-modern-kicker{
    display:inline-flex;
    align-items:center;
    gap:.55rem;
    padding:.48rem .78rem;
    border:1px solid rgba(141,97,71,.20);
    border-radius:999px;
    background:rgba(184,137,105,.08);
    color:var(--bm-accent);
    font-size:.76rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.12em;
}

.blog-modern-kicker-dot{
    width:.48rem;
    height:.48rem;
    border-radius:50%;
    background:linear-gradient(135deg,var(--bm-accent),var(--bm-accent-2));
    box-shadow:0 0 0 5px rgba(184,137,105,.10);
}

.blog-modern-title{
    max-width:800px;
    margin:1.2rem 0 0;
    color:var(--bm-ink);
    font-size:clamp(2.45rem,6vw,5rem);
    line-height:1;
    letter-spacing:-.055em;
}

.blog-modern-title-accent{
    background:linear-gradient(90deg,var(--bm-accent),var(--bm-accent-2));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
}

.blog-modern-lead{
    max-width:760px;
    margin:1.35rem 0 0;
    color:var(--bm-muted);
    font-size:clamp(1.03rem,1.8vw,1.2rem);
    line-height:1.75;
}

.blog-modern-meta{
    display:flex;
    flex-wrap:wrap;
    gap:.45rem 1rem;
    margin-top:1rem;
    color:var(--bm-muted);
    font-size:.9rem;
}

.blog-modern-meta span{
    display:inline-flex;
    align-items:center;
    gap:.4rem;
}

/* Hero jobb oldali lebegő kártya */
.blog-modern-visual{
    position:relative;
    min-height:330px;
    display:grid;
    place-items:center;
}

.blog-modern-orbit{
    position:absolute;
    inset:5%;
    border:1px solid rgba(141,97,71,.11);
    border-radius:50%;
}

.blog-modern-orbit::before,
.blog-modern-orbit::after{
    content:"";
    position:absolute;
    width:13px;
    height:13px;
    border-radius:50%;
    background:linear-gradient(135deg,var(--bm-accent),var(--bm-accent-2));
    box-shadow:0 0 20px rgba(184,137,105,.40);
}

.blog-modern-orbit::before{left:11%;top:18%}
.blog-modern-orbit::after{right:9%;bottom:20%}

.blog-modern-quote{
    position:relative;
    width:min(100%,380px);
    padding:1.8rem;
    border:1px solid var(--bm-line);
    border-radius:28px;
    background:
        linear-gradient(145deg,rgba(255,255,255,.13),rgba(255,255,255,.01)),
        var(--bm-surface);
    box-shadow:var(--bm-shadow);
    backdrop-filter:blur(16px);
    overflow:hidden;
    transform:rotate(1.5deg);
}

.blog-modern-quote::before{
    content:"";
    position:absolute;
    width:220px;
    height:220px;
    left:-70px;
    top:-100px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(184,137,105,.18),transparent 68%);
}

.blog-modern-quote-label{
    position:relative;
    z-index:1;
    color:var(--bm-muted);
    font-size:.75rem;
    font-weight:800;
    letter-spacing:.11em;
    text-transform:uppercase;
}

.blog-modern-quote-main{
    position:relative;
    z-index:1;
    margin:1.15rem 0 .8rem;
    color:var(--bm-ink);
    font-size:clamp(1.35rem,3vw,1.65rem);
    line-height:1.35;
    font-weight:750;
}

.blog-modern-quote-text{
    position:relative;
    z-index:1;
    margin:0;
    color:var(--bm-muted);
    font-size:.94rem;
}

/* Cikk layout */
.blog-modern-layout{
    display:grid;
    grid-template-columns:230px minmax(0,1fr);
    gap:1.75rem;
    align-items:start;
}

.blog-modern-toc{
    position:sticky;
    top:92px;
    padding:1rem;
    border:1px solid var(--bm-line);
    border-radius:20px;
    background:var(--bm-surface);
    box-shadow:var(--bm-shadow-soft);
    backdrop-filter:blur(14px);
}

.blog-modern-toc-title{
    margin:.15rem .55rem .55rem;
    color:var(--bm-muted);
    font-size:.72rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.13em;
}

.blog-modern-toc a{
    display:block;
    padding:.62rem .7rem;
    border-radius:11px;
    color:var(--bm-muted);
    text-decoration:none;
    font-size:.92rem;
    transition:.18s ease;
}

.blog-modern-toc a:hover{
    color:var(--bm-accent);
    background:var(--bm-soft);
}

.blog-modern-content{
    min-width:0;
}

.blog-modern-section{
    scroll-margin-top:95px;
    margin-bottom:1.35rem;
}

.blog-modern-card{
    position:relative;
    overflow:hidden;
    padding:clamp(1.45rem,4vw,2.65rem);
    border:1px solid var(--bm-line);
    border-radius:30px;
    background:var(--bm-surface);
    box-shadow:var(--bm-shadow-soft);
    backdrop-filter:blur(14px);
}

.blog-modern-card::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(135deg,rgba(255,255,255,.08),transparent 22%);
}

.blog-modern-section-no{
    width:39px;
    height:39px;
    display:grid;
    place-items:center;
    margin-bottom:1.1rem;
    border:1px solid rgba(141,97,71,.18);
    border-radius:12px;
    color:var(--bm-accent);
    background:linear-gradient(135deg,rgba(184,137,105,.12),rgba(216,185,164,.08));
    font-weight:800;
}

.blog-modern-card h2{
    position:relative;
    z-index:1;
    margin:0 0 1rem;
    color:var(--bm-ink);
    font-size:clamp(1.6rem,3vw,2.25rem);
    line-height:1.15;
    letter-spacing:-.035em;
}

.blog-modern-card h3{
    position:relative;
    z-index:1;
    margin:1.8rem 0 .65rem;
    color:var(--bm-ink);
    font-size:1.12rem;
}

.blog-modern-card p{
    position:relative;
    z-index:1;
    color:var(--bm-ink);
}

.blog-modern-muted{
    color:var(--bm-muted)!important;
}

/* Példák */
.blog-modern-example{
    position:relative;
    z-index:1;
    margin:1rem 0;
    padding:1.05rem 1.2rem;
    border:1px solid rgba(141,97,71,.14);
    border-radius:15px;
    background:linear-gradient(135deg,rgba(184,137,105,.10),rgba(216,185,164,.045));
    box-shadow:inset 4px 0 0 var(--bm-accent);
    color:var(--bm-ink);
}

.blog-modern-example-label{
    display:block;
    margin-bottom:.3rem;
    color:var(--bm-accent);
    font-size:.7rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.11em;
}

/* Mondatképlet */
.blog-modern-formula{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:.65rem;
    margin:1.25rem 0;
}

.blog-modern-formula span{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:.75rem .6rem;
    border:1px solid var(--bm-line);
    border-radius:14px;
    background:var(--bm-surface-2);
    color:var(--bm-ink);
    text-align:center;
    font-weight:650;
}

.blog-modern-grid{
    position:relative;
    z-index:1;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.9rem;
    margin-top:1rem;
}

.blog-modern-mini{
    padding:1rem 1.05rem;
    border:1px solid var(--bm-line);
    border-radius:17px;
    background:var(--bm-surface-2);
}

.blog-modern-mini h3{
    margin:0 0 .5rem;
}

.blog-modern-rule{
    height:1px;
    margin:1.8rem 0;
    background:linear-gradient(90deg,transparent,var(--bm-line),transparent);
}

.blog-modern-info{
    position:relative;
    z-index:1;
    margin:1rem 0;
    padding:1rem 1.1rem;
    border:1px solid var(--bm-line);
    border-radius:15px;
    color:var(--bm-muted);
    background:var(--bm-surface-2);
}

/* Záró blokk */
.blog-modern-end{
    position:relative;
    overflow:hidden;
    margin-top:1.7rem;
    padding:clamp(2rem,5vw,3.2rem);
    border-radius:28px;
    color:#fff;
    text-align:center;
    background:
        radial-gradient(circle at 10% 10%,rgba(255,255,255,.15),transparent 15rem),
        linear-gradient(135deg,#75503b,#a7795b 55%,#c39270);
    box-shadow:0 22px 55px rgba(107,73,51,.18);
}

.blog-modern-end h2{
    margin:0 auto .65rem;
    max-width:760px;
    color:#fff;
}

.blog-modern-end p{
    max-width:690px;
    margin:0 auto 1.2rem;
    color:rgba(255,255,255,.86);
}

.blog-modern-end a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:45px;
    padding:0 1rem;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.28);
    color:#fff;
    text-decoration:none;
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(10px);
}

.blog-modern-source{
    margin-top:1.4rem;
    color:var(--bm-muted);
    text-align:center;
    font-size:.88rem;
}

@media (max-width: 991.98px){
    .blog-modern-hero-grid{
        grid-template-columns:1fr;
    }

    .blog-modern-visual{
        min-height:260px;
    }

    .blog-modern-layout{
        grid-template-columns:1fr;
    }

    .blog-modern-toc{
        position:relative;
        top:auto;
        display:flex;
        flex-wrap:wrap;
        gap:.15rem;
    }

    .blog-modern-toc-title{
        width:100%;
    }

    .blog-modern-toc a{
        display:inline-block;
    }

    .blog-modern-formula{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 575.98px){
    .blog-modern-page{
        padding-top:.7rem;
    }

    .blog-modern-hero{
        padding-top:2rem;
    }

    .blog-modern-title{
        font-size:clamp(2.35rem,13vw,3.7rem);
    }

    .blog-modern-visual{
        min-height:230px;
    }

    .blog-modern-quote{
        transform:none;
    }

    .blog-modern-grid,
    .blog-modern-formula{
        grid-template-columns:1fr;
    }

    .blog-modern-card{
        border-radius:22px;
    }

    .blog-modern-toc{
        padding:.8rem;
    }
}