/**
 * Modern Theme Stylesheet
 *
 * Bold, contemporary design with alternating section backgrounds,
 * parallax photo sections, and strong visual rhythm. Uses a refined
 * blue-navy palette with warm neutral accents.
 *
 * @package AI_Community_Page_Builder/themes/modern
 * @since   1.0.0
 */

/* ==========================================================================
   CSS Custom Properties
   ========================================================================== */

.cpb-theme-modern {
  --m-primary:       #2563EB;
  --m-primary-dark:  #1D4ED8;
  --m-primary-light: #DBEAFE;
  --m-accent:        #10B981;
  --m-navy:          #0F172A;
  --m-slate:         #1E293B;
  --m-bg:            #FFFFFF;
  --m-bg-warm:       #FAF9F7;
  --m-bg-cool:       #F1F5F9;
  --m-card:          #FFFFFF;
  --m-border:        #E2E8F0;
  --m-text:          #1E293B;
  --m-text-light:    #475569;
  --m-muted:         #64748B;
  --m-shadow:        0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --m-shadow-md:     0 4px 12px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04);
  --m-shadow-lg:     0 10px 40px rgba(0,0,0,.10), 0 4px 12px rgba(0,0,0,.06);
  --m-radius:        12px;
  --m-radius-lg:     16px;
  --m-font:          -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --m-section-pad:   72px 0;
  font-family: var(--m-font);
  color: var(--m-text);
  background: var(--m-bg);
  line-height: 1.6;
}

.cpb-theme-modern .cpb-container {
  max-width: 1400px;
}

/* ==========================================================================
   Full-bleed section utility
   ========================================================================== */

.cpb-m-section--full {
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  padding-left: 0;
  padding-right: 0;
}

.cpb-m-section--full > .cpb-m-section__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ==========================================================================
   Video + Agent Flex Layout
   ========================================================================== */

.cpb-m-video-agent {
  display: flex;
  gap: 24px;
  max-width: 1100px;
  margin: 32px auto 0;
  padding: 0 24px;
  align-items: center;
}
.cpb-m-video-agent__video {
  flex: 1;
  min-width: 0;
}
.cpb-m-video-agent .cpb-m-agent-card {
  flex-shrink: 0;
  width: 420px;
  max-width: 420px;
  margin: 0;
  flex-direction: column;
  text-align: center;
  min-width: 0;
  word-break: normal;
  overflow: visible;
}

.cpb-responsive-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow-lg);
}
.cpb-responsive-video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.cpb-m-video-agent .cpb-m-agent-card .cpb-m-agent-card__info {
  text-align: center;
}
.cpb-m-video-agent .cpb-m-agent-card .cpb-m-agent-card__contact {
  align-items: center;
}
.cpb-m-video-agent .cpb-m-agent-card .cpb-m-agent-card__cta {
  align-items: center;
}

@media (max-width: 768px) {
  .cpb-m-video-agent {
    flex-direction: column;
  }
  .cpb-m-video-agent .cpb-m-agent-card {
    width: 100%;
    max-width: 100%;
  }
}

/* ==========================================================================
   Agent Card — Floating below hero
   ========================================================================== */

.cpb-m-agent-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  max-width: 600px;
  margin: 32px auto 0;
  padding: 24px 32px;
  background: #fff;
  border: none;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
  position: relative;
  z-index: 20;
}

.cpb-m-agent-card__photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top;
  flex-shrink: 0;
  margin: 0;
  border: 3px solid var(--m-primary-light);
}

.cpb-m-agent-card__photo-placeholder {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--m-primary), var(--m-primary-dark));
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0;
}

.cpb-m-agent-card__info { flex: 1; min-width: 0; text-align: center; }

