/* Wide layout (docs/superpowers/specs/2026-11-09-wide-layout-design.md). Linked by MasterPage.master only when the WideLayoutMode
   switch gives the viewer <html class="wide"> (never on /admin/ pages, which have their own frame). The site frame pins #wrapper at
   1020 px and #content .container at 80% (1400 px at most); on a wide window that leaves most of the screen empty. Here the page uses
   the window: 24 px gutters, 1760 px at most, centred from 1808 px (1760 + 2 x 24). Everything sits inside the 1100 px rule and
   starts with html.wide, so under 1100 px nothing changes whatever the switch says. No colours: dark mode is untouched. */
@media (min-width: 1100px) {
  html.wide #wrapper { width: auto; max-width: 1760px; margin-left: 24px; margin-right: 24px; }
  /* MasterPage.master's inline ".container { width: 80% !important; max-width: 1400px !important }" (960 px and up) is
     !important, so the override has to be as well. Only the page's own container: the nav bar and footer have theirs. */
  html.wide #content > .container { width: auto !important; max-width: none !important; }
  /* The footer bars follow the same width and gutters as #wrapper (style.css pins both at 1020 px). Their inner .container keeps
     the 80% the master gives it, with the 1400 px cap lifted (!important to beat the master's !important), and the columns
     become shares of it (about 29% each, as the three 240 px columns are of the 816 px container at 1020 px). */
  html.wide #footer, html.wide #footer-bottom { width: auto; max-width: 1760px; margin-left: 24px; margin-right: 24px; }
  html.wide #footer > .container, html.wide #footer-bottom > .container { max-width: none !important; }
  html.wide #footer > .container > .four.columns { width: calc(29.4% - 20px); }
  html.wide #footer-bottom > .container > .sixteen.columns { width: calc(100% - 20px); }
  /* Pages. Bigger tracker map: tracker.css has "#trackerMap { height: clamp(520px, calc(100vh - 280px), 620px) }" (1,0,0); this is
     (1,1,1) so it wins. Fullscreen is untouched: ".map-shell.map-fullscreen #trackerMap" in tracker.css (1,2,0) outranks it. */
  /* Only on windows taller than 500 px: tracker.css's short-landscape rule (max-height: 500px) keeps winning there. */
  @media (min-height: 501px) {
    html.wide #trackerMap { height: clamp(520px, calc(100vh - 240px), 860px); }
  }
  /* Airport page: airports.aspx's inline <style> has ".airport-page { max-width: 1100px }" and ".ac-map { height: 400px }" (0,1,0). */
  html.wide .airport-page { max-width: none; }
  html.wide .ac-map { height: 520px; }
  /* Airport diagram: airport-diagram.css caps the chart, and the vector page's link and note rows, at 1100 px (the 640 px
     centred blocks elsewhere stay as they are). */
  html.wide .apd-svg { max-width: none; }
  html.wide .apd-vec .apd-links { max-width: none; }
  html.wide .apd-vec .apd-note { max-width: none; }
  /* Airport page radar map (the weather module, weather/css/wx-radar-map.css ".wp-radar-map { height: 400px }"), taller
     (owner, 2026-11-09). Not in full screen: ".wp-radar-fs .wp-radar-map" sizes itself there. */
  @media (min-height: 501px) {
    html.wide .ac-wxmap .wp-radar-shell:not(.wp-radar-fs) .wp-radar-map { height: clamp(520px, calc(100vh - 200px), 800px); }
  }
  /* Homepage hero (owner, 2026-11-09): two columns, the copy, a wider search bar and the app badges on the left, a larger
     replay on the right, instead of a 520 px column, an empty middle and the badges centred below. default.aspx's own
     hero rules are (0,2,0) at most; these are (0,3,1) or more. js/home-replay.js sizes its views from the box. */
  html.wide .home-hero.hero-track { display: grid; grid-template-columns: minmax(0, 1fr) 460px; grid-template-areas: "copy side" "apps side"; column-gap: 48px; row-gap: 0; align-items: center; padding: 36px 40px; }
  html.wide .home-hero.hero-track .hero-copy { grid-area: copy; align-self: end; }
  html.wide .home-hero.hero-track .hero-side { grid-area: side; width: 460px; }
  html.wide .home-hero.hero-track .hero-apps { grid-area: apps; align-self: start; margin: 20px 0 0; text-align: left; }
  html.wide .home-hero.hero-track .hero-apps .ha-row { justify-content: flex-start; }
  html.wide .home-hero.hero-track h1 { font-size: 42px; }
  html.wide .home-hero.hero-track p.hero-tag { max-width: 680px; font-size: 18px; }
  html.wide .home-hero.hero-track .hero-tabs, html.wide .home-hero.hero-track .hero-panel { max-width: 780px; }
  /* Homepage delays map: delays/js/delays-map.js fits the lower 48 into the box, and a 290 px box on a wide page leaves the US
     small with the Atlantic and Europe beside it; taller, the fit zooms in on the US. */
  html.wide .delay-strip .ds-map { height: clamp(290px, 30vw, 560px); }
  /* Rest of the homepage (owner, 2026-11-09). The four "why" cards in one row instead of two by two. */
  html.wide .why-strip { grid-template-columns: repeat(4, 1fr); }
  /* Lounge Finder: a larger photo, and the text and the popular airports side by side instead of stacked in the left half. */
  html.wide .lounge-promo .lp-photo { flex-basis: 440px; }
  html.wide .lounge-promo .lp-body { display: flex; align-items: center; gap: 24px 40px; }
  html.wide .lounge-promo .lp-text { flex: 1 1 0; min-width: 0; }
  html.wide .lounge-promo .lp-body .lp-airports { flex: 0 0 440px; max-width: none; margin-top: 0; }
  /* Fare class box: the answer appears beside the two pickers instead of under them, so the blue box's right half is used. */
  html.wide .fare-box .fl-form { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 1fr); grid-template-areas: "row res" "hint res"; column-gap: 32px; align-items: start; max-width: none; }
  html.wide .fare-box .fl-form .fl-row { grid-area: row; }
  html.wide .fare-box .fl-form #flHint { grid-area: hint; }
  html.wide .fare-box .fl-form .fl-result { grid-area: res; margin-top: 0; }
  @media (min-width: 1808px) {
    html.wide #wrapper { margin-left: auto; margin-right: auto; }
    html.wide #footer, html.wide #footer-bottom { margin-left: auto; margin-right: auto; }
  }
}