/* ===== Bukazu content-page components (bcp-*) =====
   Custom classes for redesigned content pages (hero split, stats strip,
   media placeholders, checklists, testimonial). Plain CSS, not Tailwind
   utility classes, since Tailwind's build only compiles classes it finds
   in app templates -- CMS-authored content never gets picked up by that
   scan, so utility classes used in page content silently do nothing.
   Also: rich-text block content is sanitized and strips inline style=
   attributes, so every visual rule here MUST be a class, never relying
   on inline styles inside page content. */

.bcp-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #007e43;
  margin-bottom: 12px;
}

.bcp-hero {
  display: flex;
  align-items: center;
  gap: 48px;
  flex-wrap: wrap;
  padding: 56px 0;
}
.bcp-hero__body { flex: 1 1 380px; }
.bcp-hero__media {
  position: relative;
  flex: 1 1 320px;
  min-height: 280px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 40px -18px rgba(15, 23, 42, .25);
  overflow: hidden;
}

.bcp-btn-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.bcp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 10px;
  text-decoration: none;
}
.bcp-btn--primary {
  background: #007e43;
  color: #fff;
  box-shadow: 0 8px 20px -6px rgba(0, 126, 67, .35);
}
.bcp-btn--primary:hover { background: #045c31; color: #fff; }
.bcp-btn--secondary { color: #1f2937; padding: 14px 4px; }
.bcp-btn--secondary:hover { color: #007e43; }

.bcp-stats {
  background: #f0ece0;
  border-top: 1px solid #ece6d8;
  border-bottom: 1px solid #ece6d8;
  padding: 36px 0;
  display: flex;
  justify-content: center;
  gap: 64px;
  flex-wrap: wrap;
  text-align: center;
}
.bcp-stats__item { text-align: center; }
.bcp-stats__value { font-size: 34px; font-weight: 800; color: #0f2e1d; }
.bcp-stats__label { font-size: 14px; color: #6b6355; }

.bcp-section-row {
  display: flex;
  align-items: center;
  gap: 64px;
  flex-wrap: wrap;
  padding: 56px 0;
}
.bcp-section-row__body { flex: 1 1 380px; }

.bcp-media {
  position: relative;
  flex: 1 1 320px;
  min-height: 260px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 20px 40px -18px rgba(15, 23, 42, .25);
  overflow: hidden;
}
/* --a..--f no longer set a background color -- kept as no-op hooks so
   existing block classNames (bcp-media--a etc.) stay valid if colors
   ever come back, e.g. for the empty-placeholder state. */
.bcp-media--a,
.bcp-media--b,
.bcp-media--c,
.bcp-media--d,
.bcp-media--e,
.bcp-media--f {
}

/* emoji icon inside a .bcp-hero__media / .bcp-media box (placeholder state) */
.bcp-media-icon { font-size: 56px; line-height: 1; }

/* uploaded photo inside a .bcp-hero__media / .bcp-media box: fill the whole
   box edge-to-edge and crop. Absolutely positioned against the box (which is
   position:relative) instead of relying on percentage width/height inside a
   flex container -- with align-items:center on the box, a flex item's
   height:100% never resolves (indefinite parent height), so the image
   never actually filled the box. inset:0 sidesteps that entirely. The
   ImageBlock component never applies width/height/style options to the
   <img> itself, so this has to be a plain descendant selector. */
.bcp-hero__media img,
.bcp-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bcp-check-list {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bcp-check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 18px;
  line-height: 1.5;
  color: #2c2620;
}
.bcp-check-list li::before {
  content: "\2713";
  color: #007e43;
  font-weight: 700;
}

/* links inside the redesigned hero/section copy (paragraphs, checklist
   items) -- scoped to the text-block wrapper class rather than the site's
   global `a`, since that's what every one of these blocks' className
   carries. */
.bukazu-p-medium a {
  color: #007e43;
  font-weight: 600;
  text-decoration: underline;
}
.bukazu-p-medium a:hover { color: #045c31; }

.bcp-testimonial {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  padding: 64px 0;
}
.bcp-testimonial p {
  font-size: 22px;
  line-height: 1.5;
  font-style: italic;
  color: #3a342c;
}
.bcp-testimonial cite {
  display: block;
  margin-top: 16px;
  font-size: 15px;
  font-weight: 600;
  color: #6b6355;
  font-style: normal;
}