/* FiveM development preview, scoped to the new sections and navigation item. */
.main-nav .nav-badge {
    display: inline-block;
    margin-inline-start: .25rem;
    padding: .15rem .35rem;
    border: 1px solid #755436;
    border-radius: 3px;
    background: #332518;
    color: #f4c58d;
    font: 700 .6rem/1.1 var(--font-body, sans-serif);
    letter-spacing: .08em;
}

.wall-fivem-menu-item > a { white-space: nowrap; }
.wall-fivem-page [id] { scroll-margin-top: 95px; }
.wall-fivem-hero { background: radial-gradient(ellipse at 85% 0, #44232a 0%, transparent 62%), #101112; }
.wall-fivem-hero h1 { font-size: clamp(2.4rem, 5.4vw, 5.1rem); }
.wall-fivem-hero h1 span { color: #ec9a73; }
.wall-fivem-hero .wall-hero-kicker { flex-wrap: wrap; }

.wall-fivem-brief {
    min-width: 0;
    overflow: hidden;
    border: 1px solid #5b4240;
    border-radius: 5px;
    background: #211b1d;
    box-shadow: 0 18px 52px #0005;
}
.wall-fivem-brief .wall-board-top { flex-wrap: wrap; align-items: center; }
.wall-fivem-skyline { aspect-ratio: 40 / 21; background: #3f282e url('../images/fivem-city-preview.svg') center / cover no-repeat; }
.wall-fivem-brief-copy { padding: 1.3rem 1.5rem; }
.wall-fivem-brief-copy strong { display: block; margin: .25rem 0; color: #f2d3bf; font-size: 1.35rem; }
.wall-fivem-brief-copy p { margin: 0; color: #c8bec0; }

.wall-fivem-jump { border-bottom: 1px solid #352f34; background: #1b181d; }
.wall-fivem-jump .container { display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; padding-block: .8rem; }
.wall-fivem-jump a { padding: .45rem 0; color: #eed3bf; font-size: .9rem; font-weight: 700; }
.wall-fivem-jump a:hover { text-decoration: underline; }
.wall-fivem-page a:focus-visible, .wall-fivem-menu-item a:focus-visible { outline: 3px solid #f4b78c; outline-offset: 4px; }

.wall-fivem-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-block: 1.5rem 0; }
.wall-fivem-pillars { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.wall-fivem-city-life { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wall-fivem-card {
    min-width: 0;
    padding: clamp(1.1rem, 2.4vw, 1.6rem);
    border: 1px solid #473c40;
    border-top: 2px solid #995d50;
    border-radius: 4px;
    background: #201c20;
}
.wall-fivem-card h3 { margin: .45rem 0 .55rem; color: #f1e8e0; font-size: 1.35rem; }
.wall-fivem-card p { margin: 0; color: #c9c2c4; line-height: 1.7; }
.wall-fivem-card .wall-eyebrow { color: #e3ad8a; }
.wall-fivem-roadmap { list-style: none; padding: 0; }
.wall-fivem-split { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: center; }
.wall-fivem-steps { padding: 1.4rem 1.5rem 1.4rem 2.8rem; margin: 0; border: 1px solid #473c40; background: #201c20; }
.wall-fivem-steps li { padding: .35rem 0; color: #e6dbd5; }
.wall-fivem-steps li::marker { color: #eca883; font-weight: 700; }

.wall-fivem-spotlight { padding-block: clamp(1.5rem, 4vw, 3rem); }
.wall-fivem-banner {
    border: 1px solid #624740;
    border-left: 3px solid #ca7a62;
    border-radius: 5px;
    background: linear-gradient(90deg, #20191c 42%, #20191c40), url('../images/fivem-city-preview.svg') right center / auto 115% no-repeat, #20191c;
}
.wall-fivem-banner-copy { max-width: 46rem; padding: clamp(1.25rem, 4vw, 3rem); }
.wall-fivem-banner-copy p { color: #e1d4d0; max-width: 43ch; }
.wall-fivem-banner h2 { margin-block: .45rem .6rem; }
.wall-fivem-directory, .wall-fivem-faq { margin-block: 2rem; }
.wall-fivem-directory-card { margin-top: .7rem; border-left: 3px solid #ca7a62; }
.wall-fivem-directory-card h2 { margin-block: .35rem; }
.wall-fivem-update-link { display: inline-block; margin-top: .9rem; }

@media (max-width: 1000px) {
    .wall-fivem-pillars, .wall-fivem-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
    .wall-fivem-grid, .wall-fivem-split { grid-template-columns: minmax(0, 1fr); }
    .wall-fivem-hero h1 { font-size: clamp(2.35rem, 10vw, 4.2rem); }
    .wall-fivem-banner { background-image: linear-gradient(90deg, #20191cf5, #20191cc9), url('../images/fivem-city-preview.svg'); }
}