.cpb-m-agent-card__cta {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.cpb-m-agent-card__name {
  font-size: 20px;
  font-weight: 700;
  color: var(--m-text);
  margin: 0 0 2px;
}

.cpb-m-agent-card__title {
  font-size: 16px;
  color: var(--m-muted);
  margin: 0 0 12px;
  line-height: 1.4;
}

.cpb-m-agent-card__contact {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: center;
  align-items: center;
}
.cpb-m-agent-card__contact li { font-size: 16px; color: var(--m-text-light); }
.cpb-m-agent-card__contact a  { color: var(--m-primary); text-decoration: none; }
.cpb-m-agent-card__contact a:hover { text-decoration: underline; }

.cpb-m-view-homes-btn {
  display: inline-block;
  background: var(--m-primary);
  color: #fff !important;
  padding: 10px 22px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: background .2s, transform .2s;
}
.cpb-m-view-homes-btn:hover {
  background: var(--m-primary-dark);
  transform: translateY(-1px);
}
.cpb-m-view-homes-btn.cpb-view-homes-btn--secondary {
  background: transparent;
  color: var(--m-primary) !important;
  border: 2px solid var(--m-primary);
}
.cpb-m-view-homes-btn.cpb-view-homes-btn--secondary:hover {
  background: var(--m-primary);
  color: #fff !important;
}

@media (max-width: 640px) {
  .cpb-m-agent-card {
    flex-direction: column;
    text-align: center;
    padding: 24px 20px;
    margin-top: 24px;
  }
  .cpb-m-agent-card__info { text-align: center; }
  .cpb-m-agent-card__contact { align-items: center; }
}

/* ==========================================================================
   Content wrapper
   ========================================================================== */

.cpb-m-content {
  padding-top: 48px;
  padding-bottom: 0;
}

/* ==========================================================================
   Sections — Alternating backgrounds and visual rhythm
   ========================================================================== */

.cpb-m-section {
  margin-bottom: 0;
  padding: var(--m-section-pad);
}

.cpb-m-section:last-child { margin-bottom: 0; }

/* --- Overview: clean white --- */
.cpb-m-section--overview {
  padding-top: 48px;
}

/* --- Amenities: warm off-white with top border --- */
#amenities {
  background: var(--m-bg-warm);
  margin-left: -24px;
  margin-right: -24px;
  padding-left: 24px;
  padding-right: 24px;
  border-top: 1px solid #EDE9E3;
  border-bottom: 1px solid #EDE9E3;
}

/* --- Market Stats: dark navy (parallax-ready) --- */
#market-stats {
  background: var(--m-navy);
  margin-left: -24px;
  margin-right: -24px;
  padding: 80px 24px;
  position: relative;
  overflow: hidden;
}
#market-stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(37,99,235,.15) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(16,185,129,.08) 0%, transparent 50%);
  pointer-events: none;
}
#market-stats .cpb-section-label { color: rgba(255,255,255,.5); }
#market-stats .cpb-m-section__title {
  color: #fff;
  border-left-color: var(--m-primary);
}
#market-stats .cpb-m-section__body { color: rgba(255,255,255,.75); }
#market-stats .cpb-m-section__body p { color: rgba(255,255,255,.75); }

/* --- Schools: cool light --- */
#schools {
  background: var(--m-bg-cool);
  margin-left: -24px;
  margin-right: -24px;
  padding-left: 24px;
  padding-right: 24px;
}

/* --- Quick Facts: white --- */
#quick-facts {
  padding: 50px 20px;
}

/* --- Transportation: warm off-white --- */
#transportation {
  background: var(--m-bg-warm);
  margin-left: -24px;
  margin-right: -24px;
  padding-left: 24px;
  padding-right: 24px;
  border-top: 1px solid #EDE9E3;
  border-bottom: 1px solid #EDE9E3;
}

/* --- FAQs: white --- */
#faqs {
  padding: var(--m-section-pad);
}

/* --- Map: white --- */
.cpb-m-section--map {
  padding: var(--m-section-pad);
}

/* --- Nearby Communities: dark slate parallax (full-width via breakout below) --- */
#nearby-communities {
  padding: 0;
  position: relative;
}
/* ::after removed — left border only, see Section Header Consistency */

/* ==========================================================================
   Section Titles — refined
   ========================================================================== */

