/* ------------------------------------------------------------------
   Kendis HubSpot form — loading placeholder

   Paired with hubspot-form.js. The skeleton markup is rendered into the
   form host at build time (see src/pages/[...slug].astro), so the
   placeholder is painted with the first frame instead of being injected
   by JS once the page has already settled.

   The skeleton and the real form share a single grid cell rather than
   being toggled with display:none. A display:none iframe has no width,
   so HubSpot laid the form out against a zero-width box and had to
   re-render the instant it was shown — that re-render was the blank
   white panel that appeared between the skeleton and the finished form.
   Keeping the iframe in layout the whole time means it renders once.

   Greys are alpha-based so the skeleton reads correctly on both the
   white form panels (free-trial, contact) and the dark cards
   (.ep-form-card on the webinar pages).
   ------------------------------------------------------------------ */

.khs-host {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  /* reserves the form's space from first paint — no layout shift when the
     skeleton is swapped out */
  min-height: 400px;
}

/* skeleton + whatever HubSpot injects all occupy the same cell, at the
   host's full content width (inside its padding, unlike an absolutely
   positioned overlay) */
.khs-host > * {
  grid-area: 1 / 1;
  min-width: 0;
}

/* the form is laid out and rendering from the start, just not painted yet */
.khs-host > *:not(.khs-skeleton) {
  opacity: 0;
  transition: opacity 0.25s ease;
}

/* Once the form is up, layout goes back to it completely: no forced grid
   stretch (HubSpot sizes its own frame) and no reserved height, so a form
   shorter than the placeholder doesn't leave an empty panel below it. */
.khs-host.is-ready {
  display: block;
  min-height: 0;
}

.khs-host.is-ready > *:not(.khs-skeleton) {
  opacity: 1;
}

.khs-skeleton {
  position: relative;
  z-index: 2; /* stacks above the form, which is injected after it */
  display: block;
  width: 100%;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Lifted out of flow so it can fade away over the top of the form rather
   than pushing it down for the length of the transition. hubspot-form.js
   removes it from the DOM once the fade has run. */
.khs-host.is-ready > .khs-skeleton {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.khs-line {
  display: block;
  border-radius: 6px;
  background-color: rgba(128, 128, 128, 0.16);
  background-image: linear-gradient(
    90deg,
    rgba(128, 128, 128, 0) 0%,
    rgba(128, 128, 128, 0.22) 50%,
    rgba(128, 128, 128, 0) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: khs-shimmer 1.4s ease-in-out infinite;
}

.khs-line + .khs-line {
  margin-top: 8px;
}

.khs-label {
  width: 38%;
  height: 12px;
}

.khs-field {
  width: 100%;
  height: 42px;
  margin-bottom: 18px;
}

.khs-button {
  width: 168px;
  height: 46px;
  border-radius: 8px;
  margin-top: 6px;
}

@keyframes khs-shimmer {
  0% {
    background-position: 150% 0;
  }
  100% {
    background-position: -50% 0;
  }
}

/* respect users who have asked for less motion */
@media (prefers-reduced-motion: reduce) {
  .khs-line {
    animation: none;
  }
  .khs-skeleton,
  .khs-host > *:not(.khs-skeleton) {
    transition: none;
  }
}

@media (max-width: 767px) {
  .khs-host {
    min-height: 360px;
  }
  .khs-field {
    height: 38px;
    margin-bottom: 14px;
  }
  .khs-button {
    width: 140px;
    height: 42px;
  }
}