/* Mobile layout only. Desktop rules stay in each page's own inline styles.
   Every override is inside a max-width query and uses !important because the
   design export sets layout on the element style attribute. The DOM, the
   copy, and the desktop layout are left as they are. */

@media (max-width: 980px) {
  nav {
    flex-wrap: wrap !important;
    align-items: center !important;
    row-gap: 8px !important;
    height: auto !important;
  }

  /* Logo block stays intact. Link and action groups wrap as whole items,
     so Chinese labels are not squeezed into one character per line. */
  nav > a,
  nav > div:not(:has(a)):not(:has(button)) {
    flex: 0 0 auto !important;
  }

  nav > div:has(a),
  nav > div:has(button) {
    flex: 1 1 220px !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px 12px !important;
    min-width: min(100%, 200px) !important;
  }

  nav a,
  nav button {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
  }

  /* The signed-in avatar has to stay in the top-right corner. Wrapping the
     nav would otherwise carry it onto the next row, at the left. */
  nav {
    padding-right: 58px !important;
  }

  [data-home-avatar] {
    position: fixed !important;
    top: 12px !important;
    right: 12px !important;
    left: auto !important;
    margin: 0 !important;
    z-index: 60 !important;
  }

  div:has(> .crumb) {
    flex-wrap: wrap !important;
    row-gap: 4px !important;
  }

  .crumb,
  .nav-link,
  .mp-link,
  .fav-btn,
  .mp-btn-x,
  .ev-login-btn {
    white-space: nowrap !important;
  }

  [style*="grid-template-columns: 1fr 320px"],
  [style*="grid-template-columns:1fr 320px"],
  [style*="grid-template-columns: 1fr 340px"],
  [style*="grid-template-columns:1fr 340px"],
  [style*="grid-template-columns: 1fr 300px"],
  [style*="grid-template-columns: 1fr 372px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [style*="grid-template-columns:1.6fr repeat(3,1fr)"],
  [style*="grid-template-columns: 1.6fr repeat(3, 1fr)"],
  [style*="grid-template-columns:1.6fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [style*="minmax(330px"],
  [style*="minmax(280px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  input,
  select,
  textarea {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  [style*="grid-template-columns:repeat(4,1fr)"],
  [style*="grid-template-columns:repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(4,1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* The four hero facts (cost, timezone, network, season) stay a 2×2. */
  [style*="grid-template-columns: repeat(4, 1fr)"][style*="gap: 1px"],
  [style*="grid-template-columns:repeat(4, 1fr)"][style*="gap:1px"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  [style*="grid-template-columns: 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns: 1fr 1fr 1fr"],
  [style*="grid-template-columns:1fr 1fr 1fr"],
  [style*="grid-template-columns: 1.4fr 1fr 1fr"],
  [style*="grid-template-columns:1.4fr 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  [style*="grid-template-columns: 1.5fr 2fr 1fr"],
  [style*="grid-template-columns: 1.3fr 2fr 0.9fr"] {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  [style*="grid-template-columns: 1.5fr 2fr 1fr"] > :nth-child(2),
  [style*="grid-template-columns: 1.3fr 2fr 0.9fr"] > :nth-child(2) {
    grid-column: 1 / -1;
    text-align: left !important;
  }

  [style*="grid-template-columns:1.6fr repeat(3,1fr)"],
  [style*="grid-template-columns: 1.6fr repeat(3, 1fr)"],
  [style*="grid-template-columns:1.6fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 1.6fr 1fr 1fr 1fr"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .u-search {
    flex-wrap: wrap !important;
    border-radius: 22px !important;
  }

  .u-search > span {
    display: none !important;
  }

  .u-search input {
    min-width: 0 !important;
    flex: 1 1 120px !important;
  }
}