.cpb-m-section__title {
  font-size: 24px;
  font-weight: 800;
  color: var(--m-text);
  margin: 0 0 24px;
  padding-left: 16px;
  border-left: 4px solid var(--m-primary);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
@media (min-width: 768px) { .cpb-m-section__title { font-size: 28px; } }

.cpb-m-section__body {
  font-size: 16px;
  line-height: 1.8;
  color: var(--m-text-light);
}
.cpb-m-section__body p { margin: 0 0 16px; }
.cpb-m-section__body p:last-child { margin-bottom: 0; }
.cpb-m-section__body--mt { margin-top: 28px; }

/* ==========================================================================
   Market Stat Cards — styled for dark background
   ========================================================================== */

.cpb-theme-modern .cpb-stat-cards-grid {
  gap: 12px;
}

.cpb-theme-modern .cpb-stat-card-v2 {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--m-radius);
  padding: 24px 16px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background .2s, transform .2s;
}
.cpb-theme-modern .cpb-stat-card-v2:hover {
  background: rgba(255,255,255,.1);
  transform: translateY(-2px);
}

.cpb-theme-modern .cpb-stat-card-v2__value {
  color: #fff;
  font-size: 1.6rem;
  font-weight: 800;
}

.cpb-theme-modern .cpb-stat-card-v2__label {
  color: rgba(255,255,255,.5);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
}

/* ==========================================================================
   Amenity Cards — refined for warm background
   ========================================================================== */

.cpb-theme-modern .cpb-amenity-card {
  background: #fff;
  border: 1px solid #E8E4DE;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.cpb-theme-modern .cpb-amenity-card:hover {
  box-shadow: var(--m-shadow-md);
  border-color: var(--m-primary-light);
}
.cpb-theme-modern .cpb-amenity-card__category {
  color: var(--m-primary);
  font-weight: 800;
}

/* ==========================================================================
   Shopping Columns — warm bg
   ========================================================================== */

.cpb-theme-modern .cpb-shopping-cols {
  border-top-color: #E8E4DE;
  margin-top: 36px;
  padding-top: 28px;
}
.cpb-theme-modern .cpb-shopping-col__title { color: var(--m-slate); }
.cpb-theme-modern .cpb-shopping-col__list li {
  border-bottom-color: #F0ECE6;
  color: var(--m-text-light);
}

/* ==========================================================================
   Quick Facts — clean two-tone rows
   ========================================================================== */

.cpb-theme-modern .cpb-quick-facts {
  max-width: 720px;
}

.cpb-theme-modern .cpb-quick-facts__row {
  border-bottom-color: #F1F5F9;
  padding: 14px 0;
}

.cpb-theme-modern .cpb-quick-facts__label {
  color: var(--m-text);
  font-weight: 700;
  font-size: 1rem;
}

.cpb-theme-modern .cpb-quick-facts__value {
  color: var(--m-muted);
  font-size: 1rem;
}

/* ==========================================================================
   Schools — cards on cool background
   ========================================================================== */

.cpb-m-schools-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
@media (min-width: 640px) { .cpb-m-schools-grid { grid-template-columns: repeat(3, 1fr); } }

.cpb-m-school-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: #fff;
  border: 1px solid #E2E8F0;
  border-radius: var(--m-radius);
  box-shadow: var(--m-shadow);
  transition: box-shadow .2s, transform .2s;
}
.cpb-m-school-card:hover {
  box-shadow: var(--m-shadow-md);
  transform: translateY(-1px);
}

