/*
 * GC RTT REAL DEVICE MOBILE V1
 *
 * Purpose:
 * - use the real phone viewport;
 * - remove artificial narrow-column behavior;
 * - prevent mid-word wrapping;
 * - preserve desktop/tablet layouts;
 * - provide RTT-native Founder gates on pages 457 and 465.
 *
 * Scope is added by gc-rtt-real-device-mobile-v1.php.
 */

@media screen and (max-width: 700px) {

    html {
        overflow-x: hidden;
    }

    body.gc-rtt-real-device-mobile {
        overflow-x: hidden !important;
    }

    /*
     * Escape WordPress/theme constrained content width.
     * The RTT experience gets the real viewport with
     * approximately 10px gutters on each side.
     */
    body.gc-rtt-real-device-mobile
    .wp-site-blocks > main,

    body.gc-rtt-real-device-mobile
    .wp-block-post-content,

    body.gc-rtt-real-device-mobile
    .entry-content {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    body.gc-rtt-real-device-mobile
    .gc-rtt-roadmap,

    body.gc-rtt-real-device-mobile
    main.gc-rtt-roadmap,

    body.gc-rtt-real-device-mobile
    .gc-rtt-pricing-page {
        width: calc(100vw - 20px) !important;
        max-width: none !important;
        min-width: 0 !important;

        margin-left:
            calc(50% - 50vw + 10px) !important;

        margin-right: 0 !important;

        padding-left: 0 !important;
        padding-right: 0 !important;

        box-sizing: border-box !important;
        overflow-x: clip !important;
    }

    /*
     * Sections and cards should consume their available
     * mobile width instead of becoming narrow columns.
     */
    body.gc-rtt-real-device-mobile
    .gc-rtt-hero,

    body.gc-rtt-real-device-mobile
    .gc-rtt-section,

    body.gc-rtt-real-device-mobile
    .gc-rtt-card,

    body.gc-rtt-real-device-mobile
    .gc-rtt-pricing-section,

    body.gc-rtt-real-device-mobile
    .gc-rtt-pricing-card {
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.gc-rtt-real-device-mobile
    .gc-rtt-hero,

    body.gc-rtt-real-device-mobile
    .gc-rtt-section {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    /*
     * Every responsive grid becomes one real full-width
     * column on a phone.
     */
    body.gc-rtt-real-device-mobile
    .gc-rtt-grid,

    body.gc-rtt-real-device-mobile
    .gc-rtt-pricing-grid,

    body.gc-rtt-real-device-mobile
    .gc-rtt-readiness-grid,

    body.gc-rtt-real-device-mobile
    .gc-rtt-decision-matrix,

    body.gc-rtt-real-device-mobile
    .gc-rtt-milestone-line {
        display: grid !important;
        grid-template-columns:
            minmax(0, 1fr) !important;

        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    /*
     * IMPORTANT:
     * Existing global mobile CSS uses overflow-wrap:anywhere.
     * That is the source of the ugly mid-word breaking seen
     * on the real iPhone.
     */
    body.gc-rtt-real-device-mobile h1,
    body.gc-rtt-real-device-mobile h2,
    body.gc-rtt-real-device-mobile h3,
    body.gc-rtt-real-device-mobile h4,
    body.gc-rtt-real-device-mobile p,
    body.gc-rtt-real-device-mobile li,
    body.gc-rtt-real-device-mobile strong,
    body.gc-rtt-real-device-mobile span,
    body.gc-rtt-real-device-mobile a {
        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    body.gc-rtt-real-device-mobile h1 {
        max-width: 100% !important;
        font-size:
            clamp(2rem, 10vw, 3rem) !important;

        line-height: 1.04 !important;
    }

    body.gc-rtt-real-device-mobile h2 {
        max-width: 100% !important;
        font-size:
            clamp(1.6rem, 8vw, 2.25rem) !important;

        line-height: 1.08 !important;
    }

    body.gc-rtt-real-device-mobile p,
    body.gc-rtt-real-device-mobile li {
        max-width: 100% !important;
        font-size: 1rem;
        line-height: 1.5;
    }

    /*
     * Media should never establish a wider or narrower
     * layout than its parent.
     */
    body.gc-rtt-real-device-mobile
    .gc-rtt-media,

    body.gc-rtt-real-device-mobile
    .gc-rtt-media-frame,

    body.gc-rtt-real-device-mobile
    figure {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body.gc-rtt-real-device-mobile img,
    body.gc-rtt-real-device-mobile
    .gc-rtt-media img,
    body.gc-rtt-real-device-mobile figure img {
        display: block;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
    }

    /*
     * Buttons/CTAs:
     * full-width touch targets where practical.
     */
    body.gc-rtt-real-device-mobile
    .gc-rtt-pricing-button,

    body.gc-rtt-real-device-mobile
    .wp-element-button {
        max-width: 100% !important;
        min-height: 48px;
        white-space: normal !important;
        overflow-wrap: normal !important;
        word-break: normal !important;
        box-sizing: border-box !important;
    }

    /*
     * ------------------------------------------------
     * REAL DEVICE FOUNDER GATE
     * ------------------------------------------------
     */

    body.gc-rtt-real-device-mobile
    .gc-rtt-real-founder-gate {
        width: calc(100vw - 24px);
        max-width: none;
        min-width: 0;

        margin:
            28px 12px 64px
            calc(50% - 50vw + 12px);

        padding: 26px 20px;

        border:
            1px solid rgba(71, 184, 230, .28);

        border-radius: 20px;

        background:
            linear-gradient(
                145deg,
                #0b1a2d 0%,
                #0a1626 100%
            );

        color: #f4f7fb;

        box-sizing: border-box;

        box-shadow:
            0 18px 50px
            rgba(0,0,0,.24);
    }

    body.gc-rtt-real-device-mobile
    .gc-rtt-real-founder-gate__eyebrow {
        margin-bottom: 14px;

        color: #ffb000;

        font-size: .82rem;
        font-weight: 800;

        letter-spacing: .12em;
        line-height: 1.3;
    }

    body.gc-rtt-real-device-mobile
    .gc-rtt-real-founder-gate h1 {
        margin: 0 0 18px !important;

        color: #ffffff !important;

        font-size:
            clamp(2rem, 9vw, 2.8rem) !important;

        line-height: 1.04 !important;

        overflow-wrap: normal !important;
        word-break: normal !important;
        hyphens: none !important;
    }

    body.gc-rtt-real-device-mobile
    .gc-rtt-real-founder-gate__intro {
        margin: 0 0 24px !important;

        color: #b9c7da !important;

        font-size: 1.05rem !important;
        line-height: 1.5 !important;
    }

    /*
     * Neutralize PMPro's white access panel ONLY inside
     * the new RTT Founder gate.
     */
    body.gc-rtt-real-device-mobile
    .gc-rtt-real-founder-gate
    .pmpro,

    body.gc-rtt-real-device-mobile
    .gc-rtt-real-founder-gate
    .pmpro_card,

    body.gc-rtt-real-device-mobile
    .gc-rtt-real-founder-gate
    .pmpro_content_message,

    body.gc-rtt-real-device-mobile
    .gc-rtt-real-founder-gate
    .pmpro_message {
        width: 100% !important;
        max-width: none !important;

        margin: 0 !important;
        padding: 0 !important;

        border: 0 !important;
        box-shadow: none !important;

        background: transparent !important;
        color: #b9c7da !important;

        box-sizing: border-box !important;
    }

    body.gc-rtt-real-device-mobile
    .gc-rtt-real-founder-gate
    p {
        color: #b9c7da !important;
    }

    body.gc-rtt-real-device-mobile
    .gc-rtt-real-founder-gate
    a {
        color: #ffbd28;
    }

    body.gc-rtt-real-device-mobile
    .gc-rtt-real-founder-gate__actions {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px;
        width: 100%;
        margin-top: 24px;
    }

    body.gc-rtt-real-device-mobile
    .gc-rtt-real-founder-gate__primary,

    body.gc-rtt-real-device-mobile
    .gc-rtt-real-founder-gate__secondary {
        display: flex;
        align-items: center;
        justify-content: center;

        width: 100%;
        min-height: 52px;

        padding: 13px 18px;

        border-radius: 12px;

        text-decoration: none !important;
        text-align: center;

        font-weight: 800;

        box-sizing: border-box;
    }

    body.gc-rtt-real-device-mobile
    .gc-rtt-real-founder-gate__primary {
        background: #ffb000;
        color: #07111e !important;
    }

    body.gc-rtt-real-device-mobile
    .gc-rtt-real-founder-gate__secondary {
        border:
            1px solid rgba(255,255,255,.2);

        background:
            rgba(255,255,255,.05);

        color: #ffffff !important;
    }
}