/* =========================================================
   MYNQORA V6.3.3 — Public Blog Showcase + Logout
   ========================================================= */

.mq-public-blog-showcase{
    position:relative;
    padding:52px 0 64px;
    overflow:hidden;
}
.mq-public-blog-showcase::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    left:6%;
    top:-300px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(33,215,188,.09),transparent 68%);
    pointer-events:none;
}
.mq-public-blog-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:28px;
    margin-bottom:22px;
}
.mq-public-blog-head>div{max-width:720px}
.mq-public-blog-head h2{
    margin:7px 0 10px;
    font-size:clamp(27px,3vw,42px);
    line-height:1.1;
}
.mq-public-blog-head p{
    margin:0;
    color:#8fa5b5;
    line-height:1.8;
    font-size:15px;
}
.mq-public-blog-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:15px;
}
.mq-public-blog-card{
    min-height:255px;
    display:flex;
    flex-direction:column;
    padding:22px;
    border:1px solid rgba(83,173,187,.22);
    border-radius:18px;
    color:inherit;
    text-decoration:none;
    background:
      linear-gradient(150deg,rgba(13,32,44,.96),rgba(5,18,27,.96));
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
    transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease;
}
.mq-public-blog-card:hover{
    transform:translateY(-4px);
    border-color:rgba(42,226,198,.5);
    box-shadow:0 18px 50px rgba(0,0,0,.24),0 0 0 1px rgba(34,218,191,.05);
    background:
      linear-gradient(150deg,rgba(14,40,51,.98),rgba(5,21,30,.98));
}
.mq-public-blog-card-top{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    margin-bottom:22px;
}
.mq-public-blog-category{
    color:#32d7ba;
    font-size:12px;
    font-weight:800;
    letter-spacing:.04em;
}
.mq-public-blog-number{
    color:#516b7b;
    font-weight:800;
    font-size:12px;
}
.mq-public-blog-card h3{
    margin:0 0 12px;
    font-size:19px;
    line-height:1.5;
    color:#f2f7fa;
}
.mq-public-blog-card p{
    margin:0;
    color:#8ca1b0;
    line-height:1.75;
    font-size:14px;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
}
.mq-public-blog-card-foot{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    margin-top:auto;
    padding-top:19px;
    border-top:1px solid rgba(100,157,172,.12);
    color:#718795;
    font-size:12px;
}
.mq-public-blog-card-foot strong{
    color:#37d8bd;
    font-size:13px;
}

/* Logout is intentionally distinct from destructive account actions:
   visible, calm, and accessible even when the rail collapses. */
.mq6-side-nav .mq6-logout-link{
    margin-top:8px;
    color:#ff9aa8;
    border-top:1px solid rgba(255,255,255,.06);
    padding-top:14px;
}
.mq6-side-nav .mq6-logout-link svg{color:#ff7d90}
.mq6-side-nav .mq6-logout-link:hover{
    color:#ffd4da;
    background:rgba(255,93,113,.08);
}
.mq6-sidebar:not(.is-open) .mq6-logout-link{
    border-top-color:transparent;
}

/* RTL keeps the article cards natural while preserving the card structure. */
html[dir="rtl"] .mq-public-blog-card,
html[dir="rtl"] .mq-public-blog-head{
    text-align:right;
}

@media(max-width:1100px){
    .mq-public-blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
    .mq-public-blog-showcase{padding:34px 0 44px}
    .mq-public-blog-head{
        align-items:stretch;
        flex-direction:column;
    }
    .mq-public-blog-head .btn{align-self:flex-start}
    .mq-public-blog-grid{grid-template-columns:1fr}
    .mq-public-blog-card{min-height:220px}
}