/* ==========================================================================
   PlaceNearMe - Locations index + city pages
   Reuses the archive shell, card and chip components.
   ========================================================================== */

/* Blocks (shared with the single template, which loads its own CSS) -------- */
.pnm-city-page .pnm-block,
.pnm-archive .pnm-block { margin-bottom: var(--pnm-s5); }

.pnm-archive .pnm-block > h2 {
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  letter-spacing: -.02em;
  margin: 0 0 var(--pnm-s3);
}
.pnm-block__note {
  margin: -1rem 0 var(--pnm-s2);
  font-size: .9375rem;
  color: var(--pnm-text-soft);
}

.pnm-city__total {
  display: inline-block;
  margin: 0 0 var(--pnm-s3);
  padding: .375rem .875rem;
  border-radius: var(--pnm-r-pill);
  background: var(--pnm-navy);
  color: #fff;
  font-size: .875rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Location index: city cards
   -------------------------------------------------------------------------- */

.pnm-city-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pnm-s3);
}

.pnm-city {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: var(--pnm-s3);
  min-height: 190px;
  justify-content: flex-end;
  background: var(--pnm-white);
  border: 1px solid var(--pnm-border);
  border-radius: var(--pnm-r-lg);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pnm-city:hover {
  transform: translateY(-3px);
  box-shadow: var(--pnm-shadow-lg);
  border-color: var(--pnm-gold);
}

.pnm-city__pin {
  position: absolute;
  top: var(--pnm-s3);
  left: var(--pnm-s3);
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--pnm-r-sm);
  background: var(--pnm-gold-tint);
  color: var(--pnm-navy);
}

.pnm-city__name {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 750;
  letter-spacing: -.025em;
  line-height: 1.15;
}
.pnm-city__name a { color: var(--pnm-navy); text-decoration: none; }
/* Stretched link keeps the whole card clickable without nesting blocks in <a>. */
.pnm-city__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pnm-city__name a:focus-visible::after { outline: 3px solid var(--pnm-gold); outline-offset: 3px; }

.pnm-city__sub { margin: 0; font-size: .875rem; color: var(--pnm-text-soft); }
.pnm-city__count {
  margin: .25rem 0 0;
  font-size: .875rem;
  font-weight: 650;
  color: var(--pnm-gold-dark);
  font-variant-numeric: tabular-nums;
}
.pnm-city__cta {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  margin-top: .625rem;
  font-size: .875rem;
  font-weight: 700;
  color: var(--pnm-navy);
}
.pnm-city__cta .pnm-icon { transition: transform .18s ease; }
.pnm-city:hover .pnm-city__cta .pnm-icon { transform: translateX(3px); }

@media (max-width: 900px) { .pnm-city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .pnm-city-grid { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   City page: category tiles
   -------------------------------------------------------------------------- */

.pnm-citycat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pnm-s2);
}

.pnm-citycat {
  display: flex;
  flex-direction: column;
  gap: .1875rem;
  padding: var(--pnm-s2);
  background: var(--pnm-white);
  border: 1px solid var(--pnm-border);
  border-radius: var(--pnm-r-md);
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.pnm-citycat:hover {
  transform: translateY(-2px);
  border-color: var(--pnm-gold);
  box-shadow: var(--pnm-shadow-md);
}
.pnm-citycat__icon {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  margin-bottom: .375rem;
  border-radius: var(--pnm-r-sm);
  background: var(--pnm-gold-tint);
  color: var(--pnm-navy);
}
.pnm-citycat__name { font-size: .9375rem; font-weight: 650; color: var(--pnm-navy); }
.pnm-citycat__count { font-size: .8125rem; color: var(--pnm-text-faint); font-variant-numeric: tabular-nums; }

@media (max-width: 900px) { .pnm-citycat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .pnm-citycat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* --------------------------------------------------------------------------
   Neighbourhoods - informational, not links (see report)
   -------------------------------------------------------------------------- */

.pnm-hoods {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pnm-hoods li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .4375rem .875rem;
  border: 1px solid var(--pnm-border);
  border-radius: var(--pnm-r-pill);
  background: var(--pnm-white);
  font-size: .875rem;
  color: var(--pnm-navy);
}
.pnm-hoods__count {
  min-width: 20px;
  padding: 0 .375rem;
  border-radius: var(--pnm-r-pill);
  background: var(--pnm-gold-tint);
  color: var(--pnm-navy);
  font-size: .75rem;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* Other-location chips carry a count ---------------------------------------- */
.pnm-chip em {
  font-style: normal;
  margin-left: .25rem;
  color: var(--pnm-text-faint);
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------------------
   Pagination on city pages (archive.css scopes its own under __pager)
   -------------------------------------------------------------------------- */

.pnm-city-page .pnm-pager { margin-top: var(--pnm-s4); }
.pnm-pager ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .375rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pnm-pager .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  height: 44px;
  padding: 0 .875rem;
  border: 1px solid var(--pnm-border);
  border-radius: var(--pnm-r-sm);
  background: var(--pnm-white);
  color: var(--pnm-navy);
  font-size: .9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease;
}
.pnm-pager .page-numbers:hover { border-color: var(--pnm-gold); background: var(--pnm-gold-tint); }
.pnm-pager .page-numbers.current {
  background: var(--pnm-gold);
  border-color: var(--pnm-gold);
  color: var(--pnm-navy);
}
.pnm-pager .page-numbers:focus-visible { outline: 3px solid var(--pnm-gold); outline-offset: 2px; }

/* Never scroll sideways ----------------------------------------------------- */
.pnm-city-page, .pnm-archive { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
  .pnm-city, .pnm-citycat, .pnm-city__cta .pnm-icon { transition: none; }
  .pnm-city:hover, .pnm-citycat:hover { transform: none; }
  .pnm-city:hover .pnm-city__cta .pnm-icon { transform: none; }
}

/* ==========================================================================
   Category landing hero
   ========================================================================== */

.pnm-cat-hero {
  display: flex;
  align-items: flex-start;
  gap: var(--pnm-s3);
  margin-bottom: var(--pnm-s3);
}

.pnm-cat-hero__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 66px;
  height: 66px;
  border-radius: var(--pnm-r-md);
  background: var(--pnm-gold-tint);
  color: var(--pnm-navy);
  border: 1px solid var(--pnm-border);
}

.pnm-cat-hero__text { min-width: 0; }
.pnm-cat-hero__text .pnm-archive__title { margin-bottom: .5rem; }
.pnm-cat-hero__text .pnm-archive__intro { margin-bottom: .75rem; }

@media (max-width: 560px) {
  .pnm-cat-hero { gap: var(--pnm-s2); }
  .pnm-cat-hero__icon { width: 52px; height: 52px; }
}

/* Category page reuses the archive shell; keep sections breathing. */
.pnm-cat-page .pnm-block { margin-bottom: var(--pnm-s5); }
.pnm-cat-page .pnm-block:last-child { margin-bottom: 0; }