/* ============================================================
   ProtonBusMods — Landing Pages v3 (gold-standard SEO)
   Shared stylesheet for the 5 faceted landing-page types.
   Built on the canonical design tokens (colors_and_type.css).
   Evolutions vs the old category template:
   - Typographic hero (no LCP image) → faster Core Web Vitals
   - Single consistent stat strip (fixes number mismatches)
   - Trimmed editorial (1 unique paragraph, not 5 template essays)
   - Stronger internal-linking facet hub (real <a href>)
   ============================================================ */

:root{
  --bg-0:#07091a; --bg-1:#0d1126; --bg-2:#141a35; --bg-3:#1c2447; --bg-4:#232c55;
  --line:rgba(255,255,255,.06); --line-2:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.16);
  --t-1:#f3f5fb; --t-2:#b6bfdb; --t-3:#7c86a8; --t-4:#565f80;
  --blue:#3b82f6; --blue-2:#60a5fa; --blue-deep:#1d4ed8; --purple:#8b5cf6;
  --grad:linear-gradient(135deg,#60a5fa,#8b5cf6);
  --good:#22c55e; --hot:#f97316; --warn:#f59e0b; --gold:#fbbf24;
  --r-1:6px; --r-2:10px; --r-3:14px; --r-4:20px;
  --sans:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{background:var(--bg-0);color:var(--t-1);font-family:var(--sans);font-size:14px;line-height:1.5;letter-spacing:-.005em;-webkit-font-smoothing:antialiased;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;border:0;background:transparent;color:inherit;padding:0;}
/* PRO-350: padding-left/right only (NOT shorthand) — the global outer <main> in
   includes/header.php sets vertical padding via Tailwind `py-8`, which a `padding`
   shorthand here would silently reset to 0 and collapse the page against header/footer. */
.container{max-width:1180px;margin:0 auto;padding-left:32px;padding-right:32px;}
.mono{font-family:var(--mono);}
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.125em;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

/* ---- flags (CSS-only, no img request) ---- */
.flag{width:14px;height:10px;border-radius:2px;display:inline-block;box-shadow:inset 0 0 0 1px rgba(0,0,0,.25);flex-shrink:0;}
.fl-de{background:linear-gradient(180deg,#000 33%,#dd0000 33%,#dd0000 66%,#ffce00 66%);}
.fl-br{background:linear-gradient(0deg,#00923f 0,#00923f 25%,#ffdf00 25%,#ffdf00 75%,#00923f 75%);}
.fl-fr{background:linear-gradient(90deg,#002395 33%,#fff 33%,#fff 66%,#ed2939 66%);}
.fl-pl{background:linear-gradient(180deg,#fff 50%,#dc143c 50%);}
.fl-tr{background:#e30a17;}
.fl-pt{background:linear-gradient(90deg,#006600 40%,#ff0000 40%);}
.fl-it{background:linear-gradient(90deg,#009246 33%,#fff 33%,#fff 66%,#ce2b37 66%);}

/* ============================================================
   GLOBAL HEADER (shared)
   ============================================================ */
.util{border-bottom:1px solid var(--line);background:var(--bg-1);}
.util-in{display:flex;align-items:center;justify-content:space-between;height:36px;font-size:12px;color:var(--t-3);}
.util a{display:inline-flex;align-items:center;gap:6px;color:var(--t-3);}
.util-left{display:flex;gap:18px;align-items:center;}
.util-right{display:flex;gap:14px;align-items:center;}
.header{position:sticky;top:0;z-index:50;border-bottom:1px solid var(--line);background:rgba(7,9,26,.85);backdrop-filter:blur(12px);}
.header-in{display:flex;align-items:center;gap:24px;height:64px;}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:17px;letter-spacing:-.02em;flex-shrink:0;}
.logo .mark{width:32px;height:32px;border-radius:9px;background:var(--grad);display:flex;align-items:center;justify-content:center;font-size:16px;color:#fff;box-shadow:0 4px 14px -2px rgba(96,165,250,.45);}
.logo .nm span{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;}
.search{flex:1;max-width:520px;display:flex;align-items:center;gap:10px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:12px;padding:0 14px;height:42px;}
.search input{flex:1;min-width:0;background:transparent;border:0;outline:0;color:var(--t-1);font-family:inherit;font-size:14px;font-weight:500;}
.search input::placeholder{color:var(--t-3);}
.search .kbd{font-family:var(--mono);font-size:10.5px;color:var(--t-3);border:1px solid var(--line);padding:2px 6px;border-radius:4px;background:var(--bg-3);}
.nav{display:flex;align-items:center;gap:4px;margin-left:auto;}
.nav a{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;color:var(--t-2);font-size:13.5px;font-weight:600;}
.nav a:hover,.nav a.active{background:var(--bg-2);color:var(--t-1);}
.nav a .ct{font-family:var(--mono);font-size:10px;color:var(--t-3);background:var(--bg-3);padding:1px 6px;border-radius:4px;}

/* ============================================================
   BREADCRUMB
   ============================================================ */
.crumb{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--t-3);padding:22px 0 0;flex-wrap:wrap;}
.crumb a:hover{color:var(--t-1);}
.crumb .sep{color:var(--t-4);}
.crumb .cur{color:var(--t-2);}

/* ============================================================
   TYPOGRAPHIC HERO (no image — fast LCP)
   ============================================================ */
.lp-hero{position:relative;padding:30px 0 6px;}
.lp-hero::before{content:'';position:absolute;left:-40px;top:-10px;width:380px;height:200px;
  background:radial-gradient(60% 80% at 30% 30%,rgba(96,165,250,.16),transparent 70%);pointer-events:none;}
.lp-eyebrow{position:relative;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--blue-2);text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;}
.lp-eyebrow .sep{color:var(--t-4);}
.lp-hero h1{position:relative;font-size:44px;font-weight:800;letter-spacing:-.035em;line-height:1.03;margin:0 0 14px;max-width:780px;}
.lp-deck{position:relative;font-size:16px;color:var(--t-2);line-height:1.55;max-width:620px;margin:0 0 22px;}
.lp-deck strong{color:var(--t-1);}
.lp-cta{position:relative;display:flex;gap:10px;flex-wrap:wrap;}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:12px;font-weight:700;font-size:14px;}
.btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 18px -4px rgba(59,130,246,.5);}
.btn-primary:hover{background:var(--blue-deep);}
.btn-ghost{background:var(--bg-2);color:var(--t-1);border:1px solid var(--line-2);}
.btn-ghost:hover{background:var(--bg-3);}

/* ---- scope bar (active facets — for combo pages) ---- */
.scope{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:18px 0 0;}
.scope-lbl{font-family:var(--mono);font-size:10.5px;color:var(--t-3);text-transform:uppercase;letter-spacing:.06em;}
.scope-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 8px 6px 12px;background:rgba(59,130,246,.10);border:1px solid rgba(96,165,250,.32);border-radius:999px;font-size:12.5px;color:var(--t-1);font-weight:600;}
.scope-pill .x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;background:var(--bg-3);color:var(--t-3);font-size:11px;}
.scope-pill .x:hover{color:var(--t-1);background:var(--bg-4);}

/* ============================================================
   STAT STRIP (one source of truth — consistent numbers)
   ============================================================ */
.statbar{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:24px 0 8px;}
.stat{background:var(--bg-1);padding:16px 18px;}
.stat .sl{font-family:var(--mono);font-size:10px;color:var(--t-3);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;}
.stat .sv{font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1;}
.stat .sv.mono{font-family:var(--mono);}
.stat .sv .u{font-size:12px;color:var(--t-3);font-weight:600;margin-left:3px;}

/* ============================================================
   SECTION + FACET HUB (internal linking)
   ============================================================ */
.section{margin:30px 0;}
.eyebrow{font-family:var(--mono);font-size:11px;color:var(--t-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px;display:flex;align-items:center;gap:8px;}
.eyebrow .ct{color:var(--t-4);font-weight:500;}
.chips{display:flex;gap:7px;flex-wrap:wrap;}
.chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:var(--bg-2);border:1px solid var(--line);font-size:12.5px;color:var(--t-2);font-weight:600;white-space:nowrap;transition:background .12s,border-color .12s,color .12s;}
.chip:hover{background:var(--bg-3);color:var(--t-1);border-color:var(--line-strong);}
.chip .ct{font-family:var(--mono);font-size:10.5px;color:var(--t-4);font-weight:500;}
.chip.active{background:rgba(59,130,246,.12);border-color:rgba(96,165,250,.35);color:var(--t-1);}

.facet-hub{background:linear-gradient(180deg,rgba(59,130,246,.05),rgba(139,92,246,.035));border:1px solid var(--line);border-radius:16px;padding:26px 28px;margin:30px 0;}
.facet-hub h2{font-size:20px;font-weight:800;letter-spacing:-.025em;margin:0 0 4px;}
.facet-hub .hub-sub{font-size:13px;color:var(--t-3);margin:0 0 22px;}
.facet-row{margin-bottom:20px;}
.facet-row:last-child{margin-bottom:0;}
.facet-row h3{font-size:13.5px;font-weight:700;color:var(--t-2);margin:0 0 11px;display:flex;align-items:baseline;gap:7px;}
.facet-row h3 .ct{font-family:var(--mono);font-size:11.5px;color:var(--t-4);font-weight:500;}

/* ============================================================
   EDITORIAL (trimmed — 1 unique paragraph + data, not template essays)
   ============================================================ */
.editorial{background:var(--bg-1);border:1px solid var(--line);border-radius:14px;padding:24px 26px;margin:30px 0;}
.editorial h2{font-size:18px;font-weight:800;letter-spacing:-.02em;margin:0 0 12px;}
.editorial p{font-size:14.5px;color:var(--t-2);line-height:1.68;margin:0 0 14px;}
.editorial p:last-child{margin-bottom:0;}
.editorial p strong{color:var(--t-1);}
.editorial .highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px;padding-top:18px;border-top:1px solid var(--line);}
.hl .hv{font-family:var(--mono);font-size:17px;font-weight:700;color:var(--t-1);}
.hl .hk{font-size:12px;color:var(--t-3);margin-top:3px;line-height:1.4;}

/* ============================================================
   TWO LISTS — top downloads / recently added
   ============================================================ */
.lists{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:30px 0;}
.listcard h4{font-family:var(--mono);font-size:10.5px;color:var(--t-3);text-transform:uppercase;letter-spacing:.06em;margin:0 0 6px;display:flex;align-items:center;gap:7px;}
.lrow{display:flex;gap:12px;align-items:center;padding:11px 0;border-top:1px solid var(--line);}
.lrow .rank{font-family:var(--mono);font-size:12px;font-weight:700;color:var(--t-4);width:16px;flex-shrink:0;text-align:center;}
.lrow .lthumb{width:54px;aspect-ratio:16/11;border-radius:7px;overflow:hidden;flex-shrink:0;}
.lrow .lbody{min-width:0;}
.lrow .ltitle{font-size:12.5px;font-weight:600;color:var(--blue-2);line-height:1.32;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.lrow:hover .ltitle{color:#93c5fd;}
.lrow .lmeta{font-size:10.5px;color:var(--t-3);font-family:var(--mono);margin-top:3px;}

/* ============================================================
   RESULTS GRID
   ============================================================ */
.results-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:34px 0 18px;flex-wrap:wrap;}
.results-head h2{font-size:24px;font-weight:800;letter-spacing:-.025em;margin:0;display:flex;align-items:center;gap:11px;}
.results-head .cnt{font-size:13px;color:var(--t-3);font-weight:500;font-family:var(--mono);}
.sortpill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;font-size:12.5px;color:var(--t-2);font-weight:600;}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
.mod{background:var(--bg-2);border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .15s,border-color .15s,box-shadow .15s;}
.mod:hover{transform:translateY(-2px);border-color:var(--line-strong);box-shadow:0 18px 40px -12px rgba(0,0,0,.6);}
.mthumb{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--bg-3);}
.mbadge{position:absolute;top:8px;right:8px;font-family:var(--mono);font-size:9px;font-weight:700;text-transform:uppercase;background:rgba(7,9,26,.78);border:1px solid var(--line-2);padding:3px 7px;border-radius:5px;color:var(--t-2);}
.mtag{position:absolute;top:8px;left:8px;font-family:var(--mono);font-size:9px;font-weight:700;text-transform:uppercase;padding:3px 7px;border-radius:5px;}
.mtag.new{background:rgba(34,197,94,.16);border:1px solid rgba(34,197,94,.4);color:#86efac;}
.mtag.hot{background:rgba(249,115,22,.16);border:1px solid rgba(249,115,22,.4);color:#fdba74;}
.mbody{padding:12px 14px 14px;}
.mtitle{font-size:13px;font-weight:700;line-height:1.32;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:34px;}
.mmeta{font-size:11px;color:var(--t-3);margin-top:8px;display:flex;align-items:center;gap:7px;}
.mmeta .dl{font-family:var(--mono);color:var(--t-2);font-weight:600;}
.mmeta .by{color:var(--t-4);}
.pagination{display:flex;gap:6px;justify-content:center;align-items:center;padding:30px 0 10px;}
.pagination span,.pagination a{min-width:36px;height:36px;display:flex;align-items:center;justify-content:center;padding:0 9px;font-family:var(--mono);font-size:13px;font-weight:700;background:var(--bg-2);border:1px solid var(--line);border-radius:9px;color:var(--t-2);}
.pagination a:hover{background:var(--bg-3);color:var(--t-1);}
.pagination .cur{background:var(--blue);color:#fff;border-color:transparent;}

/* ---- bus art placeholder (CSS-only) — used by mockups; prod renders real <img> ---- */
.bus{width:100%;height:100%;position:relative;overflow:hidden;background:linear-gradient(180deg,#3a4a6a 0,#2c3e5c 55%,#1a2336 55%);}
.bus::before{content:'';position:absolute;left:8%;right:8%;bottom:18%;height:48%;background:#2563eb;border-radius:6px 12px 4px 4px;box-shadow:inset 0 -8px 0 rgba(0,0,0,.18),inset 0 2px 0 rgba(255,255,255,.15);}
.bus::after{content:'';position:absolute;left:12%;right:12%;bottom:44%;height:14%;border-radius:2px;background:repeating-linear-gradient(90deg,#1a2638 0,#1a2638 7%,transparent 7%,transparent 11%);}
.bus.r::before{background:#dc2626;} .bus.y::before{background:#eab308;} .bus.w::before{background:#e7e7e7;} .bus.g::before{background:#16a34a;}

/* ---- real <img> inside mthumb / lthumb (prod cards) ---- */
.mthumb img,.lthumb img{width:100%;height:100%;object-fit:cover;display:block;}
.mthumb a,.lthumb a,.mthumb a img,.lthumb a img{display:block;width:100%;height:100%;}
.mod > a{display:block;color:inherit;}
.mod-link{color:inherit;text-decoration:none;display:block;}
.mod .mtitle{color:var(--t-1);}
.mod a:hover .mtitle{color:var(--blue-2);}
.lrow{text-decoration:none;}

/* ============================================================
   FAQ
   ============================================================ */
.card{background:var(--bg-1);border:1px solid var(--line);border-radius:14px;padding:22px 26px;margin:30px 0;}
.card h2{font-size:18px;font-weight:800;letter-spacing:-.02em;margin:0 0 6px;}
.faq details{border-top:1px solid var(--line);}
.faq details:first-of-type{border-top:0;}
.faq summary{list-style:none;cursor:pointer;padding:15px 0;font-size:14.5px;font-weight:700;display:flex;gap:10px;align-items:center;color:var(--t-1);}
.faq summary::-webkit-details-marker{display:none;}
.faq summary .chev{color:var(--t-3);transition:transform .15s;flex-shrink:0;}
.faq details[open] summary .chev{transform:rotate(90deg);}
.faq .ans{font-size:13.5px;color:var(--t-2);line-height:1.65;padding:0 0 16px 26px;}

/* ============================================================
   FOOTER (shared)
   ============================================================ */
.footer{background:var(--bg-1);border-top:1px solid var(--line);padding:48px 0 24px;margin-top:36px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:32px;}
.footer h4{font-family:var(--mono);font-size:11px;color:var(--t-3);text-transform:uppercase;letter-spacing:.08em;margin:0 0 14px;}
.footer a{display:block;font-size:13.5px;color:var(--t-2);padding:5px 0;}
.footer a:hover{color:var(--t-1);}
.footer .about p{font-size:13px;color:var(--t-3);line-height:1.55;margin:0 0 16px;max-width:320px;}
.footer .langs{display:flex;flex-wrap:wrap;gap:5px;}
.footer .langs .flag{width:22px;height:15px;}
.footer-bottom{padding-top:20px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:12px;color:var(--t-4);font-family:var(--mono);gap:12px;flex-wrap:wrap;}

@media(max-width:920px){
  .container{padding-left:18px;padding-right:18px;}
  .statbar{grid-template-columns:1fr 1fr;}
  .lists{grid-template-columns:1fr;gap:18px;}
  .grid4{grid-template-columns:1fr 1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;gap:28px;}
  .lp-hero h1{font-size:32px;}
  .editorial .highlights{grid-template-columns:1fr;}
  .search{display:none;}
}
@media(max-width:560px){
  .statbar{grid-template-columns:1fr 1fr;}
  .grid4{grid-template-columns:1fr;}
}