/* Mobile layout overrides for small screens.
   The pages are styled inline and the runtime rewrites style attributes
   as "prop: value" (with a space), so value selectors match that form;
   both forms are listed in case the raw HTML is ever served untouched. */

@media (max-width: 860px) {

  /* Header: logo left, dark Shop/Cart button pinned top right,
     and the menu links on a single smaller line below */
  header > div[style] { padding: 12px 12px 10px !important; position: relative !important; }
  header nav[style] {
    flex-basis: 100%;
    flex-wrap: nowrap !important;
    justify-content: center;
    gap: 8px 12px !important;
    font-size: 12px !important;
    letter-spacing: .2px !important;
    overflow-x: auto;
    white-space: nowrap;
  }
  /* The logo already links home, so the Home link makes room */
  header nav > a[href="./index.dc.html"] { display: none; }
  /* Shop pages carry an extra Shop link beside Cart; trim to keep one line */
  header nav[style]:has(.dropdown > a.navlink[href="./menu.dc.html"]) {
    font-size: 11px !important;
    gap: 8px 10px !important;
  }
  header nav .dropdown:has(> a.btn),
  header nav > a.btn {
    position: absolute;
    top: 10px;
    right: 12px;
  }
  header img[alt="Jade-S Fisheries"] { width: 128px !important; }

  /* Page gutters: 40px side padding becomes 20px everywhere */
  main[style*="padding"], section[style*="padding"], footer[style*="padding"] {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  /* Full-bleed hero sections stay edge to edge */
  section[style*="vh"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Every fixed multi-column grid stacks to a single column */
  div[style*="grid-template-columns"],
  section[style*="grid-template-columns"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  div[style*="grid-template-columns"] > *,
  section[style*="grid-template-columns"] > * {
    min-width: 0 !important;
    max-width: 100% !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  section[style*="grid-template-columns"] { gap: 44px !important; }

  /* Heroes lose height on a phone (desktop keeps the tall versions) */
  section[style*="height: 92vh"], section[style*="height:92vh"] { height: 50vh !important; min-height: 380px !important; }
  section[style*="height: 80vh"], section[style*="height:80vh"] { height: 56vh !important; min-height: 420px !important; }

  /* Driftwood hero: phones keep the taller box and smaller type */
  section[style*="height: 52vh"], section[style*="height:52vh"] { height: 60vh !important; min-height: 440px !important; }
  section[style*="height: 52vh"] h1, section[style*="height:52vh"] h1 { font-size: 32px !important; letter-spacing: -1px !important; }
  section[style*="height: 52vh"] p[style*="font-size: 19px"], section[style*="height:52vh"] p[style*="font-size:19px"] { font-size: 15px !important; margin-bottom: 24px !important; }
  section[style*="height: 52vh"] .btn, section[style*="height:52vh"] .btn { padding: 13px 24px !important; }
  section[style*="height: 52vh"] > div[style*="flex-end"], section[style*="height:52vh"] > div[style*="flex-end"] { padding-bottom: 44px !important; }

  /* Fresh-today: sit close under the hero, then title, board, and the
     rest in that order. display:contents lets the text block's children
     join the section grid so the board can slot in under the title. */
  section[style*="grid-template-columns"]:has(> div[style*="border: 10px solid"]) {
    gap: 0 !important;
    padding-top: 36px !important;
  }
  section[style*="grid-template-columns"]:has(> div[style*="border: 10px solid"]) > div:first-child { display: contents !important; }
  section[style*="grid-template-columns"]:has(> div[style*="border: 10px solid"]) > div:first-child > p:first-child { order: -3; }
  section[style*="grid-template-columns"]:has(> div[style*="border: 10px solid"]) > div:first-child > h2 { order: -2; }
  section[style*="grid-template-columns"] > div[style*="border: 10px solid"] { order: -1; margin-bottom: 40px; }

  /* The chalkboard-style catch list shrinks its lettering to fit */
  span[style*="font-size: 27px"], span[style*="font-size:27px"] { font-size: 16px !important; }

  /* Tall section paddings breathe less on a phone */
  section[style*="padding: 130px"], section[style*="padding:130px"],
  section[style*="padding: 120px"], section[style*="padding:120px"],
  section[style*="padding: 110px"], section[style*="padding:110px"],
  section[style*="padding: 100px"], section[style*="padding:100px"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }

  /* The checkout order summary stops being sticky when stacked */
  div[style*="top: 110px"], div[style*="top:110px"] { position: static !important; }

  /* Wide inner panels (catch board, banners) lose some padding */
  div[style*="padding: 56px 48px"], div[style*="padding:56px 48px"] { padding: 36px 24px !important; }
  div[style*="padding: 36px 40px"], div[style*="padding:36px 40px"] { padding: 26px 18px !important; }

  /* Cart drawer takes the full width on small phones */
  div[style*="width: 400px"][style*="position: fixed"],
  div[style*="width:400px"][style*="position:fixed"] { width: 100vw !important; max-width: 100vw !important; }

  /* Touch devices have no hover: open the nav dropdowns on tap focus too */
  .dropdown:focus-within .dropdown-menu { display: block; }

  /* Scrolled: the menu line tucks away, leaving the logo and the
     Shop/Cart button (header.js toggles the class on <html>) */
  html.nav-hidden header nav[style] > a.navlink,
  html.nav-hidden header nav[style] > .dropdown:not(:has(> a.btn)) { display: none; }
  html.nav-hidden header nav[style] { min-height: 0; gap: 0 !important; }
  html.nav-hidden header > div[style] { padding-bottom: 12px !important; gap: 0 !important; }
}

/* Between phone and full desktop (small laptops with display scaling,
   tablets): card grids go two-up instead of one huge column */
@media (min-width: 561px) and (max-width: 860px) {
  div.cardgrid,
  div[style*="grid-template-columns"]:has(> a.card) {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}