/* ==========================================================================
   BLOCK STYLES (PASS "theme.json + reusable block styles so client-built
   patterns match the site")

   The canonical, reusable version of every repeated component the
   component inventory found hand-written many times over. Each one below
   is DERIVED FROM the best existing variant — see this pass's own report
   for which variant, and why — never invented fresh, and never copying a
   pre-accessibility-pass value (every size/colour here already reflects
   the fixed values: 18px body text, 48px tap targets, --color-muted
   borders, corrected contrast).

   Loaded on the front end AND inside the block-editor iframe (inc/block-
   styles.php) — the SAME rules in both places, so what the client sees
   while building already looks like the published result.

   These are NEW classes (Gutenberg's own `is-style-*` convention) on
   CORE blocks. Nothing here is scoped under .entry-content or any
   existing component class — none of it touches, overrides, or is
   overridden by a single existing template's CSS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   HERO — core/cover
   -------------------------------------------------------------------------- */

/* Shared shape for all three hero styles. */
.wp-block-cover.is-style-osta-hero-photo,
.wp-block-cover.is-style-osta-hero-flat,
.wp-block-cover.is-style-osta-hero-framed {
  min-height: 420px;
}

@media (max-width: 767px) {
  .wp-block-cover.is-style-osta-hero-photo,
  .wp-block-cover.is-style-osta-hero-flat,
  .wp-block-cover.is-style-osta-hero-framed {
    min-height: 320px;
  }
}

/* Text is white on all three — every one of them is meant to sit over a
   photo or a dark fill. Explicit rather than relying on Cover's own
   default-white-unless-a-text-colour-is-set behaviour, so this is correct
   regardless of core version. */
.wp-block-cover.is-style-osta-hero-photo :where(h1, h2, h3, h4, h5, h6, p),
.wp-block-cover.is-style-osta-hero-flat :where(h1, h2, h3, h4, h5, h6, p),
.wp-block-cover.is-style-osta-hero-framed :where(h1, h2, h3, h4, h5, h6, p) {
  color: var(--color-surface);
}

.wp-block-cover.is-style-osta-hero-photo .wp-block-cover__inner-container,
.wp-block-cover.is-style-osta-hero-flat .wp-block-cover__inner-container,
.wp-block-cover.is-style-osta-hero-framed .wp-block-cover__inner-container {
  max-width: var(--measure-max);
  padding: var(--space-6) var(--space-4);
}

/* PHOTO — the pixel-anchored scrim from .about-hero__overlay /
   .resources-hero__overlay (inner-pages.css), the corrected version the
   previous accessibility pass ported onto the homepage hero too. Cover's
   own "dim" control paints a single flat tint via an inline style on
   .wp-block-cover__background — !important is the only way a stylesheet
   can put a different background on top of that, which is why it's used
   here and nowhere else in this file. Re-measured after porting: the
   same 5.98–6.53:1 range the source rule documents, since the formula
   and the tokens are identical. */
.wp-block-cover.is-style-osta-hero-photo .wp-block-cover__background {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.6) 0,
    rgba(0, 0, 0, 0.6) calc(var(--space-3) + var(--measure-max)),
    rgba(0, 0, 0, 0.15) var(--container-max)
  ) !important;
  opacity: 1 !important;
}

/* FLAT — the .contact-hero / .answers-hero pattern: no image, a solid
   fill (client picks Navy from the restricted palette), centred content
   by default via Cover's own position control default. */
.wp-block-cover.is-style-osta-hero-flat {
  background-color: var(--color-surface-dark);
}

/* FRAMED — an inset, contained hero rather than a full-bleed band: a
   photo (or fill) inside a rounded, bordered frame, the way a client
   embedding a hero-shaped photo lower on a page (not at the very top)
   would actually want it to sit, matching --radius-lg elsewhere in the
   theme. */
.wp-block-cover.is-style-osta-hero-framed {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--color-border-soft);
}

.wp-block-cover.is-style-osta-hero-framed .wp-block-cover__background {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.55) 0,
    rgba(0, 0, 0, 0.55) calc(var(--space-3) + var(--measure-max)),
    rgba(0, 0, 0, 0.15) var(--container-max)
  ) !important;
  opacity: 1 !important;
}

