/* ============================================================
   @webright/tina-kit block styling, mapped to ervaar-breda tokens.
   Scoped under .wr-* selectors so existing components are untouched.
   ============================================================ */

/* Containers */
.wr-container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.wr-container--narrow {
  max-width: var(--container-narrow);
}

/* Section rhythm */
.wr-hero,
.wr-features,
.wr-cta,
.wr-testimonials,
.wr-faq,
.wr-contact,
.wr-image-grid,
.wr-rich-text,
.wr-logo-cloud,
.wr-pricing,
.wr-stats,
.wr-team,
.wr-article-list,
.wr-event-list,
.wr-member-list,
.wr-embed,
.wr-map,
.wr-newsletter {
  padding-block: var(--block-py);
  background: var(--paper);
  color: var(--ink);
}

/* Typography */
.wr-eyebrow {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: var(--fw-body-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--brand-orange);
  margin: 0 0 var(--space-3);
}

.wr-section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--brand-navy);
  margin: 0 0 var(--space-6);
}

.wr-lead {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin: 0 0 var(--space-12);
  max-width: 60ch;
}

/* Buttons match ervaar-breda's primary/secondary patterns */
.wr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.5rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-body-bold);
  text-decoration: none;
  transition: background var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}
.wr-btn--primary {
  background: var(--brand-orange);
  color: #fff;
  box-shadow: var(--shadow-button);
}
.wr-btn--primary:hover {
  background: var(--brand-orange-deep);
  transform: translateY(-1px);
}
.wr-btn--secondary {
  background: transparent;
  color: var(--brand-navy);
  border: 2px solid var(--brand-navy);
}
.wr-btn--secondary:hover {
  background: var(--brand-navy);
  color: #fff;
}

/* Grid helpers */
.wr-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-6);
}
.wr-grid--cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.wr-grid--cols-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.wr-grid--cols-4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.wr-grid--cols-6 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* Hero variants */
.wr-hero { padding-block: var(--block-py-lg); background: var(--paper); }
.wr-hero__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: var(--space-12);
  align-items: center;
}
.wr-hero--centered .wr-hero__inner { text-align: center; max-width: var(--container-narrow); padding: 0 var(--gutter); }
.wr-hero--split-left .wr-hero__inner,
.wr-hero--split-right .wr-hero__inner {
  grid-template-columns: 1fr 1fr;
}
.wr-hero--split-right .wr-hero__media { order: 1; }
@media (max-width: 900px) {
  .wr-hero--split-left .wr-hero__inner,
  .wr-hero--split-right .wr-hero__inner {
    grid-template-columns: 1fr;
  }
  .wr-hero--split-right .wr-hero__media { order: 0; }
}

.wr-hero__title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--brand-navy);
  margin: 0 0 var(--space-6);
}
.wr-hero__subheadline {
  font-family: var(--font-body);
  font-size: var(--fs-body-lg);
  line-height: var(--lh-body);
  color: var(--ink-soft);
  margin: 0 0 var(--space-8);
  max-width: 50ch;
}
.wr-hero__ctas {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.wr-hero__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
}
.wr-hero--video-bg { position: relative; min-height: 70vh; overflow: hidden; color: #fff; }
.wr-hero--video-bg .wr-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.wr-hero--video-bg .wr-hero__inner { position: relative; z-index: 1; }
.wr-hero--video-bg .wr-hero__title { color: #fff; }
.wr-hero--video-bg .wr-hero__subheadline { color: rgba(255,255,255,0.85); }

/* Features grid */
.wr-feature {
  list-style: none;
  background: var(--paper-soft);
  padding: var(--space-8);
  border-radius: var(--radius-md);
  border: var(--border);
}
.wr-feature__image { width: 56px; height: 56px; object-fit: contain; margin-bottom: var(--space-3); }
.wr-feature__title {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-display-bold);
  color: var(--brand-navy);
  margin: var(--space-2) 0 var(--space-3);
}
.wr-feature__description { color: var(--ink-soft); margin: 0; line-height: var(--lh-body); }
.wr-icon {
  display: inline-block;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--brand-orange-soft);
  position: relative;
}
.wr-icon::before {
  content: "";
  position: absolute;
  inset: 8px;
  background: var(--brand-orange);
  border-radius: var(--radius-xs);
}

