/* Mantle Directory Engine — Directory + Schools UI Styles */

/* Root and layout */
.mantle-directory {
  width: 100%;
  max-width: 100vw;
  margin: 0;
  font-family: "Montserrat", Gotham, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #1a2b3c;
}

.mantle-directory .mde-inner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 1.2rem;
}

.mantle-directory .mde-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.mantle-directory .mde-card {
  background: #fff;
  border: 1.5px solid #dbe3ed;
  border-radius: 8px;
  box-shadow: 0 2px 12px #0a76b61f;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  transition: box-shadow 0.2s, transform 0.2s;
}
.mantle-directory .mde-card:hover,
.mantle-directory .mde-card:focus-within {
  box-shadow: 0 4px 32px #0a76b63d;
  transform: translateY(-2px);
}

/* Directory Type Layouts */
.mantle-directory.mde--counties .mde-grid { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.mantle-directory.mde--suburbs .mde-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.mantle-directory.mde--subdivisions .mde-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.mantle-directory.mde--agents .mde-grid,
.mantle-directory.mde--schools .mde-grid,
.mantle-directory.mde--vendors .mde-grid,
.mantle-directory.mde--post .mde-grid,
.mantle-directory.mde--page .mde-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Universal card/call to action styling */
.mantle-directory .mde-card-title {
  font-family: 'Montserrat', Gotham, Arial, sans-serif;
  font-size: 1.18rem;
  font-weight: 800;
  margin: 0 0 3px 0;
  color: #0A76B6;
  letter-spacing: -0.01em;
}
.mantle-directory .mde-card-title a { color:#0A76B6;text-decoration:none;transition:color 0.1s;}
.mantle-directory .mde-card-title a:hover,
.mantle-directory .mde-card-title a:focus { color: #f69320; text-decoration: underline; }
.mantle-directory .mde-card-meta { font-size: .97rem; color: #718a94; margin: 0 0 4px; }
.mantle-directory .mde-card-facts {display:flex; flex-wrap:wrap; gap:.35rem .75rem; font-size:0.93rem; color:#718a94;}
.mantle-directory .mde-fact:not(:last-child) { border-right: 1.5px solid #dbe3ed; padding-right: 0.8em; }
.mantle-directory .mde-card-text {font-size:1.03rem; color:#212b35;}
.mantle-directory .mde-card-cta {margin-top: auto;padding-top: 0.44rem;}
.mantle-directory .mde-btn {
  display: inline-block;
  font-family: inherit;
  border-radius: 7px;
  border: 2px solid transparent;
  background: #0A76B6;
  color: #fff;
  font-size: 1.01em;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 0.56em 1.44em 0.54em;
  line-height: 1.4;
  text-decoration: none;
  transition: background 0.14s, border 0.14s, color 0.14s;
  margin-right: 0.4em;
}
.mantle-directory .mde-btn:hover,
.mantle-directory .mde-btn:focus {
  background: #40aee3;
  border-color: #f69320;
  color: #fff !important;
}
.mantle-directory .mde-btn--primary { background: #f69320; border-color: #f69320; color: #fff; }
.mantle-directory .mde-btn--primary:hover { background: #0A76B6; color: #fff; border-color: #40aee3; }

.mantle-directory .mde-error,
.mantle-directory .mde-empty {
  font-size: 1rem;
  color:#718a94;
  background: #f4f7fb;
  border-radius: 5px;
  padding: 1.1em;
}

/* ========== SCHOOLS DIRECTORY (.mde--schools) ========== */

.mantle-directory.mde--schools .mde-inner { max-width: 1220px; margin:0 auto; padding:0 1.2rem;}
.msp-schools-header { text-align: center; padding: 0 0 1.6em; }
.msp-schools-title { font-size: 2.1rem; font-weight: 900; color: #0A76B6; margin: 0 0 .35em;}
.msp-schools-sub { font-size:1.08em; color:#718a94; margin:0 0 1.8em; }

.msp-schools-filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 18px; justify-content: space-between;
  background: #f4f7fa; border-radius: 12px; padding:18px 2.5vw 18px 1.1vw; margin:0 0 2.1em;
}
.msp-schools-search-wrap { flex: 1 1 230px; max-width: 350px; position: relative;display: flex;align-items: center;}
.msp-search-icon { display: inline-flex; align-items: center; position: absolute;left:10px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:2; }

.msp-schools-search { width:100%; font-size: 1rem; padding: 12px 12px 12px 40px; border:2px solid #d8dee4; border-radius:6px; background:#fff; color:#1a2b3c;
  transition:border-color .2s;
  line-height:1.2; font-family:'Montserrat',Arial,sans-serif; min-height: 46px; box-sizing: border-box; z-index:1;
}
.msp-schools-search:focus { border-color:#0A76B6; outline:none; }
.msp-schools-search::placeholder {color: #a0adb6;}

.msp-schools-filter-tabs { display: flex; flex-wrap: wrap; gap: 6px;justify-content: flex-end; align-items: center; }
.msp-schools-filter-tab { padding: 8px 18px; font-size: .95em; font-family: inherit; font-weight: 700;border-radius: 100px;background: #fff; color: #0A76B6;
  border:2px solid #d8dee4; cursor: pointer; outline:none; transition: all .13s; line-height:1.2;
}
.msp-schools-filter-tab:hover, .msp-schools-filter-tab:focus-visible { border-color: #0A76B6; background:#f6fafd; color:#0A76B6;}
.msp-schools-filter-tab.msp-tab--active,
.msp-schools-filter-tab[aria-selected="true"] { background: #0A76B6; color:#fff; border-color:#0A76B6; }

.msp-schools-directory-list { padding-top:0.4em;padding-bottom:0.2em; }
.msp-county-section { margin-bottom: 3.1rem; scroll-margin-top: 90px; border-bottom: 1px solid #e3ebf3;padding-bottom:2em; }
.msp-county-heading { font-size: 1.4rem; font-weight: 800; color: #f69320; margin-bottom: .9rem; border: none;
  display: flex; align-items: center; gap: 0.55em;
}
.msp-county-link { text-decoration:none; color:inherit; display:inline-flex; align-items:center;gap: 0.36em;}
.msp-county-pin svg {margin: 0 2px -2px 0;vertical-align:middle;}

.msp-schools-grid { display:flex; flex-wrap:wrap; gap:1.45em 2.2em;margin-bottom:0.1em;}
.msp-school-card {
  flex: 1 1 262px; max-width: 320px; min-width: 220px;
  background: #fff;
  border-radius: 11px; border: 1.5px solid #ededed;
  box-shadow: 0 2px 14px #40aee320;
  display: flex; flex-direction: column; align-items: stretch;
  padding: 1.09em 1em 1.06em 1.2em; margin-bottom: 0.7em; transition: box-shadow .18s, transform .13s;
  position: relative;
}
.msp-school-card:hover { box-shadow: 0 8px 32px #0A76B642;transform:translateY(-2px) scale(1.01);}
.msp-school-title {font-size:1.13em;font-weight:800;color:#0A76B6;margin:0 0 .18em 0;line-height:1.18;}
.msp-school-title a {color:#0A76B6; text-decoration:none;transition:color .11s;}
.msp-school-title a:hover { color: #f69320;}
.msp-school-meta {font-size:.97em;color:#718a94;font-weight:600;margin:0 0 2px 0;display:flex; flex-wrap:wrap; gap: 10px; align-items:center;}
.msp-school-meta__city svg, .msp-school-meta__grade svg {vertical-align:text-bottom; margin-right:2px;}
.msp-school-meta span {display:inline-flex; align-items:center;}
.msp-school-meta span:not(:last-child)::after { content: ""; margin:0 6px;}
.msp-school-excerpt {color:#26292c;font-size:.98em;margin:.5em 0 1em;line-height:1.6;font-weight:500;min-height:30px;}
.msp-school-cta {margin-top:auto;padding-top:0.45em;}
.msp-btn.msp-btn--primary { background: #f69320;color: #fff;border-radius: 5px; font-weight:700; font-size:1em; padding: .52em 1.22em;text-decoration:none; border:none;
  box-shadow: 0 1px 6px #f6932050; letter-spacing:.01em; transition: background .13s;}
.msp-btn.msp-btn--primary:hover {background: #0A76B6; color:#fff;}
.msp-no-results {text-align:center; color:#718a94;font-size:1.06em;font-weight:600;padding:3.1em .9em;display:none;width:100%;}
.msp-no-results:empty {display:none;}
.msp-no-results--visible {display:block;}

@media (max-width:1050px){
  .mantle-directory .mde-inner {max-width:97vw;}
  .msp-schools-header {padding:0 .5vw 1.8em;}
  .msp-schools-filter-bar{padding-left:4vw;}
  .msp-schools-grid {gap:1em 0.8em;}
}
@media (max-width:780px){
  .msp-schools-header {padding:0 .5vw 1.5em;}
  .msp-schools-filter-bar {flex-direction:column;align-items:stretch;gap:15px;}
  .msp-schools-search-wrap {max-width:100%;}
  .msp-schools-filter-tabs {justify-content:flex-start;}
  .msp-school-card {max-width:95vw;padding:0.97em 0.7em 0.93em 1em;}
}
@media (max-width:600px){
  .msp-schools-header {padding:0 .8vw 1.2em;}
  .msp-schools-grid {flex-direction:column;gap:1.17em 0;}
  .msp-school-card {max-width:99vw;padding:1em 0.46em;}
}