/* --------------------------------------------------------------------------
   CARD — core/group
   Derived from .card / .card--primary (global.css) — the base and the
   ONE hierarchy step a client can meaningfully choose (Primary vs. plain).
   .card--tertiary is deliberately not offered: it exists to make an empty
   state or a deferred feature visually recede, never something a client
   authoring real content would want to reach for.
   -------------------------------------------------------------------------- */

.wp-block-group.is-style-osta-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-4);
}

.wp-block-group.is-style-osta-card-primary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-brand);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-primary);
  padding: var(--space-4);
}

.wp-block-group.is-style-osta-card > :first-child,
.wp-block-group.is-style-osta-card-primary > :first-child {
  margin-top: 0;
}

.wp-block-group.is-style-osta-card :where(h1, h2, h3, h4, h5, h6),
.wp-block-group.is-style-osta-card-primary :where(h1, h2, h3, h4, h5, h6) {
  margin-top: 0;
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   CTA BAND — core/group
   Derived from .disability-rights-cta (Light) and .park-maint-cta /
   .membership-levels-cta (Navy) — the inset-panel shape (radius-lg,
   contained padding), since a Group block a client places is always
   inside the page's own content column, never a full-bleed section the
   way D/E in the inventory render. Two backgrounds, matching the two
   that actually recur in the inventory (solid navy used by 5 of 8
   existing CTA bands; the light wash used by the one "quiet page"
   variant) — not four ad-hoc ones.
   -------------------------------------------------------------------------- */

.wp-block-group.is-style-osta-cta-navy,
.wp-block-group.is-style-osta-cta-light {
  text-align: center;
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-4);
}

.wp-block-group.is-style-osta-cta-navy > *,
.wp-block-group.is-style-osta-cta-light > * {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

.wp-block-group.is-style-osta-cta-navy {
  background: var(--color-brand);
}

.wp-block-group.is-style-osta-cta-navy :where(h1, h2, h3, h4, h5, h6, p, li, ul, ol) {
  color: var(--color-surface);
}

.wp-block-group.is-style-osta-cta-navy .resident-assoc-actions,
.wp-block-group.is-style-osta-cta-navy .resident-assoc-actions.is-layout-flex,
.wp-block-group.is-style-osta-cta-navy .wp-block-buttons {
  justify-content: center;
  justify-items: center;
  text-align: center;
}

.wp-block-group.is-style-osta-cta-navy .wp-block-button:not(.is-style-outline) .wp-block-button__link {
  background: var(--color-surface);
  color: var(--color-brand);
}

.wp-block-group.is-style-osta-cta-navy .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.wp-block-group.is-style-osta-cta-navy .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus-visible {
  background: var(--color-surface-soft);
}

.wp-block-group.is-style-osta-cta-light {
  background: var(--color-surface-alt);
}

.wp-block-group.is-style-osta-cta-light :where(h1, h2, h3, h4, h5, h6) {
  color: var(--color-brand);
}

.wp-block-group.is-style-osta-cta-light p {
  color: var(--color-body);
}

/* --------------------------------------------------------------------------
   NOTICE / CALLOUT — core/group
   Folded onto .alert's own four variants and colour tokens (global.css,
   section 11) — same border-left + tinted background convention, same
   colours, no new palette invented.
   -------------------------------------------------------------------------- */

.wp-block-group[class*="is-style-osta-notice-"] {
  border-left: 4px solid;
  border-radius: var(--radius-sm);
  padding: var(--space-3);
}

.wp-block-group[class*="is-style-osta-notice-"] > :first-child {
  margin-top: 0;
}

.wp-block-group[class*="is-style-osta-notice-"] :where(h1, h2, h3, h4, h5, h6) {
  font-weight: var(--weight-bold);
  margin: 0 0 var(--space-1);
}

.wp-block-group[class*="is-style-osta-notice-"] p {
  color: var(--color-body);
  margin: 0;
}

.wp-block-group.is-style-osta-notice-info {
  border-left-color: var(--color-brand);
  background: var(--color-brand-wash);
}
.wp-block-group.is-style-osta-notice-info :where(h1, h2, h3, h4, h5, h6) {
  color: var(--color-brand);
}

.wp-block-group.is-style-osta-notice-success {
  border-left-color: var(--color-accent-ink);
  background: var(--color-success-wash);
}
.wp-block-group.is-style-osta-notice-success :where(h1, h2, h3, h4, h5, h6) {
  color: var(--color-accent-ink);
}

.wp-block-group.is-style-osta-notice-warning {
  border-left-color: var(--color-warning);
  background: var(--color-warning-wash);
}
.wp-block-group.is-style-osta-notice-warning :where(h1, h2, h3, h4, h5, h6) {
  color: var(--color-warning);
}

.wp-block-group.is-style-osta-notice-alert {
  border-left-color: var(--color-alert);
  background: var(--color-alert-wash);
}
.wp-block-group.is-style-osta-notice-alert :where(h1, h2, h3, h4, h5, h6) {
  color: var(--color-alert);
}

/* --------------------------------------------------------------------------
   ACCORDION — core/details (native <details>/<summary>, same as every
   hand-built accordion in the theme — works with JavaScript disabled by
   construction, nothing to test for that case). Derived from the SVG-
   chevron boxed pattern (.tenant-rights-accordion / .park-maint-agency —
   the 2-of-6 byte-identical majority shape) and the flush pattern
   (.about-timeline__disclosure). Toggle text/chevron colour standardised
   on --color-brand (the majority convention); min-height standardised on
   var(--tap-min) rather than the hardcoded 64px some hand-built versions
   use — same visual size, token-based instead of a magic number.
   -------------------------------------------------------------------------- */

.wp-block-details.is-style-osta-accordion-boxed,
.wp-block-details.is-style-osta-accordion-flush {
  margin-top: var(--space-3);
  margin-bottom: var(--space-3);
}

.wp-block-details.is-style-osta-accordion-boxed {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.wp-block-details.is-style-osta-accordion-boxed > summary,
.wp-block-details.is-style-osta-accordion-flush > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--tap-min);
  cursor: pointer;
  list-style: none;
  color: var(--color-brand);
  font-weight: var(--weight-bold);
  font-size: var(--text-body);
}

