/* =====================================================================
   BrightValley Link — mobility.css
   Buttons, editorial cards, feature blocks, stats, quotes, comparison,
   forms, prose. Lifestyle/editorial half of the system.
   ===================================================================== */

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; gap:.55em; padding:.9em 1.5em; border-radius: var(--r-pill); font-family: var(--ff-display); font-weight:600; font-size:.92rem; transition: transform var(--t-fast), box-shadow var(--t-fast), background var(--t-fast), color var(--t-fast); }
.btn svg { width:1.1em; height:1.1em; }
.btn--red { background: var(--red); color:#fff; box-shadow: var(--sh-red); }
.btn--red:hover { background: var(--red-deep); transform: translateY(-2px); }
.btn--motion { background: var(--g-motion); color:#fff; box-shadow: var(--sh-red); }
.btn--motion:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn--steel { background: var(--steel-deep); color:#fff; }
.btn--steel:hover { background:#27619f; transform: translateY(-2px); }
.btn--dark { background: var(--asphalt); color: var(--paper); }
.btn--dark:hover { background:#0e1014; transform: translateY(-2px); }
.btn--line { border:2px solid var(--ink); color: var(--ink); }
.btn--line:hover { background: var(--ink); color: var(--paper); }
.btn--ghost { border:1px solid rgba(255,255,255,.4); color:#fff; }
.btn--ghost:hover { background: rgba(255,255,255,.12); }
.btn--block { width:100%; justify-content:center; }
.go { display:inline-flex; align-items:center; gap:.45em; font-family: var(--ff-display); font-weight:600; font-size:.86rem; color: var(--red); }
.go svg { width:1.1em; transition: transform var(--t-fast); }
.go:hover svg { transform: translateX(5px); }
.on-dark .go { color: var(--yellow); }

/* ---------- editorial entry ---------- */
.post { display:grid; gap:.55rem; }
.post__media { overflow:hidden; aspect-ratio:16/10; border-radius: var(--r-sm); position:relative; }
.post__media img, .post__media svg { width:100%; height:100%; object-fit:cover; transition: transform var(--t); }
.post:hover .post__media img { transform: scale(1.05); }
.post__cat { font-family: var(--ff-display); font-weight:600; font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color: var(--steel-deep); }
.post h3 { transition: color var(--t-fast); }
.post:hover h3 { color: var(--red); }
.post p { font-size:.94rem; }
.post__by { font-family: var(--ff-display); font-size:.78rem; color: var(--muted); }

/* ---------- overlay tile (city profiles) ---------- */
.tile { position:relative; overflow:hidden; min-height:260px; display:flex; align-items:flex-end; color:#fff; isolation:isolate; border-radius: var(--r-md); }
.tile img, .tile svg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition: transform var(--t); }
.tile::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(180deg, rgba(22,24,29,0) 28%, rgba(22,24,29,.88)); }
.tile:hover img { transform: scale(1.07); }
.tile__label { padding:22px; width:100%; }
.tile__label small { font-family: var(--ff-display); font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:.68rem; color: var(--yellow); }
.tile__label h3 { color:#fff; margin-top:.2rem; }

/* ---------- panels ---------- */
.panel { background: var(--white); border:1px solid var(--line); border-radius: var(--r-md); padding: clamp(22px,3vw,38px); }
.panel--motion { background: var(--g-motion); color:#fff; border:0; }
.panel--motion h3,.panel--motion h4 { color:#fff; } .panel--motion p { color: rgba(255,255,255,.88); }
.panel--dark { background: var(--g-night); color: var(--paper); border:0; }
.panel--dark h3,.panel--dark h4 { color:#fff; } .panel--dark p { color: rgba(243,245,248,.74); }
.panel--steel { background: linear-gradient(150deg,#2f6fb5,#5c9ce0); color:#fff; border:0; }
.panel--steel h3,.panel--steel h4 { color:#fff; } .panel--steel p { color: rgba(255,255,255,.9); }
.panel--lift { box-shadow: var(--sh-1); }

/* ---------- stat ---------- */
.metric b { font-family: var(--ff-display); font-weight:700; font-size: clamp(2.3rem,5vw,3.8rem); line-height:.9; color: var(--ink); letter-spacing:-.03em; display:block; font-variant-numeric: tabular-nums; }
.on-dark .metric b, .surface-asphalt .metric b, .surface-steel .metric b { color:#fff; }
.metric b.red { color: var(--red); } .metric b.steel { color: var(--steel); } .metric b.yellow { color: var(--yellow); }
.metric span { font-family: var(--ff-display); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color: var(--muted); margin-top:.5rem; display:block; }
.on-dark .metric span, .surface-asphalt .metric span, .surface-steel .metric span { color: rgba(243,245,248,.66); }

/* ---------- icon feature ---------- */
.feat { display:flex; flex-direction:column; gap:.55rem; }
.feat__ic { width:54px; height:54px; border-radius: var(--r-md); display:grid; place-items:center; }
.feat__ic svg { width:26px; }
.ic-red { background: rgba(255,59,48,.12); color: var(--red); }
.ic-yellow { background: rgba(247,181,0,.2); color: var(--yellow-deep); }
.ic-steel { background: rgba(92,156,224,.16); color: var(--steel-deep); }
.ic-dark { background: rgba(27,30,36,.08); color: var(--ink); }
.on-dark .feat__ic { background: rgba(255,255,255,.1); color:#fff; }

/* ---------- quote ---------- */
.quote { font-family: var(--ff-display); font-weight:700; font-size: clamp(1.6rem,4vw,2.8rem); line-height:1.12; letter-spacing:-.02em; color: var(--ink); }
.quote span { color: var(--red); }
.on-dark .quote { color:#fff; } .on-dark .quote span { color: var(--yellow); }

/* ---------- checklist ---------- */
.checks { display:grid; gap:.8rem; }
.checks li { display:flex; gap:.8rem; align-items:flex-start; color:#3a4049; }
.checks li svg { width:22px; flex:none; color: var(--red); margin-top:.15em; }
.checks--boxed li { background: var(--white); border:1px solid var(--line); border-radius: var(--r-sm); padding:.9rem 1rem; }
.on-dark .checks li { color: rgba(243,245,248,.84); }
.on-dark .checks li svg { color: var(--yellow); }

/* ---------- comparison ---------- */
.versus { display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.versus__col { background: var(--white); border:1px solid var(--line); border-radius: var(--r-md); padding: clamp(20px,3vw,32px); }
.versus__col--pick { border-color: var(--red); box-shadow: var(--sh-red); }
@media (max-width:660px){ .versus { grid-template-columns:1fr; } }

/* ---------- forms ---------- */
.field { display:flex; flex-direction:column; gap:.45rem; }
.field label { font-family: var(--ff-display); font-weight:600; font-size:.82rem; letter-spacing:.03em; color: var(--ink); }
.field input, .field textarea, .field select { padding:.9em 1.1em; border-radius: var(--r-sm); border:1.5px solid var(--line-strong); background: var(--white); font:inherit; color: var(--ink); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--steel); box-shadow: var(--ring); outline:none; }
.field textarea { min-height:160px; resize:vertical; }
.formcard { background: var(--white); border:1px solid var(--line); border-radius: var(--r-md); padding: clamp(24px,4vw,44px); }
.form-note { font-size:.84rem; color: var(--muted); }
.form-msg { display:none; margin-top:1rem; padding:.9em 1.1em; border-radius: var(--r-sm); font-size:.9rem; }
.form-msg.show { display:block; }
.form-msg--ok { background: rgba(92,156,224,.18); color: var(--steel-deep); }
.form-msg--err { background: rgba(255,59,48,.14); color: var(--red-deep); }

/* ---------- prose (legal/articles) ---------- */
.prose { max-width: 72ch; }
.prose h2 { font-size:1.6rem; margin-top:2.6rem; }
.prose h3 { font-size:1.2rem; margin-top:1.6rem; }
.prose p, .prose li { color:#3a4049; }
.prose ul { margin:1rem 0; display:grid; gap:.5rem; }
.prose ul li { position:relative; padding-left:1.5rem; }
.prose ul li::before { content:""; position:absolute; left:0; top:.6em; width:9px; height:9px; border-radius:50%; border:2px solid var(--red); }
.prose a { color: var(--steel-deep); text-decoration:underline; text-underline-offset:3px; }
.prose hr { border:0; height:1px; background: var(--line); margin:2.2rem 0; }
.toc { background: var(--white); border:1px solid var(--line); border-radius: var(--r-md); padding:22px 24px; position:sticky; top:96px; }
.toc h4 { margin-bottom:.6rem; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color: var(--steel-deep); }
.toc a { display:flex; align-items:center; gap:.5em; padding:.32rem 0; font-size:.92rem; color: var(--ink); }
.toc a::before { content:""; width:7px; height:7px; border-radius:50%; background: var(--concrete); }
.toc a:hover { color: var(--red); }