/* ============================================
   LSAT Locations — locations-styles.css
   Extends homepage-styles.css for the /locations
   hub page. Uses the same CSS variables defined
   by lsat-color-customizer.php.

   body.lsat-homepage is added via body_class()
   so all homepage base styles apply here too.
   This file only adds what is new or different.
   ============================================ */

/* ============================================
   HERO — compact height (same as city pages)
   ============================================ */

body.lsat-locations-page .lsat-hero {
  min-height: 65vh;
}

@media ( max-width: 768px ) {
  body.lsat-locations-page .lsat-hero {
    min-height: auto;
  }
}

/* ============================================
   LOCATIONS DIRECTORY SECTION
   Lists all cities grouped by state.
   ============================================ */

.lsat-locations {
  padding: var( --section-padding ) 0;
  background: var( --bg-primary );
  min-height: 50vh;
}

.lsat-locations__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
}

.lsat-locations__intro {
  text-align: center;
  margin-bottom: 56px;
}

.lsat-locations__intro h2 {
  font-family: var( --font-display );
  font-size: clamp( 1.1rem, 2vw, 1.4rem );
  color: var( --text-primary );
  margin: 0 0 10px;
}

.lsat-locations__intro p {
  color: var( --text-secondary );
  font-size: 1.05rem;
  max-width: 560px;
  margin: 0 auto;
}

.lsat-locations__state {
  margin-bottom: 40px;
}

.lsat-locations__state-heading {
  font-family: var( --font-display );
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var( --accent-ember );
  margin: 0 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var( --section-divider );
}

.lsat-locations__cities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}

.lsat-locations__city-link {
  font-size: 0.92rem;
  color: var( --text-secondary );
  text-decoration: none;
  transition: color 0.2s;
}

.lsat-locations__city-link:hover {
  color: var( --accent-ember );
}

/* ============================================
   FOOTER CITY LINKS
   Small grey city links shown below the map.
   Duplicated from city-styles.css so locations
   page has them without depending on that file.
   ============================================ */

.lsat-footer__cities {
  padding: 28px 0 0;
  border-top: 1px solid rgba( 255, 255, 255, 0.07 );
  margin-top: 28px;
}

.lsat-footer__cities-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba( 255, 255, 255, 0.35 );
  margin: 0 0 12px;
}

.lsat-footer__cities-all {
  color: var( --accent-ember );
  text-decoration: none;
  opacity: 0.8;
}

.lsat-footer__cities-all:hover {
  opacity: 1;
}

.lsat-footer__cities-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.lsat-footer__city-link {
  font-size: 0.72rem;
  color: rgba( 255, 255, 255, 0.3 );
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}

.lsat-footer__city-link:hover {
  color: rgba( 255, 255, 255, 0.65 );
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media ( max-width: 768px ) {
  .lsat-locations {
    padding: calc( var( --section-padding ) * 0.7 ) 0;
  }

  .lsat-locations__intro {
    margin-bottom: 36px;
  }
}