.wp-block-details.is-style-osta-accordion-boxed > summary {
  padding: var(--space-3) var(--space-4);
}

.wp-block-details.is-style-osta-accordion-boxed > summary::-webkit-details-marker,
.wp-block-details.is-style-osta-accordion-flush > summary::-webkit-details-marker {
  display: none;
}

.wp-block-details.is-style-osta-accordion-boxed > summary:focus-visible,
.wp-block-details.is-style-osta-accordion-flush > summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* Chevron: an inline SVG isn't something a plain <summary> text node can
   carry, so both variants draw one the same hand-built way .about-
   timeline__disclosure-toggle already does — a rotated ::after
   border-corner, no image asset needed. */
.wp-block-details.is-style-osta-accordion-boxed > summary::after,
.wp-block-details.is-style-osta-accordion-flush > summary::after {
  content: '';
  flex-shrink: 0;
  width: 10px;
  height: 10px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 150ms;
}

@media (prefers-reduced-motion: reduce) {
  .wp-block-details.is-style-osta-accordion-boxed > summary::after,
  .wp-block-details.is-style-osta-accordion-flush > summary::after {
    transition: none;
  }
}

.wp-block-details.is-style-osta-accordion-boxed[open] > summary::after,
.wp-block-details.is-style-osta-accordion-flush[open] > summary::after {
  transform: rotate(135deg);
}

.wp-block-details.is-style-osta-accordion-boxed > summary:hover,
.wp-block-details.is-style-osta-accordion-flush > summary:hover {
  color: var(--color-brand-hover);
}

.wp-block-details.is-style-osta-accordion-boxed > :not(summary) {
  padding: 0 var(--space-4) var(--space-4);
  border-top: 1px solid var(--color-border-soft);
  padding-top: var(--space-3);
}

.wp-block-details.is-style-osta-accordion-flush > summary {
  padding-block: var(--space-1);
  display: inline-flex;
  width: auto;
}

