/* ===========================================================================
   Location pages — the city, county and ZIP pages and their three indexes.

   They sit on the service-page skeleton (service_pages.css, wrapper
   .svc-page): the navy .svc-hero, .svc-btn, .svc-h2 and section heads, and
   the navy .svc-cta band, so they read as the same site as Find and the
   service pages. This file adds only what those pages have and the service
   pages don't: the county photo in the hero's art slot, breadcrumbs, the fact
   row, the Homes for Sale grid, the county cards and photo tiles, and the
   grouped lists of cities and ZIP codes.

   Load order: service_pages, listing_card, location_pages.
   =========================================================================== */

/* ------------------------------- hero ------------------------------- */

/* Shorter than a service hero: the homes are what people came for, and the
   hero has no search field to make room for. Deep navy (#14306e, the brand's
   dark surface) rather than the service hero's bright radial, lifting only
   slightly toward the photo; the triangle mesh stays on top of it. */
.loc-hero {
  min-height: 0;
  background: linear-gradient(100deg, #102a63 0%, #14306e 48%, #1a3b80 100%);
}

/* The navbar is fixed and overlays the hero, so the copy starts below it. */
.loc-hero-inner {
  padding: 132px 16px 72px;
}

/* Brand hero scale (home standard): one big moment, not the service pages'
   58px. */
.loc-hero-title {
  max-width: 720px;
  margin-bottom: 16px;
  font-size: clamp(34px, 4vw, 48px);
  text-wrap: balance;
}

.loc-hero-sub {
  margin-bottom: 28px;
}

/* The photo in the art slot: a city page's street scene, or the county card
   elsewhere. The slot starts further left than the service pages' 56% so the
   fade has room: the mask eases in over half the photo's width (stops spaced
   like an ease-in curve, so there is no visible edge where the photo
   begins), and a navy wash over its top and bottom blends it into the hero's
   own edges and keeps the navbar legible. */
.loc-hero-art {
  left: 38%;
}

.loc-hero-art picture {
  display: block;
  width: 100%;
  height: 100%;
}

.loc-hero-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0%, rgba(0, 0, 0, 0.04) 10%, rgba(0, 0, 0, 0.14) 20%,
    rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.52) 40%, rgba(0, 0, 0, 0.76) 50%,
    rgba(0, 0, 0, 0.92) 60%, #000 70%);
  mask-image: linear-gradient(90deg,
    transparent 0%, rgba(0, 0, 0, 0.04) 10%, rgba(0, 0, 0, 0.14) 20%,
    rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0.52) 40%, rgba(0, 0, 0, 0.76) 50%,
    rgba(0, 0, 0, 0.92) 60%, #000 70%);
}

.loc-hero-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom, rgba(20, 48, 110, 0.7) 0%, rgba(20, 48, 110, 0) 34%),
    linear-gradient(to top, rgba(20, 48, 110, 0.6) 0%, rgba(20, 48, 110, 0) 30%),
    rgba(20, 48, 110, 0.18);
}

.loc-crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}

.loc-crumbs li + li::before {
  content: "/";
  margin: 0 10px;
  color: rgba(255, 255, 255, 0.4);
}

.loc-crumbs a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.loc-crumbs a:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.loc-crumbs [aria-current="page"] {
  color: rgba(255, 255, 255, 0.72);
}

/* Facts sit in a quiet row under the buttons, divided by hairlines. */
.loc-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 0;
  margin: 36px 0 0;
}

.loc-fact {
  display: flex;
  flex-direction: column-reverse;
  gap: 2px;
  padding: 0 28px;
  border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.loc-fact:first-child {
  padding-left: 0;
  border-left: 0;
}

.loc-fact dt {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}

.loc-fact dd {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------- sections ----------------------------- */

.loc-section {
  padding: 72px 16px 80px;
  background: #ffffff;
}

.loc-section--tint {
  background: var(--svc-tint);
}

.loc-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 24px;
  margin-bottom: 32px;
}

.loc-section-head .svc-h2 {
  margin: 0;
}

/* Two headed groups in one section (a city's ZIP codes, then its
   neighbours). */
.loc-block + .loc-block {
  margin-top: 64px;
}

.loc-blurb {
  margin: 0;
  font-size: 15px;
  color: var(--svc-muted);
}

/* -------------------------- homes for sale -------------------------- */

/* Page links land here; keep the heading clear of the fixed navbar. */
.loc-homes {
  scroll-margin-top: 88px;
}

/* Sized like the home page's featured grid. auto-fill rather than auto-fit,
   so a place with two listings keeps card-width tiles. */
.loc-homes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
}