.cpb-m-school-card__rating {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  font-size: 16px;
  font-weight: 800;
  flex-shrink: 0;
  line-height: 1;
}
.cpb-m-school-card__rating--high    { background: #D1FAE5; color: #065F46; }
.cpb-m-school-card__rating--good    { background: #FEF3C7; color: #92400E; }
.cpb-m-school-card__rating--low     { background: #F3F4F6; color: #4B5563; }
.cpb-m-school-card__rating--private { background: #EDE9FE; color: #5B21B6; }

.cpb-m-school-card__info strong { display: block; font-size: 16px; color: var(--m-text); margin-bottom: 2px; }
.cpb-m-school-card__info span   { font-size: 16px; color: var(--m-muted); }

/* ==========================================================================
   FAQs — refined
   ========================================================================== */

.cpb-m-faqs {
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  overflow: hidden;
  background: var(--m-card);
  box-shadow: var(--m-shadow);
}

.cpb-m-faq-toggle {
  color: var(--m-text);
  font-family: var(--m-font);
  font-size: 16px;
  padding: 20px 24px;
  font-weight: 600;
}
.cpb-m-faq-toggle:hover { background: var(--m-bg-cool); color: var(--m-primary); }

.cpb-faq-item { border-bottom-color: var(--m-border); }
.cpb-faq-item:last-child { border-bottom: none; }

.cpb-m-faq-body__inner {
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 24px;
  padding-right: 24px;
  color: var(--m-text-light);
  line-height: 1.7;
}

/* ==========================================================================
   Nearby Communities — on dark background
   ========================================================================== */

.cpb-theme-modern .cpb-nearby-comm-card {
  border-radius: var(--m-radius);
}
.cpb-theme-modern .cpb-nearby-comm-card:hover {
  box-shadow: 0 12px 32px rgba(0,0,0,.3);
}

/* ==========================================================================
   Sidebar (legacy) — hidden for full-width Modern
   ========================================================================== */

.cpb-m-sidebar__card {
  background: var(--m-card);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  padding: 24px;
  box-shadow: var(--m-shadow);
}

.cpb-m-sidebar__card-title {
  font-size: 16px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--m-muted);
  margin: 0 0 16px;
}

.cpb-m-sidebar__card .cpb-nearby-list a { color: var(--m-primary); font-size: 16px; }
.cpb-m-sidebar__card .cpb-nearby-list a:hover { text-decoration: underline; }

/* ==========================================================================
   Market Stats (legacy grid)
   ========================================================================== */

.cpb-m-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 640px) { .cpb-m-stats-grid { grid-template-columns: repeat(4, 1fr); } }

.cpb-m-stat-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--m-radius);
  padding: 20px 16px;
  text-align: center;
  transition: transform .2s, background .2s;
}
.cpb-m-stat-card:hover { transform: translateY(-2px); background: rgba(255,255,255,.1); }

.cpb-m-stat-card .cpb-stat-card__value {
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  display: block;
  margin-bottom: 4px;
  line-height: 1;
}

.cpb-m-stat-card .cpb-stat-card__label {
  font-size: 12px;
  color: rgba(255,255,255,.5);
  display: block;
  line-height: 1.3;
}

/* ==========================================================================
   Section Header Consistency — left border ONLY, no bottom/after lines
   ========================================================================== */

.cpb-theme-modern .cpb-section-title--decorated {
  padding-bottom: 0;
  margin-bottom: 24px;
}
.cpb-theme-modern .cpb-section-title--decorated::after {
  display: none;
}

/* ==========================================================================
   Amenity Card SVG Icons
   ========================================================================== */

.cpb-theme-modern .cpb-amenity-card__icon {
  display: block;
  color: var(--m-primary);
  margin-bottom: 12px;
}

/* ==========================================================================
   Quick Facts — Background Image
   ========================================================================== */

.cpb-m-section--qf-bg {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  padding: 80px 32px;
  margin-left: -24px;
  margin-right: -24px;
  border-radius: 0;
}
.cpb-m-section--qf-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  pointer-events: none;
}
.cpb-m-section--qf-bg > * {
  position: relative;
  z-index: 1;
}