/* --------------------------------------------------------------------------
   PILL / BADGE — core/button
   Outline/Solid reuse core's own two built-in styles: unmodified (Fill)
   is Solid, is-style-outline is Outline — restyled here to match tokens
   rather than left at core's generic blue defaults. Wash and Success are
   the two new ones. All four are permanently 48px — a Button block is
   always a link, so "tappable" is the default, not an extra choice.
   -------------------------------------------------------------------------- */

.wp-block-button .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-button);
  font-weight: var(--weight-semibold);
  font-size: var(--text-body);
  text-decoration: none;
}

.wp-block-button:not(.is-style-outline):not([class*="is-style-osta-pill-"]) .wp-block-button__link {
  background: var(--color-brand);
  color: var(--color-surface);
}

.wp-block-button:not(.is-style-outline):not([class*="is-style-osta-pill-"]) .wp-block-button__link:hover,
.wp-block-button:not(.is-style-outline):not([class*="is-style-osta-pill-"]) .wp-block-button__link:focus-visible {
  background: var(--color-brand-hover);
}

.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 3px solid var(--color-brand);
  color: var(--color-brand);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
  background: var(--color-brand-wash);
  color: var(--color-brand);
}

.wp-block-button.is-style-osta-pill-wash .wp-block-button__link {
  background: var(--color-brand-wash);
  color: var(--color-brand);
}

.wp-block-button.is-style-osta-pill-wash .wp-block-button__link:hover,
.wp-block-button.is-style-osta-pill-wash .wp-block-button__link:focus-visible {
  background: var(--color-border-soft);
}

.wp-block-button.is-style-osta-pill-success .wp-block-button__link {
  background: var(--color-success-wash);
  color: var(--color-accent-ink);
}

.wp-block-button.is-style-osta-pill-success .wp-block-button__link:hover,
.wp-block-button.is-style-osta-pill-success .wp-block-button__link:focus-visible {
  background: #DEEFCB; /* one step darker than --color-success-wash, same hue family — no token exists for a hover step of a wash colour, same as the rest of this theme's own washes. */
}

/* --------------------------------------------------------------------------
   ICON CIRCLE — core/image
   Colour is the registered style; size is the Image block's own native
   resize handles. Default to 48px (the modal, most common size found in
   the inventory) when the client hasn't resized it yet.
   -------------------------------------------------------------------------- */

.wp-block-image.is-style-osta-icon-circle-accent img,
.wp-block-image.is-style-osta-icon-circle-wash img {
  display: block;
  width: 48px;
  height: 48px;
  padding: 12px;
  border-radius: 50%;
  box-sizing: border-box;
  object-fit: contain;
}

.wp-block-image.is-style-osta-icon-circle-accent img {
  background: var(--color-accent);
}

.wp-block-image.is-style-osta-icon-circle-wash img {
  background: var(--color-brand-wash);
}

/* --------------------------------------------------------------------------
   CHECKMARK LIST — core/list
   Derived from the navy checkmark family (.membership-cards__check /
   .tenant-rights-accordion__check / .evictions-safeharbor__check) —
   navy, not green, matching this pass's own explicit "green as surfaces
   only, never text" requirement for every new block style.
   -------------------------------------------------------------------------- */

.wp-block-list.is-style-osta-checklist {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.wp-block-list.is-style-osta-checklist li {
  position: relative;
  padding-left: var(--space-4);
}

.wp-block-list.is-style-osta-checklist li + li {
  margin-top: var(--space-2);
}

.wp-block-list.is-style-osta-checklist li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.15em;
  width: 20px;
  height: 20px;
  background-color: var(--color-brand);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* --------------------------------------------------------------------------
   BREADCRUMB — core/list
   Derived from the 4-of-5 majority pattern (.park-maint-breadcrumb /
   .evictions-breadcrumb, byte-identical): 16px muted text, 48px tap
   target on every link, "/" separators. A client rarely builds a
   breadcrumb by hand — this exists mainly so a pattern can offer one
   pre-built, matching the site exactly, rather than the theme leaving a
   client-typed breadcrumb-shaped list unstyled.
   -------------------------------------------------------------------------- */

.wp-block-list.is-style-osta-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  padding-left: 0;
  margin: 0;
  font-size: var(--text-small);
  color: var(--color-muted);
}

