/**
 * Professional directory UI — clean spacing, Yelp-inspired clarity.
 * Loaded after theme.css; tones down heavy gradients and tight layouts.
 */

:root {
  --mci-page-bg:        #f5f5f5;
  --mci-surface-clean:  #ffffff;
  --mci-border-light:   #e6e6e6;
  --mci-text-primary:   #2d2e2f;
  --mci-text-secondary: #666666;
  --mci-space-section:  2rem;
  --mci-space-block:    1.5rem;
  --mci-shadow-clean:   0 1px 3px rgba(0, 0, 0, 0.08);
  --mci-shadow-card-clean: 0 1px 2px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.04);
}

/* ─── Page canvas ───────────────────────────────────── */
body.mci-body {
  background-color: var(--mci-page-bg);
  color: var(--mci-text-primary);
}

.mci-main {
  padding-top: 1.5rem;
  padding-bottom: 2.5rem;
}

@media (min-width: 992px) {
  .mci-main {
    padding-top: 2rem;
    padding-bottom: 3rem;
  }
}

.mci-main > .container {
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 768px) {
  .mci-main > .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
}

/* ─── Calmer primary buttons (less glow) ────────────── */
body.mci-body .btn-dark:not(:disabled):not(.disabled) {
  background: var(--mci-color-primary-dark);
  box-shadow: none;
  text-shadow: none;
  font-weight: 600;
  letter-spacing: 0;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
}

body.mci-body .btn-dark:not(:disabled):not(.disabled):hover,
body.mci-body .btn-dark:not(:disabled):not(.disabled):focus-visible {
  background: var(--mci-color-primary-deep);
  filter: none;
  transform: none;
  box-shadow: var(--mci-shadow-clean);
}

body.mci-body .btn-outline-dark:not(:disabled):not(.disabled) {
  border-width: 1px;
  border-color: var(--mci-border-light);
  color: var(--mci-text-primary);
  font-weight: 600;
  background: #fff;
}

body.mci-body .btn-outline-dark:not(:disabled):not(.disabled):hover,
body.mci-body .btn-outline-dark:not(:disabled):not(.disabled):focus-visible {
  background: #fff;
  border-color: var(--mci-color-primary-dark);
  color: var(--mci-color-primary-deep);
  transform: none;
  box-shadow: none;
}

body.mci-body .btn-primary:not(:disabled):not(.disabled) {
  background: var(--mci-color-primary-dark);
  box-shadow: none;
}

body.mci-body .btn-primary:not(:disabled):not(.disabled):hover,
body.mci-body .btn-primary:not(:disabled):not(.disabled):focus-visible {
  filter: none;
  transform: none;
  box-shadow: var(--mci-shadow-clean);
}

/* ─── Cards — white, airy, subtle border ────────────── */
.mci-body .card {
  border-color: var(--mci-border-light) !important;
  box-shadow: var(--mci-shadow-card-clean) !important;
}

.mci-body .card .card-body {
  padding: 1.25rem 1.35rem;
}

@media (min-width: 768px) {
  .mci-body .card .card-body {
    padding: 1.5rem 1.65rem;
  }
}

/* ─── Listing cards (home + browse) ─────────────────── */
.mci-listing-card {
  border: 1px solid var(--mci-border-light) !important;
  border-radius: 0.75rem !important;
  box-shadow: var(--mci-shadow-card-clean) !important;
  background: var(--mci-surface-clean);
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.mci-listing-card:hover {
  transform: none;
  border-color: #d4d4d4 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.mci-listing-card .card-img-wrap {
  height: 180px;
  background: #eee;
}

.mci-listing-card .card-img-top {
  transition: none;
}

.mci-listing-card:hover .card-img-top {
  transform: none;
}

.mci-listing-card .card-body {
  padding: 1rem 1.1rem 1.15rem !important;
}

.mci-listing-card .category-pill {
  background: #f0f0f0 !important;
  color: var(--mci-text-secondary) !important;
  border: none !important;
  backdrop-filter: none !important;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.2rem 0.55rem;
}

.mci-listing-card .btn-view-pill {
  background: transparent !important;
  color: var(--mci-color-primary-deep) !important;
  border: 1px solid var(--mci-border-light) !important;
  box-shadow: none !important;
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.3rem 0.65rem;
}

.mci-listing-card:hover .btn-view-pill {
  background: var(--mci-color-primary-soft) !important;
  border-color: rgba(211, 35, 35, 0.25) !important;
  transform: none;
  box-shadow: none !important;
}

.mci-listing-card--home .card-img-wrap {
  height: 150px;
}

.mci-listing-card--home .card-body {
  padding: 0.9rem 1rem 1rem !important;
}

/* List row view */
.mci-listing-row-card {
  border: 1px solid var(--mci-border-light) !important;
  border-radius: 0.75rem !important;
  box-shadow: var(--mci-shadow-card-clean) !important;
}

.mci-listing-row-link:hover .mci-listing-row-card {
  transform: none;
  border-color: #d4d4d4 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.mci-listing-row-card .category-pill {
  background: #f0f0f0 !important;
  color: var(--mci-text-secondary) !important;
  border: none !important;
  text-transform: none;
  letter-spacing: 0;
}

/* ─── Section headings site-wide ──────────────────── */
.mci-body h1,
.mci-body h2,
.mci-body .h1,
.mci-body .h2 {
  color: var(--mci-text-primary);
  line-height: 1.25;
}

.mci-body .text-muted {
  color: var(--mci-text-secondary) !important;
}

/* ─── Home hero — directory layout (open on gray canvas) ─ */
.home-hero--directory {
  box-shadow: none !important;
  border: 1px solid #ececec !important;
  background: #fafafa !important;
}

.home-search-shell {
  box-shadow: none;
}

.home-search-card {
  box-shadow: none;
}

.home-search-card .form-label {
  color: var(--mci-text-secondary);
}

/* ─── Listings page toolbar ─────────────────────────── */
.listings-view-toggle .btn.active {
  background: var(--mci-color-primary-dark) !important;
  box-shadow: none !important;
}

.listings-view-toggle .btn:not(.active):hover {
  background: #f5f5f5 !important;
  color: var(--mci-text-primary) !important;
}