/* GTA6 STREET dense homepage composition — 2026-09-16.
 * Loaded after the recovery-safe homepage bundle so it can reshape the body
 * without touching the public shell, search component, or global navigation.
 */

.gts-home-vnext {
    --hub-bg: #070b11;
    --hub-panel: #0d141d;
    --hub-panel-2: #111a25;
    --hub-line: rgba(255,255,255,.12);
    --hub-line-strong: rgba(255,255,255,.22);
    --hub-text: #f4f2eb;
    --hub-muted: #9eabb9;
    --hub-coral: #ff4f64;
    --hub-cyan: #53d4cf;
    --hub-lime: #c8ff38;
}

/* The old recovery hero was intentionally cinematic. For the real hub it must
 * orient quickly and get out of the way. */
.home-hero {
    min-height: clamp(35rem, 66svh, 44rem);
}

.home-hero__inner {
    gap: clamp(1.5rem, 4vw, 4rem);
    padding-block: clamp(3rem, 7vh, 5rem) clamp(2.3rem, 5vh, 3.8rem);
}

.home-hero h1 {
    max-width: 10ch;
    font-size: clamp(3.6rem, 6.3vw, 6.8rem);
}

.home-hero__deck {
    max-width: 38rem;
}

.home-hero__search {
    padding: 1.2rem;
}

.home-status__item {
    min-height: 4.3rem;
}

.home-ad {
    margin-block: 1rem;
}

.hub-shell {
    width: var(--home-shell);
    margin-inline: auto;
}

.hub-section {
    padding-block: clamp(2.8rem, 5vw, 4.6rem);
    border-bottom: 1px solid var(--hub-line);
}

.hub-section--panel {
    background: #0a1018;
}

.hub-section--deep {
    background: #05090e;
}

.hub-section__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.45rem;
}

.hub-section__head-copy {
    max-width: 52rem;
}

.hub-kicker {
    color: var(--hub-cyan);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hub-section__head h2 {
    margin-top: .35rem;
    color: #fff !important;
    font-family: var(--home-display);
    font-size: clamp(2.45rem, 4.25vw, 4.6rem);
    font-weight: 900;
    line-height: .94;
    text-transform: uppercase;
}

.hub-section__head p:last-child {
    max-width: 46rem;
    margin-top: .45rem;
    color: var(--hub-muted);
    font-size: .93rem;
    line-height: 1.45;
}

.hub-link {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 2.65rem;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border: 1px solid var(--hub-line-strong);
    padding: .6rem .8rem;
    color: #eef2f4;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.hub-link:hover {
    border-color: var(--hub-cyan);
    color: var(--hub-cyan);
}

.hub-link--hot {
    border-color: var(--hub-coral);
    background: var(--hub-coral);
    color: #fff;
}

.hub-link--hot:hover {
    border-color: #fff;
    background: #fff;
    color: #0b1018;
}

.hub-link--lime {
    border-color: var(--hub-lime);
    background: var(--hub-lime);
    color: #081015;
}

/* LATEST */
.hub-latest {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(18rem, 5fr);
    gap: 1px;
    border: 1px solid var(--hub-line);
    background: var(--hub-line);
}

.hub-lead {
    position: relative;
    min-height: 28rem;
    overflow: hidden;
    background: var(--hub-panel);
}

.hub-lead__media,
.hub-lead__shade {
    position: absolute;
    inset: 0;
}

.hub-lead__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hub-lead__shade {
    background: linear-gradient(0deg, rgba(4,7,11,.98) 0%, rgba(4,7,11,.65) 48%, rgba(4,7,11,.05) 88%);
}

.hub-lead__copy {
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    padding: clamp(1.25rem, 2.5vw, 2rem);
}

.hub-meta {
    color: var(--hub-coral);
    font-size: .63rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.hub-lead h3 {
    max-width: 18ch;
    margin-top: .45rem;
    color: #fff !important;
    font-family: var(--home-display);
    font-size: clamp(2.35rem, 3.75vw, 4rem);
    font-weight: 900;
    line-height: .96;
    text-transform: uppercase;
}

.hub-lead__copy > p:not(.hub-meta) {
    max-width: 46rem;
    margin-top: .6rem;
    color: #c4ced8;
    line-height: 1.45;
}

.hub-feed {
    display: flex;
    min-width: 0;
    flex-direction: column;
    background: var(--hub-panel);
}

.hub-feed-row {
    display: grid;
    flex: 1 1 0;
    min-height: 7rem;
    grid-template-columns: 7.5rem minmax(0,1fr) auto;
    align-items: center;
    gap: .85rem;
    border-bottom: 1px solid var(--hub-line);
    padding: .8rem;
}

.hub-feed-row:last-child {
    border-bottom: 0;
}

.hub-feed-row__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #151d27;
}

.hub-feed-row__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hub-feed-row__copy {
    min-width: 0;
}

.hub-feed-row h3 {
    margin-top: .25rem;
    color: #fff !important;
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.18;
}

.hub-feed-row__arrow {
    color: var(--hub-cyan);
    font-size: 1.15rem;
}

/* UNIVERSAL CARD GRIDS */
.hub-card-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: .9rem;
}

