/* ─────────────────────────────────────────────────────────────────────────
   School District Directory — Modern High-Contrast Redesign Pass
   Fully integrated with the HITS Theme design token variables.
   ───────────────────────────────────────────────────────────────────────── */

.school-directory {
  max-width: var(--max-w, 1400px); /* Fills standard 1400px theme wrapper */
  margin: 0 auto;
  padding: 40px 24px;
  background-color: var(--white, #ffffff); /* Canvas white background */
  box-sizing: border-box;
  color: var(--ink, #2d2d2d);
  font-family: var(--font-body), Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

.school-directory a { 
  color: var(--red, #e8192c); 
  transition: color var(--transition, .2s);
}
.school-directory a:hover { 
  color: var(--red-dark, #bf0f1f); 
}

/* ── Hero Banner & Search ── */
.school-directory-hero {
  background: linear-gradient(135deg, var(--charcoal, #1a1a1a) 0%, var(--black, #111111) 100%);
  border-left: 6px solid var(--red, #e8192c); /* Asymmetric brand indicator */
  border-radius: 12px;
  padding: 52px;
  margin-bottom: 40px;
  box-shadow: var(--shadow-md);
}

.school-directory-hero h1 {
  font-family: var(--font-head), sans-serif;
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.05;
  margin: 0 0 16px;
  color: var(--white, #ffffff);
}

.school-directory-hero p { 
  color: rgba(255, 255, 255, 0.85); 
  max-width: 740px; 
  margin: 0;
  font-size: 16px;
}

.school-directory-search {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  max-width: 640px;
}

.school-directory-search input {
  flex: 1;
  padding: 14px 18px;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--white, #ffffff);
  outline: none;
  transition: border-color var(--transition, .2s), background-color var(--transition, .2s);
}

.school-directory-search input:focus {
  border-color: var(--red, #e8192c);
  background: rgba(255, 255, 255, 0.12);
}

.school-directory-search input::placeholder {
  color: var(--subtle, #bbbbbb);
}

.school-directory-search button {
  padding: 14px 32px;
  border: 0;
  border-radius: 6px;
  background: var(--red, #e8192c);
  color: var(--white, #ffffff);
  font-family: var(--font-ui), sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  transition: background var(--transition, .2s), transform var(--transition-bounce, .25s);
}

.school-directory-search button:hover { 
  background: var(--red-dark, #bf0f1f); 
  transform: translateY(-2px);
}

/* ── Typography & Structure ── */
.school-directory-section-title {
  font-family: var(--font-head), sans-serif;
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--black, #111111);
  margin: 24px 0 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.school-directory-section-title::before {
  content: '';
  width: 5px;
  height: 24px;
  background: var(--red, #e8192c);
  border-radius: 3px;
  display: inline-block;
}

.school-directory-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

/* ── Interactive Navigation Cards ── */
.school-directory-card {
  display: flex;
  flex-direction: column;
  background: var(--white, #ffffff);
  border: 1px solid var(--border, #e8e8e8);
  border-radius: 8px;
  padding: 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .3s cubic-bezier(.25,.8,.25,1), 
              box-shadow .3s cubic-bezier(.25,.8,.25,1), 
              border-color var(--transition, .2s);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
}

.school-directory-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--red, #e8192c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition, .2s);
}

.school-directory-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-mid, #d4d4d4);
}

.school-directory-card:hover::before {
  transform: scaleX(1);
}

.school-directory-card-title {
  font-family: var(--font-head), sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .02em;
  margin-bottom: 8px;
  color: var(--black, #111111);
  line-height: 1.2;
}

.school-directory-meta { 
  color: var(--muted, #888888); 
  font-size: 14px; 
}

.school-directory-card-cta {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  padding-top: 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--red, #e8192c);
}

/* ── Breadcrumbs ── */
.school-directory-breadcrumbs {
  font-size: 13px;
  color: var(--muted, #888888);
  margin-bottom: 24px;
}
.school-directory-breadcrumbs a { 
  color: var(--muted, #888888); 
  text-decoration: none; 
}
.school-directory-breadcrumbs a:hover { 
  color: var(--red, #e8192c);
  text-decoration: underline; 
}
.school-directory-breadcrumbs span[aria-current] { 
  color: var(--black, #111111); 
  font-weight: 600; 
}

/* ── Single View Elements ── */
.school-directory-district-header {
  background: var(--white, #ffe5b4);
  border: 1px solid var(--border, #e8e8e8);
  border-radius: 10px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}

.school-directory-district-header h1 { 
  margin: 0 0 10px; 
  font-family: var(--font-head), sans-serif;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem); 
  text-transform: uppercase;
  color: var(--black, #111111);
}

.school-directory-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 24px 0;
}

.school-directory-detail-item {
  background: rgba(0,0,0,0.02);
  border: 1px solid var(--border, #e8e8e8);
  border-radius: 8px;
  padding: 16px;
}

.school-directory-detail-item .label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted, #888888);
  margin-bottom: 4px;
}
.school-directory-detail-item .value { 
  font-weight: 600; 
  color: var(--black, #111111); 
  font-size: 15px;
}

.school-directory-school-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 12px;
}

.school-directory-school-card {
  border: 1px solid var(--border, #e8e8e8);
  border-radius: 8px;
  padding: 20px;
  background: var(--white, #ffffff);
  box-shadow: var(--shadow-sm);
}

.school-directory-school-card h3 { 
  margin: 0 0 8px; 
  font-family: var(--font-head), sans-serif;
  font-size: 18px; 
  text-transform: uppercase;
  color: var(--black, #111111);
}

.school-directory-school-card .school-meta { 
  color: var(--muted, #888888); 
  font-size: 14px; 
  margin: 4px 0; 
}

/* ── Sidebar Block Links ── */
.school-directory-related {
  margin-top: 40px;
  background: rgba(0,0,0,0.02);
  border: 1px solid var(--border, #e8e8e8);
  border-radius: 12px;
  padding: 32px;
}

.school-directory-related h2 { 
  margin-top: 0; 
  font-family: var(--font-head), sans-serif;
  text-transform: uppercase;
}

.school-directory-related ul { 
  margin: 0; 
  padding-left: 20px; 
}

.school-directory-related li { 
  margin: 8px 0; 
  font-size: 15px;
}

.school-directory-disclaimer {
  margin-top: 32px;
  color: var(--muted, #888888);
  font-size: 13px;
  line-height: 1.5;
}

.school-directory-empty {
  background: rgba(0,0,0,0.01);
  border: 2px dashed var(--border-mid, #d4d4d4);
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  color: var(--muted, #888888);
  font-size: 15px;
}

/* ── Live Search Aggregations ── */
.school-directory-search-group { 
  margin-bottom: 32px; 
}

.school-directory-search-group h2 { 
  font-family: var(--font-head), sans-serif;
  font-size: 20px; 
  text-transform: uppercase;
  margin-bottom: 12px; 
  color: var(--black, #111111);
}

.school-directory-search-group ul { 
  list-style: none; 
  padding: 0; 
  margin: 0; 
}

.school-directory-search-group li {
  padding: 14px 0;
  border-bottom: 1px solid var(--border, #e8e8e8);
}

.school-directory-search-group li .result-sub { 
  color: var(--muted, #888888); 
  font-size: 13px; 
}

/* ── Responsive Adaptation Controls ── */
@media (max-width: 900px) {
  .school-directory-grid,
  .school-directory-school-list,
  .school-directory-detail-grid,
  .school-directory-top-row,
  .school-directory-snapshot-grid {
    grid-template-columns: 1fr;
  }
  .school-directory-search {
    flex-direction: column;
  }
  .school-directory-hero {
    padding: 36px 24px;
  }
}

@media (min-width: 541px) and (max-width: 900px) {
  .school-directory-snapshot-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ── District description card ── */
.school-directory-description-card {
  margin-bottom: 24px;
}

.school-directory-description-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink, #2d2d2d);
  white-space: pre-line;
}

/* ── District page: two-panel top row ── */
.school-directory-top-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 0 0 32px;
  align-items: start;
}

.school-directory-panel {
  background: var(--white, #ffffff);
  border: 1px solid var(--border, #e8e8e8);
  border-radius: 10px;
  padding: 28px;
  box-shadow: var(--shadow-sm);
}

.school-directory-panel .school-directory-section-title {
  margin-top: 0;
}

.school-directory-panel .school-directory-detail-grid {
  margin: 16px 0 0;
}

/* ── School list inside panel ── */
.school-directory-school-list-panel {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}

.school-directory-school-list-panel li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 0 10px 14px;
  margin-bottom: 6px;
  border-left: 3px solid var(--red, #e8192c);
  border-bottom: 1px solid var(--border, #e8e8e8);
}

.school-directory-school-list-panel li:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.school-directory-school-list-panel .school-list-name {
  font-weight: 600;
  color: var(--black, #111111);
  font-size: 15px;
}

.school-directory-school-list-panel .school-list-meta {
  color: var(--muted, #888888);
  font-size: 13px;
}

/* ── District data snapshot — strict 3-column grid ── */
.school-directory-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 16px 0;
}
.school-directory-snapshot-item {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.school-directory-snapshot-item .snap-label {
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #64748b;
  font-weight: 600;
}
.school-directory-snapshot-item .snap-value {
  font-size: 1.18rem;
  font-weight: 700;
  color: #0f172a;
}
.school-directory-snapshot-source {
  font-size: .82rem;
  color: #64748b;
  margin-top: 4px;
}

/* ── Simple school list (from schools_list text) ── */
.school-directory-school-list-simple {
  list-style: disc;
  padding-left: 24px;
  line-height: 1.9;
}
.school-directory-school-list-simple li {
  color: #0f172a;
}