/*
 * GC RTT COURSE MOBILE WIDTH V2
 *
 * PHONE ONLY.
 *
 * - Course 2 untouched.
 * - Desktop untouched.
 * - Courses hub gets clearer mobile course selection.
 */

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

    /*
     * ==================================================
     * COMMON PHONE SAFETY
     * ==================================================
     */

    body.gc-rtt-mobile-width-course1,
    body.gc-rtt-mobile-width-course3,
    body.gc-rtt-mobile-width-course4-12,
    body.gc-rtt-mobile-courses-hub {
        overflow-x: hidden !important;
    }


    /*
     * ==================================================
     * COURSE 1
     * Strong widening.
     * ==================================================
     */

    body.gc-rtt-mobile-width-course1
    .wp-block-post-content,

    body.gc-rtt-mobile-width-course1
    .entry-content {
        width: calc(100vw - 8px) !important;
        max-width: calc(100vw - 8px) !important;
        min-width: 0 !important;

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

        margin-right: 0 !important;

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

        box-sizing: border-box !important;
    }

    body.gc-rtt-mobile-width-course1
    .gc-rtt-course,

    body.gc-rtt-mobile-width-course1
    [class*="gc-course"],

    body.gc-rtt-mobile-width-course1
    [class*="course-shell"] {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }


    /*
     * ==================================================
     * COURSE 3
     * Moderate widening + centering.
     * ==================================================
     */

    body.gc-rtt-mobile-width-course3
    .wp-block-post-content,

    body.gc-rtt-mobile-width-course3
    .entry-content {
        width: calc(100vw - 14px) !important;
        max-width: calc(100vw - 14px) !important;
        min-width: 0 !important;

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

        margin-right: 0 !important;

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

        box-sizing: border-box !important;
    }

    body.gc-rtt-mobile-width-course3
    .gc-rtt-course,

    body.gc-rtt-mobile-width-course3
    main.gc-rtt-course {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: auto !important;
        margin-right: auto !important;

        box-sizing: border-box !important;
    }


    /*
     * ==================================================
     * COURSES 4-12
     * Small widening only.
     * ==================================================
     */

    body.gc-rtt-mobile-width-course4-12
    .wp-block-post-content,

    body.gc-rtt-mobile-width-course4-12
    .entry-content {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        min-width: 0 !important;

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

        margin-right: 0 !important;

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

        box-sizing: border-box !important;
    }

    body.gc-rtt-mobile-width-course4-12
    .gc-rtt-course {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: auto !important;
        margin-right: auto !important;

        box-sizing: border-box !important;
    }


    /*
     * ==================================================
     * COURSES HUB — PAGE 363
     *
     * Organize course selection on real phones.
     * Desktop remains completely untouched.
     * ==================================================
     */

    body.gc-rtt-mobile-courses-hub
    .wp-block-post-content,

    body.gc-rtt-mobile-courses-hub
    .entry-content {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;

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

        margin-right: 0 !important;

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

        box-sizing: border-box !important;
    }

    body.gc-rtt-mobile-courses-hub
    .gc-rtt-roadmap {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;

        margin-left: auto !important;
        margin-right: auto !important;

        box-sizing: border-box !important;
    }

    /*
     * Course 1 card.
     */
    body.gc-rtt-mobile-courses-hub
    .gc-rtt-course-card {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 18px !important;

        width: 100% !important;

        padding: 22px 18px !important;

        box-sizing: border-box !important;
    }

    body.gc-rtt-mobile-courses-hub
    .gc-rtt-course-button {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        min-height: 54px !important;

        margin: 0 !important;

        padding: 14px 18px !important;

        box-sizing: border-box !important;

        text-align: center !important;
        white-space: normal !important;
    }


    /*
     * Courses 2-12 selection area.
     *
     * Existing page markup uses BR-separated course rows.
     * Increase visual separation dramatically.
     */
    body.gc-rtt-mobile-courses-hub
    .gc-rtt-course-next {
        width: 100% !important;

        margin-top: 0 !important;

        padding:
            22px 18px 24px !important;

        box-sizing: border-box !important;

        font-size: 1rem !important;
        line-height: 1.45 !important;

        color: #d5deeb !important;
    }

    /*
     * Make each course row breathe.
     */
    body.gc-rtt-mobile-courses-hub
    .gc-rtt-course-next br {
        display: block !important;

        content: "" !important;

        margin-bottom: 18px !important;
    }

    /*
     * Links should be obvious and easy to tap.
     */
    body.gc-rtt-mobile-courses-hub
    .gc-rtt-course-next a {
        color: #dce8f6 !important;

        text-decoration-thickness: 1px !important;
        text-underline-offset: 4px !important;

        line-height: 1.45 !important;

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

    /*
     * For Course 4 onward, "Start Course" is a separate
     * anchor after plain text. Give it CTA separation.
     */
    body.gc-rtt-mobile-courses-hub
    .gc-rtt-course-next > a {
        margin-top: 3px;
    }

    /*
     * Keep the entire block readable instead of the
     * oversized mobile typography shown previously.
     */
    body.gc-rtt-mobile-courses-hub
    .gc-rtt-course-next,
    body.gc-rtt-mobile-courses-hub
    .gc-rtt-course-next a,
    body.gc-rtt-mobile-courses-hub
    .gc-rtt-course-next strong {
        font-size:
            clamp(.98rem, 4.4vw, 1.12rem) !important;

        font-weight: 500 !important;
    }

    body.gc-rtt-mobile-courses-hub
    .gc-rtt-course-next strong {
        font-weight: 650 !important;
    }


    /*
     * ==================================================
     * MEDIA SAFETY
     * ==================================================
     */

    body.gc-rtt-mobile-width-course1 img,
    body.gc-rtt-mobile-width-course3 img,
    body.gc-rtt-mobile-width-course4-12 img,

    body.gc-rtt-mobile-width-course1 figure,
    body.gc-rtt-mobile-width-course3 figure,
    body.gc-rtt-mobile-width-course4-12 figure {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

/*
 * ==================================================
 * GC RTT COURSE MOBILE TABLE + CENTER HOTFIX
 * Real phone only.
 *
 * - Course 3: reduce width and restore centering.
 * - Course 4: preserve Buy/Wait/Skip matrix structure.
 * - Course 5: preserve Launch Week Planner columns.
 * - Course 9+: preserve RTT multi-column tables.
 * - Desktop untouched.
 * ==================================================
 */

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

    /*
     * --------------------------------------------------
     * COURSE 3
     *
     * V2 viewport escape was slightly too aggressive.
     * Pull the page inward and center it.
     * --------------------------------------------------
     */

    body.gc-rtt-mobile-width-course3
    .wp-block-post-content,

    body.gc-rtt-mobile-width-course3
    .entry-content {
        width: calc(100vw - 28px) !important;
        max-width: calc(100vw - 28px) !important;

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

        margin-right: 0 !important;

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

    body.gc-rtt-mobile-width-course3
    .gc-rtt-course,

    body.gc-rtt-mobile-width-course3
    main.gc-rtt-course {
        width: 100% !important;
        max-width: 100% !important;

        margin-left: auto !important;
        margin-right: auto !important;
    }


    /*
     * --------------------------------------------------
     * MOBILE DATA COMPONENT RULE
     *
     * Structured 4+ column information must remain
     * structured. It scrolls horizontally rather than
     * collapsing into a misleading vertical list.
     * --------------------------------------------------
     */

    body.gc-rtt-mobile-width-course4-12
    .gc-planner-grid,

    body.gc-rtt-mobile-width-course4-12
    .gc-rtt-table,

    body.gc-rtt-mobile-width-course4-12
    [class*="buy-wait-skip"],

    body.gc-rtt-mobile-width-course4-12
    [class*="edition-matrix"],

    body.gc-rtt-mobile-width-course4-12
    [class*="redundancy-matrix"] {
        overflow-x: auto !important;
        overflow-y: hidden !important;

        max-width: 100% !important;

        -webkit-overflow-scrolling: touch;

        overscroll-behavior-inline: contain;

        scrollbar-width: thin;
    }


    /*
     * COURSE 5 — Launch Week Planner
     *
     * Keep columns wide enough to remain a planner.
     */
    body.gc-rtt-mobile-width-course4-12
    .gc-planner-grid {
        display: grid !important;

        grid-template-columns:
            minmax(145px, 1.2fr)
            minmax(130px, 1fr)
            minmax(150px, 1.1fr)
            minmax(125px, .9fr) !important;

        min-width: 610px !important;

        width: max-content !important;
    }


    /*
     * Course 5 planner headings/rows participate
     * in the same horizontal grid.
     */
    body.gc-rtt-mobile-width-course4-12
    .gc-planner-grid__head {
        min-width: 0 !important;
    }


    /*
     * COURSES 7-12 RTT TABLE FAMILY
     *
     * Course 9 Crew Role Redundancy Matrix is confirmed
     * to use gc-rtt-table. Give it real table width so
     * Backup / secondary columns remain reachable.
     */
    body.gc-rtt-mobile-width-course4-12
    .gc-rtt-table {
        display: block !important;

        width: 100% !important;

        padding-bottom: 8px !important;
    }

    body.gc-rtt-mobile-width-course4-12
    .gc-rtt-table > * {
        min-width: 680px !important;
    }


    /*
     * COURSE 4 — Buy / Wait / Skip Edition Matrix
     *
     * Preserve the matrix rather than converting each
     * value into a vertical list.
     */
    body.gc-rtt-mobile-width-course4-12
    [class*="buy-wait-skip"],

    body.gc-rtt-mobile-width-course4-12
    [class*="edition-matrix"] {
        display: block !important;

        width: 100% !important;

        min-width: 0 !important;

        padding-bottom: 8px !important;
    }

    body.gc-rtt-mobile-width-course4-12
    [class*="buy-wait-skip"] > *,

    body.gc-rtt-mobile-width-course4-12
    [class*="edition-matrix"] > * {
        min-width: 620px !important;
    }


    /*
     * Generic protection for true table elements if
     * future components introduce them.
     */
    body.gc-rtt-mobile-width-course4-12
    table {
        width: max-content !important;

        min-width: 620px !important;

        border-collapse: collapse;
    }

    body.gc-rtt-mobile-width-course4-12
    table th,

    body.gc-rtt-mobile-width-course4-12
    table td {
        white-space: normal !important;

        min-width: 120px;
    }


    /*
     * Never scroll the whole page sideways.
     * Only the data component receives horizontal scroll.
     */
    body.gc-rtt-mobile-width-course4-12 {
        overflow-x: hidden !important;
    }


    /*
     * Small iPhone usability cue:
     * a scrollable component can be swiped naturally,
     * but ordinary course cards remain unchanged.
     */
    body.gc-rtt-mobile-width-course4-12
    .gc-planner-grid,

    body.gc-rtt-mobile-width-course4-12
    .gc-rtt-table,

    body.gc-rtt-mobile-width-course4-12
    [class*="buy-wait-skip"],

    body.gc-rtt-mobile-width-course4-12
    [class*="edition-matrix"] {
        touch-action: pan-x pan-y;
    }
}