.boc-group-directory,
.boc-group-suggestion {
  --boc-blue: var(--wp--preset--color--uta-header-back, #005eb8);
  --boc-text: #20242a;
  --boc-muted: #5b6570;
  --boc-border: #d9dee5;
  --boc-soft: #f5f7f9;
  --boc-radius: 12px;
  color: var(--boc-text);
}

.boc-group-finder {
  background: var(--boc-soft);
  border-radius: var(--boc-radius);
  padding: clamp(16px, 2.4vw, 24px);
  margin: 0 0 20px;
}
.boc-group-finder__heading { margin: 0 0 14px; font-size: clamp(1.45rem,2vw,1.9rem); }
.boc-group-finder__top { display:flex; gap:12px; align-items:center; }
.boc-group-search { position:relative; flex:1; }
.boc-group-search__icon { position:absolute; left:14px; top:50%; transform:translateY(-50%); font-size:1.35rem; color:#66717c; pointer-events:none; }
.boc-group-search input[type="search"] { width:100%; min-height:48px; padding:10px 14px 10px 42px; border:1px solid #bfc7d0; border-radius:8px; background:#fff; font:inherit; }
.boc-group-search input[type="search"]:focus,
.boc-group-selects select:focus { outline:3px solid color-mix(in srgb, var(--boc-blue) 28%, transparent); outline-offset:1px; border-color:var(--boc-blue); }
.boc-group-clear { border:1px solid var(--boc-blue); background:#fff; color:var(--boc-blue); border-radius:999px; padding:9px 15px; font-weight:700; cursor:pointer; white-space:nowrap; }
.boc-group-clear:hover, .boc-group-clear:focus { background:var(--boc-blue); color:#fff; }
.boc-group-clear--primary { border-radius:8px; }

.boc-filter-section { margin-top:15px; }
.boc-filter-label { display:block; font-weight:700; margin-bottom:6px; }
.boc-category-chips, .boc-availability-chips { display:flex; flex-wrap:wrap; gap:7px; }
.boc-filter-chip { border:1px solid var(--boc-blue); background:#fff; color:var(--boc-blue); border-radius:999px; padding:6px 11px; font:inherit; font-size:.92rem; font-weight:650; cursor:pointer; }
.boc-filter-chip:hover, .boc-filter-chip:focus, .boc-filter-chip.is-active { background:var(--boc-blue); color:#fff; }

.boc-group-selects { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:15px; }
.boc-group-selects label { font-weight:700; font-size:.93rem; }
.boc-group-selects select { display:block; width:100%; margin-top:6px; min-height:43px; border:1px solid #bfc7d0; background:#fff; border-radius:7px; padding:7px 10px; font:inherit; }

.boc-group-results-bar { display:flex; gap:7px; align-items:baseline; margin:0 0 15px; color:var(--boc-muted); }
.boc-group-results-bar strong { color:var(--boc-text); }

.boc-group-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.boc-group-card { position:relative; border:1px solid var(--boc-border); border-radius:var(--boc-radius); background:#fff; padding:22px 20px 18px; min-height:235px; box-shadow:0 2px 9px rgba(0,0,0,.045); overflow:hidden; transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.boc-group-card[hidden] { display:none !important; }
.boc-group-card:hover, .boc-group-card:focus-within { transform:translateY(-2px); box-shadow:0 7px 20px rgba(0,0,0,.09); border-color:#bcc6d1; }
.boc-group-card__link { position:absolute; inset:0; z-index:1; }
.boc-group-card__link:focus { outline:3px solid var(--boc-blue); outline-offset:-4px; border-radius:var(--boc-radius); }
.boc-group-card__accent { position:absolute; top:0; left:0; right:0; height:5px; background:var(--boc-blue); }
.boc-group-card__title { margin:3px 0 11px; font-size:1.14rem; line-height:1.25; }
.boc-group-status { display:inline-flex; align-items:center; gap:7px; border-radius:999px; padding:5px 9px; margin-bottom:14px; background:#eef2f6; font-size:.82rem; font-weight:700; }
.boc-group-status__dot { width:8px; height:8px; border-radius:50%; background:#68727c; }
.boc-group-status--open { background:#edf7f0; color:#22663a; }
.boc-group-status--open .boc-group-status__dot { background:#2f8b4b; }
.boc-group-status--waiting { background:#fff6dd; color:#775800; }
.boc-group-status--waiting .boc-group-status__dot { background:#c69500; }
.boc-group-status--full { background:#f4f0fa; color:#5f3b80; }
.boc-group-status--full .boc-group-status__dot { background:#76509a; }
.boc-group-status--dormant { background:#f1f2f3; color:#565b60; }
.boc-group-card__categories { color:var(--boc-blue); font-weight:700; font-size:.88rem; margin-bottom:11px; }
.boc-group-card__meeting { color:var(--boc-muted); line-height:1.45; font-size:.94rem; }
.boc-group-card__cta { margin-top:15px; font-weight:800; color:var(--boc-blue); font-size:.93rem; }
.boc-group-card__title, .boc-group-card__categories, .boc-group-card__meeting, .boc-group-card__cta, .boc-group-status { position:relative; z-index:0; }
.boc-group-empty { text-align:center; border:1px dashed #c3cad2; border-radius:var(--boc-radius); padding:35px 20px; background:var(--boc-soft); }
.boc-group-empty h3 { margin-top:0; }
.boc-groups-notice { padding:16px; border-left:4px solid #b32d2e; background:#fff3f3; }

.boc-group-suggestion { margin:36px 0 0; background:var(--boc-soft); border-radius:var(--boc-radius); padding:clamp(22px,4vw,36px); }
.boc-group-suggestion h2 { margin-top:0; }
.boc-group-suggestion__intro { max-width:850px; }
.boc-suggestion-form { margin-top:22px; }
.boc-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.boc-form-field { display:block; font-weight:700; }
.boc-form-field--full { grid-column:1/-1; }
.boc-form-field > span, .boc-help-field legend { display:block; margin-bottom:7px; }
.boc-form-field input[type="text"], .boc-form-field input[type="email"], .boc-form-field input[type="tel"], .boc-form-field textarea, .boc-form-field select { box-sizing:border-box; width:100%; border:1px solid #bfc7d0; border-radius:7px; background:#fff; padding:10px 11px; font:inherit; font-weight:400; }
.boc-help-field { border:0; padding:0; margin:0; }
.boc-help-field label { display:block; font-weight:400; margin:7px 0; }
.boc-help-field input { margin-right:7px; }
.boc-consent { display:flex; align-items:flex-start; gap:9px; font-weight:400; }
.boc-consent input { margin-top:5px; }
.boc-form-field em, .boc-consent em, .boc-form-required em { color:#a32121; font-style:normal; }
.boc-suggestion-submit { margin-top:20px; border:0; border-radius:999px; background:var(--boc-blue); color:#fff; font:inherit; font-weight:800; padding:11px 20px; cursor:pointer; }
.boc-suggestion-submit:hover, .boc-suggestion-submit:focus { filter:brightness(.9); }
.boc-form-required { font-size:.85rem; color:var(--boc-muted); }
.boc-form-honeypot { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
.boc-form-message { padding:13px 15px; border-radius:7px; margin:15px 0; }
.boc-form-message--success { background:#eaf6ed; color:#205f36; }
.boc-form-message--error { background:#fff0f0; color:#8a2222; }

@media (max-width: 900px) {
  .boc-group-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 650px) {
  .boc-group-finder__top { display:block; }
  .boc-group-clear { margin-top:10px; }
  .boc-group-selects { grid-template-columns:1fr; }
  .boc-group-grid { grid-template-columns:1fr; }
  .boc-group-card { min-height:0; }
  .boc-form-grid { grid-template-columns:1fr; }
  .boc-form-field--full { grid-column:auto; }
}

.boc-group-selects--two { grid-template-columns:repeat(2,minmax(0,1fr)); }
.boc-filter-section--availability { margin-top:14px; }
.boc-status-chip[data-status-chip="open"].is-active { background:#2f8b4b; border-color:#2f8b4b; }
.boc-status-chip[data-status-chip="waiting"].is-active { background:#a87600; border-color:#a87600; }
.boc-status-chip[data-status-chip="full"].is-active { background:#76509a; border-color:#76509a; }
.boc-status-chip[data-status-chip="dormant"].is-active { background:#646a70; border-color:#646a70; }
.boc-group-card__meeting div:nth-child(n+3) {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

/* v1.2 refinements */
.boc-group-card { cursor:pointer; }
.boc-group-card__meeting div:nth-child(n+3) {
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.boc-group-suggest-cta {
  margin-top:34px;
  padding:24px 26px;
  border-radius:var(--boc-radius);
  background:#eef6fd;
  border:1px solid #cfe0f0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.boc-group-suggest-cta h2 { margin:0 0 6px; font-size:1.3rem; }
.boc-group-suggest-cta p { margin:0; max-width:760px; }
.boc-group-suggest-cta__button {
  flex:0 0 auto;
  display:inline-block;
  border-radius:999px;
  padding:10px 17px;
  background:var(--boc-blue);
  color:#fff !important;
  text-decoration:none !important;
  font-weight:800;
  white-space:nowrap;
}
.boc-group-suggest-cta__button:hover,
.boc-group-suggest-cta__button:focus { filter:brightness(.9); }
.boc-help-field__note { margin:0 0 6px; font-size:.9rem; color:var(--boc-muted); font-weight:400; }
@media (max-width:650px) {
  .boc-group-suggest-cta { display:block; }
  .boc-group-suggest-cta__button { margin-top:16px; }
}

/* v1.4.2 — SiteWorks integration
   Do not attempt to escape Gutenberg's constrained layout here.
   The shortcode fills the width supplied by its page/template block. */
.boc-group-directory {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  position: static;
  transform: none;
}

/* Make the finder feel like a page section rather than an embedded app. */
.boc-group-finder {
  width: 100%;
  box-sizing: border-box;
  background: #f1f6fb;
  border-radius: 10px;
  padding: clamp(18px, 2.2vw, 26px);
  margin-bottom: 22px;
}

.boc-group-results-bar,
.boc-group-grid,
.boc-group-empty,
.boc-group-suggest-cta {
  width: 100%;
  box-sizing: border-box;
}

/* Slightly calmer cards to match the broader page design. */
.boc-group-grid { gap: 20px; }
.boc-group-card {
  border-radius: 9px;
  box-shadow: 0 1px 5px rgba(0,0,0,.045);
  padding: 22px 22px 19px;
}
.boc-group-card:hover,
.boc-group-card:focus-within {
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0,0,0,.075);
}
.boc-group-card__accent { height: 4px; }

/* Keep controls generous but not oversized at the wider width. */
.boc-group-finder__heading { margin-bottom: 13px; }
.boc-filter-section { margin-top: 14px; }
.boc-group-selects--two { gap: 18px; }

@media (max-width: 650px) {
  .boc-group-directory {
    width: calc(100vw - 20px);
  }
  .boc-group-finder {
    padding: 16px;
    border-radius: 8px;
  }
  .boc-group-card {
    padding: 20px 18px 17px;
  }
}