.wp-block-list.is-style-osta-breadcrumb li {
  display: flex;
  align-items: center;
}

.wp-block-list.is-style-osta-breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: var(--space-1);
  color: var(--color-border);
}

.wp-block-list.is-style-osta-breadcrumb a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-muted);
  text-decoration: none;
}

.wp-block-list.is-style-osta-breadcrumb a:hover,
.wp-block-list.is-style-osta-breadcrumb a:focus-visible {
  color: var(--color-brand);
}

/* --------------------------------------------------------------------------
   SECTION HEADER pieces — core/paragraph
   -------------------------------------------------------------------------- */

p.is-style-osta-eyebrow {
  font-size: var(--text-eyebrow);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-brand);
  text-align: center;
  margin: 0 0 var(--space-2);
}

p.is-style-osta-intro {
  max-width: var(--measure-max);
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: var(--color-muted);
  font-size: var(--text-lead);
}

/*
 * Dark surfaces (.on-dark / .section--dark / navy covers): the paragraph
 * styles above hard-code light-theme ink (--color-brand / --color-muted).
 * On navy those sit near ~1.3:1 (tokens.css documents #263279 on navy as
 * invisible). Restore light-on-dark tokens. Light .card children keep the
 * light-theme colors — solution pillars put "01/02/03" eyebrows on cards
 * inside a dark band.
 */
.on-dark p.is-style-osta-eyebrow,
.section--dark p.is-style-osta-eyebrow,
.wp-block-cover.is-style-osta-hero-photo p.is-style-osta-eyebrow,
.wp-block-cover.is-style-osta-hero-flat p.is-style-osta-eyebrow,
.wp-block-group.is-style-osta-cta-navy p.is-style-osta-eyebrow {
  color: var(--color-brand-on-dark);
}

.on-dark .card p.is-style-osta-eyebrow,
.section--dark .card p.is-style-osta-eyebrow {
  color: var(--color-brand);
}

.on-dark p.is-style-osta-intro,
.section--dark p.is-style-osta-intro,
.wp-block-cover.is-style-osta-hero-photo p.is-style-osta-intro,
.wp-block-cover.is-style-osta-hero-flat p.is-style-osta-intro,
.wp-block-group.is-style-osta-cta-navy p.is-style-osta-intro {
  color: var(--color-brand-on-dark);
}

/* --------------------------------------------------------------------------
   STAT BAND — core/columns + core/paragraph
   Derived from .footer-stats (global.css) — the sitewide "109 / 5 /
   Since 1977" strip.
   -------------------------------------------------------------------------- */

.wp-block-columns.is-style-osta-stat-band {
  text-align: center;
}

p.is-style-osta-stat-number {
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  color: var(--color-brand);
  margin: 0;
}

.on-dark p.is-style-osta-stat-number,
.section--dark p.is-style-osta-stat-number,
.wp-block-cover.is-style-osta-hero-photo p.is-style-osta-stat-number,
.wp-block-cover.is-style-osta-hero-flat p.is-style-osta-stat-number,
.wp-block-group.is-style-osta-cta-navy p.is-style-osta-stat-number {
  color: var(--color-surface);
}

p.is-style-osta-stat-label {
  font-size: var(--text-small);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  margin: 0;
}

.on-dark p.is-style-osta-stat-label,
.section--dark p.is-style-osta-stat-label,
.wp-block-cover.is-style-osta-hero-photo p.is-style-osta-stat-label,
.wp-block-cover.is-style-osta-hero-flat p.is-style-osta-stat-label,
.wp-block-group.is-style-osta-cta-navy p.is-style-osta-stat-label {
  color: var(--color-brand-on-dark);
}

/* ==========================================================================
   PASS "Build the client's seven requested block patterns"

   Everything below is NEW — the previous pass's styles above cover none
   of these seven shapes. Each block is commented with the exact live
   component it matches (file:line in that pass's own report) so a
   future pass can verify it's still in sync. Nothing above this line was
   changed; nothing below duplicates it.
   ========================================================================== */

