/* GTA6 STREET — Discover Pro
   Page-specific discovery surface. Real content stays source-driven; this file
   only changes presentation and interaction. */

.discover-pro-page {
    --discover-bg: #070a0e;
    --discover-panel: #0b1118;
    --discover-panel-2: #101821;
    --discover-line: rgba(255,255,255,.1);
    --discover-line-strong: rgba(255,255,255,.18);
    --discover-text: #f5f4ef;
    --discover-muted: #8997a4;
    --discover-cyan: #48ded8;
    --discover-pink: #ff4f68;
    --discover-orange: #ff9b5e;
    background: var(--discover-bg);
}

.discover-pro-page [x-cloak] { display: none !important; }

.discover-pro {
    width: min(1540px, calc(100% - 42px));
    margin-inline: auto;
    padding: 18px 0 88px;
}

.discover-pro-hero {
    position: relative;
    overflow: hidden;
    min-height: 360px;
    margin-bottom: 14px;
    border: 1px solid var(--discover-line);
    border-bottom: 2px solid var(--discover-pink);
    background:
        radial-gradient(circle at 82% 18%, rgba(72,222,216,.15), transparent 26%),
        radial-gradient(circle at 74% 92%, rgba(255,79,104,.12), transparent 34%),
        #0a1016;
}

.discover-pro-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
    background-size: 48px 48px;
    mask-image: linear-gradient(90deg, transparent, #000 45%, #000);
}

.discover-pro-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 410px;
    gap: clamp(34px, 5vw, 90px);
    align-items: end;
    min-height: 360px;
    padding: clamp(38px, 5vw, 74px);
}

.discover-pro-kicker,
.discover-pro-section__eyebrow {
    margin: 0 0 10px;
    color: var(--discover-cyan);
    font-size: 10px;
    font-weight:900;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.discover-pro-hero h1,
.discover-pro-section h2,
.discover-pro-database h2,
.discover-pro-media h2 {
    margin: 0;
    color: var(--discover-text);
    font-family: var(--font-display, 'Anton', sans-serif);
    font-weight: 400;
    letter-spacing: -.025em;
    text-transform: uppercase;
}

.discover-pro-hero h1 {
    max-width: 920px;
    font-size: clamp(58px, 7vw, 112px);
    line-height: .86;
}

.discover-pro-hero__intro {
    max-width: 720px;
    margin: 20px 0 24px;
    color: #a4afb8;
    font-size: 14px;
    line-height: 1.65;
}

.discover-pro-search {
    max-width: 850px;
}

.discover-pro-search form,
.discover-pro-search [role="search"] {
    border-color: rgba(72,222,216,.22) !important;
    background: rgba(4,9,13,.78) !important;
}

.discover-pro-pulse {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border: 1px solid var(--discover-line);
    background: rgba(5,10,14,.78);
    backdrop-filter: blur(12px);
}

.discover-pro-pulse__head {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: 0 15px;
    border-bottom: 1px solid var(--discover-line);
    color: #7d8b97;
    font-size:10px;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.discover-pro-pulse__head span:last-child {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--discover-cyan);
}

.discover-pro-pulse__head i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--discover-cyan);
    box-shadow: 0 0 12px var(--discover-cyan);
}

.discover-pro-pulse article {
    min-height: 92px;
    padding: 17px;
    border-right: 1px solid var(--discover-line);
    border-bottom: 1px solid var(--discover-line);
}

.discover-pro-pulse article:nth-of-type(even) { border-right: 0; }
.discover-pro-pulse article:nth-last-of-type(-n+2) { border-bottom: 0; }

.discover-pro-pulse small {
    display: block;
    margin-bottom: 7px;
    color: #667582;
    font-size:10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.discover-pro-pulse strong {
    color: var(--discover-text);
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: 29px;
    font-weight: 400;
    line-height: 1;
}

.discover-pro-command {
    position: sticky;
    top: 0;
    z-index: 35;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
    padding: 12px 14px;
    border: 1px solid var(--discover-line);
    background: rgba(7,11,16,.94);
    backdrop-filter: blur(16px);
}

.discover-pro-command__label {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    color: #7e8e9a;
    font-size:10px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.discover-pro-command__label .material-symbols-outlined {
    color: var(--discover-cyan);
    font-size: 18px;
}

.discover-pro-tabs {
    display: flex;
    justify-content: flex-end;
    gap: 5px;
    overflow-x: auto;
    scrollbar-width: none;
}

.discover-pro-tabs::-webkit-scrollbar { display: none; }

.discover-pro-tabs button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 13px;
    border: 1px solid var(--discover-line);
    color: #8e9ca7;
    background: #0c131a;
    font-size:10px;
    font-weight:900;
    letter-spacing: .06em;
    text-transform: uppercase;
    cursor: pointer;
}

.discover-pro-tabs button:hover,
.discover-pro-tabs button.is-active {
    color: #051011;
    border-color: var(--discover-cyan);
    background: var(--discover-cyan);
}

.discover-pro-section,
.discover-pro-database,
.discover-pro-media {
    margin-top: 14px;
    border: 1px solid var(--discover-line);
    background: #080d12;
}

.discover-pro-section__head,
.discover-pro-database__head,
.discover-pro-media__head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 30px;
    padding: 25px 26px 20px;
    border-bottom: 1px solid var(--discover-line);
}

