/* ========================================================================== gaz-mobile.css — Epic Gazette mobile-readiness pass. 2026-09-26. Loaded LAST on every page (injected before by news-gate.php on every PHP page; linked literally in the few pages that don't route through it: eat, events, magazine, static .html). Scope: contain blowouts, park the floating hardware where thumbs can reach it, and keep the reading surface clear. The paper's look is untouched — these rules only fire where content was being cut off. ========================================================================== */ /* ---------- universal containment ---------------------------------------- Long words/URLs and fixed-size children were pushing article columns past the rail; content imgs get a ceiling; tables scroll instead of clipping. */ main, article, .wrap, .article, .cb-bundle, .dl-card, .bz-dir-card, .article-card { overflow-wrap: break-word; } article img, .article img, main img, .wrap img, .dl-card img, .bz-dir-card img, .article-card img { max-width: 100%; } .cb-map img { max-width: none; } /* positioned OSM tiles, not content */ pre, code { max-width: 100%; } pre { white-space: pre-wrap; word-break: break-word; } article table, .article table { display: block; max-width: 100%; overflow-x: auto; } video, iframe { max-width: 100%; } input, select, textarea { max-width: 100%; } /* ---------- combo route cards --------------------------------------------- Bug: every .cb-bundle measured 670px wide on a 390px phone — the card was cut in half. Root cause: .cb-map carries an inline width:640px, which inflated the grid track's automatic minimum (1fr = minmax(auto,1fr)), and max-width:100% can't clamp during min-content sizing. minmax(0,1fr) makes the track shrinkable; the !important on .cb-map beats the inline width. */ .cb-bundles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cb-bundle .cb-map { width: 100% !important; } @media (max-width: 820px) { .cb-bundles { grid-template-columns: minmax(0, 1fr); } } /* ---------- folio dropdown menus ------------------------------------------ The fold-open panels in .gzm-folio anchor left:50%/translateX(-50%) of their summary; on a phone the Sections panel clipped 8px+ off the left edge and its links could run past the right edge. */ @media (max-width: 700px) { /* body prefix: see the note above the widget rules — some pages link gaz-reader.css inside , after this sheet's position. */ body .gzm-panel { max-width: calc(100vw - 20px); } body .gzm-panel a { white-space: normal; } body .gzm-pop:first-of-type .gzm-panel { left: 0; transform: none; } body .gzm-pop:last-of-type .gzm-panel { left: auto; right: 0; transform: none; } } /* ---------- floating hardware, phone layout ------------------------------- Four widgets own the page edges. At phone width they stacked on top of the masthead and the body text: * #gazTypeDock (A-/A+) was pinned top-center and sat ON the nameplate and the #gaz209strip zip input on every page. * .edna-face is 148px — a third of the phone screen, covering copy. * .gazette-team-open landed bottom-left directly on #gazToolsBtn. Phone arrangement: tools badge bottom-left, team card stacked above it, type dock bottom-center as a slim pill, Edna shrunk bottom-right, share badge above her. Everything keeps the same look, just smaller. */ /* NOTE: these rules are prefixed with `body` because several section pages link gaz-reader.css inside , AFTER this sheet's position -- plain #id selectors there would win on source order. The body prefix keeps the parking rules winning regardless of link order. */ @media (max-width: 700px) { body #gazTypeDock { top: auto; right: auto; bottom: 12px; left: 50%; transform: translateX(-50%); flex-direction: row; padding: 4px 7px; gap: 4px; border-width: 2px; border-radius: 999px; } body #gazTypeDock button { width: 28px; height: 28px; border-width: 2px; } body #gazToolsBtn { left: 10px; bottom: 10px; width: 48px; height: 48px; } body #gazTools { left: 10px; bottom: 66px; } body .gazette-team-open { left: 10px; top: auto; bottom: 70px; max-width: 150px; padding: 8px 10px; } body .edna-dock { right: 10px; bottom: 10px; gap: 6px; } body .edna-face { width: 62px; height: 62px; border-width: 2px; } body .edna-face-tag { right: 76px; bottom: 26px; font-size: .66rem; padding: 4px 8px; } body .edna-panel { width: min(370px, calc(100vw - 20px)); max-height: min(70vh, 560px); } body #gazShareBtn { right: 10px; top: auto; bottom: 96px; width: 44px; height: 44px; } body #gazShare { left: 10px; right: 10px; bottom: 10px; top: auto; transform: none; width: auto; max-height: 78vh; overflow-y: auto; } /* platform nav: brand + contact on row 1, section tabs wrap below */ .gazette-nav-panel { max-width: calc(100vw - 24px); } } /* ---------- sports desk (.sdw2) ------------------------------------------- The sticky brand-row packed the desk nameplate and the live clock into one no-wrap flex row — they overlapped at phone width. */ @media (max-width: 700px) { .sdw2 .brand-row { flex-wrap: wrap; row-gap: 6px; padding: 10px 0; min-height: 0; } .sdw2 .brand { min-width: 0; gap: 10px; } .sdw2 .brand-mark { width: 38px; height: 38px; border-radius: 10px; } .sdw2 .brand-copy strong { font-size: 1rem; } .sdw2 .brand-copy span { font-size: .7rem; } .sdw2 .topline-inner { flex-wrap: wrap; row-gap: 2px; min-height: 0; padding: 4px 0; } } /* ---------- magazine chrome ----------------------------------------------- #chrome-bot is a centered pill; on narrow phones the control row ran off both edges. Let it wrap inside a capped width instead of clipping. */ @media (max-width: 700px) { #chrome-bot { max-width: calc(100vw - 12px); flex-wrap: wrap; row-gap: 4px; border-radius: 16px; } #chrome-top { padding: 6px 10px; } #chrome-top .topright { gap: 6px; flex-wrap: wrap; justify-content: flex-end; } #pgcount { min-width: 0; } } /* ---------- safe-area insets (notched phones, iOS) ------------------------- Fixed bottom widgets and bars honor the home-indicator inset so nothing sits under the gesture bar. max() keeps the desktop offsets untouched. */ .edna-dock { bottom: max(16px, env(safe-area-inset-bottom)); } #gazToolsBtn { bottom: max(14px, env(safe-area-inset-bottom)); } #salebar { padding-bottom: max(9px, env(safe-area-inset-bottom)); }