/* A 260px tile is too narrow for beds, baths and sqft on one line. */
.loc-homes-grid .listing-tile-stats {
  flex-wrap: wrap;
  gap: 8px 14px;
}

.loc-homes-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--svc-border-soft);
}

.loc-homes-foot .svc-btn {
  margin-left: auto;
}

/* The slot the next batch loads into (shared/_homes_batch). A loaded slot
   holds that batch's grid one grid gap below the last, so the batches read
   as one grid. */
.loc-homes-more {
  display: block;
  margin-top: 20px;
}

.loc-homes-more-slot {
  display: flex;
  justify-content: center;
  padding-top: 12px;
}

/* Turbo marks the frame busy while its batch is on the way. */
.loc-homes-more-busy,
.loc-homes-more[busy] > .loc-homes-more-slot .loc-homes-more-idle {
  display: none;
}

.loc-homes-more[busy] > .loc-homes-more-slot .loc-homes-more-busy {
  display: inline;
}

/* ------------------------------- about ------------------------------- */

.loc-about {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.loc-about--solo {
  grid-template-columns: minmax(0, 72ch);
}

.loc-about-copy p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--svc-body);
}

.loc-about-copy .svc-h2 {
  margin-bottom: 20px;
}

.loc-wiki-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-size: 15px;
  font-weight: 600;
  color: #2563eb;
  text-decoration: none;
}

.loc-wiki-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.loc-wiki-link .fa-arrow-up-right-from-square {
  font-size: 11px;
}

.loc-market {
  margin-top: 8px;
}

.loc-market strong {
  color: var(--svc-ink-soft);
}

.loc-map,
.loc-thumbnail {
  overflow: hidden;
  border: 1px solid var(--svc-border);
  border-radius: 16px;
  background: #ffffff;
}

.loc-map {
  height: 380px;
}

.loc-thumbnail img {
  display: block;
  width: 100%;
  height: auto;
}

/* ---------------------------- county cards ---------------------------- */

/* One card per county, its cities as chips on the county's street photo. */
.loc-county-cards {
  display: grid;
  gap: 20px;
}

.loc-county-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  background-color: #14306e;
}

.loc-county-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Navy from the left, where the name and chips sit, clearing to the right. */
.loc-county-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(10, 24, 61, 0.92) 0%,
    rgba(10, 24, 61, 0.78) 45%,
    rgba(10, 24, 61, 0.35) 100%
  );
}

.loc-county-body {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-height: 220px;
  padding: 32px;
}

.loc-county-name {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 10px;
  min-height: 44px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  text-decoration: none;
}

.loc-county-name i {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
  transition: transform 0.2s var(--svc-ease);
}

.loc-county-name:hover {
  color: #ffffff;
}

.loc-county-name:hover i {
  transform: translateX(3px);
}

/* A card can carry more than one run of chips — a city's ZIP codes and its
   neighbours — each under its own small label. */
.loc-county-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.loc-county-group-label {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.78);
}

.loc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.loc-chip {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 999px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.loc-chip:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.18);
  border-color: #ffffff;
}

/* The same chips on a light section, for ZIP codes. */
.loc-chips--light .loc-chip {
  color: var(--svc-ink-soft);
  background: #ffffff;
  border-color: var(--svc-hairline);
}

.loc-chips--light .loc-chip:hover {
  color: #2563eb;
  background: #ffffff;
  border-color: #2563eb;
}

/* ---------------------------- county tiles ---------------------------- */

/* The counties index: each county's own card photo, the find-path tile. */
.loc-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}

.loc-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 168px;
  padding: 20px;
  overflow: hidden;
  color: #ffffff;
  text-decoration: none;
  background-color: #14306e;
  border-radius: 14px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.loc-tile:hover {
  color: #ffffff;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.16);
}

.loc-tile-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.35s var(--svc-ease);
}

.loc-tile:hover .loc-tile-photo {
  transform: scale(1.04);
}

.loc-tile-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 24, 61, 0.88) 0%,
    rgba(10, 24, 61, 0.44) 55%,
    rgba(10, 24, 61, 0.14) 100%
  );
}