/* Quick Facts on dark overlay — white text */
.cpb-m-section--qf-bg .cpb-section-label { color: rgba(255,255,255,.6); }
.cpb-m-section--qf-bg .cpb-m-section__title { color: #fff; border-left-color: var(--m-primary); }

.cpb-m-section--qf-bg .cpb-m-qf-card {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.15);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.cpb-m-section--qf-bg .cpb-m-qf-card:hover {
  background: rgba(255,255,255,.18);
}
.cpb-m-section--qf-bg .cpb-m-qf-card__icon {
  background: rgba(37,99,235,.3);
  color: #fff;
}
.cpb-m-section--qf-bg .cpb-m-qf-card__label {
  color: rgba(255,255,255,.6);
}
.cpb-m-section--qf-bg .cpb-m-qf-card__value {
  color: #fff;
}

/* ==========================================================================
   Quick Facts — Badge Card Grid
   ========================================================================== */

.cpb-m-qf-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 640px) { .cpb-m-qf-grid { grid-template-columns: repeat(5, 1fr); } }

.cpb-m-qf-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  padding: 20px 12px;
  background: var(--m-bg-cool);
  border-radius: var(--m-radius);
  border: 1px solid var(--m-border);
  transition: transform .2s, box-shadow .2s;
}
.cpb-m-qf-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--m-shadow-md);
}

.cpb-m-qf-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--m-primary-light);
  border-radius: 50%;
  color: var(--m-primary);
  flex-shrink: 0;
}

.cpb-m-qf-card__label {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m-muted);
}

.cpb-m-qf-card__value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--m-text);
  line-height: 1.3;
}

/* ==========================================================================
   Get In Touch — full-width dark bottom section
   ========================================================================== */

.cpb-m-section--contact {
  background: linear-gradient(135deg, var(--m-navy) 0%, #162033 50%, var(--m-slate) 100%);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}
.cpb-m-section--contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(37,99,235,.12) 0%, transparent 60%);
  pointer-events: none;
}

.cpb-m-section--contact__inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 24px;
}

.cpb-section-label--light {
  color: rgba(255,255,255,.45);
}

.cpb-m-section__title--light {
  color: #fff;
  border-left: none;
}

.cpb-m-section--contact input[type="text"],
.cpb-m-section--contact input[type="email"],
.cpb-m-section--contact input[type="tel"],
.cpb-m-section--contact textarea,
.cpb-m-section--contact select {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  border-radius: 8px;
}
.cpb-m-section--contact input::placeholder,
.cpb-m-section--contact textarea::placeholder {
  color: rgba(255,255,255,.4);
}
.cpb-m-section--contact input:focus,
.cpb-m-section--contact textarea:focus {
  border-color: var(--m-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgba(37,99,235,.25);
}
.cpb-m-section--contact label {
  color: rgba(255,255,255,.75);
}
.cpb-m-section--contact .frm_submit button,
.cpb-m-section--contact .frm_submit input[type="submit"] {
  background: var(--m-primary);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 12px 32px;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: background .2s;
}
.cpb-m-section--contact .frm_submit button:hover,
.cpb-m-section--contact .frm_submit input[type="submit"]:hover {
  background: var(--m-primary-dark);
}

/* ==========================================================================
   Nearby Communities — full width
   ========================================================================== */

.cpb-theme-modern #nearby-communities {
  width: 1400px;
  max-width: 100%;
  position: relative;
  box-sizing: border-box;
  margin: 0 auto;
}

.cpb-theme-modern .cpb-nearby-comm-grid {
  grid-template-columns: repeat(4, 1fr);
}

/* ==========================================================================
   What's Nearby — Per-category tab colors (Modern theme)
   Pin colors: Schools #2563EB, Parks #059669, Grocery #F97316,
               Restaurants #EF4444, Medical #EC4899, Gyms #7C3AED
   ========================================================================== */