.hub-card-grid--3 {
    grid-template-columns: repeat(3, minmax(0,1fr));
}

.hub-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--hub-line);
    background: var(--hub-panel);
}

.hub-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #121a24;
}

.hub-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.hub-card:hover .hub-card__media img {
    transform: scale(1.025);
}

.hub-card__badge {
    position: absolute;
    left: .65rem;
    bottom: .65rem;
    padding: .28rem .42rem;
    background: rgba(5,9,14,.88);
    color: var(--hub-cyan);
    font-size: .56rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.hub-card__copy {
    padding: .85rem .9rem 1rem;
}

.hub-card__copy h3 {
    margin-top: .28rem;
    color: #fff !important;
    font-size: 1.02rem;
    font-weight: 760;
    line-height: 1.2;
}

.hub-card__copy p {
    display: -webkit-box;
    overflow: hidden;
    margin-top: .42rem;
    color: var(--hub-muted);
    font-size: .8rem;
    line-height: 1.4;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hub-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .7rem;
    margin-top: .65rem;
    color: #c4cbd3;
    font-size: .68rem;
}

.hub-card__facts span {
    border-top: 1px solid var(--hub-line);
    padding-top: .35rem;
}

/* TOOLS */
.hub-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 1px;
    border: 1px solid #29323c;
    background: #29323c;
}

.hub-tool {
    display: grid;
    min-height: 10rem;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: start;
    gap: .8rem;
    padding: 1rem;
    background: #0d141c;
}

.hub-tool:hover {
    background: #131d28;
}

.hub-tool__icon {
    display: grid;
    width: 2.65rem;
    height: 2.65rem;
    place-items: center;
    border: 1px solid rgba(83,212,207,.45);
    color: var(--hub-cyan);
}

.hub-tool h3 {
    color: #fff !important;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.15;
}

.hub-tool p {
    display: -webkit-box;
    overflow: hidden;
    margin-top: .35rem;
    color: var(--hub-muted);
    font-size: .76rem;
    line-height: 1.38;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.hub-tool__arrow {
    color: var(--hub-lime);
}

/* MODS / DOWNLOADS */
.hub-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.hub-stack {
    min-width: 0;
}

.hub-stack__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
    border-bottom: 2px solid var(--hub-line-strong);
    padding-bottom: .6rem;
}

.hub-stack__title h3 {
    color: #fff !important;
    font-family: var(--home-display);
    font-size: 2rem;
    font-weight: 900;
    text-transform: uppercase;
}

.hub-stack-row {
    display: grid;
    grid-template-columns: 6.7rem minmax(0,1fr) auto;
    align-items: center;
    gap: .8rem;
    border-bottom: 1px solid var(--hub-line);
    padding-block: .75rem;
}