/* --------------------------------------------------------------------------
   (a) SMALL HERO — core/media-text. Matches .tenant-rights-promo /
   .tenant-rights-promo__copy / __media (inner-pages.css:2636-2685)
   exactly: navy text panel + photo, rounded corners, stacks below 700px
   (core/media-text's own isStackedOnMobile does this natively — no extra
   CSS needed for that part).
   -------------------------------------------------------------------------- */

.wp-block-media-text.is-style-osta-hero-compact {
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 320px;
}

.wp-block-media-text.is-style-osta-hero-compact .wp-block-media-text__content {
  background: var(--color-brand);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-6) var(--space-4);
}

.wp-block-media-text.is-style-osta-hero-compact .wp-block-media-text__content :where(h1, h2, h3, h4, h5, h6, p) {
  color: var(--color-surface);
}

.wp-block-media-text.is-style-osta-hero-compact .wp-block-media-text__media {
  min-height: 220px;
}

.wp-block-media-text.is-style-osta-hero-compact .wp-block-media-text__media img {
  height: 100%;
  object-fit: cover;
}

/* --------------------------------------------------------------------------
   (b) BOARD OF DIRECTORS GRID — core/columns (one column per person, so
   duplicating a column in the block toolbar is how she adds a member;
   core/columns already wraps to one column on mobile on its own).
   Matches .about-board__grid/__card/__photo/__name/__role
   (inner-pages.css:966-1063).
   -------------------------------------------------------------------------- */

.wp-block-columns.is-style-osta-board-grid {
  row-gap: var(--space-6);
}

.wp-block-image.is-style-osta-board-photo img {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px; /* Matches the live component's own literal value — no --radius-* token sits on 16px. */
  background: var(--color-surface-alt);
}

p.is-style-osta-board-name {
  font-size: var(--text-h4);
  font-weight: var(--weight-semibold);
  color: var(--color-brand);
  text-align: center;
  margin: 0;
}

p.is-style-osta-board-role {
  font-size: var(--text-body);
  color: var(--color-muted);
  text-align: center;
  margin: var(--space-1) 0 0;
}

/* --------------------------------------------------------------------------
   (c) FIND RESOURCES CARDS — reuses is-style-osta-card (previous pass)
   and is-style-osta-icon-circle-accent (previous pass) as-is. The one
   genuinely new piece is the button: the live card's button is
   .btn.btn--primary.btn--block (global.css:209-256) — RECTANGULAR
   (radius-sm, 6px) and full-width, not the pill shape (radius:999px)
   every core/button style so far uses. Two new button styles cover this
   shape for both this card (solid) and the Latest Articles "Load More"
   button (outline) below, matching .btn--primary/.btn--outline exactly.
   -------------------------------------------------------------------------- */

.wp-block-button.is-style-osta-btn-block .wp-block-button__link {
  display: flex;
  width: 100%;
  border-radius: var(--radius-button);
  background: var(--color-brand);
  color: var(--color-surface);
}

.wp-block-button.is-style-osta-btn-block .wp-block-button__link:hover,
.wp-block-button.is-style-osta-btn-block .wp-block-button__link:focus-visible {
  background: var(--color-brand-hover);
}

.wp-block-button.is-style-osta-btn-block-outline .wp-block-button__link {
  border-radius: var(--radius-button);
  background: transparent;
  border: 3px solid var(--color-brand);
  color: var(--color-brand);
}

.wp-block-button.is-style-osta-btn-block-outline .wp-block-button__link:hover,
.wp-block-button.is-style-osta-btn-block-outline .wp-block-button__link:focus-visible {
  background: var(--color-brand-wash);
}

/* --------------------------------------------------------------------------
   (d) BROWSE BY TOPIC CARDS — core/group. Matches .answers-topic-card
   (answers.css:286-381): navy card (--color-surface-dark, distinct from
   --color-brand — the same "brand navy, not black" token the rest of
   the theme uses for this exact shade), green icon circle (reuses
   is-style-osta-icon-circle-accent), light-on-dark heading/body, and a
   "count · arrow" footer row.
   -------------------------------------------------------------------------- */

