/* ============================================================
   21-elfsight — scoped under .sec-21-elfsight
   Light "bone" section following the dark testimonials section.
   White panel houses the lazy-loaded Elfsight Google reviews
   embed, with a static demo-state fallback for the unfilled
   [ELFSIGHT_WIDGET_ID_PLACEHOLDER] token (see js/sections/21-elfsight.js).
   ============================================================ */

.sec-21-elfsight {
  position: relative;
  background: radial-gradient(120% 85% at 50% 100%, #fbf9f3 0%, var(--bone) 55%, #eee8db 100%);
}

.sec-21-elfsight__panel {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-soft);
  padding: clamp(2rem, 1.4rem + 3vw, 3.5rem);
  overflow: hidden;
}

/* Elfsight injects its own markup/height once the platform script has
   run; reserve room up front so the panel never collapses to zero
   height while the script loads (or is absent in the demo state). */
.sec-21-elfsight [data-elfsight-app-lazy] {
  display: block;
  width: 100%;
  min-height: 420px;
}

/* --- Unfilled-token fallback: soft striped placeholder, revealed by JS ---
   JS hides [data-elfsight-app-lazy] outright in the unfilled case (it will
   never be populated), so this panel never has to share space with it. */
.sec-21-elfsight__fallback {
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 420px;
  border-radius: var(--radius-card);
  text-align: center;
  padding: 2rem;
  background-image: repeating-linear-gradient(
    45deg,
    var(--bone) 0 14px,
    var(--bone-2) 14px 28px
  );
}
.sec-21-elfsight__fallback.is-visible { display: flex; }

.sec-21-elfsight__fallback-note {
  max-width: 38ch;
  margin: 0 auto;
  background: var(--white);
  border: 1px solid var(--line-bone);
  border-radius: var(--radius-card);
  padding: 1.1rem 1.5rem;
  color: var(--text-on-bone-dim);
  font-size: var(--fs-small);
  line-height: 1.5;
}

/* --- "Read every review on Google" link line below the panel --- */
.sec-21-elfsight__link {
  text-align: center;
  margin-top: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
}
.sec-21-elfsight__link a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
  text-decoration: none;
}
.sec-21-elfsight__link a:hover { color: var(--accent-strong); }
.sec-21-elfsight__link a span {
  display: inline-block;
  transition: transform 240ms var(--ease-spring);
}
.sec-21-elfsight__link a:hover span { transform: translateX(4px); }

@media (max-width: 560px) {
  .sec-21-elfsight [data-elfsight-app-lazy],
  .sec-21-elfsight__fallback {
    min-height: 320px;
  }
  .sec-21-elfsight__fallback {
    margin-top: -320px;
  }
}

/* --- Third-party widget colour correction --------------------------------
   Elfsight's Google-reviews widget ships its "Load More" button in bright
   yellow (rgb(255,235,0)), which is the single most off-brand element on the
   page against this site's accent blue and bone ground. The widget renders
   into ordinary DOM (no shadow root), so it can be corrected from here.

   Target ONLY the stable, semantic `es-` prefixed classes. The sibling
   `sc-<hash>` classes are styled-components build hashes and change on every
   Elfsight release, so anything keyed to those would silently stop applying.
   !important is required: styled-components injects a higher-specificity rule.

   If the client would rather fix this upstream, the same change is available
   in the Elfsight dashboard under the widget's colour settings, and this block
   can then be deleted. */
.sec-21-elfsight .es-load-more-button {
  background: var(--accent) !important;
  color: var(--white) !important;
  border-radius: 999px !important;
}
.sec-21-elfsight .es-load-more-button:hover,
.sec-21-elfsight .es-load-more-button:focus-visible {
  background: var(--accent-strong) !important;
}