/* Schools — Blue */
.cpb-theme-modern .cpb-wn-tab[data-cat="0"]:hover { background: rgba(37,99,235,.12); color: #2563EB; }
.cpb-theme-modern .cpb-wn-tab--active[data-cat="0"],
.cpb-theme-modern .cpb-wn-tab--active[data-cat="0"]:hover { background: #2563EB; color: #fff; border-color: #2563EB; }

/* Parks — Green */
.cpb-theme-modern .cpb-wn-tab[data-cat="1"]:hover { background: rgba(5,150,105,.12); color: #059669; }
.cpb-theme-modern .cpb-wn-tab--active[data-cat="1"],
.cpb-theme-modern .cpb-wn-tab--active[data-cat="1"]:hover { background: #059669; color: #fff; border-color: #059669; }

/* Grocery — Orange */
.cpb-theme-modern .cpb-wn-tab[data-cat="2"]:hover { background: rgba(249,115,22,.12); color: #F97316; }
.cpb-theme-modern .cpb-wn-tab--active[data-cat="2"],
.cpb-theme-modern .cpb-wn-tab--active[data-cat="2"]:hover { background: #F97316; color: #fff; border-color: #F97316; }

/* Restaurants — Red */
.cpb-theme-modern .cpb-wn-tab[data-cat="3"]:hover { background: rgba(239,68,68,.12); color: #EF4444; }
.cpb-theme-modern .cpb-wn-tab--active[data-cat="3"],
.cpb-theme-modern .cpb-wn-tab--active[data-cat="3"]:hover { background: #EF4444; color: #fff; border-color: #EF4444; }

/* Medical — Pink */
.cpb-theme-modern .cpb-wn-tab[data-cat="4"]:hover { background: rgba(236,72,153,.12); color: #EC4899; }
.cpb-theme-modern .cpb-wn-tab--active[data-cat="4"],
.cpb-theme-modern .cpb-wn-tab--active[data-cat="4"]:hover { background: #EC4899; color: #fff; border-color: #EC4899; }

/* Gyms — Purple */
.cpb-theme-modern .cpb-wn-tab[data-cat="5"]:hover { background: rgba(124,58,237,.12); color: #7C3AED; }
.cpb-theme-modern .cpb-wn-tab--active[data-cat="5"],
.cpb-theme-modern .cpb-wn-tab--active[data-cat="5"]:hover { background: #7C3AED; color: #fff; border-color: #7C3AED; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 768px) {
  .cpb-theme-modern { --m-section-pad: 48px 0; }

  #market-stats,
  #nearby-communities {
    padding: 56px 20px;
  }

  #amenities,
  #schools,
  #transportation,
  {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }

  .cpb-m-section--contact { padding: 56px 0; }

  .cpb-m-qf-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ---- Mobile fixes ---- */
@media (max-width: 768px) {
  .cpb-theme-modern .cpb-shopping-cols {
    text-align: center;
  }
  .cpb-theme-modern .cpb-nearby-comm-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .cpb-m-video-agent {
    flex-direction: column;
  }
  .cpb-m-video-agent__video {
    max-width: 100%;
  }
  .cpb-m-agent-card {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 20px 16px;
  }
  .cpb-m-agent-card__cta {
    align-self: center;
  }
  .cpb-m-qf-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cpb-m-section--qf-bg {
    background-size: cover;
  }
}

/* ==========================================================================
   IDX Listings — Modern (refined minimalism, sharp grid, crisp typography)
   ========================================================================== */

.cpb-theme-modern .cpb-listings-showcase {
  margin-top: 8px;
}
/* Row: clearfix only — work WITH IMPress floats */
.cpb-theme-modern .cpb-listings-showcase .impress-property-showcase.impress-row {
  margin: 0;
}
.cpb-theme-modern .cpb-listings-showcase .impress-property-showcase.impress-row::after {
  content: '';
  display: table;
  clear: both;
}
/* Card: keep IMPress float, force 3-col widths via calc() */
.cpb-theme-modern .cpb-listings-showcase .impress-showcase-property {
  float: left !important;
  width: calc((100% - 48px) / 3) !important;
  margin: 0 24px 24px 0;
  padding: 0;
  background: var(--m-card);
  border: 1px solid var(--m-border);
  border-radius: var(--m-radius);
  overflow: hidden;
  box-shadow: var(--m-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  box-sizing: border-box;
}
.cpb-theme-modern .cpb-listings-showcase .impress-showcase-property:nth-child(3n) {
  margin-right: 0;
}
.cpb-theme-modern .cpb-listings-showcase .impress-showcase-property:nth-child(3n+1) {
  clear: left;
}
.cpb-theme-modern .cpb-listings-showcase .impress-showcase-property:hover {
  transform: translateY(-3px);
  box-shadow: var(--m-shadow-lg);
  border-color: var(--m-primary-light);
}
@media (max-width: 900px) {
  .cpb-theme-modern .cpb-listings-showcase .impress-showcase-property {
    width: calc((100% - 18px) / 2) !important;
    margin: 0 18px 18px 0;
  }
  .cpb-theme-modern .cpb-listings-showcase .impress-showcase-property:nth-child(3n) {
    margin-right: 18px;
  }
  .cpb-theme-modern .cpb-listings-showcase .impress-showcase-property:nth-child(3n+1) {
    clear: none;
  }
  .cpb-theme-modern .cpb-listings-showcase .impress-showcase-property:nth-child(2n) {
    margin-right: 0;
  }
  .cpb-theme-modern .cpb-listings-showcase .impress-showcase-property:nth-child(2n+1) {
    clear: left;
  }
}
@media (max-width: 560px) {
  .cpb-theme-modern .cpb-listings-showcase .impress-showcase-property {
    width: 100% !important;
    float: none !important;
    margin: 0 0 18px 0 !important;
    clear: both !important;
  }
}
/* Photo anchor — DON'T clip; price + address sit INSIDE this anchor on same line */
.cpb-theme-modern .cpb-listings-showcase .impress-showcase-photo {
  display: block;
  position: relative;
  overflow: visible;
  text-decoration: none;
  color: inherit;
  text-align: center;
}
/* Image — fixed height for uniform card layout */
.cpb-theme-modern .cpb-listings-showcase .impress-showcase-property img {
  width: 100%;
  height: 240px !important;
  object-fit: cover;
  border: 0;
  border-radius: 0;
  display: block;
  background: var(--m-bg-cool);
  transition: transform .5s ease;
}
.cpb-theme-modern .cpb-listings-showcase .impress-showcase-property:hover img {
  transform: scale(1.04);
}
/* Price + address share a single centered line; address is visually secondary */
.cpb-theme-modern .cpb-listings-showcase .impress-price {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-size: 22px;
  font-weight: 800;
  color: var(--m-navy);
  letter-spacing: -.01em;
  padding: 16px 4px 14px 18px;
  margin: 0;
  line-height: 1.2;
}
.cpb-theme-modern .cpb-listings-showcase .impress-status { display: none; }
.cpb-theme-modern .cpb-listings-showcase .impress-address {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  margin: 0;
  padding: 16px 18px 14px 4px;
  font-size: 13px;
  color: var(--m-muted);
  line-height: 1.45;
  font-weight: 400;
}
.cpb-theme-modern .cpb-listings-showcase .impress-street {
  display: inline;
  text-align: center;
  font-weight: 400;
  color: var(--m-muted);
  font-size: 13px;
  margin: 0;
}
.cpb-theme-modern .cpb-listings-showcase .impress-cityname,
.cpb-theme-modern .cpb-listings-showcase .impress-state {
  display: inline;
  color: var(--m-muted);
}
.cpb-theme-modern .cpb-listings-showcase .impress-beds-baths-sqft {
  margin: 0;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--m-border);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  gap: 10px 16px;
  font-size: 13px;
  color: var(--m-text);
  font-weight: 600;
  letter-spacing: .02em;
}
.cpb-theme-modern .cpb-listings-showcase .impress-beds,
.cpb-theme-modern .cpb-listings-showcase .impress-baths,
.cpb-theme-modern .cpb-listings-showcase .impress-sqft,
.cpb-theme-modern .cpb-listings-showcase .impress-acres {
  display: inline-flex;
  align-items: center;
  color: var(--m-text);
}

.cpb-theme-modern .cpb-listings-cta-wrap {
  text-align: center;
  margin-top: 36px;
}
.cpb-theme-modern .cpb-listings-cta {
  padding: 14px 32px;
  font-size: 16px;
}