/*
 * GearCheckpoint Race to the Top Global Mobile Runtime
 *
 * Promoted from the owner-approved page-416 implementation.
 * Applies to Race to the Top pages through body class scoping.
 */

/*
 * GearCheckpoint — Founder Roadmap: First $10 Million
 * Page-specific responsive corrections.
 */

/* Prevent any visual or section from exceeding the viewport. */
body,
.wp-site-blocks,
main,
.entry-content,
.gc-rtt-roadmap,
.gc-rtt-section,
.gc-rtt-hero,
.gc-rtt-grid,
.gc-rtt-media {
    max-width: 100%;
    box-sizing: border-box;
}

/* Override the earlier 760px mobile minimum-width rule. */
.gc-rtt-media img,
.gc-rtt-media.gc-rtt-media-complete img,
.gc-rtt-data-visual > img {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
    height: auto;
    margin: 0;
}

/* Cinematic images should scale instead of creating horizontal scroll. */
.gc-rtt-media.gc-rtt-media-complete {
    width: 100%;
    overflow: hidden !important;
}

/* Data visuals keep their background image visible behind readable content. */
.gc-rtt-data-visual {
    position: relative;
    width: 100%;
    min-height: 520px;
    overflow: hidden;
}

.gc-rtt-data-visual > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-width: 0 !important;
    object-fit: cover;
    object-position: center;
    opacity: .42;
}

.gc-rtt-data-overlay {
    position: relative;
    z-index: 2;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Long headings and labels must wrap inside their containers. */
body.gc-rtt-site h1,
body.gc-rtt-site h2,
body.gc-rtt-site h3,
body.gc-rtt-site p,
body.gc-rtt-site strong,
body.gc-rtt-site span {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Tablets */
@media (max-width: 900px) {
    .gc-rtt-hero {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }

    .gc-rtt-hero-copy,
    .gc-rtt-hero-media {
        width: 100%;
        min-width: 0;
    }

    .gc-rtt-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 16px !important;
    }

    .gc-rtt-readiness-grid,
    .gc-rtt-decision-matrix,
    .gc-rtt-milestone-line {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Phones */
@media (max-width: 620px) {
    .gc-rtt-roadmap {
        width: 100%;
        padding-inline: 14px !important;
        overflow-x: clip;
    }

    .gc-rtt-hero,
    .gc-rtt-section {
        width: 100%;
        margin-inline: 0 !important;
        padding: 20px !important;
        border-radius: 18px !important;
    }

    .gc-rtt-grid,
    .gc-rtt-readiness-grid,
    .gc-rtt-decision-matrix,
    .gc-rtt-milestone-line,
    .gc-rtt-source-list {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

    .gc-rtt-card,
    .gc-rtt-baseline-card,
    .gc-rtt-readiness-step,
    .gc-rtt-decision-cell,
    .gc-rtt-source-card {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        padding: 18px !important;
    }

    .gc-rtt-media,
    .gc-rtt-media.gc-rtt-media-complete {
        width: 100%;
        margin: 18px 0 !important;
        border-radius: 16px !important;
        overflow: hidden !important;
    }

    .gc-rtt-media.gc-rtt-media-complete img {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        object-fit: contain;
    }

    .gc-rtt-data-visual {
        min-height: 0 !important;
        background: #081729;
    }

    .gc-rtt-data-visual > img {
        position: absolute;
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        min-width: 0 !important;
        object-fit: cover;
        object-position: center;
        opacity: .28;
    }

    .gc-rtt-data-overlay {
        min-height: 0 !important;
        padding: 22px 18px !important;
        background: rgba(5, 18, 32, .90) !important;
    }

    .gc-rtt-data-title {
        max-width: 100%;
        margin-bottom: 18px;
        font-size: clamp(1.35rem, 7vw, 1.85rem);
        line-height: 1.12;
    }

    .gc-rtt-readiness-track {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 5px;
    }

    .gc-rtt-milestone {
        padding-top: 52px;
    }

    .gc-rtt-milestone-line::before {
        display: none !important;
    }

    body.gc-rtt-site h1 {
        font-size: clamp(2rem, 10vw, 3.15rem) !important;
        line-height: 1.04 !important;
    }

    body.gc-rtt-site h2 {
        font-size: clamp(1.55rem, 8vw, 2.2rem) !important;
        line-height: 1.1 !important;
    }

    body.gc-rtt-site p,
    .gc-rtt-readiness-step span,
    .gc-rtt-decision-cell p,
    .gc-rtt-milestone span {
        font-size: 1rem;
        line-height: 1.55;
    }
}