/* ---------------------------------------------------------------------------
   locators.css — Apartment Locators category
   anniesactionai.com/apartment-locators

   Section stylesheet. Loads AFTER /css/style.css and only adds what the
   global sheet does not already provide.

   ⚠ BUMP THE ?v= ON apartment-locators.php EVERY TIME YOU EDIT THIS FILE.
     An edit without a bump never reaches a browser. That is what made
     Annie's portrait look wrong for a day.

   Uses only tokens already defined in style.css:
   --navy --blue --green --soft-white --light-gray --medium-gray --dark-gray
   --nearly-black --font-headline --font-body --radius-card --shadow-card
   --shadow-card-hover --max-width
   No new colours. No invented button classes — .btn-primary, .btn-secondary,
   .btn-success, .btn-dark, .btn-outline-white and .btn-block are the whole
   set, and an invented one renders as unstyled text.
--------------------------------------------------------------------------- */

/* Breadcrumb on a locator detail page ------------------------------------- */
.locator-crumbs {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--dark-gray);
  margin-bottom: 14px;
}
.locator-crumbs a {
  color: var(--dark-gray);
  text-decoration: none;
}
.locator-crumbs a:hover {
  color: var(--blue);
  text-decoration: underline;
}
.locator-crumbs span[aria-hidden] {
  margin: 0 6px;
  color: var(--medium-gray);
}

/* The directory grid ------------------------------------------------------ */
.locator-grid {
  align-items: stretch;
}

.locator-card {
  display: flex;
  flex-direction: column;
}
.locator-card .card-link {
  margin-top: auto;
  padding-top: 12px;
}

/* .eyebrow renders BLUE on this site, not green. Known quirk — don't
   "fix" it here, the global sheet owns it. */

/* Place lists ------------------------------------------------------------- */
.locator-serves {
  font-size: 14px;
  line-height: 1.7;
  color: var(--dark-gray);
}
.locator-serves-head {
  margin-top: 20px;
}

/* Facts list on a detail page --------------------------------------------- */
.locator-facts {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}
.locator-facts li {
  position: relative;
  padding: 8px 0 8px 26px;
  border-top: 1px solid var(--light-gray);
  line-height: 1.6;
}
.locator-facts li:first-child {
  border-top: 0;
}
.locator-facts li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 17px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
}

/* Contact card ------------------------------------------------------------ */
.locator-contact {
  align-self: start;
  background: var(--soft-white);
}
.locator-phone {
  font-family: var(--font-headline);
  font-size: 24px;
  font-weight: 700;
  margin: 6px 0 4px;
}
.locator-phone a {
  color: var(--navy);
  text-decoration: none;
}
.locator-phone a:hover {
  color: var(--blue);
}

/* Empty state — a real state, not a broken grid --------------------------- */
.locator-empty {
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
  border: 1px dashed var(--medium-gray);
  background: var(--soft-white);
  box-shadow: none;
}
.locator-empty h3 {
  margin-top: 6px;
}

/* Standing disclosure ----------------------------------------------------- */
.locator-disclosure {
  padding: 22px 0 34px;
  background: var(--light-gray);
}
.locator-disclosure .form-note {
  margin: 0;
  max-width: 780px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--dark-gray);
}

/* Small screens ----------------------------------------------------------- */
@media (max-width: 720px) {
  .locator-phone {
    font-size: 21px;
  }
  .locator-contact {
    margin-top: 8px;
  }
}

/* Trade cross-link under the directory ------------------------------------ */
.locator-trade-note {
  margin: 28px 0 0;
  font-size: 14px;
  color: var(--dark-gray);
}