/* ── Block library styles (v2-3) ──────────────────────────────────── */

/* callout ---------------------------------------------------------------- */
.block-callout {
  border-left: 4px solid var(--callout-border, #c4956a);
  background: var(--callout-bg, #fdf4e8);
  border-radius: 0 6px 6px 0;
  padding: 14px 18px;
  margin: 1.5em 0;
}
.callout-info    { --callout-border: #3a7090; --callout-bg: #edf4fa; }
.callout-warning { --callout-border: #c4956a; --callout-bg: #fdf4e8; }
.callout-tip     { --callout-border: #3a7050; --callout-bg: #edf5ef; }
.callout-danger  { --callout-border: #a03030; --callout-bg: #fdecea; }
.callout-title {
  font-weight: 600;
  font-size: 0.9em;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
  color: #1a1613;
}
.callout-body > :first-child { margin-top: 0; }
.callout-body > :last-child  { margin-bottom: 0; }

/* columns ---------------------------------------------------------------- */
.block-columns {
  display: grid;
  gap: var(--col-gap, 1.5rem);
  margin: 1.5em 0;
}
.block-columns.cols-2 { grid-template-columns: repeat(2, 1fr); }
.block-columns.cols-3 { grid-template-columns: repeat(3, 1fr); }
.block-columns.cols-4 { grid-template-columns: repeat(4, 1fr); }
.block-columns.gap-small  { --col-gap: 0.75rem; }
.block-columns.gap-large  { --col-gap: 3rem; }
@media (max-width: 640px) {
  .block-columns.cols-2,
  .block-columns.cols-3,
  .block-columns.cols-4 { grid-template-columns: 1fr; }
}
.block-column > :first-child { margin-top: 0; }
.block-column > :last-child  { margin-bottom: 0; }

/* image ------------------------------------------------------------------ */
.block-image {
  margin: 1.5em auto;
  text-align: center;
}
.block-image.align-left   { text-align: left; }
.block-image.align-right  { text-align: right; }
.block-image.align-center { text-align: center; }
.block-image img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}
.block-image figcaption {
  font-size: 0.82em;
  color: #6b5f53;
  margin-top: 6px;
}

/* gallery --------------------------------------------------------------- */
.block-gallery {
  display: grid;
  gap: 0.75rem;
  margin: 1.5em 0;
}
.block-gallery.cols-2 { grid-template-columns: repeat(2, 1fr); }
.block-gallery.cols-3 { grid-template-columns: repeat(3, 1fr); }
.block-gallery.cols-4 { grid-template-columns: repeat(4, 1fr); }
.block-gallery figure { margin: 0; }
.block-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }
.block-gallery.crop-square img  { aspect-ratio: 1; }
.block-gallery.crop-wide img    { aspect-ratio: 16/9; }
@media (max-width: 480px) {
  .block-gallery.cols-3,
  .block-gallery.cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* code ------------------------------------------------------------------- */
.block-code {
  margin: 1.5em 0;
}
.block-code pre {
  background: #1e1e1e;
  color: #d4d4d4;
  padding: 18px 20px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 0.85em;
  line-height: 1.55;
}
.block-code code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
}

/* embed ------------------------------------------------------------------ */
.block-embed {
  margin: 1.5em 0;
}
.block-embed iframe {
  width: 100%;
  aspect-ratio: 16/9;
  border: none;
  border-radius: 4px;
}
.embed-fallback {
  display: block;
  padding: 12px 16px;
  background: #f0ece0;
  border-radius: 4px;
  word-break: break-all;
}

/* divider --------------------------------------------------------------- */
.block-divider.divider-line { border: none; border-top: 1px solid #d9d0bf; margin: 2em 0; }
.block-divider.divider-space { height: 2em; }
.block-divider.divider-star {
  text-align: center;
  font-size: 1.2em;
  color: #8a7a66;
  margin: 1.5em 0;
  letter-spacing: 0.4em;
}

/* button ----------------------------------------------------------------- */
.block-button-wrap {
  margin: 1.5em 0;
}
.block-button {
  display: inline-block;
  padding: 10px 22px;
  border-radius: 5px;
  font-weight: 500;
  font-size: 0.9em;
  text-decoration: none;
  transition: opacity .15s;
}
.block-button:hover { opacity: .85; }
.block-button.btn-primary   { background: #3a7050; color: #fff; }
.block-button.btn-secondary { background: transparent; border: 1.5px solid #3a7050; color: #3a7050; }
.block-button.btn-ghost     { background: transparent; border: 1.5px solid #d9d0bf; color: #4b3f30; }

/* hero ------------------------------------------------------------------- */
.block-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 4rem 2rem;
  margin: 1.5em calc(-1 * var(--content-pad, 1.5rem));
  border-radius: 6px;
  overflow: hidden;
}
.block-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}
.block-hero .hero-content {
  position: relative;
  max-width: 680px;
  color: #fff;
}
.block-hero.align-center .hero-content { margin: 0 auto; text-align: center; }
.block-hero.height-small  { padding: 2rem; }
.block-hero.height-large  { padding: 7rem 2rem; }
.block-hero .hero-content h1,
.block-hero .hero-content h2,
.block-hero .hero-content p { color: #fff; }

/* paragraph / heading alignment ----------------------------------------- */
p.align-left   { text-align: left; }
p.align-center { text-align: center; }
p.align-right  { text-align: right; }

/* section blocks — full-bleed page-builder layouts ----------------------- */
.block-section-hero,
.block-section-feature-grid,
.block-section-cta {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  box-sizing: border-box;
}

/* section-hero ----------------------------------------------------------- */
.block-section-hero {
  position: relative;
  background-color: #2a2520;          /* fallback when no bg_image */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}
.block-section-hero .section-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}
/* When the hero has no body content (banner mode), drop the overlay
   to a thin haze — just enough to smooth JPEG compression artefacts
   without darkening the photo. */
.block-section-hero.sh-empty .section-overlay {
  background: rgba(0,0,0,.10);
}
.block-section-hero .section-hero-content {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  color: #fff;
  width: 100%;
}
.block-section-hero .section-hero-content h1,
.block-section-hero .section-hero-content h2,
.block-section-hero .section-hero-content p { color: #fff; }
.block-section-hero.sh-small  { min-height: 240px; }
.block-section-hero.sh-medium { min-height: 420px; }
.block-section-hero.sh-large  { min-height: 620px; }

/* section-feature-grid --------------------------------------------------- */
.block-section-feature-grid {
  padding: 3rem 2rem;
}
.block-section-feature-grid .sfg-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  gap: 2rem;
}
.sfg-cols-2 .sfg-inner { grid-template-columns: repeat(2, 1fr); }
.sfg-cols-3 .sfg-inner { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 680px) {
  .sfg-cols-2 .sfg-inner,
  .sfg-cols-3 .sfg-inner { grid-template-columns: 1fr; }
}

/* section-cta ------------------------------------------------------------ */
.block-section-cta {
  padding: 3.5rem 2rem;
  text-align: center;
}
.block-section-cta .section-cta-inner {
  max-width: 700px;
  margin: 0 auto;
}
.block-section-cta h1,
.block-section-cta h2,
.block-section-cta h3,
.block-section-cta p { color: #fff; }