/* ===== L03 — magazine featured + sidebar (like reference) ===== */

.portal-hero{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
}

/* Sidebar: do NOT stretch */
.sidebar{
    width: 320px;
    max-width: 320px;
    flex-shrink: 0;
}

/* ===== Featured big post (card) ===== */
.featured{
    background: var(--card);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
}

.featured-media img,
.featured-fallback{
    width: 100%;
    height: 360px;
    object-fit: cover;
    display: block;
    background: #eceff3;
}

.featured-body{
    padding: 16px 18px 18px;
}

.badge{
    display: inline-flex;
    align-items: center;
    font-weight: 800;
    font-size: 12px;
    padding: 6px 10px;
    background: var(--primary-soft);
    color: var(--text);
}

.featured-title{
    font-size: 28px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 10px 0 8px;
}

.featured-title a{
    color: var(--text);
    text-decoration: none;
}

.featured-title a:hover{
    text-decoration: underline;
}

/* ===== Recent posts (CARDS: image top, text bottom) ===== */
.recent{
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.recent-card{
    display: block;
    background: var(--card);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow-soft);
    text-decoration: none;
    max-width: 100%;
}

.recent-card-img{
    width: 100%;
    object-fit: cover;
    display: block;
    background: #eceff3;
}

.recent-card-body{
    padding: 10px 12px 12px;
}

.recent-card-title{
    font-size: 13px;
    line-height: 1.2;
    font-weight: 850;
    color: var(--text);
}

.recent-card-meta{
    margin-top: 6px;
    font-size: 12px;
    color: var(--muted);
}

/* Below section spacing */
.portal-main{
    margin-top: 18px;
}

/* Keep news-card images tidy (grid section) */
.news-card-img{
    width: 100%;
    object-fit: cover;
    display: block;
}

.news-card{
    box-shadow: var(--shadow-soft);
}

/* ===== Responsive ===== */
@media (max-width: 1100px){
    .portal-hero{
        grid-template-columns: 1fr;
    }
    .sidebar{
        width: 100%;
        max-width: 100%;
    }
    .recent-card-img{
        height: 120px;
    }
}

@media (max-width: 720px){
    .featured-media img,
    .featured-fallback{
        height: 260px;
    }
}
/* MAIN COLUMN WRAPPER */
.portal-main-col{
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* Force latest articles into ONE column */
.cards-grid-1col{
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}
/* ===== FIX: bottom slider must be horizontal ===== */

.slider-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-top: 18px;
    margin-bottom: 10px;
}

.slider-controls{
    display:flex;
    gap:10px;
}

/* viewport with horizontal scroll */
.slider-viewport{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}

/* hide scrollbar (optional) */
.slider-viewport::-webkit-scrollbar{ height: 10px; }
.slider-viewport::-webkit-scrollbar-thumb{ background: rgba(0,0,0,.12); }
.slider-viewport{ scrollbar-width: thin; }

/* THE MAIN FIX: make track a horizontal flex row */
.slider-track{
    display: flex;
    gap: 14px;
    padding: 4px;
    width: max-content; /* important */
}

/* each slide = fixed card width */
.strip-item.slide{
    flex: 0 0 240px;       /* card width */
    max-width: 240px;
    scroll-snap-align: start;

    display:flex;
    flex-direction:column;

    background: var(--card);
    border: 1px solid var(--border);

    overflow: hidden;
    box-shadow: var(--shadow-soft);
    text-decoration:none;
}

/* thumb inside the card */
.strip-thumb{
    width: 100%;
    height: 120px;        /* fixed thumb height */
    object-fit: cover;
    display:block;
    background: #eceff3;
}

/* title under the image */
.strip-title{
    padding: 10px 12px 12px;
    color: var(--text);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.2;
}

/* buttons (if you want them consistent) */
.slider-btn{
    width: 38px;
    height: 38px;

    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: var(--shadow-soft);
    cursor: pointer;
}

@media (max-width: 720px){
    .strip-item.slide{
        flex-basis: 78vw;
        max-width: 78vw;
    }
    .strip-thumb{ height: 160px; }
}
/* ===== L03 HEADER (like reference) ===== */
.l03-header{
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.l03-header-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding-top: 14px;
    padding-bottom: 14px;
}

/* big BLOG */
.l03-brand{
    font-size: 28px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text);
    text-decoration: none;
}

/* desktop nav */
.l03-nav{
    display:flex;
    align-items:center;
    gap: 16px;
}

.l03-nav a{
    text-decoration:none;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    padding: 10px 12px;

}

.l03-nav a:hover{
    color: var(--text);
    background: rgba(0,0,0,.04);
}

.l03-nav a.is-active{
    color: var(--text);
    background: var(--primary-soft);
}

/* mobile */
.l03-nav-toggle{
    display:none;
    width: 42px;
    height: 42px;

    border: 1px solid var(--border);
    background: var(--card);
    box-shadow: var(--shadow-soft);
    cursor:pointer;
}

.l03-nav-toggle svg{
    display:block;
    margin:auto;
}

.l03-nav-mobile{
    display:none;
    padding: 10px 18px 16px;
    border-top: 1px solid var(--border);
}

.l03-nav-mobile a{
    display:block;
    padding: 10px 0;
    text-decoration:none;
    color: var(--text);
    font-weight: 700;
}

@media (max-width: 820px){
    .l03-nav-desktop{ display:none; }
    .l03-nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
    .l03-nav-mobile[data-open="true"]{ display:block; }
}

.m-2{
    margin: 15px;
}

/* ===== L03 POSTS (grid like reference) ===== */

.posts-head{
    margin: 18px 0 14px;
}

.posts-title{
    margin: 0;
    font-size: 28px;
    letter-spacing: -0.02em;
}

.posts-subtitle{
    margin: 8px 0 0;
}

.posts-layout{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 22px;
    align-items: start;
}

.posts-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.post-card{
    background: var(--card);
    border: 1px solid var(--border);

    overflow: hidden;
    box-shadow: var(--shadow-soft);
    display: flex;
    flex-direction: column;
}

.post-card-media{
    display: block;
    text-decoration: none;
}

.post-card-img{
    width: 100%;
    height: 170px;
    object-fit: cover;
    display: block;
    background: #eceff3;
}

.post-card-body{
    padding: 12px 12px 14px;
}

.post-card-title{
    margin: 0;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 850;
}

.post-card-title a{
    color: var(--text);
    text-decoration: none;
}

.post-card-title a:hover{
    text-decoration: underline;
}

.post-card-meta{
    margin-top: 8px;
    color: var(--muted);
    font-size: 12px;
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.post-card-excerpt{
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.5;

    /* аккуратное ограничение */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* responsive */
@media (max-width: 1100px){
    .posts-layout{ grid-template-columns: 1fr; }
    .posts-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .posts-side{ width: 100%; max-width: 100%; }
}

@media (max-width: 720px){
    .posts-grid{ grid-template-columns: 1fr; }
    .post-card-img{ height: 200px; }
}
/* L03 burger icon fix (SVG lines need stroke) */
.l03-nav-toggle svg{
    stroke: var(--text);
    stroke-width: 2;
    fill: none;
}
.l03-nav-toggle svg line{
    stroke: currentColor;
}