/* CTA */
.wr-cta { text-align: center; }
.wr-cta--contained .wr-container { max-width: var(--container-narrow); }
.wr-cta--inverted { background: var(--brand-navy); color: #fff; }
.wr-cta--inverted .wr-section-title,
.wr-cta--inverted .wr-cta__headline { color: #fff; }
.wr-cta--inverted .wr-eyebrow { color: var(--brand-orange-soft); }
.wr-cta__headline {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-display);
  line-height: var(--lh-heading);
  color: var(--brand-navy);
  margin: 0 0 var(--space-4);
}
.wr-cta__body {
  font-size: var(--fs-body-lg);
  color: var(--ink-soft);
  margin: 0 auto var(--space-8);
  max-width: 50ch;
}
.wr-cta--inverted .wr-cta__body { color: rgba(255,255,255,0.85); }
.wr-cta__buttons {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

/* Testimonials */
.wr-testimonials__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-6);
}
.wr-testimonial {
  list-style: none;
  background: var(--paper-soft);
  padding: var(--space-8);
  border-radius: var(--radius-md);
  border: var(--border);
}
.wr-testimonial__rating { color: var(--brand-orange); letter-spacing: 0.2em; margin-bottom: var(--space-3); }
.wr-testimonial__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 var(--space-4);
}
.wr-testimonial__attribution { font-size: var(--fs-body-sm); color: var(--ink-soft); display: flex; align-items: center; gap: var(--space-2); }
.wr-testimonial__author { font-weight: var(--fw-body-bold); color: var(--ink); }
.wr-testimonial__photo { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }

/* FAQ */
.wr-faq__list { padding: 0; margin: 0; }
.wr-faq__item {
  list-style: none;
  border-top: 1px solid var(--line);
  padding: var(--space-4) 0;
}
.wr-faq__item:last-child { border-bottom: 1px solid var(--line); }
.wr-faq__question {
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: var(--fw-body-bold);
  font-size: var(--fs-body-lg);
  color: var(--brand-navy);
  padding-right: var(--space-6);
  position: relative;
}
.wr-faq__question::marker { display: none; }
.wr-faq__answer {
  margin-top: var(--space-3);
  color: var(--ink-soft);
  line-height: var(--lh-body);
}

/* Contact form */
.wr-contact__form,
.wr-newsletter__form {
  display: grid;
  gap: var(--space-4);
  max-width: 560px;
}
.wr-form__row { display: grid; gap: var(--space-2); }
.wr-form__label {
  font-family: var(--font-label);
  font-size: var(--fs-label);
  font-weight: var(--fw-body-bold);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-soft);
}
.wr-form__row input,
.wr-form__row textarea,
.wr-form__row select {
  padding: 0.75rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: #fff;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
}
.wr-form__row input:focus,
.wr-form__row textarea:focus,
.wr-form__row select:focus {
  outline: 2px solid var(--brand-orange);
  outline-offset: 2px;
  border-color: var(--brand-orange);
}
.wr-form__hint { font-size: var(--fs-caption); color: var(--ink-mute); margin: 0; }

/* Image grid */
.wr-image-grid img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-md);
}
.wr-image-grid figure { margin: 0; }
.wr-image-grid figcaption { margin-top: var(--space-2); font-size: var(--fs-caption); color: var(--ink-mute); }

/* Rich text */
.wr-rich-text--narrow .wr-container { max-width: var(--container-narrow); }
.wr-rich-text--standard .wr-container { max-width: 880px; }
.wr-rich-text h2, .wr-rich-text h3 {
  font-family: var(--font-display);
  color: var(--brand-navy);
}
.wr-rich-text p, .wr-rich-text li { line-height: var(--lh-body); color: var(--ink-soft); }
.wr-rich-text a { color: var(--brand-orange); text-decoration: underline; }

/* Logo cloud */
.wr-logo-cloud__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  align-items: center;
  justify-content: center;
}
.wr-logo-cloud__item img { max-height: 40px; width: auto; }
.wr-logo-cloud--grayscale .wr-logo-cloud__item img {
  filter: grayscale(1);
  opacity: 0.7;
  transition: opacity var(--t-fast) var(--ease-out), filter var(--t-fast) var(--ease-out);
}
.wr-logo-cloud--grayscale .wr-logo-cloud__item img:hover { filter: grayscale(0); opacity: 1; }