.loc-tile-name {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.loc-tile-name i {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

/* --------------------------- grouped lists --------------------------- */

.loc-groups {
  columns: 4 220px;
  column-gap: 40px;
}

.loc-group {
  break-inside: avoid;
  margin-bottom: 28px;
  scroll-margin-top: 96px;
}

.loc-group-label {
  margin: 0 0 6px;
  padding-bottom: 6px;
  font-size: 15px;
  font-weight: 700;
  color: var(--svc-ink);
  border-bottom: 1px solid var(--svc-border);
}

.loc-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.loc-group a {
  display: block;
  padding: 7px 0;
  font-size: 15px;
  color: var(--svc-body);
  text-decoration: none;
}

.loc-group a:hover {
  color: #2563eb;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------------------------- closing band ---------------------------- */

/* The svc-cta band with Find's keyhook hung on the right, drawing itself in
   when the band scrolls into view. Copy moves left to make room. The draw
   cascade (ink-d1..d4) is ink_graphics.css; the key's own slow draw and the
   sway are restated here under loc- names, since find.css isn't loaded. Every
   ink animation is `1 both`, so pausing parks each path on its first frame,
   nothing drawn, until the reveal controller adds .rv-in. */
.loc-cta-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  text-align: left;
}

.loc-cta-band .svc-cta-copy {
  margin-left: 0;
}

.loc-cta-art {
  width: 260px;
  height: 200px;
}

.loc-cta-art .find-keyhook {
  --ink-dur: 2.9s;
  --ink-ease: cubic-bezier(.4, 0, .2, 1);
  display: block;
  width: 100%;
  height: 100%;
  stroke-width: 2.2;
}

@keyframes locKeyDraw { 0%, 38% { stroke-dashoffset: 1 } 92%, 100% { stroke-dashoffset: 0 } }
.loc-cta-art .ink-key {
  stroke-dasharray: 1;
  animation: locKeyDraw var(--ink-dur) linear 1 both;
}

@keyframes locKeySway {
  0%   { transform: rotate(-3.2deg) }
  50%  { transform: rotate(3.2deg) }
  100% { transform: rotate(-3.2deg) }
}
.loc-cta-art .pk-sway {
  transform-box: view-box;
  animation: locKeySway 4.4s ease-in-out .9s infinite;
}

.loc-cta-art .find-keyhook * {
  animation-play-state: paused;
}

.loc-cta-band.rv-in .loc-cta-art .find-keyhook * {
  animation-play-state: running;
}

/* ----------------------------- disclaimer ----------------------------- */

.loc-disclaimer {
  padding: 0 16px 56px;
  background: #ffffff;
}

.loc-disclaimer p {
  max-width: 1280px;
  margin: 0 auto;
  font-size: 13px;
  line-height: 1.6;
  color: var(--svc-muted);
}

.loc-disclaimer a {
  color: #2563eb;
}

/* --------------------------- small screens --------------------------- */

@media (max-width: 1023px) {
  .loc-about {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

@media (max-width: 767px) {
  .loc-hero-inner {
    padding: 112px 16px 56px;
  }

  .loc-fact {
    padding: 0 18px;
  }

  .loc-fact dd {
    font-size: 19px;
  }

  .loc-section {
    padding: 56px 16px 64px;
  }

  .loc-homes-foot {
    flex-direction: column;
    align-items: stretch;
  }

  .loc-homes-foot .svc-btn,
  .loc-homes-more-slot .svc-btn {
    justify-content: center;
    margin-left: 0;
  }

  .loc-homes-more-slot {
    flex-direction: column;
    align-items: stretch;
  }

  .loc-county-body {
    padding: 24px 20px;
  }

  .loc-map {
    height: 300px;
  }

  .loc-groups {
    columns: 2 150px;
    column-gap: 24px;
  }

  /* The key sits above the copy on a phone, the band centred as before. */
  .loc-cta-band {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 8px;
    text-align: center;
  }

  .loc-cta-band .svc-cta-copy {
    margin-left: auto;
  }

  .loc-cta-art {
    order: -1;
    width: 180px;
    height: 140px;
  }
}

/* Reduced motion: the ink keyframes are off and [data-reveal] is forced
   visible, so the pause must not be what leaves the key blank. */
@media (prefers-reduced-motion: reduce) {
  .loc-cta-art .find-keyhook *,
  .loc-cta-art .ink-key,
  .loc-cta-art .pk-sway {
    animation: none;
  }

  .loc-tile,
  .loc-tile-photo,
  .loc-county-name i {
    transition: none;
  }

  .loc-tile:hover,
  .loc-tile:hover .loc-tile-photo,
  .loc-county-name:hover i {
    transform: none;
  }
}