.discover-pro-section h2,
.discover-pro-database h2,
.discover-pro-media h2 {
    font-size: clamp(34px, 4vw, 58px);
    line-height: .92;
}

.discover-pro-section__head > p,
.discover-pro-database__head > p,
.discover-pro-media__head > p {
    max-width: 500px;
    margin: 0;
    color: #7e8d99;
    font-size: 11px;
    line-height: 1.6;
    text-align: right;
}

.discover-pro-feed {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.discover-pro-card {
    position: relative;
    min-width: 0;
    min-height: 330px;
    overflow: hidden;
    border-right: 1px solid var(--discover-line);
    border-bottom: 1px solid var(--discover-line);
    background: var(--discover-panel);
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.discover-pro-card:nth-child(4n) { border-right: 0; }

.discover-pro-card:hover {
    z-index: 3;
    background: #101820;
    border-color: rgba(72,222,216,.32);
    transform: translateY(-2px);
}

.discover-pro-card > a {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.discover-pro-card__visual {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #111922;
}

.discover-pro-card__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease, filter .35s ease;
}

.discover-pro-card:hover .discover-pro-card__visual img {
    transform: scale(1.035);
    filter: saturate(1.08);
}

.discover-pro-card__fallback {
    display: grid;
    width: 100%;
    height: 100%;
    place-items: center;
    background:
        radial-gradient(circle at 70% 20%, rgba(72,222,216,.16), transparent 30%),
        linear-gradient(135deg, #141d27, #0b1016);
}

.discover-pro-card__fallback .material-symbols-outlined {
    color: rgba(72,222,216,.55);
    font-size: 54px;
}

.discover-pro-card__type {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 6px 8px;
    color: #061011;
    background: var(--discover-cyan);
    font-size: 7px;
    font-weight:900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.discover-pro-card[data-kind="news"] .discover-pro-card__type { background: var(--discover-pink); color:#fff; }
.discover-pro-card[data-kind="guide"] .discover-pro-card__type { background: #f5cf5d; }
.discover-pro-card[data-kind="vehicle"] .discover-pro-card__type { background: var(--discover-orange); }
.discover-pro-card[data-kind="weapon"] .discover-pro-card__type { background: #a896ff; }
.discover-pro-card[data-kind="mod"] .discover-pro-card__type { background: #ff76ca; }

.discover-pro-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 16px 17px 18px;
}

.discover-pro-card__meta {
    margin: 0 0 8px;
    color: var(--discover-cyan);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.discover-pro-card h3 {
    margin: 0;
    color: #f1f2ef;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.1;
}

.discover-pro-card__body > p:not(.discover-pro-card__meta) {
    margin: 10px 0 15px;
    color: #8997a2;
    font-size: 10px;
    line-height: 1.55;
}

.discover-pro-card__action {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    color: var(--discover-pink);
    font-size:10px;
    font-weight:900;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.discover-pro-card__action .material-symbols-outlined { font-size: 14px; }

.discover-pro-empty {
    grid-column: 1 / -1;
    display: grid;
    min-height: 220px;
    place-items: center;
    padding: 35px;
    color: #73838f;
    text-align: center;
    background: #080d12;
}

.discover-pro-empty .material-symbols-outlined {
    display: block;
    margin-bottom: 12px;
    color: var(--discover-cyan);
    font-size: 38px;
}

.discover-pro-empty strong {
    display: block;
    margin-bottom: 6px;
    color: #e7ebea;
    font-size: 15px;
}

.discover-pro-database__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.discover-pro-lane {
    min-width: 0;
    padding: 22px;
    border-right: 1px solid var(--discover-line);
}

.discover-pro-lane:last-child { border-right: 0; }

.discover-pro-lane__title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 14px;
}

.discover-pro-lane__title h3 {
    margin: 0;
    color: #eff1ee;
    font-family: var(--font-display, 'Anton', sans-serif);
    font-size: 28px;
    font-weight: 400;
    text-transform: uppercase;
}

.discover-pro-lane__title a,
.discover-pro-media__head a {
    color: var(--discover-pink);
    font-size:10px;
    font-weight:900;
    text-transform: uppercase;
}

.discover-pro-lane__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.discover-pro-weapon {
    display: flex;
    min-height: 155px;
    flex-direction: column;
    padding: 15px;
    border: 1px solid var(--discover-line);
    color: inherit;
    text-decoration: none;
    background: #0c131a;
}

.discover-pro-weapon:hover { border-color: rgba(168,150,255,.48); background:#111a23; }
.discover-pro-weapon small { color:#a896ff; font-size:7px; font-weight:900; text-transform:uppercase; }
.discover-pro-weapon strong { margin:8px 0; color:#f0f1ef; font-size:16px; line-height:1.05; }
.discover-pro-weapon span { margin-top:auto; color:#7d8c98; font-size:10px; }

.discover-pro-tools {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--discover-line);
}

.discover-pro-tools > * { border-right: 1px solid var(--discover-line) !important; }
.discover-pro-tools > *:last-child { border-right: 0 !important; }

.discover-pro-media__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.discover-pro-media__item {
    position: relative;
    min-width: 0;
    overflow: hidden;
    border-right: 1px solid var(--discover-line);
    color: inherit;
    text-decoration: none;
    background: #0b1118;
}

.discover-pro-media__item:last-child { border-right: 0; }
.discover-pro-media__item .media-frame { aspect-ratio:16/9; }
.discover-pro-media__item span {
    display: block;
    padding: 13px 14px 16px;
    color:#eff1ef;
    font-size:12px;
    font-weight:800;
    line-height:1.2;
}

.discover-pro-mods {
    padding: 22px;
    border-top: 1px solid var(--discover-line);
}

.discover-pro-mods__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

@media (max-width: 1180px) {
    .discover-pro-hero__inner { grid-template-columns: 1fr; }
    .discover-pro-pulse { max-width: 720px; }
    .discover-pro-feed { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .discover-pro-card:nth-child(4n) { border-right: 1px solid var(--discover-line); }
    .discover-pro-card:nth-child(3n) { border-right: 0; }
    .discover-pro-tools,
    .discover-pro-media__grid,
    .discover-pro-mods__grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 860px) {
    .discover-pro { width: min(100% - 24px, 1540px); }
    .discover-pro-hero__inner { padding: 38px 24px; }
    .discover-pro-command { align-items:flex-start; flex-direction:column; }
    .discover-pro-tabs { width:100%; justify-content:flex-start; }
    .discover-pro-feed { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .discover-pro-card:nth-child(3n) { border-right:1px solid var(--discover-line); }
    .discover-pro-card:nth-child(2n) { border-right:0; }
    .discover-pro-database__grid { grid-template-columns:1fr; }
    .discover-pro-lane { border-right:0; border-bottom:1px solid var(--discover-line); }
    .discover-pro-section__head,
    .discover-pro-database__head,
    .discover-pro-media__head { align-items:flex-start; flex-direction:column; }
    .discover-pro-section__head > p,
    .discover-pro-database__head > p,
    .discover-pro-media__head > p { text-align:left; }
}

@media (max-width: 560px) {
    .discover-pro { width:100%; padding-top:0; }
    .discover-pro-hero { border-inline:0; }
    .discover-pro-hero h1 { font-size:clamp(52px,17vw,78px); }
    .discover-pro-pulse { grid-template-columns:1fr 1fr; }
    .discover-pro-command { margin-inline:10px; }
    .discover-pro-section,
    .discover-pro-database,
    .discover-pro-media { border-inline:0; }
    .discover-pro-feed,
    .discover-pro-tools,
    .discover-pro-media__grid,
    .discover-pro-mods__grid { grid-template-columns:1fr; }
    .discover-pro-card,
    .discover-pro-card:nth-child(n),
    .discover-pro-tools > *,
    .discover-pro-media__item { border-right:0 !important; }
    .discover-pro-lane__cards { grid-template-columns:1fr; }
    .discover-pro-section__head,
    .discover-pro-database__head,
    .discover-pro-media__head { padding:22px 18px 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .discover-pro-card,
    .discover-pro-card__visual img { transition:none; }
}