/* Phone and tablet layout for the search page. Works with mobile.js.
   Desktop (wider than 1023px) is untouched by everything in this file. */

/* Clicking a pin scrolls its card into view. The nav and search band are
   sticky, so without this the card stopped underneath them, half hidden.
   --sticky is their measured height, set by search.js. */
.card { scroll-margin-top: calc(var(--sticky, 182px) + 18px); scroll-margin-bottom: 18px; }

/* Hidden everywhere until a media query below turns them on. */
.msum, .mshead, .mfab { display: none; }

/* ---------- phones: the slim search bar and the search sheet ---------- */
@media (max-width: 760px) {
  /* Folded: only the slim bar shows in the sticky band. */
  .searchband .wrap.msum { display: block; padding-block: 8px; }
  body:not(.msopen) .searchband > .wrap:not(.msum) { display: none; }

  .msumbtn {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
    padding: 7px 8px 7px 14px; cursor: pointer; text-align: left;
    box-shadow: 0 2px 10px rgba(16, 45, 78, .08);
    -webkit-tap-highlight-color: transparent;
  }
  .msicon {
    width: 16px; height: 16px; flex: none; position: relative;
    border: 2px solid var(--navy); border-radius: 50%;
  }
  .msicon::after {
    content: ""; position: absolute; width: 2px; height: 7px; background: var(--navy);
    right: -4px; bottom: -6px; transform: rotate(-45deg); border-radius: 1px;
  }
  .mstext { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
  .mstext b { font-size: 13.5px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mstext span { font-size: 12px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .msfilt {
    flex: none; font-size: 12px; color: var(--ink-2); border: 1px solid var(--line);
    border-radius: 999px; padding: 6px 11px; background: var(--surface);
  }
  .msfilt.on { background: var(--navy); border-color: var(--navy); color: var(--navy-ink); }

  /* Open: the whole search becomes a full-screen sheet over the page, so the
     guest keeps their place in the list behind it. */
  body.msopen { overflow: hidden; }
  body.msopen .searchband {
    position: fixed; inset: 0; top: 0; z-index: 70;
    overflow-y: auto; -webkit-overflow-scrolling: touch; border-bottom: 0;
  }
  body.msopen .searchband .wrap.msum { display: none; }
  body.msopen .searchband > .wrap { padding-block: 0 28px; }
  body.msopen .mshead {
    display: flex; align-items: center; justify-content: space-between;
    position: sticky; top: 0; z-index: 2; background: var(--surface);
    padding: 14px 0 12px; margin-bottom: 6px; border-bottom: 1px solid var(--line-soft);
  }
  .mstitle { font-size: 16px; font-weight: 500; }
  .msclose {
    background: none; border: 1px solid var(--line); border-radius: 999px;
    padding: 6px 16px; font-size: 13px; font-weight: 500; color: var(--navy-text); cursor: pointer;
  }
  /* Bigger, thumb-friendly controls inside the sheet. 16px text also stops
     iPhone Safari from zooming the page when a dropdown is tapped. */
  body.msopen .sform { grid-template-columns: 1fr 1fr; gap: 14px 10px; }
  body.msopen .field > select, body.msopen .datebtn { font-size: 16px; padding: 11px 12px; }
  body.msopen .sform .btn { padding-block: 13px; font-size: 15px; }
  body.msopen .chip { padding: 8px 14px; font-size: 13px; }

  /* The results heading takes less room on a phone. */
  .resbar { padding-block: 16px 10px; gap: 8px 12px; }
  .resbar h1 { font-size: 20px; flex-basis: 100%; }
  .grid { gap: 16px; padding-bottom: 96px; }

  /* Room for the floating button below the last card and the footer. */
  footer .wrap { padding-bottom: 90px; }
}

/* ---------- phones and tablets: floating Map / List button ---------- */
@media (max-width: 1023px) {
  .mfab {
    display: inline-flex; align-items: center; gap: 8px;
    position: fixed; left: 50%; transform: translateX(-50%);
    bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 65;
    background: var(--navy); color: var(--navy-ink); border: 0; border-radius: 999px;
    padding: 12px 22px; font-size: 14px; font-weight: 500; cursor: pointer;
    box-shadow: 0 6px 20px rgba(16, 45, 78, .35);
    -webkit-tap-highlight-color: transparent;
  }
  .mfab:active { transform: translateX(-50%) scale(.97); }
  body.msopen .mfab { display: none; }

  .mfi { width: 16px; height: 16px; flex: none; position: relative; display: inline-block; }
  /* A folded map. */
  .mfi.map {
    border: 1.8px solid currentColor; border-radius: 2px;
    background:
      linear-gradient(currentColor, currentColor) 33% 0 / 1.6px 100% no-repeat,
      linear-gradient(currentColor, currentColor) 66% 0 / 1.6px 100% no-repeat;
  }
  /* Three lines for a list. */
  .mfi.list {
    background:
      linear-gradient(currentColor, currentColor) 0 2px / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 7px / 100% 2px no-repeat,
      linear-gradient(currentColor, currentColor) 0 12px / 100% 2px no-repeat;
  }

  /* The floating button replaces the small Map button in the results bar. */
  #mapbtn { display: none; }

  /* Map mode: the map fills the screen under the header. */
  body.mapon { overflow: hidden; }
  body.mapon .mappanel:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0; top: var(--sticky, 120px);
    z-index: 25; margin: 0; padding: 8px 12px 12px;
    background: var(--ground); display: flex; flex-direction: column;
  }
  body.mapon .mapbox { flex: 1; height: auto !important; min-height: 0; }
  body.mapon .mapnote:empty { display: none; }
  /* Leaflet's credit line sits bottom-right; keep it clear of the button. */
  body.mapon .leaflet-bottom.leaflet-right { margin-bottom: 0; }
}