/* ---------- Тёмный hero статьи (в стиле concept/logo_v2) ---------- */

.post-hero{

    position:relative;

    padding-block:5rem;

    background:

        radial-gradient(ellipse at 30% 20%,rgba(20,61,89,.6),transparent 55%),

        linear-gradient(135deg,#0F2A44 0%,var(--logo-bg) 55%,#071624 100%);

    overflow:hidden;

}

.post-hero-grid{

    display:grid;

    grid-template-columns:1.15fr 1fr;

    gap:3rem;

    align-items:center;

}

.post-hero-back{

    display:inline-block;

    font-family:"Manrope",sans-serif;

    font-size:.85rem;

    font-weight:600;

    color:rgba(255,255,255,.6);

    margin-bottom:2rem;

    transition:color var(--speed-fast) ease;

}

.post-hero-back:hover{

    color:var(--gold-mid);

}

.post-hero-eyebrow{

    display:block;

    font-family:"Manrope",sans-serif;

    font-size:.8rem;

    font-weight:600;

    letter-spacing:.28em;

    text-transform:uppercase;

    color:var(--gold-mid);

    margin-bottom:1.25rem;

}

.post-hero-title{

    font-family:"Manrope",sans-serif;

    font-weight:800;

    font-size:clamp(2.1rem,4.2vw,3.4rem);

    line-height:1.12;

    color:#FFFFFF;

    max-width:14ch;

    margin-bottom:1.5rem;

}

.post-hero-date{

    font-family:"Manrope",sans-serif;

    font-size:1rem;

    color:rgba(255,255,255,.55);

    max-width:42ch;

    line-height:1.6;

}

.post-hero-logo{

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

}

.post-hero-logo .logo-cube{

    width:min(340px,80%);

    height:auto;

    aspect-ratio:1;

}

.post-hero-photo{

    position:absolute;

    top:50%;

    left:50%;

    transform:translate(-50%,-50%) scale(.92);

    width:min(340px,80%);

    aspect-ratio:1;

    border-radius:16%;

    overflow:hidden;

    opacity:0;

    pointer-events:none;

    border:4px solid transparent;

    background:

        linear-gradient(var(--logo-bg),var(--logo-bg)) padding-box,

        linear-gradient(135deg,var(--gold-light),var(--gold-mid) 60%,var(--gold-deep)) border-box;

    box-shadow:0 20px 50px rgba(0,0,0,.35);

    transition:

        opacity .6s ease,

        transform .6s cubic-bezier(.34,1.1,.64,1);

}

.post-hero-photo img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

.post-hero-logo.is-revealing .post-hero-photo{

    opacity:1;

    transform:translate(-50%,-50%) scale(1);

}

@media (max-width:900px){

    .post-hero-grid{

        grid-template-columns:1fr;

        text-align:center;

    }

    .post-hero-back{

        margin-bottom:1.5rem;

    }

    .post-hero-title{

        max-width:none;

        margin-inline:auto;

    }

    .post-hero-date{

        margin-inline:auto;

    }

    .post-hero-logo{

        order:-2;

        width:min(280px,72vw);

        aspect-ratio:1;

        margin:0 auto 2rem;

    }

    .post-hero-back{

        order:-1;

    }

    .post-hero-logo .logo-cube{

        width:100%;

    }

    .post-hero-photo{

        width:100%;

    }

}

/* ---------- Светлая часть — сам текст статьи ---------- */

.post{

    padding-block:4rem;

    min-height:40vh;

}

.post-stub{

    font-family:"Manrope",sans-serif;

    font-size:1.05rem;

    color:var(--color-text);

    background:var(--color-surface);

    border-radius:var(--radius-md);

    padding:2.5rem;

    box-shadow:var(--shadow-soft);

}

.post-nav{

    display:flex;

    justify-content:space-between;

    gap:1rem;

    margin-top:3rem;

    padding-top:2rem;

    border-top:1px solid rgba(0,0,0,.08);

}

.post-nav-link{

    display:flex;

    flex-direction:column;

    max-width:45%;

    font-family:"Manrope",sans-serif;

}

.post-nav-link.next{

    text-align:right;

    margin-left:auto;

}

.post-nav-label{

    font-size:.75rem;

    font-weight:600;

    text-transform:uppercase;

    letter-spacing:.04em;

    color:var(--gold-mid);

    margin-bottom:.35rem;

}

.post-nav-title{

    font-size:.95rem;

    font-weight:600;

    color:var(--color-title);

    transition:color var(--speed-fast) ease;

}

.post-nav-link:hover .post-nav-title{

    color:var(--gold-mid);

}

@media (max-width:600px){

    .post-nav-link{

        max-width:48%;

    }

    .post-nav-title{

        font-size:.85rem;

    }

}