/* =============================================================================
   ZWF Blocks — the Block Grid component library (Phase 6)
   Every block renders as a full-width band (.zwf-section) with centred content
   (.zwf-container). The Block Grid container is a vertical stack; column spans
   and nested areas are a later enhancement. Depends on tokens.css + layout.css.
   ============================================================================= */

/* Block Grid shell -------------------------------------------------------------- */
.umb-block-grid,
.umb-block-grid__layout-container { display: block; }
.umb-block-grid__layout-item { display: block; }

/* Trim doubled spacing when consecutive blocks share a surface colour */
.zwf-block + .zwf-block .zwf-section--surface:first-child { /* handled per-block below */ }

/* Heading block -------------------------------------------------------------- */
.zwf-block--heading[data-align="center"] .zwf-container { text-align: center; }
.zwf-block--heading[data-align="center"] .zwf-eyebrow { display: block; }

/* Media & text -------------------------------------------------------------- */
.zwf-block--mediatext .zwf-block__media img { width: 100%; }
.zwf-block--mediatext .zwf-block__body > :first-child { margin-top: 0; }

/* Callout ------------------------------------------------------------------- */
.zwf-callout {
  border: 1px solid var(--zwf-color-border);
  border-left: 4px solid var(--zwf-color-info);
  border-radius: var(--zwf-radius-md);
  padding: var(--zwf-space-md);
  background: var(--zwf-color-surface);
}
.zwf-callout[data-type="success"] { border-left-color: var(--zwf-color-success); }
.zwf-callout[data-type="warning"] { border-left-color: var(--zwf-color-warning); }
.zwf-callout[data-type="tip"] { border-left-color: var(--zwf-color-accent); }
.zwf-callout__heading { font-weight: var(--zwf-weight-semibold); margin-bottom: var(--zwf-space-2xs); }
.zwf-callout__body > :first-child { margin-top: 0; }

/* CTA -------------------------------------------------------------------------- */
.zwf-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zwf-space-lg);
  align-items: center;
  justify-content: space-between;
  padding: var(--zwf-space-xl);
  border-radius: var(--zwf-radius-lg);
  background: var(--zwf-color-surface);
}
.zwf-cta h2 { margin-top: var(--zwf-space-2xs); }
.zwf-cta__text { max-width: 46ch; }
.zwf-cta__actions { display: flex; flex-wrap: wrap; gap: var(--zwf-space-sm); }
.zwf-block--cta[data-variant="banner"] .zwf-cta { flex-direction: column; text-align: center; align-items: center; }
.zwf-block--cta[data-theme="primary"] .zwf-cta { background: var(--zwf-color-primary); color: var(--zwf-color-primary-contrast); }
.zwf-block--cta[data-theme="primary"] .zwf-cta :is(h2, p) { color: inherit; }
.zwf-block--cta[data-theme="inverse"] .zwf-cta { background: var(--zwf-color-surface-inverse); color: var(--zwf-color-ink-inverse); }
.zwf-block--cta[data-theme="inverse"] .zwf-cta :is(h2, p) { color: inherit; }

/* Logo wall --------------------------------------------------------------------- */
.zwf-logowall {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--zwf-space-xl);
  list-style: none;
  margin: var(--zwf-space-md) 0 0;
  padding: 0;
}
.zwf-logowall img {
  max-height: 2.75rem;
  width: auto;
  filter: grayscale(1);
  opacity: 0.65;
  transition: opacity var(--zwf-transition-fast) var(--zwf-ease-standard), filter var(--zwf-transition-fast) var(--zwf-ease-standard);
}
.zwf-logowall li:hover img { filter: grayscale(0); opacity: 1; }

