/* L11 – News Portal (no radius) */

body.l11{ background: var(--bg); color: var(--text); }
.l11-portal{ padding-bottom: 30px; }

.l11-header{ background:#fff; border-bottom:1px solid var(--border); }
.l11-topbar{ background:#fff; border-bottom:1px solid var(--border); }
.l11-topbar-inner{ display:flex; align-items:center; justify-content:space-between; padding: 10px 0; }

.l11-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; font-weight:900; }
.l11-brand-mark{
    width:26px; height:26px;
    display:flex; align-items:center; justify-content:center;
    background:#e11d48; color:#fff; font-weight:900;
}
.l11-brand-text{ letter-spacing:.2px; }

.l11-topinfo{ display:flex; align-items:center; gap:10px; }
.l11-pill{
    font-size:12px;
    padding:6px 8px;
    border:1px solid var(--border);
    background:#fff;
}
.l11-sep{ color: var(--muted); }
.l11-muted{ color: var(--muted); font-size:12px; }

.l11-navwrap{ background:#fff; }
.l11-nav-inner{ display:flex; align-items:center; justify-content:space-between; padding: 10px 0; gap: 12px; }
.l11-nav a{ text-decoration:none; color: rgba(0,0,0,.75); font-weight:700; margin-right: 10px; }
.l11-nav a:hover{ color:#000; }

.l11-actions{ display:flex; gap:10px; }
.l11-action{ opacity:.75; }

.l11-nav-toggle{ display:none; width:40px; height:40px; padding:0; border:1px solid var(--border); background:#fff; }
.l11-nav-toggle svg line{ stroke: rgba(0,0,0,.65); stroke-width:2; }

.l11-topnav-mobile{ display:none; background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.l11-topnav-mobile a{ display:block; padding:10px 16px; text-decoration:none; color:#111; border-top:1px solid var(--border); }
.l11-topnav-mobile a:first-child{ border-top:none; }
.l11-topnav-mobile[data-open="true"]{ display:block; }

/* badges (category colors like ref) */
.l11-badge{
    display:inline-flex;
    font-size:11px;
    padding:4px 8px;
    color:#fff;
    background:#64748b;
    text-transform: uppercase;
    font-weight:900;
    letter-spacing:.3px;
}
.l11-badge-orange{ background:#f59e0b; }
.l11-badge-pink{ background:#ec4899; }
.l11-badge-green{ background:#22c55e; }

.l11-featured{ margin-top: 18px; }
.l11-featured-grid{
    display:grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 14px;
}

/* slider (static first slide ok even without JS) */
.l11-slider{ position:relative; min-height: 420px; border:1px solid var(--border); background:#fff; overflow:hidden; box-shadow: var(--shadow); }
.l11-slide{
    position:absolute; inset:0;
    display:block;
    background-size: cover;
    background-position:center;
    text-decoration:none;
    color:#fff;
    opacity:0;
    pointer-events:none;
}
.l11-slide.is-active{ opacity:1; pointer-events:auto; }
.l11-slide-overlay{ position:absolute; inset:0; background: linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.65)); }
.l11-slide-body{ position:absolute; left:16px; bottom:16px; right:16px; }
.l11-slide-title{ margin-top: 10px; font-size: 24px; font-weight: 900; line-height:1.1; }
.l11-slide-meta{ margin-top: 8px; font-size: 12px; opacity:.9; }

.l11-dots{ position:absolute; left:16px; bottom:10px; display:flex; gap:6px; }
.l11-dot{ width:10px; height:10px; border:1px solid rgba(255,255,255,.7); background: rgba(0,0,0,.15); }
.l11-dot.is-active{ background:#fff; }

/* right column cards */
.l11-rightcol{ display:flex; flex-direction:column; gap: 12px; }
.l11-rcard{ display:block; text-decoration:none; color:inherit; border:1px solid var(--border); background:#fff; overflow:hidden; box-shadow: var(--shadow-soft); }
.l11-rcard-media{ height: 150px; background-size:cover; background-position:center; }
.l11-rcard-body{ padding: 10px; }
.l11-rcard-title{ margin-top: 8px; font-weight: 900; line-height:1.15; }

.l11-ad{ border:1px solid var(--border); background:#fff; padding: 10px; text-align:center; box-shadow: var(--shadow-soft); }
.l11-ad-label{ font-size: 11px; color: var(--muted); margin-bottom: 6px; }
.l11-ad-box{ height: 180px; display:flex; align-items:center; justify-content:center; background: #f3f4f6; color: #6b7280; font-weight: 900; }
.l11-ad-small .l11-ad-box{ height: 220px; }

.l11-minirow{
    margin-top: 14px;
    display:grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}
.l11-mini{ text-decoration:none; color:inherit; background:#fff; border:1px solid var(--border); box-shadow: var(--shadow-soft); overflow:hidden; }
.l11-mini-media{ height: 120px; background-size:cover; background-position:center; }
.l11-mini-body{ padding: 10px; }
.l11-mini-title{ margin-top: 8px; font-weight: 900; line-height:1.1; }
.l11-mini-meta{ margin-top: 8px; font-size: 12px; color: var(--muted); }

/* Latest */
.l11-latest{ margin-top: 18px; }
.l11-section-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 10px; }
.l11-section-title{ font-weight: 900; }
.l11-section-link{ text-decoration:none; color: rgba(0,0,0,.55); font-weight: 800; }
.l11-section-link:hover{ color:#000; }

.l11-latest-grid{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.l11-card{ text-decoration:none; color:inherit; background:#fff; border:1px solid var(--border); box-shadow: var(--shadow-soft); overflow:hidden; }
.l11-card-media{ height: 120px; background-size:cover; background-position:center; }
.l11-card-body{ padding: 10px; }
.l11-card-title{ margin-top: 8px; font-weight: 900; line-height:1.1; }
.l11-card-meta{ margin-top: 8px; font-size: 12px; color: var(--muted); }

/* triple section */
.l11-triple{ margin-top: 18px; }
.l11-triple-grid{ display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 14px; }

.l11-col{ background:#fff; border:1px solid var(--border); box-shadow: var(--shadow-soft); padding: 12px; }
.l11-col-head{ font-weight: 900; margin-bottom: 10px; }

.l11-bigitem{ display:block; text-decoration:none; color:inherit; border:1px solid var(--border); background:#fff; overflow:hidden; }
.l11-bigitem-media{ height: 180px; background-size:cover; background-position:center; }
.l11-bigitem-body{ padding: 10px; }
.l11-bigitem-title{ font-weight: 900; line-height:1.1; margin-bottom: 8px; }

.l11-links{ margin-top: 10px; display:flex; flex-direction:column; gap: 8px; }
.l11-links a{ text-decoration:none; color:#111; }
.l11-links a:hover{ text-decoration:underline; }

.l11-sportsbox{ display:flex; flex-direction:column; gap: 8px; }
.l11-sport{ display:flex; gap: 10px; align-items:flex-start; text-decoration:none; color:#111; padding: 8px; border:1px solid var(--border); background:#fff; }
.l11-sport-dot{ width:8px; height:8px; background:#ef4444; margin-top: 6px; }
.l11-sport-title{ font-weight: 800; line-height:1.15; }

.l11-follow{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.l11-follow-btn{ text-decoration:none; text-align:center; padding:10px; border:1px solid var(--border); background:#fff; color:#111; font-weight: 900; }
.l11-follow-list{ margin-top: 12px; display:flex; flex-direction:column; gap: 10px; }
.l11-follow-item{ display:grid; grid-template-columns: 56px 1fr; gap: 10px; text-decoration:none; color:inherit; border:1px solid var(--border); padding: 8px; background:#fff; }
.l11-follow-thumb{ height: 44px; background-size:cover; background-position:center; }
.l11-follow-title{ font-weight: 900; line-height:1.1; }
.l11-follow-meta{ margin-top: 6px; font-size: 12px; color: var(--muted); }

/* list/post */
.l11-pagehead{ margin: 18px 0 14px; }
.l11-h1{ margin:0 0 10px; font-size: 34px; font-weight: 900; }
.l11-h2{ margin:18px 0 10px; font-size: 18px; font-weight: 900; }

.l11-list{ display:flex; flex-direction:column; gap: 12px; }
.l11-row{
    display:grid; grid-template-columns: 240px 1fr; gap: 12px;
    text-decoration:none; color:inherit;
    background:#fff; border:1px solid var(--border); box-shadow: var(--shadow-soft);
}
.l11-row-thumb{ height: 150px; background-size:cover; background-position:center; }
.l11-row-body{ padding: 12px; }
.l11-row-title{ margin-top: 6px; font-weight: 900; font-size: 20px; line-height:1.1; }
.l11-row-excerpt{ margin-top: 8px; }
.l11-row-meta{ margin-top: 10px; color: var(--muted); font-size: 12px; }

.l11-post-grid{ margin-top: 18px; display:grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; }
.l11-article{ background:#fff; border:1px solid var(--border); box-shadow: var(--shadow); padding: 16px; }
.l11-article-title{ margin:0; font-size: 34px; font-weight: 900; line-height:1.05; }
.l11-article-meta{ margin-top: 10px; color: var(--muted); font-size: 13px; }
.l11-cover{ margin-top: 14px; height: 360px; background-size:cover; background-position:center; border:1px solid var(--border); }
.l11-body{ margin-top: 14px; }

.l11-aside{ display:flex; flex-direction:column; gap: 14px; }
.l11-aside-list{ display:flex; flex-direction:column; gap: 10px; }
.l11-aside-item{ display:grid; grid-template-columns: 56px 1fr; gap: 10px; text-decoration:none; color:inherit; border:1px solid var(--border); background:#fff; padding: 8px; }
.l11-aside-thumb{ height: 44px; background-size:cover; background-position:center; }
.l11-aside-title{ font-weight: 900; line-height:1.15; }

/* pagination */
.l11-pagination{
    display:flex; justify-content:space-between; align-items:center;
    margin-top: 16px; padding: 12px;
    background:#fff; border:1px solid var(--border);
}
.l11-pagebtn{ padding:10px 12px; border:1px solid var(--border); background:#fff; text-decoration:none; color:#111; font-weight:900; }
.l11-pagebtn.is-disabled{ opacity:.4; pointer-events:none; }
.l11-pagenum{ color: var(--muted); font-size: 13px; }

/* responsive */
@media (max-width: 1100px){
    .l11-minirow{ grid-template-columns: 1fr 1fr; }
    .l11-latest-grid{ grid-template-columns: 1fr 1fr; }
    .l11-triple-grid{ grid-template-columns: 1fr; }
    .l11-featured-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 820px){
    .topnav-desktop{ display:none; }
    .l11-nav-toggle{ display:flex; align-items:center; justify-content:center; }
}