/* ===========================================================
   CLM Directory v2 — global visual system
   Loaded on every page via functions.php enqueue.
   =========================================================== */
:root {
  --clm-radius-sm: 6px;
  --clm-radius: 12px;
  --clm-radius-lg: 20px;
  --clm-shadow-sm: 0 1px 2px rgba(15,23,32,.04), 0 1px 3px rgba(15,23,32,.06);
  --clm-shadow: 0 4px 12px rgba(15,23,32,.06), 0 2px 4px rgba(15,23,32,.04);
  --clm-shadow-lg: 0 20px 40px rgba(15,23,32,.08), 0 8px 16px rgba(15,23,32,.06);
  --clm-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --clm-font-display: "Playfair Display", Georgia, serif;
  --clm-transition: all .18s cubic-bezier(.4,0,.2,1);
}

body { background: var(--clm-bg); color: var(--clm-text); font-family: var(--clm-font-sans); }

/* ---------- Layout wrappers ---------- */
.clm-wrap { max-width: 1240px; margin: 0 auto; padding: 0 20px; }
.clm-wrap-wide { max-width: 1440px; margin: 0 auto; padding: 0 20px; }
.clm-section { padding: 56px 0; }
.clm-section--tight { padding: 32px 0; }
.clm-section--alt { background: var(--clm-surface); }

/* ---------- Section head ---------- */
.clm-section-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; margin-bottom: 28px; flex-wrap: wrap;
}
.clm-eyebrow {
  font-size: 12px; color: var(--clm-primary); text-transform: uppercase;
  letter-spacing: 1.2px; font-weight: 700; margin-bottom: 6px;
}
.clm-section-title {
  font-family: var(--clm-font-display); font-size: clamp(26px,3.4vw,40px);
  font-weight: 700; margin: 0; line-height: 1.15; color: var(--clm-text);
}
.clm-section-link {
  color: var(--clm-primary); text-decoration: none; font-weight: 600;
  font-size: 15px; white-space: nowrap;
}
.clm-section-link:hover { color: var(--clm-primary-hover); }

/* ---------- Card system ---------- */
.clm-grid { display: grid; gap: 20px; }
.clm-grid--2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.clm-grid--3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.clm-grid--4 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

.clm-card {
  display: block; background: var(--clm-surface);
  border-radius: var(--clm-radius); overflow: hidden;
  text-decoration: none; color: var(--clm-text);
  transition: var(--clm-transition);
  box-shadow: var(--clm-shadow-sm);
  border: 1px solid var(--clm-border);
}
.clm-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--clm-shadow-lg);
  border-color: var(--clm-primary);
}

.clm-card-media {
  position: relative; aspect-ratio: 16/10; overflow: hidden;
  background: linear-gradient(135deg, var(--clm-primary), var(--clm-primary-hover));
}
.clm-card-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.clm-card:hover .clm-card-media img { transform: scale(1.06); }
.clm-card-placeholder {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; color: #fff; font-family: var(--clm-font-display);
  font-size: 64px; font-weight: 700; opacity: .6;
}

.clm-card-body { padding: 18px 20px 20px; }
.clm-card-eyebrow {
  font-size: 11px; color: var(--clm-text-muted); text-transform: uppercase;
  letter-spacing: 1px; font-weight: 700; margin-bottom: 6px;
}
.clm-card-title {
  font-family: var(--clm-font-sans); font-size: 18px; font-weight: 700;
  margin: 0 0 6px 0; line-height: 1.3; color: var(--clm-text);
}
.clm-card-note {
  font-size: 14px; color: var(--clm-text-muted); margin: 0 0 12px 0;
  line-height: 1.5;
}
.clm-card-cta {
  display: inline-block; color: var(--clm-primary); font-weight: 600;
  font-size: 14px; margin-top: 6px;
}
.clm-card-cta--btn {
  display: inline-block; background: var(--clm-primary); color: #fff;
  padding: 8px 14px; border-radius: 999px; margin-top: 8px;
}

