/* ============================================================
   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).
   The widget div stays invisible (but present, so Elfsight can mount
   into it) until js/sections/21-elfsight.js confirms it has real
   content, then fades in over the loading skeleton below. */
.sec-21-elfsight [data-elfsight-app-lazy] {
  display: block;
  width: 100%;
  min-height: 420px;
  opacity: 0;
  transition: opacity 320ms var(--ease-out);
}

.sec-21-elfsight [data-elfsight-app-lazy].is-loaded {
  opacity: 1;
}

/* --- Loading skeleton: shown while the third-party widget boots
   (typically a few seconds) so the panel never reads as broken/blank --- */
.sec-21-elfsight__loading {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  min-height: 420px;
  margin-top: -420px;
  color: var(--text-on-bone-dim);
  font-size: var(--fs-small);
}

.sec-21-elfsight__loading.is-visible {
  display: flex;
}

.sec-21-elfsight__spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid var(--line-bone);
  border-top-color: var(--accent);
  animation: sec-21-elfsight-spin 800ms linear infinite;
}

@keyframes sec-21-elfsight-spin {
  to { transform: rotate(360deg); }
}

html.reduced-motion .sec-21-elfsight__spinner {
  animation-duration: 1600ms;
}

/* --- 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 { 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,
  .sec-21-elfsight__loading {
    min-height: 320px;
  }
  .sec-21-elfsight__fallback,
  .sec-21-elfsight__loading {
    margin-top: -320px;
  }
}