.wp-block-group.is-style-osta-topic-card {
  background: var(--color-surface-dark);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.wp-block-group.is-style-osta-topic-card > :first-child {
  margin-top: 0;
}

.wp-block-group.is-style-osta-topic-card :where(h1, h2, h3, h4, h5, h6) {
  color: var(--color-surface);
  margin: 0 0 var(--space-2);
}

.wp-block-group.is-style-osta-topic-card p {
  color: var(--color-surface);
  opacity: 0.85;
}

p.is-style-osta-topic-card-meta {
  font-size: var(--text-small);
  color: var(--color-brand-on-dark);
  opacity: 1;
  margin: var(--space-2) 0 0;
}

/* --------------------------------------------------------------------------
   (e) LATEST ARTICLES LIST — core/media-text (image + content, stacks
   below 600px on its own). Matches .news-article-card
   (inner-pages.css:2272-2367): white card, border, shadow, category
   label, title, excerpt, "Read Full Article" underlined link.
   -------------------------------------------------------------------------- */

.wp-block-media-text.is-style-osta-article-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-3);
}

.wp-block-media-text.is-style-osta-article-row .wp-block-media-text__media {
  border-radius: var(--radius-md);
  overflow: hidden;
}

.wp-block-media-text.is-style-osta-article-row .wp-block-media-text__media img {
  height: 100%;
  object-fit: cover;
}

p.is-style-osta-category-label {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: var(--color-brand);
  margin: 0 0 2px;
}

p.is-style-osta-read-more {
  margin: 0;
}

p.is-style-osta-read-more a {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-brand);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   (f) RECENT EPISODES + FEATURED VIDEO SIDEBAR — core/group +
   core/image. Matches .news-episodes-panel/.news-episode/
   .news-episode__play (inner-pages.css:2373-2447) and
   .news-featured-video/.news-featured-tag (inner-pages.css:2451-2480).
   -------------------------------------------------------------------------- */

.wp-block-group.is-style-osta-episodes-panel {
  background: var(--color-surface-soft);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.wp-block-group.is-style-osta-episode-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-sm);
  padding: 12px; /* Matches the live component's own literal value. */
}

.wp-block-group.is-style-osta-episode-row > * {
  margin: 0;
}

/* Play icon: purely decorative UI chrome shared by every row, the same
   way the checkmark-list and accordion chevron elsewhere in this file
   are drawn with CSS rather than asking her to source/replace an icon
   image for something that isn't really "her content." Matches
   .news-episode__play (48px navy-wash circle) exactly. */
.wp-block-group.is-style-osta-episode-row::before {
  content: '';
  flex-shrink: 0;
  width: var(--tap-min);
  height: var(--tap-min);
  border-radius: 50%;
  background: var(--color-brand-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23263279'%3E%3Cpolygon points='6 4 20 12 6 20 6 4'%3E%3C/polygon%3E%3C/svg%3E") no-repeat center;
  background-size: 18px 18px;
}

p.is-style-osta-view-all-link {
  text-align: center;
  margin: var(--space-2) 0 0;
}

p.is-style-osta-view-all-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min);
  color: var(--color-brand);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
}

.wp-block-group.is-style-osta-featured-video-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: 0;
}

.wp-block-group.is-style-osta-featured-video-card > * {
  margin-left: var(--space-3);
  margin-right: var(--space-3);
}

.wp-block-group.is-style-osta-featured-video-card > *:last-child {
  margin-bottom: var(--space-3);
}

.wp-block-group.is-style-osta-featured-video-card > .wp-block-image {
  margin: 0 0 var(--space-3);
}

.wp-block-image.is-style-osta-video-thumb img {
  width: 100%;
  height: 192px;
  object-fit: cover;
  border-radius: 0;
}

/* Reusable small alert-coloured badge — matches .news-featured-tag
   exactly, but not named after that one component since a "Featured" /
   status-style badge is a generic enough shape to reuse elsewhere. */
p.is-style-osta-badge-alert {
  display: inline-block;
  background: var(--color-alert-wash);
  color: var(--color-alert);
  font-size: var(--text-small);
  font-weight: var(--weight-bold);
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  margin: 0 0 var(--space-1);
}

