/* ============================================================
   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-strong);
  text-decoration: none;
}
.sec-21-elfsight__link a:hover { text-decoration: underline; }
.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;
  }
}