/**
 * CP Locations — town grid + detail modal.
 * Uses the INC Vision design tokens (monochrome black/white, DIN Pro).
 * Falls back to sensible values if the theme tokens aren't present.
 *
 * @version 1.0.0
 */

.cp-loc-wrap {
  --_ink:    var(--inc-ink, #000);
  --_text:   var(--inc-text, #1a1a1a);
  --_muted:  var(--inc-muted, #5a5a5a);
  --_line:   var(--inc-line, #e0e0e0);
  --_surface:var(--inc-surface, #f4f4f4);
  --_white:  var(--inc-white, #fff);
  --_radius: var(--inc-radius, 10px);
  font-family: var(--inc-font, "Helvetica Neue", Arial, sans-serif);
  color: var(--_text);
}

/* Sections */
.cp-loc-section { margin: 0 0 3rem; }
.cp-loc-heading {
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700; letter-spacing: -0.01em; color: var(--_ink);
  margin: 0 0 .35rem;
}
.cp-loc-intro { color: var(--_muted); margin: 0 0 1.5rem; max-width: 60ch; }
.cp-loc-empty { color: var(--_muted); font-style: italic; }

/* Grid */
.cp-loc-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 600px) { .cp-loc-cols-3 .cp-loc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 600px) { .cp-loc-cols-4 .cp-loc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px) { .cp-loc-cols-4 .cp-loc-grid { grid-template-columns: repeat(4, 1fr); } }

/* Card */
.cp-loc-card {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--_line); border-radius: var(--_radius);
  text-decoration: none; color: var(--_white);
  aspect-ratio: 4 / 3; min-height: 150px;
  background: var(--_ink);
  transition: transform .18s ease, box-shadow .18s ease;
}
.cp-loc-card:hover, .cp-loc-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(0,0,0,.18);
  outline: none;
}
.cp-loc-card:focus-visible { box-shadow: 0 0 0 3px var(--_ink); }
.cp-loc-card-bg {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  transform: scale(1.02); transition: transform .4s ease;
}
.cp-loc-card:hover .cp-loc-card-bg { transform: scale(1.08); }
.cp-loc-card::after { /* legibility scrim */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.65) 100%);
}
.cp-loc-card--noimg .cp-loc-card-bg {
  background: repeating-linear-gradient(135deg, #1a1a1a 0 12px, #222 12px 24px);
}
.cp-loc-card-inner {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: .9rem 1rem; gap: .1rem;
}
.cp-loc-card-name { font-size: 1.15rem; font-weight: 700; line-height: 1.15; }
.cp-loc-card-state {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; opacity: .85;
}
.cp-loc-card-pop {
  font-size: .8rem; opacity: .9; margin-top: .15rem;
}
.cp-loc-card-pop::before { content: "▸ "; opacity: .7; }

/* No-JS detail panels: visible by default; hidden once JS upgrades the wrap */
.cp-loc-details { margin-top: 1.5rem; }
.cp-loc-detail {
  border: 1px solid var(--_line); border-radius: var(--_radius);
  padding: 1.25rem 1.5rem; margin-bottom: 1rem; background: var(--_white);
}
.cp-loc-js .cp-loc-details { display: none; }
.cp-loc-detail-img {
  width: 100%; max-height: 280px; object-fit: cover;
  border-radius: var(--_radius); margin-bottom: 1rem;
}
.cp-loc-detail-name { font-size: 1.5rem; font-weight: 700; color: var(--_ink); margin: 0 0 .25rem; }
.cp-loc-detail-state {
  font-size: .8rem; font-weight: 600; color: var(--_muted);
  text-transform: uppercase; letter-spacing: .06em;
}
.cp-loc-detail-region { color: var(--_muted); margin: 0 0 .75rem; }
.cp-loc-detail-pop { font-size: 1.05rem; margin: 0 0 1rem; }
.cp-loc-detail-pop strong { font-size: 1.3rem; }
.cp-loc-pop-src { color: var(--_muted); font-size: .8rem; font-weight: normal; }
.cp-loc-detail-blurb { color: var(--_text); line-height: 1.6; }

/* Modal */
.cp-loc-modal { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; }
.cp-loc-modal[hidden] { display: none; }
.cp-loc-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(2px); }
.cp-loc-modal-box {
  position: relative; z-index: 1; background: var(--_white);
  width: min(640px, 92vw); max-height: 88vh; overflow-y: auto;
  border-radius: var(--_radius); padding: 1.75rem 2rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  animation: cp-loc-pop .2s ease;
}
@keyframes cp-loc-pop { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.cp-loc-modal-close {
  position: absolute; top: .5rem; right: .75rem;
  background: none; border: 0; font-size: 2rem; line-height: 1; cursor: pointer;
  color: var(--_muted);
}
.cp-loc-modal-close:hover { color: var(--_ink); }
.cp-loc-modal-content .cp-loc-detail-img { margin-top: .5rem; }
body.cp-loc-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .cp-loc-card, .cp-loc-card-bg, .cp-loc-modal-box { transition: none; animation: none; }
}

/* ============================================================
   Squared, monochrome alignment to the INC Education reference
   (v1.1.1). Photo town cards are kept (the 15 bundled town
   images), but corners are squared and the card lift is dropped
   for the reference's flatter, hairline look. Headings squared.
   ============================================================ */
.cp-loc-card,
.cp-loc-detail,
.cp-loc-detail-img,
.cp-loc-modal-box { border-radius: 0; }
.cp-loc-card { transition: box-shadow .18s ease; }
.cp-loc-card:hover, .cp-loc-card:focus-visible { transform: none; box-shadow: 0 8px 24px rgba(0,0,0,.16); }
.cp-loc-card:focus-visible { box-shadow: 0 0 0 3px var(--_ink); }
.cp-loc-card-name { text-transform: uppercase; letter-spacing: -0.01em; }
.cp-loc-heading { text-transform: uppercase; letter-spacing: -0.01em; }
.cp-loc-detail-name { text-transform: uppercase; letter-spacing: -0.01em; }

/* Faith-landscape source caveat (v1.3.1) */
.cp-loc-caveat {
  margin: .5rem 0 0; padding-top: 1rem;
  border-top: 1px solid var(--_line);
  color: var(--_muted); font-size: .8rem; line-height: 1.5; max-width: 72ch;
}