/* Badges */
.clm-badge {
  position: absolute; top: 10px; left: 10px;
  background: rgba(15,23,32,.85); color: #fff;
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase;
}
.clm-badge--ultra-luxury { background: #7A39BB; }
.clm-badge--luxury { background: var(--clm-accent); color: #0F1720; }
.clm-badge--premium { background: #245B45; }
.clm-badge--mid { background: rgba(15,23,32,.85); }
.clm-badge--affordable { background: #437A22; }
.clm-badge--tag { background: var(--clm-accent); color: #0F1720; }

/* Card variants */
.clm-card-stats { display: flex; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--clm-text-muted); margin: 8px 0 12px; }
.clm-card-stats strong { color: var(--clm-text); }

.clm-card--buy .clm-price { font-family: var(--clm-font-display); font-size: 24px; font-weight: 700; color: var(--clm-text); margin-bottom: 4px; }
.clm-buy-stats { display: flex; gap: 12px; font-size: 13px; color: var(--clm-text-muted); margin-bottom: 8px; }
.clm-buy-addr { font-size: 13px; color: var(--clm-text-muted); margin-bottom: 10px; }

.clm-card--school { padding: 20px; text-align: left; }
.clm-school-icon { font-size: 32px; margin-bottom: 10px; opacity: .8; }
.clm-rating { display: inline-flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.clm-rating-num { font-family: var(--clm-font-display); font-size: 22px; font-weight: 700; color: var(--clm-primary); }
.clm-rating-num span { font-size: 13px; color: var(--clm-text-muted); font-weight: 500; }
.clm-rating-label { font-size: 12px; color: var(--clm-text-muted); }

.clm-card--empty { border: 2px dashed var(--clm-border); background: var(--clm-surface-alt); box-shadow: none; text-align: center; padding: 32px 20px; }
.clm-card--empty:hover { border-color: var(--clm-primary); border-style: solid; }
.clm-empty-icon { font-size: 44px; margin-bottom: 10px; opacity: .5; }
.clm-card--empty .clm-card-body { padding: 0; }

.clm-card--person { text-align: center; padding: 24px 20px; }
.clm-avatar {
  width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
  margin: 0 auto 12px; background: linear-gradient(135deg, var(--clm-primary), var(--clm-primary-hover));
  display: flex; align-items: center; justify-content: center;
}
.clm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.clm-avatar-initials { color: #fff; font-family: var(--clm-font-display); font-size: 32px; font-weight: 700; }

.clm-card--news .clm-card-media { aspect-ratio: 16/9; }

/* ---------- HERO ---------- */
.clm-hero {
  position: relative; padding: 0; color: #F7F6F2;
  min-height: 520px; display: flex; align-items: center;
  background: linear-gradient(135deg, #0F1720 0%, #1a2432 100%);
  overflow: hidden;
}
.clm-hero--image { background-size: cover; background-position: center; }
.clm-hero::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(15,23,32,.35) 0%, rgba(15,23,32,.75) 100%);
  z-index: 1;
}
.clm-hero-inner { position: relative; z-index: 2; padding: 80px 20px; max-width: 1240px; margin: 0 auto; width: 100%; }
.clm-hero h1 {
  font-family: var(--clm-font-display); font-size: clamp(36px, 6vw, 76px);
  font-weight: 700; line-height: 1.05; margin: 0 0 20px 0; color: #fff;
  letter-spacing: -.01em;
}
.clm-hero h1 em { color: var(--clm-accent); font-style: italic; }
.clm-hero-sub { font-size: clamp(16px, 1.6vw, 20px); max-width: 640px; color: #CDCCCA; line-height: 1.55; margin: 0 0 28px 0; }
.clm-breadcrumb { font-size: 12px; color: rgba(255,255,255,.55); margin-bottom: 20px; text-transform: uppercase; letter-spacing: 1.2px; }
.clm-breadcrumb a { color: var(--clm-accent); text-decoration: none; }
.clm-hero-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(255,255,255,.15); }
.clm-hero-stat .val { font-family: var(--clm-font-display); font-size: clamp(24px, 2.6vw, 34px); font-weight: 700; color: var(--clm-accent); line-height: 1; }
.clm-hero-stat .lbl { font-size: 11px; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: 1.4px; margin-top: 8px; }

/* Search box in hero */
.clm-hero-search {
  display: flex; background: #fff; border-radius: 999px; padding: 6px;
  max-width: 620px; box-shadow: 0 12px 40px rgba(0,0,0,.25); margin-top: 8px;
}
.clm-hero-search input {
  flex: 1; border: 0; background: transparent; padding: 14px 20px;
  font-size: 16px; color: #0F1720; outline: none; font-family: var(--clm-font-sans);
}
.clm-hero-search button {
  background: #0F1720; color: #fff; border: 0; padding: 12px 24px;
  border-radius: 999px; font-weight: 600; cursor: pointer; font-size: 15px;
}
.clm-hero-search button:hover { background: var(--clm-primary); }

/* CTA buttons */
.clm-btn { display: inline-block; padding: 12px 24px; border-radius: 999px; font-weight: 600; font-size: 15px; text-decoration: none; transition: var(--clm-transition); cursor: pointer; border: 0; }
.clm-btn--primary { background: var(--clm-primary); color: #fff; }
.clm-btn--primary:hover { background: var(--clm-primary-hover); }
.clm-btn--accent { background: var(--clm-accent); color: #0F1720; }
.clm-btn--accent:hover { background: #E8B93A; }
.clm-btn--ghost { background: transparent; color: var(--clm-primary); border: 1.5px solid var(--clm-primary); }
.clm-btn--ghost:hover { background: var(--clm-primary); color: #fff; }

/* TL;DR box */
.clm-tldr {
  display: flex; gap: 20px; padding: 24px 28px; border-radius: var(--clm-radius);
  background: linear-gradient(135deg, var(--clm-surface-alt), var(--clm-surface));
  border-left: 4px solid var(--clm-accent);
  margin: 32px 0 40px;
}
.clm-tldr-badge {
  font-family: var(--clm-font-display); font-weight: 700; font-size: 18px;
  color: var(--clm-accent); flex-shrink: 0; letter-spacing: 1px;
}
.clm-tldr-body { font-size: 16px; line-height: 1.6; color: var(--clm-text); }
.clm-tldr-body strong { color: var(--clm-primary); }

/* Quick-stat row (compact bar of key numbers) */
.clm-quickbar {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 20px; padding: 24px; background: var(--clm-surface);
  border-radius: var(--clm-radius); margin: 24px 0;
  border: 1px solid var(--clm-border);
}
.clm-quickbar-item { text-align: center; }
.clm-quickbar-val { font-family: var(--clm-font-display); font-size: 26px; font-weight: 700; color: var(--clm-primary); line-height: 1; }
.clm-quickbar-lbl { font-size: 11px; color: var(--clm-text-muted); text-transform: uppercase; letter-spacing: 1.2px; margin-top: 6px; }

/* Related chips */
.clm-related-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.clm-chip {
  display: inline-block; padding: 8px 14px; border-radius: 999px;
  background: var(--clm-surface); border: 1px solid var(--clm-border);
  color: var(--clm-text); text-decoration: none; font-size: 14px;
  transition: var(--clm-transition);
}
.clm-chip:hover { background: var(--clm-primary); color: #fff; border-color: var(--clm-primary); }

/* E-E-A-T strip */
.clm-eeat {
  display: flex; gap: 32px; padding: 20px 24px; background: var(--clm-surface);
  border-radius: var(--clm-radius); border: 1px solid var(--clm-border);
  margin: 40px 0; flex-wrap: wrap;
}
.clm-eeat-item { display: flex; flex-direction: column; gap: 2px; }
.clm-eeat-label { font-size: 11px; color: var(--clm-text-muted); text-transform: uppercase; letter-spacing: 1px; }
.clm-eeat-val { font-size: 14px; font-weight: 600; color: var(--clm-text); }

/* FAQ */
.clm-faq-list { display: flex; flex-direction: column; gap: 8px; }
.clm-faq-item {
  background: var(--clm-surface); border: 1px solid var(--clm-border);
  border-radius: var(--clm-radius); padding: 0; overflow: hidden;
}
.clm-faq-item summary {
  padding: 18px 24px; cursor: pointer; font-weight: 600;
  font-size: 16px; color: var(--clm-text); list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.clm-faq-item summary::after { content: "+"; font-size: 22px; color: var(--clm-primary); transition: transform .2s; }
.clm-faq-item[open] summary::after { transform: rotate(45deg); }
.clm-faq-item summary::-webkit-details-marker { display: none; }
.clm-faq-a { padding: 0 24px 20px; color: var(--clm-text); line-height: 1.65; }
.clm-faq-a p { margin: 0 0 12px; }

/* Utility */
.clm-mb-0 { margin-bottom: 0 !important; }
.clm-center { text-align: center; }

@media (max-width: 640px) {
  .clm-section { padding: 40px 0; }
  .clm-hero-inner { padding: 60px 20px; }
  .clm-hero-search { flex-direction: column; padding: 12px; border-radius: 16px; }
  .clm-hero-search button { width: 100%; }
  .clm-eeat { gap: 16px; padding: 16px; }
}

/* =====================================================
   v2 CONTENT COMPONENTS — stat tiles, spec grids, ranked cards,
   parks, activities, monuments, chips, jumpnav
   ===================================================== */

/* Section intro paragraph */
.clm-section-intro {
  font-size: 17px; line-height: 1.65; color: var(--clm-text-muted);
  max-width: 780px; margin: -8px 0 28px;
}
.clm-subsection-title {
  font-size: 22px; font-weight: 700; color: var(--clm-text);
  margin: 40px 0 20px; letter-spacing: -0.01em;
}
.clm-region-block { margin-bottom: 48px; }

/* Hero jump-nav pills */
.clm-hero-jumpnav {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 24px;
}
.clm-hero-jumpnav a {
  padding: 10px 18px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #fff;
  font-size: 14px; font-weight: 600; text-decoration: none;
  border: 1px solid rgba(255,255,255,.22);
  transition: var(--clm-transition);
}
.clm-hero-jumpnav a:hover { background: rgba(255,255,255,.24); transform: translateY(-1px); }

/* Stat tiles — big number + label */
.clm-stat-grid { margin: 20px 0 24px; }
.clm-stat-tile {
  background: var(--clm-surface); border: 1px solid var(--clm-border);
  border-radius: var(--clm-radius); padding: 22px 20px;
  display: flex; flex-direction: column; gap: 6px;
  transition: var(--clm-transition);
}
.clm-stat-tile:hover { transform: translateY(-2px); box-shadow: var(--clm-shadow); border-color: var(--clm-primary); }
.clm-stat-value {
  font-size: 30px; font-weight: 800; color: var(--clm-primary);
  letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.clm-stat-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--clm-text-muted); font-weight: 600;
}
.clm-stat-delta { font-size: 13px; color: var(--clm-success, #16A34A); font-weight: 600; }

/* Spec grid — icon + label + value (utilities/contact) */
.clm-spec-grid { margin: 20px 0; }
.clm-spec-tile {
  background: var(--clm-surface); border: 1px solid var(--clm-border);
  border-radius: var(--clm-radius); padding: 20px;
  display: grid; grid-template-columns: 44px 1fr; gap: 4px 16px;
  align-items: center;
}
.clm-spec-tile:hover { border-color: var(--clm-primary); }
.clm-spec-icon { font-size: 26px; grid-row: 1 / span 2; }
.clm-spec-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--clm-text-muted); font-weight: 700;
}
.clm-spec-value { font-size: 15px; color: var(--clm-text); font-weight: 600; }
.clm-spec-value a { color: var(--clm-primary); text-decoration: none; }
.clm-spec-value a:hover { text-decoration: underline; }

/* Ranked cards — economy sectors, criteria */
.clm-card--rank, .clm-card--criteria {
  position: relative; background: var(--clm-surface);
  border: 1px solid var(--clm-border); border-radius: var(--clm-radius);
  padding: 24px 20px 20px 68px; text-decoration: none;
  transition: var(--clm-transition);
  display: block; overflow: hidden;
}
.clm-card--rank:hover, .clm-card--criteria:hover {
  transform: translateY(-3px); box-shadow: var(--clm-shadow-hover);
  border-color: var(--clm-primary);
}
.clm-rank-badge {
  position: absolute; left: 18px; top: 22px;
  width: 38px; height: 38px; border-radius: 999px;
  background: linear-gradient(135deg, var(--clm-primary), var(--clm-primary-hover));
  color: #fff; font-weight: 800; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  letter-spacing: -0.01em;
}

/* Activity / things-to-do cards */
.clm-card--activity {
  background: var(--clm-surface); border: 1px solid var(--clm-border);
  border-radius: var(--clm-radius); padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  text-decoration: none; transition: var(--clm-transition);
}
.clm-card--activity:hover {
  transform: translateY(-3px); box-shadow: var(--clm-shadow-hover);
  border-color: var(--clm-primary);
}
.clm-activity-icon { font-size: 40px; line-height: 1; }

/* Park & monument cards */
.clm-card--park, .clm-card--monument {
  background: var(--clm-surface); border: 1px solid var(--clm-border);
  border-radius: var(--clm-radius); overflow: hidden;
  text-decoration: none; display: block; transition: var(--clm-transition);
}
.clm-card--park:hover, .clm-card--monument:hover {
  transform: translateY(-3px); box-shadow: var(--clm-shadow-hover);
}
.clm-card--park .clm-card-media {
  position: relative; height: 200px; overflow: hidden;
  background: linear-gradient(135deg, #C2410C, #7C2D12);
}
.clm-card--park .clm-card-media img { width: 100%; height: 100%; object-fit: cover; }
.clm-card-badge {
  position: absolute; top: 12px; left: 12px;
  background: rgba(0,0,0,.72); color: #fff;
  padding: 6px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.02em;
}
.clm-card--monument { padding: 20px; }
.clm-card--monument .clm-card-title { margin-top: 6px; }

/* Service cards (agent pages) */
.clm-card--service {
  background: var(--clm-surface); border: 1px solid var(--clm-border);
  border-radius: var(--clm-radius); padding: 24px;
  display: flex; gap: 16px; align-items: flex-start;
  transition: var(--clm-transition);
}
.clm-card--service:hover { border-color: var(--clm-primary); }
.clm-service-icon { font-size: 36px; line-height: 1; }

/* School cards */
.clm-card--school {
  background: var(--clm-surface); border: 1px solid var(--clm-border);
  border-radius: var(--clm-radius); padding: 20px;
  text-decoration: none; display: block; transition: var(--clm-transition);
}
.clm-card--school:hover { border-color: var(--clm-primary); transform: translateY(-2px); }

/* Chips */
.clm-chip-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 12px 0 4px;
}
.clm-chip {
  display: inline-flex; align-items: center;
  padding: 8px 14px; border-radius: 999px;
  background: var(--clm-surface-alt, #F1EEE6); color: var(--clm-text);
  font-size: 13px; font-weight: 600; border: 1px solid var(--clm-border);
  transition: var(--clm-transition);
}
.clm-chip--sm { padding: 4px 10px; font-size: 11px; }
.clm-chip:hover { background: var(--clm-primary); color: #fff; border-color: var(--clm-primary); }
.clm-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }

/* Contact card wrapper (agent page) */
.clm-contact-card {
  background: var(--clm-surface); border: 1px solid var(--clm-border);
  border-radius: var(--clm-radius); padding: 28px; margin: 20px 0;
}
.clm-contact-card .clm-btn { margin-top: 20px; }

/* Data freshness footnote */
.clm-data-freshness {
  font-size: 13px; color: var(--clm-text-muted);
  margin: 32px 0 8px; padding: 14px 18px;
  border-left: 3px solid var(--clm-primary);
  background: var(--clm-surface); border-radius: 6px;
}

/* Mobile tuning */
@media (max-width: 640px) {
  .clm-stat-value { font-size: 24px; }
  .clm-spec-tile { grid-template-columns: 36px 1fr; padding: 14px; }
  .clm-spec-icon { font-size: 22px; }
  .clm-hero-jumpnav a { padding: 8px 14px; font-size: 13px; }
  .clm-card--rank, .clm-card--criteria { padding: 20px 16px 16px 56px; }
  .clm-rank-badge { width: 32px; height: 32px; font-size: 12px; left: 14px; top: 18px; }
}