/* G.O.A.T Training - mobile layer (2026-09-14). The DesignCraft export shipped with NO media queries: every page is inline styles tuned for a 1400px desktop, so on a phone the nav piled on top of the logo and 2- and 3-column grids crushed their text to one word per line. How this works: - Elements that need to change carry a `data-m` hook in the markup (space-separated tokens, matched with ~=). NEVER select on inline style text: the DesignCraft runtime rewrites style attributes when it renders, so [style*=...] selectors silently stop matching (see NOTES.md). - Every box carries an inline style, so each override needs !important. - Desktop is untouched: every rule lives inside a max-width query, except the two that hide the mobile-only menu pieces on wide screens. Hooks: nav-desk / nav-login hidden at <=1100 (desktop link row + login button) nav-burger / nav-panel shown only at <=1100 stack big 2-column layout -> one column, 44px gap cards card grid -> one column (keeps its own gap) cards2 card grid -> two columns on tablets, one on phones steps bordered 3-step strip -> stacked, dividers move to the bottom stats stat row -> smaller numbers so three still fit table schedule-style grid table -> tighter cells sec / secb section vertical padding (both / bottom only) -> 64px hero hero top padding -> 48px pad big inner card padding -> 28px 22px pad-s consent / notice box padding -> 16px cols1 CSS multi-column block -> one column badge absolutely positioned overlay card -> pulled inside the photo faq accordion question button -> smaller type wrap / cta button link -> full width, centered, may wrap mini small 2x2 icon cards -> stay 2x2 on phones, compact foot / foot-legal footer columns -> 2-up, bigger tap targets full CTA -> full width, centered m-hide hidden on phones unstick sticky sidebar -> static scroll-x wide row -> scrolls sideways inside itself */ /* ---------- wide screens: mobile-only menu pieces stay hidden ---------- */ [data-m~="nav-burger"], [data-m~="nav-panel"] { display: none !important; } /* ---------- nav: burger below 1100px ---------- */ @media (max-width: 1100px) { [data-m~="nav-desk"], [data-m~="nav-login"] { display: none !important; } [data-m~="nav-burger"] { display: grid !important; } [data-m~="nav-panel"] { display: block !important; } [data-m~="nav-cta"] { flex-wrap: nowrap !important; } } /* ---------- tablet and down ---------- */ @media (max-width: 900px) { [data-m~="stack"] { grid-template-columns: minmax(0, 1fr) !important; gap: 44px !important; } [data-m~="cards"] { grid-template-columns: minmax(0, 1fr) !important; } [data-m~="cards2"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } [data-m~="unstick"] { position: static !important; } [data-m~="cols1"] { columns: 1 !important; } [data-m~="steps"] { grid-template-columns: minmax(0, 1fr) !important; } [data-m~="steps"] > * { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } [data-m~="steps"] > *:last-child { border-bottom: 0 !important; } [data-m~="sec"] { padding-top: 72px !important; padding-bottom: 72px !important; } [data-m~="secb"] { padding-bottom: 72px !important; } [data-m~="hero"] { padding-top: 56px !important; } } /* ---------- phones ---------- */ @media (max-width: 560px) { [data-m~="cards2"] { grid-template-columns: minmax(0, 1fr) !important; } [data-m~="sec"] { padding-top: 60px !important; padding-bottom: 60px !important; } [data-m~="secb"] { padding-bottom: 60px !important; } [data-m~="hero"] { padding-top: 40px !important; padding-bottom: 56px !important; } [data-m~="pad"] { padding: 28px 22px !important; } [data-m~="pad-s"] { padding: 16px !important; } [data-m~="stats"] { gap: 14px !important; } [data-m~="stats"] > * > :first-child { font-size: 28px !important; } [data-m~="stats"] > * > :last-child { font-size: 11px !important; letter-spacing: 0.12em !important; } [data-m~="table"] > * { padding: 14px 8px !important; font-size: 13px !important; letter-spacing: 0.04em !important; } [data-m~="table"] > :first-child { padding-left: 14px !important; } [data-m~="badge"] { right: 12px !important; left: auto !important; bottom: 12px !important; padding: 14px 18px !important; } [data-m~="faq"] { font-size: 16px !important; padding: 20px 2px !important; gap: 16px !important; } [data-m~="mini"] { gap: 12px !important; } [data-m~="mini"] > * { padding: 18px 16px !important; } [data-m~="mini"] > * > div { margin-top: 12px !important; font-size: 17px !important; } [data-m~="mini"] > * > p { margin-top: 6px !important; font-size: 14px !important; line-height: 1.5 !important; } [data-m~="foot"] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 36px 20px !important; } [data-m~="foot"] > :first-child, [data-m~="foot"] > :last-child { grid-column: 1 / -1 !important; } [data-m~="foot"] a { padding-block: 4px !important; } [data-m~="foot-legal"] { gap: 4px 20px !important; } [data-m~="foot-legal"] a { padding-block: 8px !important; } [data-m~="wrap"], [data-m~="cta"] { white-space: normal !important; width: 100% !important; box-sizing: border-box !important; justify-content: center !important; text-align: center !important; } [data-m~="full"] { width: 100% !important; box-sizing: border-box !important; justify-content: center !important; text-align: center !important; } [data-m~="m-hide"] { display: none !important; } [data-m~="tel"] { white-space: nowrap !important; display: inline-block !important; padding: 10px 0 !important; } [data-m~="fit"] { font-size: 17px !important; } [data-m~="slot"] { grid-template-columns: 58px minmax(0, 1fr) auto !important; gap: 14px !important; padding: 16px !important; } [data-m~="pills"] { gap: 6px !important; } [data-m~="pills"] > * { flex: 1 1 0 !important; justify-content: center !important; gap: 5px !important; padding: 11px 4px !important; font-size: 10px !important; letter-spacing: 0.06em !important; white-space: nowrap !important; } [data-m~="pills"] > * > * { font-size: 10px !important; } [data-m~="scroll-x"] { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } }