/* ==========================================================================
   SECTION BLOCKS — acf/hbav-sb-*  (inc/section-blocks.php)
   Member-group pages (Membership > Multifamily) and the Membership page's "Who we represent".
   Same patterns as the rest of the site: .hbav-pts-label eyebrows, 46px Playfair headings, hairline rows,
   gray-50 alternate sections, 4px-radius uppercase buttons. Every colour and font is set on the element itself
   so Kadence's heading and paragraph rules don't win. Phones: one column throughout.
   Kelley + Co, Oct 28, 2026.
   ========================================================================== */

.hbav-sb { padding: 100px var(--content-gutter); background: var(--white); scroll-margin-top: 70px; }
.hbav-sb--gray { background: var(--gray-50); }
.hbav-sb__inner { max-width: var(--content-max); margin: 0 auto; }
.hbav-sb__split { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: start; }
.hbav-sb .hbav-sb__label { color: var(--hbav-blue); }
.hbav-sb .hbav-sb__h2 { font-family: var(--font-display) !important; font-size: 46px !important; font-weight: 700 !important; line-height: 1.1 !important; color: var(--hbav-blue) !important; margin: 0 0 24px !important; text-wrap: balance; }
.hbav-sb .hbav-sb__lede,
.hbav-sb .hbav-sb__text p { font-family: var(--font-body); font-size: 18px; line-height: 1.7; color: var(--gray-700); margin: 0 0 20px; max-width: 700px; }
.hbav-sb .hbav-sb__text p:last-child { margin-bottom: 0; }
.hbav-sb .hbav-sb__tag { display: block; font: 700 10px/1.4 var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--hbav-blue); }
.hbav-sb .hbav-sb__fine { margin: 18px 0 0; font: italic 400 14px/1.6 var(--font-body); color: var(--gray-700); }
/* Kadence pads content lists (.single-content ul/ol, 34px); these lists are laid out flush. */
.hbav-sb ul, .hbav-sb ol { margin: 0; padding: 0 !important; }
.hbav-sb h3 { font-family: var(--font-display) !important; font-weight: 700 !important; color: var(--hbav-blue) !important; margin: 0 !important; }

.hbav-sb .hbav-sb__btn { display: inline-block; padding: 14px 32px; border: 2px solid var(--hbav-green); border-radius: 4px; background: var(--hbav-green); color: var(--white) !important; font: 700 12px var(--font-body); letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none !important; white-space: nowrap; transition: background var(--ease), border-color var(--ease), color var(--ease); }
.hbav-sb .hbav-sb__btn:hover { background: #00a656; border-color: #00a656; }
.hbav-sb .hbav-sb__btn--outline { background: transparent; color: var(--hbav-blue) !important; }
.hbav-sb .hbav-sb__btn--outline:hover { background: var(--hbav-green); border-color: var(--hbav-green); color: var(--white) !important; }

/* Page hero, panel layout: the breadcrumb is a direct child of the two-column .ph-inner grid, so on its own it takes
   the first cell and pushes the headline into the right column. Give it the full first row. (Only pages that use
   these blocks load this file; centered and logo-split heroes are untouched.) */
.page-hero .ph-inner:not(.ph-centered):not(.ph-logo-split) { row-gap: 0; }
.page-hero .ph-inner:not(.ph-centered):not(.ph-logo-split) > .breadcrumb { grid-column: 1 / -1; }

/* ── Member types: photo tiles ─────────────────────────────────────────── */
.hbav-sb-types__head { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: end; margin-bottom: 48px; }
.hbav-sb-types__head .hbav-sb__lede { margin-bottom: 0; }
.hbav-sb-types__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.hbav-sb-type { position: relative; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden; border-radius: 8px; background: var(--hbav-blue) center / cover no-repeat; outline: none; }
.hbav-sb-type::before,
.hbav-sb-type::after { content: ""; position: absolute; inset: 0; transition: opacity var(--ease); }
.hbav-sb-type::before { background: linear-gradient(to top, rgba(0,37,64,.92) 0%, rgba(0,37,64,.45) 38%, rgba(0,37,64,0) 62%); }
.hbav-sb-type::after { background: linear-gradient(to top, rgba(0,37,64,.95) 0%, rgba(0,37,64,.8) 60%, rgba(0,37,64,.35) 100%); opacity: 0; }
.hbav-sb-type__body { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 24px 26px; display: grid; gap: 10px; }
.hbav-sb .hbav-sb-type__title { font-size: 26px !important; line-height: 1.15 !important; color: var(--white) !important; text-wrap: balance; }
.hbav-sb-type__more { display: grid; gap: 12px; max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--ease), opacity var(--ease); }
.hbav-sb .hbav-sb-type__more p { margin: 0; font: 400 15px/1.6 var(--font-body); color: rgba(255,255,255,.9); }
.hbav-sb-type__credit { font: 600 11px/1.5 var(--font-body); letter-spacing: .5px; color: rgba(255,255,255,.65); }
.hbav-sb .hbav-sb-type__link { font: 700 12px var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--yellow) !important; text-decoration: none; }
.hbav-sb .hbav-sb-type__link:hover { text-decoration: underline; }
.hbav-sb-type:hover::after, .hbav-sb-type:focus-within::after { opacity: 1; }
.hbav-sb-type:hover .hbav-sb-type__more, .hbav-sb-type:focus-within .hbav-sb-type__more { max-height: 260px; opacity: 1; }
.hbav-sb-type:focus-visible { box-shadow: 0 0 0 3px var(--yellow); }
@media (hover: none), (max-width: 760px) {
    .hbav-sb-type::after { opacity: 1; }
    .hbav-sb-type__more { max-height: none; opacity: 1; }
}

/* ── Intro split callout ───────────────────────────────────────────────── */
.hbav-sb-callout { margin-top: 36px; padding: 26px 30px; background: var(--gray-50); border-left: 3px solid var(--hbav-green); }
.hbav-sb--gray .hbav-sb-callout { background: var(--white); }
.hbav-sb-callout__title { display: block; margin-bottom: 10px; font: 700 11px var(--font-body); letter-spacing: 3px; text-transform: uppercase; color: var(--hbav-blue); }
.hbav-sb .hbav-sb-callout p { margin: 0; font-size: 16px; line-height: 1.65; }

/* ── Numbered rows ─────────────────────────────────────────────────────── */
.hbav-sb-rows__list { list-style: none !important; border-top: 1px solid var(--gray-200); }
.hbav-sb-rows__list li { display: grid; grid-template-columns: 72px 1fr; gap: 24px; margin: 0; padding: 28px 0; border-bottom: 1px solid var(--gray-200); }
.hbav-sb-rows__n { font: 800 34px/1 var(--font-display); color: var(--gray-300); }
.hbav-sb .hbav-sb-rows__title { font-size: 22px !important; line-height: 1.25 !important; margin-bottom: 8px !important; }
.hbav-sb .hbav-sb-rows__list p { margin: 0; font: 400 16px/1.65 var(--font-body); color: var(--gray-700); max-width: 640px; }

/* ── Track record ──────────────────────────────────────────────────────── */
.hbav-sb .hbav-sb-record__intro { margin-bottom: 40px; }
.hbav-sb-feature { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center; margin-bottom: 48px; padding: 40px; background: var(--white); border: 1px solid var(--gray-200); }
.hbav-sb .hbav-sb-feature__title { font-size: 30px !important; line-height: 1.2 !important; margin: 10px 0 14px !important; }
.hbav-sb .hbav-sb-feature p { margin: 0; font: 400 16px/1.65 var(--font-body); color: var(--gray-700); }
.hbav-sb-bars { display: grid; gap: 14px; }
.hbav-sb-bar { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; font: 600 13px var(--font-body); color: var(--gray-700); }
.hbav-sb-bar i { display: flex; align-items: center; justify-content: flex-end; min-width: 64px; height: 40px; padding-right: 12px; background: var(--hbav-blue); color: var(--white); font: normal 800 18px var(--font-display); white-space: nowrap; }
.hbav-sb-bar--muted i { background: #9db3c6; color: var(--hbav-blue); }
.hbav-sb-wins { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--gray-200); }
.hbav-sb-win { padding: 28px 28px 30px; border-bottom: 1px solid var(--gray-200); }
.hbav-sb-win:nth-child(3n+1) { padding-left: 0; }
.hbav-sb-win:not(:nth-child(3n+1)) { border-left: 1px solid var(--gray-200); }
.hbav-sb .hbav-sb-win__title { font-size: 20px !important; line-height: 1.25 !important; margin: 10px 0 !important; }
.hbav-sb .hbav-sb-win p { margin: 0; font: 400 15px/1.6 var(--font-body); color: var(--gray-700); }
/* Win status, from the tag's first word: passed bills green, defeated bills red, anything else a neutral navy chip. */
.hbav-sb .hbav-sb-win .hbav-sb__tag { display: inline-block; padding: 5px 10px; border-radius: 3px; background: rgba(0, 55, 100, .08); }
.hbav-sb .hbav-sb__tag--passed { background: rgba(0, 191, 99, .12); color: #00703a; }
.hbav-sb .hbav-sb__tag--defeated { background: rgba(211, 43, 41, .1); color: #a3201e; }

/* ── Join and pricing ──────────────────────────────────────────────────── */
.hbav-sb-join__top { margin-bottom: 48px; }
.hbav-sb-benefits { list-style: none !important; display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; border-top: 1px solid var(--gray-200); }
.hbav-sb-benefits li { margin: 0; padding: 20px 0; border-bottom: 1px solid var(--gray-200); }
.hbav-sb-benefits b { display: block; margin-bottom: 6px; font: 700 18px/1.3 var(--font-display); color: var(--hbav-blue); }
.hbav-sb-benefits span { font: 400 15px/1.6 var(--font-body); color: var(--gray-700); }
.hbav-sb-dues { display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: start; margin-top: 56px; }
.hbav-sb .hbav-sb-dues__title { font-size: 24px !important; margin-bottom: 6px !important; }
.hbav-sb .hbav-sb-dues__sub { margin: 0 0 18px; font: 400 15px/1.6 var(--font-body); color: var(--gray-700); }
.hbav-sb-side { padding: 28px 30px; background: var(--gray-50); }
.hbav-sb--gray .hbav-sb-side { background: var(--white); }
.hbav-sb-side .hbav-sb__label { margin: 0; }
.hbav-sb-side__figure { display: block; margin: 10px 0 12px; font: 800 40px/1 var(--font-display); color: var(--hbav-blue); }
.hbav-sb .hbav-sb-side p { margin: 0 0 16px; font: 400 15px/1.6 var(--font-body); color: var(--gray-700); }
.hbav-sb .hbav-sb-side p:last-child { margin-bottom: 0; }
/* Closing call to action: navy band, text left, buttons right. */
.hbav-sb-join__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; margin-top: 56px; padding: 36px 40px; background: var(--hbav-blue); border-radius: 4px; }
.hbav-sb .hbav-sb-join__cta p { flex: 1 1 340px; margin: 0; font: 700 24px/1.3 var(--font-display); color: var(--white); text-wrap: balance; }
.hbav-sb-join__btns { display: flex; flex-wrap: wrap; gap: 12px; }
.hbav-sb .hbav-sb__btn--ghost { background: transparent; border-color: rgba(255,255,255,.55); color: var(--white) !important; }
.hbav-sb .hbav-sb__btn--ghost:hover { background: var(--white); border-color: var(--white); color: var(--hbav-blue) !important; }

/* tables (dues, past winners) */
.hbav-sb .hbav-sb-table { width: 100%; margin: 0; border: 0; border-collapse: collapse; font-family: var(--font-body); }
.hbav-sb .hbav-sb-table th { padding: 0 0 12px; border: 0; border-bottom: 2px solid var(--hbav-blue); background: none; text-align: left; font: 700 11px var(--font-body); letter-spacing: 2px; text-transform: uppercase; color: var(--gray-700); }
.hbav-sb .hbav-sb-table td { padding: 16px 0; border: 0; border-bottom: 1px solid var(--gray-200); background: none; font-size: 16px; color: var(--gray-900); }
.hbav-sb .hbav-sb-table td:last-child, .hbav-sb .hbav-sb-table th:last-child { text-align: right; }
.hbav-sb-dues .hbav-sb-table td:last-child { font-weight: 700; color: var(--hbav-blue); font-variant-numeric: tabular-nums; }

/* ── Name list ─────────────────────────────────────────────────────────── */
.hbav-sb-names__list { list-style: none !important; columns: 4 200px; column-gap: 40px; margin-top: 8px !important; }
.hbav-sb-names__list li { break-inside: avoid; margin: 0; padding: 14px 0; border-top: 1px solid var(--gray-200); font: 700 17px/1.3 var(--font-display); color: var(--hbav-blue); }
.hbav-sb-names__list a { color: inherit; text-decoration: none; }
.hbav-sb-names__list a:hover { text-decoration: underline; }

/* ── Resources ─────────────────────────────────────────────────────────── */
.hbav-sb-res__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: start; }
.hbav-sb-res__grid--one { grid-template-columns: 1fr; }
.hbav-sb-card { background: var(--white); border: 1px solid var(--gray-200); }
.hbav-sb-card__head { padding: 28px 32px; background: var(--hbav-blue); }
.hbav-sb-card__banner { background: var(--hbav-blue); }
.hbav-sb-card__banner img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; object-fit: cover; }
.hbav-sb-card__banner + .hbav-sb-card__foot { border-top: 0; }
.hbav-sb-card__head small { display: block; font: 700 11px var(--font-body); letter-spacing: 3px; text-transform: uppercase; color: var(--yellow); }
.hbav-sb .hbav-sb-card__title { margin-top: 8px !important; font-size: 28px !important; line-height: 1.2 !important; color: var(--white) !important; }
.hbav-sb .hbav-sb-card__list { padding: 12px 32px 8px 52px !important; }
.hbav-sb-card__list li { margin: 0; padding: 10px 0; border-bottom: 1px solid var(--gray-100); font: 400 16px/1.5 var(--font-body); color: var(--gray-900); }
.hbav-sb-card__list li:last-child { border-bottom: 0; }
.hbav-sb-card__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; padding: 20px 32px 28px; border-top: 1px solid var(--gray-200); }
.hbav-sb .hbav-sb-card__foot p { flex: 1 1 260px; margin: 0; font: 400 14px/1.6 var(--font-body); color: var(--gray-700); }
.hbav-sb .hbav-sb-links__title { font-size: 22px !important; margin-bottom: 8px !important; }
.hbav-sb .hbav-sb-links__note { margin: 0 0 14px; font: 400 15px/1.6 var(--font-body); color: var(--gray-700); }
.hbav-sb-links__group ul { list-style: none !important; margin: 0 0 36px !important; border-top: 1px solid var(--gray-200); }
.hbav-sb-links__group:last-child ul { margin-bottom: 0 !important; }
.hbav-sb-links__group li { margin: 0; border-bottom: 1px solid var(--gray-200); }
.hbav-sb-links__group a { display: flex; justify-content: space-between; gap: 16px; padding: 16px 0; font: 600 16px/1.4 var(--font-body); color: var(--hbav-blue) !important; text-decoration: none; }
.hbav-sb-links__group a:hover { color: #004f82 !important; text-decoration: underline; }
.hbav-sb-links__group a span { font: 500 13px var(--font-body); color: var(--gray-700); opacity: .7; white-space: nowrap; }

/* ── Featured project ──────────────────────────────────────────────────── */
.hbav-sb-poty { display: grid; grid-template-columns: 1.15fr 1fr; background: var(--white); border: 1px solid var(--gray-200); }
.hbav-sb-poty--text { grid-template-columns: 1fr; }
.hbav-sb-poty__photos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 4px; min-height: 420px; }
.hbav-sb-poty__photos div { background: var(--gray-200) center / cover no-repeat; }
.hbav-sb-poty__photos div:first-child { grid-row: 1 / 3; }
.hbav-sb-poty__photos--1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.hbav-sb-poty__photos--1 div:first-child, .hbav-sb-poty__photos--2 div:first-child { grid-row: auto; }
.hbav-sb-poty__photos--2 { grid-template-rows: 1fr; }
.hbav-sb-poty__body { padding: 44px 44px 40px; }
.hbav-sb .hbav-sb-poty__name { margin: 12px 0 6px !important; font-size: 34px !important; line-height: 1.15 !important; }
.hbav-sb-poty__by { margin-bottom: 20px; font: 600 15px var(--font-body); color: var(--gray-700); }
.hbav-sb .hbav-sb-poty__body p { margin: 0 0 22px; font: 400 16px/1.65 var(--font-body); color: var(--gray-700); }
.hbav-sb-facts { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--gray-200); }
.hbav-sb-facts div { padding: 16px 0 0; }
.hbav-sb-facts b { display: block; font: 800 28px/1 var(--font-display); color: var(--hbav-blue); }
.hbav-sb-facts span { display: block; margin-top: 6px; font: 600 11px/1.4 var(--font-body); letter-spacing: 1.5px; text-transform: uppercase; color: var(--gray-700); }
.hbav-sb .hbav-sb-past { margin-top: 32px; }
.hbav-sb-past td:first-child { width: 90px; font-weight: 700; color: var(--hbav-blue); }
.hbav-sb-past td:last-child { font-weight: 500; color: var(--gray-700); }
.hbav-sb-project__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--gray-200); }
.hbav-sb .hbav-sb-project__foot p { flex: 1 1 420px; margin: 0; font: 400 17px/1.6 var(--font-body); color: var(--gray-700); }

/* ── Contact CTA ───────────────────────────────────────────────────────── */
.hbav-sb-cta { background: linear-gradient(135deg, var(--hbav-blue) 0%, #004f82 100%); }
.hbav-sb-cta__grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 64px; align-items: center; }
.hbav-sb-cta .hbav-sb__label { color: var(--yellow); }
.hbav-sb-cta .hbav-sb__h2 { font-size: 48px !important; font-weight: 800 !important; color: var(--white) !important; }
.hbav-sb .hbav-sb-cta__text { max-width: 600px; margin: 0; font: 400 18px/1.7 var(--font-body); color: rgba(255,255,255,.82); }
.hbav-sb-cta__people { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 24px; }
.hbav-sb-cta--many .hbav-sb-cta__grid { grid-template-columns: 1fr; gap: 40px; }
.hbav-sb-cta--many .hbav-sb-cta__people { justify-content: flex-start; }

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
    .hbav-sb-types__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
    .hbav-sb { padding-block: 72px; }
    .hbav-sb__split { grid-template-columns: 1fr; gap: 24px; }
    .hbav-sb .hbav-sb__h2 { font-size: 34px !important; }
    .hbav-sb-feature { grid-template-columns: 1fr; gap: 28px; padding: 28px 20px; }
    .hbav-sb-wins { grid-template-columns: 1fr; }
    .hbav-sb-win, .hbav-sb-win:nth-child(3n+1) { padding: 24px 0; border-left: 0 !important; }
    .hbav-sb-dues { grid-template-columns: 1fr; }
    .hbav-sb-res__grid { grid-template-columns: 1fr; }
    .hbav-sb-poty { grid-template-columns: 1fr; }
    .hbav-sb-poty__photos { min-height: 300px; }
    .hbav-sb-poty__body { padding: 28px 20px; }
    .hbav-sb-cta__grid { grid-template-columns: 1fr; gap: 32px; }
    .hbav-sb-cta .hbav-sb__h2 { font-size: 36px !important; }
    .hbav-sb-cta__people { justify-content: flex-start; }
}

/* ── Phones: one column throughout ─────────────────────────────────────── */
@media (max-width: 760px) {
    .hbav-sb-types__head { grid-template-columns: 1fr; gap: 24px; }
    .hbav-sb-types__grid { grid-template-columns: 1fr; }
    .hbav-sb-type { aspect-ratio: auto; min-height: 340px; }
    .hbav-sb-benefits { grid-template-columns: 1fr; }
    .hbav-sb-cta__people { flex-direction: column; }
    .hbav-sb-cta__people .byline-card { width: 180px; }
    .hbav-sb-join__cta { padding: 28px 24px; }
    .hbav-sb .hbav-sb-join__cta p { flex-basis: 100%; font-size: 21px; }
    .hbav-sb-join__btns { flex-direction: column; width: 100%; }
    .hbav-sb-join__btns .hbav-sb__btn { text-align: center; white-space: normal; }
}
@media (max-width: 600px) {
    .hbav-sb-poty__photos { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-rows: 220px; min-height: 0; }
    .hbav-sb-poty__photos div:first-child { grid-row: auto; }
    .hbav-sb-facts { grid-template-columns: 1fr; }
    .hbav-sb-facts div { display: flex; align-items: baseline; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--gray-200); }
    .hbav-sb-facts span { margin-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .hbav-sb-type::before, .hbav-sb-type::after, .hbav-sb-type__more { transition: none; }
}