/* Card grid ------------------------------------------------------------------- */
.zwf-cards { list-style: none; padding: 0; margin: 0; --zwf-grid-min: 18rem; }
.zwf-card {
  border: 1px solid var(--zwf-color-border);
  border-radius: var(--zwf-radius-lg);
  background: var(--zwf-color-paper);
  overflow: clip;
  transition: box-shadow var(--zwf-transition-base) var(--zwf-ease-standard), transform var(--zwf-transition-base) var(--zwf-ease-standard);
}
.zwf-card:hover { box-shadow: var(--zwf-shadow-md); transform: translateY(-2px); }
.zwf-card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }
.zwf-card__media { display: block; aspect-ratio: 16 / 10; background: var(--zwf-color-surface); }
.zwf-card__media img { width: 100%; height: 100%; object-fit: cover; }
.zwf-card__body { display: flex; flex-direction: column; gap: var(--zwf-space-2xs); padding: var(--zwf-space-md); }
.zwf-card__title { font-family: var(--zwf-font-heading); font-weight: var(--zwf-weight-semibold); font-size: var(--zwf-text-lg); }
.zwf-card__text { color: var(--zwf-color-ink-muted); font-size: var(--zwf-text-sm); }

/* Cards (authored) — the generic card primitive. ---------------------------------
   Style per site by targeting the wrapper's data-variant, e.g.
   .zwf-block--carddeck[data-variant="plans"] .zwf-card { ... }                     */
.zwf-block--carddeck .zwf-cards[data-columns="2"] { --zwf-grid-min: 22rem; }
.zwf-block--carddeck .zwf-cards[data-columns="4"] { --zwf-grid-min: 14rem; }
.zwf-block--carddeck .zwf-card { display: flex; flex-direction: column; }
.zwf-block--carddeck .zwf-card__title { margin: 0; }
.zwf-block--carddeck .zwf-card__title-link { color: inherit; text-decoration: none; }
.zwf-block--carddeck .zwf-card__title-link:hover { text-decoration: underline; }
.zwf-block--carddeck .zwf-card__text { color: var(--zwf-color-ink); font-size: var(--zwf-text-base); }
.zwf-block--carddeck .zwf-card__text > :first-child { margin-top: 0; }
.zwf-block--carddeck .zwf-card__text > :last-child { margin-bottom: 0; }
.zwf-block--carddeck .zwf-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--zwf-space-2xs);
  font-weight: var(--zwf-weight-semibold);
  text-decoration: none;
  color: var(--zwf-color-primary);
}
.zwf-block--carddeck .zwf-card__cta:hover { text-decoration: underline; }
.zwf-block--carddeck .zwf-card__cta svg { width: 1em; height: 1em; }

/* Feature grid ------------------------------------------------------------------- */
.zwf-features { list-style: none; padding: 0; margin: 0; }
.zwf-features[data-columns="2"] { --zwf-grid-min: 22rem; }
.zwf-features[data-columns="4"] { --zwf-grid-min: 14rem; }
.zwf-feature__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  border-radius: var(--zwf-radius-md);
  background: var(--zwf-color-primary-subtle);
  color: var(--zwf-color-primary);
  margin-bottom: var(--zwf-space-sm);
}
.zwf-feature__icon .zwf-icon { inline-size: 1.35rem; block-size: 1.35rem; }
.zwf-feature__title { font-size: var(--zwf-text-lg); margin-bottom: var(--zwf-space-3xs); }
.zwf-feature__text { color: var(--zwf-color-ink-muted); }
.zwf-feature__link { display: inline-flex; align-items: center; gap: var(--zwf-space-3xs); margin-top: var(--zwf-space-2xs); font-weight: var(--zwf-weight-semibold); font-size: var(--zwf-text-sm); text-decoration: none; }
.zwf-feature__link .zwf-icon { inline-size: 0.9rem; block-size: 0.9rem; }

/* Statistics ----------------------------------------------------------------- */
.zwf-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: var(--zwf-space-lg);
  margin: 0;
  text-align: center;
}
.zwf-stat__value { font-family: var(--zwf-font-heading); font-weight: var(--zwf-weight-bold); font-size: var(--zwf-text-4xl); color: var(--zwf-color-primary); line-height: 1; }
.zwf-stat__label { margin: var(--zwf-space-2xs) 0 0; }
.zwf-stat__label-text { display: block; font-weight: var(--zwf-weight-semibold); }
.zwf-stat__description { display: block; font-size: var(--zwf-text-sm); color: var(--zwf-color-ink-muted); }