.hub-stack-row__media {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #141b23;
}

.hub-stack-row__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gts-home-vnext .home-vnext .hub-stack-row h4 {
    margin-top: .2rem;
    color: #f5f7fa !important;
    font-family: 'Barlow', sans-serif;
    font-size: 1.1rem;
    font-weight: 760;
    line-height: 1.2;
}

.gts-home-vnext .hub-stack-row:hover,
.gts-home-vnext .hub-stack-row:focus-visible { background: #14212b; }
.gts-home-vnext .hub-stack-row:focus-visible { outline: 2px solid #53d4cf; outline-offset: 3px; }
.hub-guides-empty { display: flex; align-items: center; gap: 1.5rem; padding: clamp(1.25rem, 3vw, 2.5rem); border: 1px solid var(--hub-line); background: #101820; }
.hub-guides-empty > span { color: #53d4cf; font-size: 3rem; }
.gts-home-vnext .hub-guides-empty h3 { color: #f5f7fa; font-size: clamp(1.5rem, 3vw, 2rem); margin: .5rem 0; }
.hub-guides-empty p:not(.hub-kicker) { color: #b7c1cc; max-width: 65ch; }
.gts-home-vnext .hub-newsletter { padding-block: 1.5rem 2.5rem; }
.gts-home-vnext .hub-newsletter .gts-newsletter > div { padding: 1.5rem; gap: 2rem; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.gts-home-vnext .hub-newsletter .gts-newsletter h2 { font-size: clamp(1.75rem, 2.5vw, 2.5rem) !important; max-width: 26ch; line-height: 1.05; }
.gts-home-vnext .hub-newsletter .gts-newsletter__input { background: #101820; color: #f5f7fa; border: 1px solid #637282; }
@media (max-width: 700px) {
    .gts-home-vnext .hub-newsletter .gts-newsletter > div { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
    .hub-guides-empty { align-items: flex-start; gap: 1rem; }
}

.hub-stack-row > span:last-child {
    color: var(--hub-cyan);
}

/* WEEKLY */
.hub-weekly {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr);
    overflow: hidden;
    border: 1px solid var(--hub-line);
    background: #0d171d;
}

.hub-weekly__main {
    padding: clamp(1.5rem, 3vw, 2.5rem);
}

.hub-weekly__main h3 {
    max-width: 20ch;
    margin-top: .4rem;
    color: #fff !important;
    font-family: var(--home-display);
    font-size: clamp(2.2rem, 3.5vw, 3.8rem);
    font-weight: 900;
    line-height: .96;
    text-transform: uppercase;
}

.hub-weekly__main p {
    max-width: 44rem;
    margin-top: .7rem;
    color: var(--hub-muted);
    line-height: 1.5;
}

.hub-weekly__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: 1.1rem;
}

.hub-weekly__aside {
    display: grid;
    align-content: center;
    gap: .7rem;
    border-left: 1px solid var(--hub-line);
    padding: 1.3rem;
    background: #101e25;
}

.hub-weekly__aside a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--hub-line);
    padding-block: .65rem;
    color: #dbe2e8;
    font-size: .8rem;
    font-weight: 800;
}

/* DATABASE CTA */
.hub-search-cta {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(20rem, 1.2fr);
    align-items: center;
    gap: clamp(1.5rem, 4vw, 4rem);
    padding: clamp(1.5rem, 3vw, 2.5rem);
    border: 1px solid var(--hub-line);
    background: linear-gradient(115deg, #101b25, #071018 70%);
}

.hub-search-cta h2 {
    margin-top: .35rem;
    color: #fff !important;
    font-family: var(--home-display);
    font-size: clamp(2.4rem, 4vw, 4.4rem);
    font-weight: 900;
    line-height: .92;
    text-transform: uppercase;
}

.hub-search-cta p {
    margin-top: .5rem;
    color: var(--hub-muted);
}

.hub-search-cta__box .street-live-search__input {
    min-height: 3.75rem;
    border: 1px solid rgba(255,255,255,.24) !important;
    background: #f5f5f1 !important;
    color: #0a1119 !important;
    font-size: .95rem !important;
    font-weight: 700;
}

/* NEWSLETTER: force readable contrast in this context. */
.hub-newsletter {
    padding-block: 2.4rem 3rem;
}

.hub-newsletter .gts-newsletter {
    border: 1px solid var(--hub-line);
    border-top: 3px solid var(--hub-coral);
    background: #0c1219 !important;
}

.hub-newsletter .gts-newsletter h2 {
    color: #fff !important;
    opacity: 1 !important;
}

.hub-newsletter .gts-newsletter p {
    color: #b7c1cc !important;
}

/* Make cards compact when records have portrait/cutout art. */
.hub-card--contain .hub-card__media {
    background: radial-gradient(circle at 50% 72%, rgba(83,212,207,.09), transparent 45%), #101720;
}

.hub-card--contain .hub-card__media img {
    object-fit: contain;
}

@media (max-width: 1100px) {
    .hub-card-grid {
        grid-template-columns: repeat(3, minmax(0,1fr));
    }

    .hub-tools {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }
}

@media (max-width: 900px) {
    .home-hero {
        min-height: 0;
    }

    .home-hero__inner {
        min-height: 40rem;
    }

    .hub-latest,
    .hub-weekly,
    .hub-search-cta {
        grid-template-columns: 1fr;
    }

    .hub-feed {
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .hub-feed-row {
        grid-template-columns: 6.4rem minmax(0,1fr);
    }

    .hub-feed-row__arrow {
        display: none;
    }

    .hub-weekly__aside {
        border-top: 1px solid var(--hub-line);
        border-left: 0;
    }

    .hub-card-grid,
    .hub-card-grid--3 {
        grid-template-columns: repeat(2, minmax(0,1fr));
    }

    .hub-split {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .gts-home-vnext {
        --home-shell: min(100% - 1rem, 92rem);
    }

    .home-hero__inner {
        min-height: 38rem;
        padding-block: 3.5rem 1rem;
    }

    .home-hero h1 {
        font-size: clamp(3rem, 15vw, 4.8rem);
    }

    .home-hero__deck {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .home-status__item {
        min-height: 3.8rem;
    }

    .hub-section {
        padding-block: 2.5rem;
    }

    .hub-section__head {
        align-items: start;
        flex-direction: column;
        gap: .8rem;
    }

    .hub-section__head h2 {
        font-size: 2.6rem;
    }

    .hub-section__head > .hub-link {
        width: 100%;
    }

    .hub-lead {
        min-height: 23rem;
    }

    .hub-lead h3 {
        font-size: 2.4rem;
    }

    .hub-lead__copy > p:not(.hub-meta) {
        display: none;
    }

    .hub-feed {
        grid-template-columns: 1fr;
    }

    .hub-feed-row {
        min-height: 6.5rem;
        grid-template-columns: 6.2rem minmax(0,1fr);
    }

    .hub-card-grid,
    .hub-card-grid--3 {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: .6rem;
    }

    .hub-card__copy {
        padding: .7rem;
    }

    .hub-card__copy h3 {
        font-size: .9rem;
    }

    .hub-card__copy p,
    .hub-card__facts {
        display: none;
    }

    .hub-tools {
        grid-template-columns: 1fr;
    }

    .hub-tool {
        min-height: 7rem;
    }

    .hub-stack-row {
        grid-template-columns: 5.5rem minmax(0,1fr) auto;
    }

    .hub-weekly__main h3 {
        font-size: 2.45rem;
    }

    .hub-search-cta {
        padding: 1.1rem;
    }
}

@media (max-width: 420px) {
    .hub-card-grid,
    .hub-card-grid--3 {
        grid-template-columns: 1fr;
    }

    .hub-card__media {
        aspect-ratio: 16 / 8.5;
    }
}