/* css/mobile.css — loads only on small screens (media="(max-width: 1023.98px)") */

/* 1) Hide desktop chrome on phones */
.header,
.header-illustration,
aside.filters {
  display: none !important;
}

/* 2) Make the inner blue canvas actually fit phones */
.unified-bg{
  width: 100% !important;
  max-width: none !important;
  padding: 16px !important;
  border-radius: 0 !important;
}
.content-container{
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}
.school-list-container{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* 3) Respect mobile panels (ui-mobile.js toggles .ui-panel--visible) */
#map-container{ display: none !important; }
#map-container.ui-panel--visible{ display: block !important; } /* or flex */
#school-list{ display: block !important; }

/* 4) Mobile app bar + segmented view */
.ui-appbar{
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  background: var(--campsul-blue) !important; /* keep site palette */
  color: var(--ink-strong) !important;
  border-bottom: 1px solid var(--border-lite);
}
.ui-appbar .ui-brand img{ height: 28px; display:block; }
.ui-icon-btn{
  height: 44px; min-width: 44px; display:inline-grid; place-items:center;
  border: 1px solid #1f2a3a; border-radius: 10px; background: #111925; color: #e6eef7;
}
.ui-segment{
  justify-self: end; display:inline-flex; gap:4px; background:#111925;
  border:1px solid #1f2a3a; border-radius:999px; padding:4px;
}
.ui-segment__btn{ height:36px; padding:0 14px; border:0; border-radius:999px; background:transparent; color:#a3b3c6; }
.ui-segment__btn.is-active{ background:#3aa0ff; color:#03111c; }

/* 5) Chip bar behaves (hidden means hidden) */
.ui-chipbar{
  position: sticky; top: 56px; z-index: 38;
  display:flex; gap:8px; padding:8px 12px;
  background: #0b1119; border-bottom:1px solid #1f2a3a;
}
.ui-chipbar[hidden]{ display:none !important; }
.ui-chips{ display:flex; gap:6px; overflow:auto; scrollbar-width:none; }
.ui-chips::-webkit-scrollbar{ display:none; }
.ui-chip{
  display:inline-flex; gap:6px; padding:6px 10px; border-radius:999px;
  background:#111925; border:1px solid #1f2a3a; color:#e6eef7;
}
.ui-link-btn{ background:transparent; border:0; color:#3aa0ff; }

/* 6) Search/sort row (cancel desktop capsule + negative margin) */
/* Sticky search + second row for filters/sort */
.ui-searchbar{
  position: sticky !important;
  top: 56px;
  z-index: 30;
  background: var(--campsul-blue) !important;
  border-bottom: 1px solid var(--border-lite) !important;
  box-shadow: none !important;
  padding: 12px 8px !important;

  display: grid !important;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    "search search"
    "filters sort";
  gap: 8px !important;

  margin-top: 0 !important;
  border-radius: 0 !important;
}

/* Place items into grid areas */
.search-container{ grid-area: search; width: 100% !important; }
.ui-filters-btn{ grid-area: filters; justify-self: start; }
#sort-options{ grid-area: sort; justify-self: end; }

/* Cancel desktop 60% width on the search box wrapper */
.search-container{ width: auto !important; }

/* Bigger search field + visible Search button */
.search-container,
.search-container input,
.search-container .search-btn,
#sort-options{
  background: #fff !important;
  box-shadow: none !important;
}

.search-container input,
.search-container .search-btn,
#sort-options{
  border: 1px solid var(--border-lite) !important;
  border-radius: 12px !important;
  height: 48px !important;           /* bigger touch target */
  font-size: 16px !important;
}

/* Keep the Search button on all phones */
@media (max-width: 480px){
  .search-container .search-btn{ display: inline-flex !important; align-items:center; padding: 0 16px; }
}

/* 7) Cards won’t clip off the right edge */
.ui-cards{ list-style:none; margin:0; padding: 12px; display:grid; gap: 12px; }
.ui-cards > .school-card,
.school-card{
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #e5e7eb !important;
  box-shadow: 0 2px 10px rgba(0,0,0,.06) !important;
  margin: 12px 0 !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

/* 8) Stats wrap on phones (no overflowing “1 / 14” at the edge) */
@media (max-width: 768px){
  .school-stats{
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 12px;
    width: 100%;
  }
  .separator{ display: none !important; }
  .stat span{ font-size: 1.4rem !important; line-height: 1.2; }
}

/* 9) Filter sheet */
.ui-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter: blur(1px); z-index: 99; }
.ui-backdrop[hidden]{ display:none !important; }
.ui-sheet[hidden]{ display:none !important; }
.ui-sheet{
  position:fixed; left:0; right:0; bottom:0; background:#0b0f14; color:#e6eef7;
  border-top-left-radius:18px; border-top-right-radius:18px; z-index:100;
  max-height:85vh; transform:translateY(100%); transition: transform .25s ease;
  display:grid; grid-template-rows:auto 1fr;
}
.ui-sheet.is-open{ transform:translateY(0); }
.ui-sheet__header{ display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid #1f2a3a; }
.ui-sheet__title{ margin:0; font-size:1rem; }
.ui-form{ overflow:auto; }
.ui-fields{ display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:12px; }
.ui-fields label{ display:grid; gap:6px; font-size:.9rem; color:#a3b3c6; }
.ui-fields select{
  height:40px; border-radius:10px; border:1px solid #1f2a3a;
  background:#111925; color:#e6eef7; padding:0 10px;
}
.ui-sheet__footer{
  display:flex; gap:10px; padding:12px; border-top:1px solid #1f2a3a;
  position:sticky; bottom:0; background:#0b0f14;
}
.ui-btn{ height:44px; padding:0 14px; border-radius:12px; border:0; background:#3aa0ff; color:#03111c; }
.ui-btn--ghost{ background:transparent; border:1px solid #1f2a3a; color:#e6eef7; }

/* 10) Map height that doesn’t swallow the page */
.ui-map{ height: 48vh; min-height: 320px; }

/* ---- Mobile overflow fixes ---- */

/* 1) Kill horizontal scroll */
html, body { max-width: 100%; overflow-x: hidden !important; }
body { align-items: stretch !important; } /* undo desktop centering on phones */

/* 2) Border-box for anything that has 100% width + padding */
.unified-bg,
.map-container,
.ui-searchbar,
.ui-chipbar,
.content-container,
.school-list-container,
.ui-cards,
.school-card,
.footer {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* 3) Let long footer links wrap instead of blowing out the width */
.footer-right a { white-space: normal !important; }

/* 4) Slight guardrail for images */
img { max-width: 100%; height: auto; }


/* ==== Campsul mobile polish (append to css/mobile.css) ==== */

/* 0) Guardrails: kill horizontal scroll on phones */
html, body { width: 100%; max-width: 100%; overflow-x: hidden !important; }

/* 1) Make the inner canvas fit and stop the big desktop pill overflow */
.unified-bg { width: 100% !important; max-width: none !important; padding: 16px !important; border-radius: 0 !important; }
.content-container, .school-list-container, .map-container, .ui-searchbar, .ui-chipbar, .footer {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

/* 2) Use the same palette as index (logo stays visible) */
:root{
  --campsul-blue: #BBD4FF;   /* index page blue background */
  --campsul-blue-2: #E4EDFD; /* lighter blue blocks */
  --ink-strong: #0b1119;
  --ink-med: #243246;
  --border-lite: #cfd9f2;
}

/* Mobile app bar and chips now match the index background */
.ui-appbar{
  background: var(--campsul-blue) !important;
  color: var(--ink-strong) !important;
  border-bottom: 1px solid var(--border-lite);
}
.ui-appbar .ui-brand img{ height: 28px; display: block; }

/* Segmented switch: light chip on blue */
.ui-segment{
  background: #fff;
  border: 1px solid var(--border-lite);
}
.ui-segment__btn{ color: var(--ink-med); }
.ui-segment__btn.is-active{ background: #3aa0ff; color: #fff; }

/* Active filter chips bar shares the same blue */
.ui-chipbar{
  background: var(--campsul-blue) !important;
  border-bottom: 1px solid var(--border-lite);
}
.ui-chip{ background:#fff; border:1px solid var(--border-lite); color: var(--ink-med); }

/* Sticky search/sort row uses the blue, inputs stay white cards */
.ui-searchbar, .search-sort{
  background: var(--campsul-blue) !important;
  border-bottom: 1px solid var(--border-lite) !important;
  margin-top: 0 !important;         /* undo desktop negative margin */
  border-radius: 0 !important;      /* kill the giant desktop pill */
  padding: 12px 8px !important;
  display: grid !important;
  grid-template-columns: 1fr minmax(130px, 40%) !important;
  gap: 8px !important;
}
.search-container, .search-container input, .search-container .search-btn, #sort-options{
  background: #fff !important;
  box-shadow: none !important;
}
.search-container input, .search-container .search-btn, #sort-options{
  border: 1px solid var(--border-lite) !important;
  border-radius: 12px !important;
  height: 40px !important;
}

/* Map/list panels: respect mobile visibility and set sane map height */
#map-container{ display: none !important; }
#map-container.ui-panel--visible{ display: block !important; }
.ui-map{ height: 48vh; min-height: 320px; }

/* Cards never exceed the viewport width */
.ui-cards{ list-style:none; margin:0; padding: 12px; display:grid; gap: 12px; }
.school-card{
  background:#fff !important; color:#111 !important;
  border:1px solid #e5e7eb !important; box-shadow:0 2px 10px rgba(0,0,0,.06) !important;
  max-width: 100% !important; margin:12px 0 !important; box-sizing:border-box;
}

/* Wrap stats nicely on small screens */
@media (max-width: 768px){
  .school-stats{ display:grid !important; grid-template-columns: 1fr 1fr; gap:12px 16px; width:100%; }
  .separator{ display:none !important; }
  .stat span{ font-size:1.4rem !important; line-height:1.2; }
}

/* Footer: full width, no overflow */
.footer{
  width: 100% !important;
  max-width: 100% !important;
  padding-left: 16px !important; padding-right: 16px !important;
}
.footer-right a{ white-space: normal !important; }

 

.ui-filters-btn{
  height: 44px; min-width: 44px;
  display: inline-grid; place-items: center;
  border: 1px solid var(--border-lite);
  border-radius: 12px; background: #fff; color: var(--ink-med);
  padding: 0 14px;
}

/* Hide the desktop map toggle on mobile (unchanged) */
.map-btn{ display: none !important; }
/* === Mobile polish: bigger logo, visible Search, blue Filters, tighter spacing === */

/* App bar height variable so sticky chip/search bars align */
:root { --appbar-h: 76px; } /* ~56px logo + padding */

/* App bar + logo */
.ui-appbar{
  min-height: var(--appbar-h);
  padding: 8px 12px !important;
  display: flex !important;
  align-items: center; justify-content: space-between;
}
.ui-appbar .ui-brand img{ height: 56px !important; } /* 2× bigger vs 28px */

/* Make chipbar/searchbar stick below the taller app bar */
.ui-chipbar { top: var(--appbar-h) !important; }
.ui-searchbar { top: var(--appbar-h) !important; padding-bottom: 8px !important; }
@supports selector(body:has(.ui-chipbar)){
  body:has(.ui-chipbar:not([hidden])) .ui-searchbar{
    top: calc(var(--appbar-h) + 44px) !important;
  }
}

/* Keep search button visible and consistent */
.search-container .search-btn{
  background: #3aa0ff !important;
  color: #fff !important;
  border-color: #3aa0ff !important;
  display: inline-flex !important;
  align-items: center; justify-content: center;
  padding: 0 16px !important;
  height: 48px !important;
  border-radius: 12px !important;
}

/* Filters button: same blue style as active List tab, same height as Sort */
.ui-filters-btn{
  height: 48px !important;
  background: #3aa0ff !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  font-weight: 700;
}

/* Dropdown height to match */
#sort-options{ height: 48px !important; }

/* Pull the list a bit closer to the controls */
#list-view{ margin-top: 6px !important; }

/* === Make Search a little smaller, and reduce space before the first card === */

/* 1) Slim the Search button without breaking alignment */
.search-container .search-btn{
  /* keep same height so it aligns with the input/selects */
  height: 48px !important;
  /* narrower horizontal padding + slightly smaller type */
  padding: 0 12px !important;
  font-size: 14px !important;
}

/* 2) Bring Filters row closer to the cards */
.ui-searchbar{
  /* less bottom padding under the row */
  padding-bottom: 4px !important;
  /* smaller vertical gap between the Search row and Filters/Sort row */
  gap: 6px !important;
}

/* 3) Nudge the list up so the first card sits closer */
#list-view{ margin-top: 0 !important; }
.ui-cards{ padding-top: 4px !important; }

/* — Smaller Search; tighter spacing; closer first card — */

/* Shrink the white pill wrapper so the whole row isn't huge */
.search-container{
  padding: 6px 8px !important;          /* was 10px from desktop CSS */
  border-radius: 14px !important;
}

/* Make the input and Search button a bit shorter */
.search-container input{
  height: 44px !important;              /* was 48px */
  font-size: 15px !important;
}
.search-container .search-btn{
  height: 34px !important;              /* was 48px in multiple places */
  padding: 0 12px !important;           /* narrower */
  font-size: 14px !important;
}

/* Tighten space under the Filters/Sort row */
.ui-searchbar{
  gap: 6px !important;                  /* from 8px */
  padding-bottom: 2px !important;       /* from ~8-12px in earlier rules */
}

/* Remove double vertical spacing before the first card:
   let the grid gap control spacing instead of margins */
.ui-cards{ padding-top: 4px !important; }  /* bring list closer */
.ui-cards > .school-card,
.school-card{ margin: 10 !important; }      /* kill the extra 12px margins */

/* Keep the panel itself flush with the controls */
#list-view{ margin-top: 0 !important; }
/* --- Mobile card polish --- */

/* Card container */
.school-card{
  padding: 16px !important;
  border-radius: 16px !important;
  border: 1px solid #e6eef7 !important;
  box-shadow: 0 6px 12px rgba(9,30,66,.08) !important;
}

/* Layout + thumbnail */
.school-card-content{
  gap: 12px !important;
  align-items: flex-start !important;
}
.school-image{
  width: 84px !important;
  height: 84px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
}

/* Title + meta */
.school-info h3{
  margin: 2px 0 4px !important;
  font-size: 1.1rem !important; /* less shouty on phones */
}
.school-info p{
  color: #61718a !important;
  font-size: 0.9rem !important;
}

/* Stats become neat tiles (2x2) */
.school-stats{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 12px !important;
  width: 100% !important;
  margin-top: 8px !important;
}
.stat{
  align-items: flex-start !important;
  background: #f8fbff !important;
  border: 1px solid #e6eef7 !important;
  border-radius: 12px !important;
  padding: 10px 12px !important;
  min-height: auto !important;
}
.stat p{
  margin: 0 !important;
  font-size: .78rem !important;
  color: #667085 !important;
}
.stat span{
  margin-top: 2px !important;
  font-size: 1.25rem !important;
  color: #058BC3 !important;
}

/* Kill the old gray dividers on phones */
.separator{ display: none !important; }

/* Slightly tighter list spacing */
.ui-cards{ gap: 10px !important; }


/* ==== Tablet (iPad) polish: fixed left rail, aligned KPIs, more spacing ==== */
@media (min-width: 768px) and (max-width: 1023.98px) {

  /* Turn the card content into a 3-col grid: [img][info][stats] */
  .school-card-content{
    display: grid !important;
    grid-template-columns: 96px 280px 1fr; /* fixed image + fixed info + flexible KPIs */
    column-gap: 16px;
    align-items: center;
  }

  /* Consistent image size on tablet */
  .school-image{
    width: 96px !important;
    height: 96px !important;
    border-radius: 10px;
    object-fit: cover;
  }

  /* Fix the info block width so KPI columns line up card-to-card */
  .school-info{
    min-width: 280px !important;
    max-width: 280px !important;
  }

  /* KPI area: four equal columns, nice spacing, hide separators */
  .school-stats{
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px 16px;
    align-items: stretch;
    width: 100%;
  }
  .separator{ display: none !important; }

  .stat{
    align-items: flex-start;
    justify-content: center;
    padding: 8px 10px;
    border: 1px solid #e4edf5;
    border-radius: 12px;
    background: #f7fbff;
  }
  .stat p{ margin: 0; font-size: 0.8rem; color: #59677b; }
  .stat span{ font-size: 1.25rem !important; margin-top: 2px; color: #058BC3; }

  /* Slightly increase the vertical space between cards */
  .ui-cards{ gap: 18px !important; }
  .school-card{ margin: 18px 0 !important; }
}

/* ---- iPad/tablet fixes: app bar alignment + card spacing ---- */
@media (min-width: 768px) and (max-width: 1023.98px) {
  /* Keep the app bar in one row: logo left, segment right */
  .ui-appbar{
    display: flex !important;
    align-items: center;
    justify-content: flex-start;   /* logo first, then push segment to right */
    gap: 12px;
    padding: 12px 16px !important;
  }
  .ui-appbar .ui-brand{ flex: 0 0 auto; }
  .ui-appbar .ui-segment{
    margin-left: auto;             /* pins it to the right */
    flex: 0 0 auto;
    white-space: nowrap;
  }
  /* If a Filters button is still in the app bar on tablet, hide it */
  .ui-appbar [data-ui="open-sheet"]{
    display: none !important;
  }

  /* Card breathing room on tablet */
  .ui-cards{
    padding: 16px !important;
    gap: 24px !important;          /* more space between cards */
  }
  .school-card{
    padding: 24px !important;      /* bigger internal padding */
    border-radius: 16px;           /* a touch softer */
  }
  .school-card-content{ gap: 24px; }
}