/* --------------------------------------------------------------------------
   (g) OTHER RESOURCES — core/list. Matches
   .resource-sidebar-siblings__list/__link (inner-pages.css, PASS "Fix
   the Find Resources sidebars"). The "On This Page" half is a real
   dynamic block instead (inc/client-patterns.php) — see this pass's own
   report for why only this half is a static, hand-filled pattern.
   -------------------------------------------------------------------------- */

.wp-block-list.is-style-osta-other-resources {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.wp-block-list.is-style-osta-other-resources li + li {
  margin-top: var(--space-1);
}

.wp-block-list.is-style-osta-other-resources a {
  display: flex;
  align-items: center;
  min-height: var(--tap-min);
  color: var(--color-muted);
  text-decoration: none;
}

.wp-block-list.is-style-osta-other-resources a:hover,
.wp-block-list.is-style-osta-other-resources a:focus-visible {
  color: var(--color-brand);
}

/* --------------------------------------------------------------------------
   GET ANSWERS TOPIC HUB CARDS — core/group + image + tag + block button.
   Screenshot, category tag, title, description, full-width navy button.
   -------------------------------------------------------------------------- */

.answers-topic-hubs .answers-topic-hubs__intro .is-style-osta-eyebrow {
  color: var(--color-accent-ink);
  text-align: left;
}

.answers-topic-hubs .answers-topic-hubs__intro .wp-block-heading {
  color: var(--color-brand);
  text-align: left;
  margin: 0 0 var(--space-2);
}

.answers-topic-hubs .answers-topic-hubs__intro .is-style-osta-intro {
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

.answers-topic-hubs__grid {
  margin-top: var(--space-5);
}

.answers-topic-hubs .wp-block-column {
  display: flex;
}

.wp-block-group.is-style-osta-hub-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  padding: 0;
}

.wp-block-group.is-style-osta-hub-card .osta-hub-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--space-2);
  padding: var(--space-3);
}

.wp-block-group.is-style-osta-hub-card .osta-hub-card__body .wp-block-heading {
  color: var(--color-brand);
  font-size: var(--text-h4);
  margin: 0;
}

.wp-block-group.is-style-osta-hub-card .osta-hub-card__body p:not(.is-style-osta-hub-tag) {
  color: var(--color-body);
  margin: 0;
}

.wp-block-group.is-style-osta-hub-card .wp-block-buttons,
.wp-block-group.is-style-osta-hub-card .wp-block-button {
  width: 100%;
  margin-top: auto;
}

.wp-block-group.is-style-osta-hub-card .is-style-osta-btn-block .wp-block-button__link {
  border-radius: var(--radius-md);
  justify-content: center;
  min-height: var(--tap-min);
}

.wp-block-image.is-style-osta-hub-shot {
  margin: 0;
  background: #1A2255;
}

.wp-block-image.is-style-osta-hub-shot::before {
  content: "";
  display: block;
  height: 28px;
  background:
    radial-gradient(circle at 16px 14px, #ff5f57 5px, transparent 6px),
    radial-gradient(circle at 34px 14px, #febc2e 5px, transparent 6px),
    radial-gradient(circle at 52px 14px, #28c840 5px, transparent 6px),
    #1A2255;
}

.wp-block-image.is-style-osta-hub-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
}

p.is-style-osta-hub-tag {
  display: inline-block;
  width: fit-content;
  margin: 0;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: var(--text-micro);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

p.is-style-osta-hub-tag.osta-hub-tag--finance {
  background: var(--color-alert-wash);
  color: var(--color-alert);
}

p.is-style-osta-hub-tag.osta-hub-tag--habitability,
p.is-style-osta-hub-tag.osta-hub-tag--organizing {
  background: var(--color-success-wash);
  color: var(--color-accent-ink);
}

p.is-style-osta-hub-tag.osta-hub-tag--eviction {
  background: var(--color-warning-wash);
  color: var(--color-warning);
}

p.is-style-osta-hub-tag.osta-hub-tag--facility,
p.is-style-osta-hub-tag.osta-hub-tag--property {
  background: var(--color-brand-wash);
  color: var(--color-brand);
}