/* WBPA Businesses directory — page-specific styles only.

   Ported from the original live-site design (businessapi/css/styles.css
   + businessapi/js/bizlistings.js, still on disk under the divi-child
   theme — that JS built this same markup/classes client-side from the
   Google Sheet feed; we now render it server-side in PHP instead, but
   kept the classes and colors identical). The hover tooltips on the
   icon buttons were originally plain CSS (:hover + content: attr()),
   so they still work here with zero JS. */

.dotgrid-section { background-repeat: repeat; background-size: 220px; }
.dotgrid-section h2 { color: var(--accent); font-size: 26px; }

.biz-intro { color: var(--ink); font-size: 0.9rem; margin-bottom: 0.5rem; }
.biz-key { font-weight: 700; }
.biz-key--exe { color: var(--accent); }
.biz-key--ass { color: #494949; }
.biz-key--no { color: #868686; }

.biz-grid {
  display: flex;
  flex-wrap: wrap;
  /* Bleeds the card grid itself past the shared .wrap side gutters (so
     the cards still get the full container width to work with), without
     stripping that padding from the rest of the section's content (the
     intro text and tier-color legend above it, which should stay
     indented like everywhere else, especially on mobile). */
  margin: 2rem calc(-0.5% - 1.5rem) 0;
}

.biz-module {
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  border-radius: 10px;
  margin: 10px 0.5%;
  /* Extra bottom padding reserves room for the button row, which is
     docked to the bottom of the card (absolutely positioned) instead
     of just following the text — so it lines up across every card in
     a row even when one has more lines of text than its neighbors. */
  padding: 10px 20px 62px 30px;
  /* width (not just max-width): a shorter business name/address would
     otherwise shrink-to-fit narrower than its neighbors, since
     display:inline-block sizes to content unless a hard width is set —
     this is what was causing mismatched card widths on mobile. */
  width: 23.5%;
  max-width: 23.5%;
  text-align: left;
  vertical-align: top;
  font-family: 'Nunito', Helvetica, Arial, Lucida, sans-serif;
  border-left: 25px solid #fff;
}

/* Executive member — blue */
.biz-module--exe {
  color: #fff;
  background-color: var(--accent);
  border-left-color: #fff;
  outline: 2px solid #66a5c4;
}
.biz-module--exe .biz-side-tag-inner { color: var(--accent); }
.biz-module--exe .module-button { background-color: #306187; }
.biz-module--exe .tooltip:before { background-color: #306187; }
.biz-module--exe .tooltip:after { border-top-color: #306187; }

/* Associate member — dark gray */
.biz-module--ass {
  color: #fff;
  background-color: #494949;
  border-left-color: #fff;
  outline: 2px solid #7f8081;
}
.biz-module--ass .biz-side-tag-inner { color: #494949; }
.biz-module--ass .module-button { background-color: #2e2e2e; }
.biz-module--ass .tooltip:before { background-color: #2e2e2e; }
.biz-module--ass .tooltip:after { border-top-color: #2e2e2e; }

/* Not verified — light gray */
.biz-module--no {
  color: #fff;
  background-color: #868686;
  border-left-color: #fff;
  outline: 2px solid #7f8081;
}
.biz-module--no .biz-side-tag-inner { color: #868686; }
.biz-module--no .module-button { background-color: #5e5d5d; }
.biz-module--no .tooltip:before { background-color: #5e5d5d; }
.biz-module--no .tooltip:after { border-top-color: #5e5d5d; }

.biz-side-tag {
  position: absolute;
  top: 0;
  left: -25px;
  height: 100%;
  width: 25px;
  overflow: hidden;
}
.biz-side-tag-inner {
  position: absolute;
  top: 50%;
  left: 50%;
  white-space: nowrap;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.03em;
  transform: translate(-50%, -50%) rotate(-90deg);
}

.biz-verified {
  margin-right: 4px;
  font-size: 14px;
  color: #fff;
}

.biz-name {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  margin-bottom: 4px;
}
.biz-name a { color: #fff; text-decoration: underline; }

.biz-subname { font-weight: 600; font-size: 14px; line-height: 1.2; font-style: italic; margin-bottom: 3px; }
.biz-addy { font-weight: 400; font-size: 14px; line-height: 1.2; margin-bottom: 3px; }
.biz-phone { font-size: 14px; line-height: 1.3; margin-bottom: 2px; }
.biz-phone a { color: #fff; }
.biz-phone i { font-size: 11px; margin-right: 3px; }

.module-button-container {
  position: absolute;
  left: 30px;
  right: 20px;
  bottom: 0;
  display: flex;
  gap: 4px;
}

.module-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  color: #fff;
  font-size: 19px;
}
.module-button:hover { filter: brightness(120%); }

/* CSS-only tooltip (no JS needed): content comes from data-title. */
.tooltip { position: relative; }
.tooltip:before,
.tooltip:after {
  display: block;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transition: all 0.15s ease-in-out;
}
.tooltip:before {
  content: attr(data-title);
  border-radius: 2px;
  color: #fff;
  font-size: 14px;
  font-family: var(--font-heading);
  white-space: nowrap;
  padding: 5px 8px;
  top: -40px;
  left: 0;
  transform: translate3d(0, 6px, 0);
}
.tooltip:after {
  content: '';
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  border-top: 6px solid currentColor;
  height: 0;
  width: 0;
  top: -8px;
  left: 14px;
}
.tooltip:hover:before,
.tooltip:hover:after {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 1100px) { .biz-module { width: 31%; max-width: 31%; } }
@media (max-width: 760px) {
  .biz-module { width: 48%; max-width: 48%; }
  /* On mobile, don't bleed the grid out past the section's own gutter
     (that's a desktop-only trick to use the full 1200px container) —
     instead give it a comfortable, fixed inset of its own so the cards
     don't bump the screen edges, and center the row/cards within it. */
  .dotgrid-section .wrap { padding-left: 12px; padding-right: 12px; }
  .biz-grid { margin: 2rem -0.5% 0; justify-content: center; }
}
@media (max-width: 520px)  { .biz-module { width: 98%; max-width: 98%; } }