/* =========================================================
   GTA 6 INDIVIDUAL CHEAT PAGE
   ========================================================= */

.cheat-breadcrumb {
    padding: 17px 0;

    background: #0b0e10;

    border-bottom: 1px solid #20272a;

    color: #737d80;

    font-size: 10px;
}

.cheat-breadcrumb .container {
    display: flex;

    align-items: center;

    gap: 9px;
}

.cheat-breadcrumb a:hover {
    color: var(--green);
}

.cheat-breadcrumb strong {
    color: #d0d5d5;
}


/* HERO */

.cheat-detail-hero {
    position: relative;

    overflow: hidden;

    padding: 90px 0 80px;

    background:
        radial-gradient(
            circle at 82% 40%,
            rgba(139, 210, 63, .15),
            transparent 30%
        ),
        linear-gradient(
            140deg,
            #090c0e,
            #121819 60%,
            #0b0e10
        );

    border-bottom: 1px solid #22292c;
}

.cheat-detail-hero::after {
    content: "";

    position: absolute;

    width: 380px;
    height: 380px;

    right: -120px;
    top: -150px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(220, 233, 100, .38),
            rgba(139, 210, 63, .08) 48%,
            transparent 72%
        );
}

.cheat-detail-hero .container {
    position: relative;

    z-index: 2;
}

.cheat-detail-label {
    color: var(--green);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;
}

.cheat-detail-hero h1 {
    margin: 17px 0;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size:
        clamp(
            60px,
            8vw,
            96px
        );

    line-height: .85;

    letter-spacing: -2px;

    text-transform: uppercase;
}

.cheat-detail-hero h1 span {
    display: block;
}

.cheat-detail-hero p {
    max-width: 670px;

    margin: 0 0 22px;

    color: #aab2b5;

    font-size: 16px;
}

.verification-badge {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 8px 10px;

    border: 1px solid rgba(243, 201, 75, .35);

    color: var(--yellow);

    background: rgba(243, 201, 75, .05);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;
}

.verification-dot {
    width: 8px;
    height: 8px;

    border-radius: 50%;

    background: var(--yellow);

    box-shadow:
        0 0 12px rgba(243, 201, 75, .45);
}


/* MAIN */

.cheat-detail-section {
    padding: 80px 0 90px;

    background: var(--black);
}

.cheat-detail-layout {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        300px;

    gap: 55px;

    align-items: start;
}

.cheat-main {
    min-width: 0;
}

.detail-block {
    padding-bottom: 55px;

    margin-bottom: 55px;

    border-bottom: 1px solid #252d30;
}

.detail-kicker {
    color: var(--green);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;
}

.detail-block h2 {
    margin: 9px 0 17px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 42px;

    line-height: 1;

    text-transform: uppercase;
}

.detail-block p {
    max-width: 760px;

    color: #a7afb1;

    font-size: 14px;

    line-height: 1.8;
}


/* PLATFORM */

.platform-detail {
    margin-bottom: 45px;

    padding: 30px;

    background:
        linear-gradient(
            145deg,
            #171d20,
            #111618
        );

    border: 1px solid #2b3438;
}

.platform-heading {
    display: flex;

    align-items: center;

    gap: 18px;

    padding-bottom: 25px;

    margin-bottom: 25px;

    border-bottom: 1px solid #283135;
}

.platform-number {
    color: #697376;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 22px;

    font-weight: 800;
}

.platform-label {
    color: var(--green);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.platform-heading h2 {
    margin: 2px 0 0;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 34px;

    line-height: 1;

    text-transform: uppercase;
}


/* CODE PANEL */

.code-panel {
    padding: 22px;

    background: #0b0e10;

    border: 1px solid #252d31;
}

.code-label {
    display: block;

    margin-bottom: 10px;

    color: #717b7e;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.3px;
}

.code-panel strong {
    display: block;

    color: var(--yellow);

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 28px;

    text-transform: uppercase;
}

.code-panel p {
    margin: 8px 0 0;

    color: #8f999c;

    font-size: 12px;

    line-height: 1.65;
}


/* HOW TO */

.how-to {
    padding-top: 24px;
}

.how-to h3 {
    margin: 0 0 6px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 24px;

    text-transform: uppercase;
}

.how-to p {
    margin: 0;

    color: #969fa2;

    font-size: 12px;

    line-height: 1.7;
}


/* FUTURE */

.future-platform {
    opacity: .78;
}


/* FAQ */

.detail-block details {
    border-top: 1px solid #293134;
}

.detail-block details:last-child {
    border-bottom: 1px solid #293134;
}

.detail-block summary {
    padding: 19px 0;

    cursor: pointer;

    list-style: none;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 23px;

    text-transform: uppercase;
}

.detail-block summary::-webkit-details-marker {
    display: none;
}

.detail-block summary::after {
    content: "+";

    float: right;

    color: var(--green);

    font-size: 20px;
}

.detail-block details[open] summary::after {
    content: "−";
}

.detail-block details p {
    padding: 0 0 18px;

    margin: 0;

    color: #929b9e;

    font-size: 12px;
}


/* SIDEBAR */

.cheat-sidebar {
    position: sticky;

    top: 110px;
}

.sidebar-card {
    padding: 22px;

    margin-bottom: 15px;

    background: #121719;

    border: 1px solid #293236;
}

.sidebar-title {
    margin-bottom: 13px;

    color: var(--green);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.5px;
}

.sidebar-status {
    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--yellow);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;
}

.sidebar-status span {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: var(--yellow);
}

.sidebar-card p {
    color: #929b9e;

    font-size: 11px;

    line-height: 1.7;
}

.sidebar-card a {
    display: block;

    padding: 9px 0;

    border-top: 1px solid #252d30;

    color: #adb5b7;

    font-size: 11px;

    font-weight: 700;
}

.sidebar-card a:first-of-type {
    border-top: none;
}

.sidebar-card a:hover {
    color: var(--green);
}


/* CTA */

.cheat-cta {
    padding: 70px 0;

    background:
        linear-gradient(
            110deg,
            #8bd23f,
            #b8e956
        );

    color: #091006;
}

.cheat-cta h2 {
    margin: 8px 0 12px;

    font-family:
        "Barlow Condensed",
        sans-serif;

    font-size: 51px;

    line-height: .95;

    text-transform: uppercase;
}

.cheat-cta p {
    margin: 0 0 25px;

    font-size: 13px;
}

.cheat-cta-button {
    display: inline-flex;

    align-items: center;

    min-height: 45px;

    padding: 0 20px;

    background: #0b100c;

    color: #fff;

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1px;
}


/* MOBILE */

@media (max-width: 900px) {

    .cheat-detail-layout {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .cheat-sidebar {
        position: static;

        display: grid;

        grid-template-columns:
            repeat(2, 1fr);

        gap: 12px;
    }

}

@media (max-width: 650px) {

    .cheat-detail-hero {
        padding: 75px 0 60px;
    }

    .cheat-detail-hero h1 {
        font-size: 59px;
    }

    .cheat-detail-section {
        padding: 60px 0 70px;
    }

    .platform-detail {
        padding: 22px;
    }

    .detail-block h2 {
        font-size: 36px;
    }

    .cheat-sidebar {
        grid-template-columns: 1fr;
    }

    .cheat-cta h2 {
        font-size: 42px;
    }

}

@media (max-width: 430px) {

    .cheat-detail-hero h1 {
        font-size: 53px;
    }

    .platform-heading h2 {
        font-size: 29px;
    }

}