/* ============================================================
   MyTrafficBuzz — Layout

   The page container, the main/sidebar grid, and section rhythm.
   Structure only — no component styling.

   Part of the split of the former single style.css (20-Aug-2026).
   Load order matters: see the <link> block in any page head, and
   keep this file in that same position when adding rules.
   ============================================================ */

/* ---------- page container ---------- */
:focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:4px}
.container{max-width:1280px;margin:0 auto;padding:0 24px}

/* ---------- page scaffold ---------- */
.page-shell{padding:40px 0 72px}
.page-shell__grid{display:grid;grid-template-columns:1fr 340px;gap:44px;align-items:start}
.page-shell__main{min-width:0}
.sidebar{position:sticky;top:96px}
.sidebar__box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px;margin-bottom:22px;box-shadow:var(--sh)}
.sidebar__box h4{font-size:16px;color:var(--pri);margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--line);position:relative}
.sidebar__box h4::after{content:'';position:absolute;bottom:-1px;left:0;width:32px;height:8px;background:var(--ticks);background-size:6px 40%,6px 70%,6px 100%;background-position:0 100%,9px 100%,18px 100%}
.sidebar__links{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px}
.sidebar__links a{display:flex;align-items:center;gap:12px;padding:13px 15px;font-size:14px;font-weight:600;color:var(--pri);background:var(--card);border:1px solid var(--line);border-radius:11px;transition:var(--t)}
.sidebar__links a:hover{transform:translateY(-2px);box-shadow:var(--sh);border-color:rgba(226,58,78,.55);color:var(--acc)}
.sidebar__posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px}
.sidebar__posts a{display:block;padding:13px 15px;background:var(--card);border:1px solid var(--line);border-radius:11px;font-size:13.5px;color:var(--pri);line-height:1.5;font-weight:600;transition:var(--t)}
.sidebar__posts a:last-child{border:1px solid var(--line)}
.sidebar__posts a:hover{color:var(--acc);border-color:rgba(226,58,78,.55);transform:translateY(-2px);box-shadow:var(--sh)}
.sidebar__date{display:block;font-size:10.5px;color:var(--gold);margin-bottom:3px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-family:'Outfit',sans-serif}
.sidebar__tags{display:flex;flex-wrap:wrap;gap:6px}
.sidebar__tags a{font-size:12px;padding:5px 12px;border:1px solid var(--line);border-radius:9px;color:var(--txtl);transition:var(--t)}
.sidebar__tags a:hover{border-color:var(--acc);color:var(--acc);background:rgba(226,58,78,.06)}
.sidebar__trend-list{counter-reset:trend;display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.sidebar__trending .sidebar__trend-list a{display:flex;align-items:center;gap:10px;padding:11px 14px;font-size:13.5px;font-weight:500;color:var(--txt);background:var(--card);border:1px solid var(--line);border-radius:11px;transition:var(--t)}
.sidebar__trend-list a::before{counter-increment:trend;content:counter(trend,decimal-leading-zero);font-family:'Outfit',sans-serif;font-weight:800;font-size:11.5px;color:var(--gold);flex-shrink:0;line-height:1}
.sidebar__trend-list a:last-child{border:1px solid var(--line)}
.sidebar__trend-list a:hover{color:var(--acc);border-color:rgba(226,58,78,.55);transform:translateY(-2px);box-shadow:var(--sh)}
.sidebar__cta{background:var(--aur),var(--g1);color:var(--wh);text-align:center;border-radius:var(--r);border:none;position:relative;overflow:hidden}
.sidebar__cta h4{color:#fff;border-color:rgba(255,255,255,.14)}
.sidebar__cta p{font-size:14px;color:rgba(255,255,255,.8);margin-bottom:16px}
.sidebar__cta .btn{display:inline-flex}

/* ---------- sections ---------- */
.section{padding:92px 0}
.section-dark{background:var(--lt)}
.section-heading{text-align:center;max-width:740px;margin:0 auto 54px}
.section-heading h2{font-size:clamp(30px,4.2vw,46px);color:var(--pri);margin-bottom:12px;font-weight:800;letter-spacing:-.028em;line-height:1.1}
.section-heading .section-heading__rule{width:32px;height:16px;background:var(--ticks);margin:16px auto 14px;border-radius:0}
.section-heading p{color:var(--txtl);font-size:17px}