/* ===== Directory container states ===== */
.business-directory { }

/* ----- CARD VIEW: 3-column responsive grid ----- */
.business-directory.view-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17px;
}

@media (max-width: 1100px) {
  .business-directory.view-card {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 640px) {
  .business-directory.view-card {
    grid-template-columns: 1fr;
  }
}

/* Each card (matches your markup: .bd-item.bd-item-card) */
.business-directory.view-card .bd-item-card {
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  background: #f8f8f8;
  padding: 13px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

/* Optional logo (100x100) on card/list left */
.bd-item .bd-logo-left img.bd-logo-thumb {
  width: 100px;
  height: 100px;
  object-fit: contain;
  display: block;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 3px;
  padding: 4px;
}

/* Card body */
.business-directory.view-card .bd-item-card .bd-item-body {
  flex: 1;
  min-width: 0;
}

/* Title + subtle summary/meta spacing */
.bd-title { margin: 0 0 6px; vertical-align: middle;}
.bd-summary { margin: 0 0 8px; }
.bd-meta { margin: 0; padding: 0; list-style: none; }
.bd-meta li { margin: 4px 0; }

/* ----- LIST VIEW (one per row with separator) ----- */
.business-directory.view-list .bd-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 0;
  border-bottom: 1px solid #e5e5e5;
  background: transparent; /* list stays simple */
  Vertical-align: middle;
}
.bd-item-body { 
    vertical-align:middle; 
    padding-top: 33px; 
}
/* ----- FULL VIEW (wide block with light separator) ----- */
.business-directory.view-full .bd-full {
  margin-bottom: 24px;
  border-bottom: 1px solid #eee;
  padding-bottom: 16px;
}

/* ----- View switcher + pagination styling (ensure visible) ----- */
.bd-view-switcher { display: flex; gap: .5rem; margin: .75rem 0 1rem; }
.bd-view-switcher a,
.bd-switcher-btn {
  display: inline-block;
  padding: .4rem .65rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  text-decoration: none;
  background: #fff;
  line-height: 1;
}
.bd-view-switcher a.is-active,
.bd-switcher-btn.is-active {
  background: #f5f5f5;
  border-color: #bbb;
  font-weight: 600;
}

.bd-pagination { margin-top: 16px; }
.bd-pagination .page-numbers {
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid #ddd;
  margin-right: 6px;
  text-decoration: none;
  border-radius: 4px;
  background: #fff;
}
.bd-pagination .page-numbers.current {
  background: #f5f5f5;
  font-weight: 600;
}

/* ----- Maps (directory header + single) ----- */
.bd-header-map { height: 380px; margin-bottom: 16px; border-radius: 6px; overflow: hidden; background: #f5f5f5; }
#bd-single-map { height: 360px; margin: 8px 0; }
.leaflet-container img { max-width: none !important; } /* keep tiles crisp */

/* ----- Single logo (300x300 top-right) ----- */
.bd-logo-single { float: right; margin: 0 0 7px 13px; max-width: 300px; }
.bd-logo-single img.bd-logo-img {
  width: 300px; height: 300px; object-fit: contain; display: block;
  background: #fff; border: 1px solid #eee; border-radius: 4px; padding: 4px;
}
@media (max-width: 640px) {
  .bd-logo-single { float: none; margin: 0 0 12px 0; max-width: 100%; }
  .bd-logo-single img.bd-logo-img { width: 100%; height: auto; }
}
/* Constrain content above the map */
.business-single {
  max-width: 100%;
}

/* Apply 200px gutters (side margins) on desktop */
.business-single > *:not(#bd-single-map) {
  margin-left: 200px;
  margin-right: 200px;
}

.bd-logo-single img.bd-logo-img {
  max-width: 300px;
  height: auto;
  display: inline-block;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
  padding: 4px;
}

/* Map stays full width */
#bd-single-map {
  height: 360px;
  margin-top: 20px;
}

/* Responsive: drop gutters on small screens */
@media (max-width: 1024px) {
  .business-single > *:not(#bd-single-map) {
    margin-left: 40px;
    margin-right: 40px;
  }
}
@media (max-width: 640px) {
  .business-single > *:not(#bd-single-map) {
    margin-left: 16px;
    margin-right: 16px;
  }
}