/* Pricing */
.wr-pricing__tiers {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--space-6);
  align-items: stretch;
}
.wr-pricing__tier {
  list-style: none;
  background: var(--paper-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.wr-pricing__tier--featured {
  border-color: var(--brand-orange);
  box-shadow: var(--shadow-lift);
  transform: translateY(-4px);
}
.wr-pricing__name {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-display-bold);
  color: var(--brand-navy);
  margin: 0;
}
.wr-pricing__price { margin: 0; display: flex; align-items: baseline; gap: 0.25rem; }
.wr-pricing__amount {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: var(--fw-display-bold);
  color: var(--brand-navy);
}
.wr-pricing__suffix { color: var(--ink-mute); font-size: var(--fs-body-sm); }
.wr-pricing__description { color: var(--ink-soft); margin: 0; }
.wr-pricing__features { padding-left: 1.25rem; margin: 0; color: var(--ink-soft); line-height: 1.8; }
.wr-pricing__tier .wr-btn { margin-top: auto; }

/* Stats */
.wr-stats__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-6);
  text-align: center;
}
.wr-stats__value {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  color: var(--brand-navy);
  line-height: 1;
}
.wr-stats__value small { font-size: 0.5em; vertical-align: super; }
.wr-stats__label {
  display: block;
  font-family: var(--font-label);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--ink-mute);
  margin-top: var(--space-2);
}

/* Team */
.wr-team__member { list-style: none; text-align: center; }
.wr-team__photo {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto var(--space-3);
}
.wr-team__name {
  font-family: var(--font-display);
  font-weight: var(--fw-display-bold);
  color: var(--brand-navy);
  margin: 0 0 var(--space-2);
}
.wr-team__role { color: var(--ink-soft); font-size: var(--fs-body-sm); margin: 0; }
.wr-team__bio { color: var(--ink-soft); font-size: var(--fs-body-sm); margin-top: var(--space-3); }

/* Article / event / member cards */
.wr-article-list__items,
.wr-event-list__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
}
.wr-article-card,
.wr-event-card,
.wr-member-card {
  list-style: none;
  background: var(--paper-soft);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  border: var(--border);
}
.wr-article-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: var(--space-3); }
.wr-article-card__title,
.wr-event-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display-bold);
  color: var(--brand-navy);
  margin: 0 0 var(--space-2);
}
.wr-article-card__title a,
.wr-event-card__title a {
  color: inherit;
  text-decoration: none;
}
.wr-article-card__title a:hover,
.wr-event-card__title a:hover { color: var(--brand-orange); }
.wr-article-card time,
.wr-event-card__date {
  display: block;
  font-family: var(--font-label);
  font-size: var(--fs-caption);
  text-transform: uppercase;
  letter-spacing: var(--ls-label);
  color: var(--brand-orange);
  margin-bottom: var(--space-2);
}
.wr-link--more {
  display: inline-flex;
  align-items: center;
  margin-top: var(--space-6);
  font-weight: var(--fw-body-bold);
  color: var(--brand-orange);
  text-decoration: none;
}
.wr-link--more::after { content: " →"; }

/* Embed */
.wr-embed__frame {
  position: relative;
  width: 100%;
  background: var(--paper-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.wr-embed__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.wr-embed__caption {
  margin-top: var(--space-3);
  font-size: var(--fs-caption);
  color: var(--ink-mute);
  text-align: center;
}

/* Map */
.wr-map__canvas {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  background: var(--paper-soft);
}

/* Newsletter */
.wr-newsletter { background: var(--brand-navy); color: #fff; }
.wr-newsletter .wr-eyebrow { color: var(--brand-orange-soft); }
.wr-newsletter .wr-section-title { color: #fff; }
.wr-newsletter__body { color: rgba(255,255,255,0.85); max-width: 50ch; }
.wr-newsletter__privacy { font-size: var(--fs-caption); color: rgba(255,255,255,0.65); margin-top: var(--space-3); }
.wr-newsletter .wr-form__row input { color: var(--ink); }

/* Responsive: tighten on mobile */
@media (max-width: 640px) {
  .wr-section-title { font-size: clamp(1.5rem, 6vw, 2.25rem); }
  .wr-hero__title { font-size: clamp(2.25rem, 9vw, 3.5rem); }
  .wr-cta__headline { font-size: clamp(1.5rem, 6vw, 2.25rem); }
}