/* Testimonials ------------------------------------------------------------------- */
.zwf-testimonials { list-style: none; padding: 0; margin: 0; --zwf-grid-min: 20rem; }
.zwf-testimonials--single { max-width: var(--zwf-size-md); margin-inline: auto; text-align: center; }
.zwf-testimonial {
  padding: var(--zwf-space-lg);
  border: 1px solid var(--zwf-color-border);
  border-radius: var(--zwf-radius-lg);
  background: var(--zwf-color-paper);
}
.zwf-testimonial__quote { font-size: var(--zwf-text-lg); line-height: var(--zwf-leading-snug); border: 0; padding: 0; margin: 0; }
.zwf-testimonial__quote::before { content: "“"; }
.zwf-testimonial__quote::after { content: "”"; }
.zwf-testimonial__meta { display: flex; align-items: center; gap: var(--zwf-space-sm); margin-top: var(--zwf-space-md); }
.zwf-testimonials--single .zwf-testimonial__meta { justify-content: center; }
.zwf-testimonial__photo { border-radius: var(--zwf-radius-full); }
.zwf-testimonial__name { display: block; font-weight: var(--zwf-weight-semibold); }
.zwf-testimonial__role { display: block; font-size: var(--zwf-text-sm); color: var(--zwf-color-ink-muted); }

/* Accordion / FAQ ------------------------------------------------------------- */
.zwf-accordion { border-top: 1px solid var(--zwf-color-border); }
.zwf-accordion__item { border-bottom: 1px solid var(--zwf-color-border); }
.zwf-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zwf-space-sm);
  padding: var(--zwf-space-md) 0;
  font-weight: var(--zwf-weight-semibold);
  font-size: var(--zwf-text-lg);
  cursor: pointer;
  list-style: none;
}
.zwf-accordion__summary::-webkit-details-marker { display: none; }
.zwf-accordion__summary .zwf-icon { transition: transform var(--zwf-transition-fast) var(--zwf-ease-standard); flex: none; }
.zwf-accordion__item[open] .zwf-accordion__summary .zwf-icon { transform: rotate(180deg); }
.zwf-accordion__body { padding-bottom: var(--zwf-space-md); }
.zwf-accordion__body > :first-child { margin-top: 0; }

/* Image gallery ------------------------------------------------------------------- */
.zwf-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
  gap: var(--zwf-space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}
.zwf-gallery[data-layout="wide"] { grid-template-columns: repeat(auto-fill, minmax(min(22rem, 100%), 1fr)); }
.zwf-gallery__item { aspect-ratio: 4 / 3; }
.zwf-gallery__item img { width: 100%; height: 100%; object-fit: cover; }

/* Embed ------------------------------------------------------------------------ */
.zwf-embed { position: relative; width: 100%; background: var(--zwf-color-surface); border-radius: var(--zwf-radius-md); overflow: clip; }
.zwf-embed--16x9 { aspect-ratio: 16 / 9; }
.zwf-embed--4x3 { aspect-ratio: 4 / 3; }
.zwf-embed--1x1 { aspect-ratio: 1 / 1; }
.zwf-embed :is(iframe, video, object, embed) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Spacer & divider ---------------------------------------------------------------- */
.zwf-block--spacer[data-size="sm"] { block-size: var(--zwf-space-md); }
.zwf-block--spacer[data-size="md"] { block-size: var(--zwf-space-xl); }
.zwf-block--spacer[data-size="lg"] { block-size: var(--zwf-space-2xl); }
.zwf-block--spacer[data-size="xl"] { block-size: var(--zwf-space-3xl); }
.zwf-divider { border: 0; border-top: 1px solid var(--zwf-color-border); }
.zwf-divider[data-style="dots"] { border-top-style: dotted; border-top-width: 2px; }
.zwf-divider[data-style="space"] { border-top: 0; }