/*
 Theme Name: RG Roblox Guides Pro v3
 Version: 3.0.0
 Description: Roblox-style guides with fixed logo, view-all buttons, and hover zoom + shadow. New Guides tall grid (4-up), Popular Guides wide grid (3-up).
 Author: RG
*/
:root{
  --bg:#f6f7fb; --surface:#ffffff; --text:#0f172a;
  --muted:#6b7280; --border:#e5e7eb; --brand:#2563eb;
  --radius:14px; --gap:18px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;overflow-x:hidden}
a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}
img{max-width:100%;height:auto;display:block}

/* Top bar */
#topbar{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--border)}
#topbar .bar{max-width:1220px;margin:0 auto;height:64px;padding:0 16px;display:flex;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;white-space:nowrap}
.brand .logo-dot{width:20px;height:20px;border-radius:4px;background:var(--brand)}
.brand img.custom-logo{max-height:28px;width:auto;display:block}
.topnav ul{display:flex;gap:16px;margin:0;padding:0;list-style:none}
.search{flex:1}
.search input{width:100%;padding:10px 14px;border:1px solid var(--border);border-radius:999px}

/* Layout */
.container{max-width:1220px;margin:0 auto;padding:0 16px}
.mainwrap{display:grid;grid-template-columns:260px 1fr;gap:20px;margin-top:18px}
@media(max-width:1024px){.mainwrap{grid-template-columns:1fr}#leftnav{display:none}}

/* Left rail */
#leftnav{position:sticky;top:84px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px}
.rail-list{display:flex;flex-direction:column;gap:6px;margin:0 0 12px}
.rail-list a{padding:10px;border-radius:8px}
.rail-list a:hover{background:#f2f5fb;text-decoration:none}
.upgrade{background:#fff;border:1px solid var(--border);border-radius:12px;padding:12px}
.upgrade .btn{display:inline-block;background:#111;color:#fff;padding:8px 12px;border-radius:8px;text-decoration:none}

/* Section headers */
.section{margin-bottom:30px}
.section .head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:10px;gap:12px}
.section h2{margin:0;font-size:22px}
.section .sub{margin:0;color:var(--muted);font-size:12px}
.view-all{font-size:13px;padding:8px 12px;border:1px solid var(--border);border-radius:8px;background:#fff}
.view-all:hover{background:#f8fafc;text-decoration:none}

/* Cards - shared */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 16px rgba(0,0,0,.06);transition:transform .18s ease, box-shadow .18s ease}
.card:hover{transform:translateY(-2px);box-shadow:0 18px 26px rgba(0,0,0,.18)}
.thumb{overflow:hidden;background:#eef2f7}
.thumb img{width:100%;height:100%;object-fit:cover;transition:transform .25s ease}
.card:hover .thumb img{transform:scale(1.05)}
.body{padding:12px 12px 14px;display:flex;flex-direction:column;gap:6px}
.title{font-weight:800;line-height:1.25;display:block}
.excerpt{color:var(--muted);font-size:14px;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;gap:8px;flex-wrap:wrap;font-size:12px}
.badge{background:#f2f4f7;border-radius:999px;padding:3px 8px}

/* New Guides grid — 4-up, taller cards */
.new-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
@media(max-width:1180px){.new-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.new-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.new-grid{grid-template-columns:1fr}}
.new-card .thumb{height:210px}   /* tall visual */
.new-card .title{font-size:16px}
.new-card .body{min-height:120px}

/* Popular Guides grid — 3-up, wider cards with shorter thumb */
.pop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
@media(max-width:1180px){.pop-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pop-grid{grid-template-columns:1fr}}
.pop-card .thumb{height:170px}
.pop-card .title{font-size:16px}
.pop-card .body{min-height:110px}

/* Single + index */
.content{max-width:780px;margin:24px auto;background:#fff;border:1px solid var(--border);border-radius:12px;padding:22px}
.footer{margin:36px 0 18px;color:#6b7280;font-size:12px;text-align:center}