/**
 * Crescita Studio — Prenota (booking page).
 *
 * Loaded only on this page (crescita_prenota_enqueue()). Built on the shared
 * tokens; it introduces no colour, font or scale that tokens.css does not
 * already define.
 *
 * The design brief is subtractive: the page's only success condition is that
 * a visitor picks a slot, so everything above the widget is sized to get out
 * of its way. The hero is deliberately shorter than every other page's — the
 * calendar reaches the first screen on a laptop rather than sitting below it.
 */

/* ── Hero ─────────────────────────────────────────────────────────────
   Sand, not Midnight. The report's close made the same move for the same
   reason: this is the surface that invites rather than diagnoses, and the
   Calendly widget renders on a light ground, so a dark band directly above
   it would read as an unrelated component bolted on top. */
.crescita-prenota-hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.75rem, 3vw, 2.5rem);
}

.crescita-prenota-glow {
  position: absolute;
  left: 50%;
  top: 40%;
  width: min(680px, 100vw);
  height: min(680px, 100vw);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(30, 58, 95, 0.11) 0%, transparent 68%);
}

.crescita-prenota-title {
  font-family: var(--font-primary);
  /* 700, not --weight-heading (500). Every other H1 on the site — home.css
     and diagnosi.css both — locally overrides h1 to font-weight: 700 for
     display use; --weight-heading is the base token for h1/h2/h3 generally,
     lighter by design, and using it here was the actual defect: it read as
     a different, thinner typeface next to every other headline sitewide. */
  font-weight: 700;
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  line-height: var(--leading-h1);
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-sm);
  /* The sitewide headline sweep — founder direction 2026-09-08, one H1
     treatment everywhere. Unsequenced here: this page has no CTA gloss to
     hand off to, since its only action lives inside the Calendly iframe.
     `color` is set by the fallbacks below, not here — a Midnight fill would
     otherwise win over the transparent one this effect needs. */
  background-image: var(--h1-sweep);
  background-size: 200% 100%;
  background-position: 143% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: crescita-h1-gloss-sweep 6s linear infinite;
}

/* Transparent text over a background image is invisible wherever that image
   does not paint, so this restores a flat fill rather than only stopping the
   motion. The print case is handled alongside the other headlines in
   components.css. */
@media (prefers-reduced-motion: reduce) {
  .crescita-prenota-title {
    animation: none;
    background-image: none;
    color: var(--crescita-midnight);
    -webkit-text-fill-color: var(--crescita-midnight);
  }
}

.crescita-prenota-lede {
  font-size: var(--text-lede);
  line-height: var(--leading-body);
  color: var(--color-text-secondary);
  max-width: 46ch;
  margin: 0 auto var(--space-md);
}

/* ── The widget ───────────────────────────────────────────────────────── */
.crescita-prenota-booking {
  padding-block: 0 var(--space-section);
}

/* Width and centring only — deliberately no background, border, radius or
   shadow.

   It had all four, and they produced a white ring: the panel painted #fff
   behind an iframe that renders its own Sand ground, so the difference showed
   as a frame. The fix is not to repaint it to match. Calendly owns what is
   inside that iframe and can change it on any deploy or plan change, so any
   colour agreed here is a guess with a shelf life — painting a surface behind
   a surface you do not control is the bug, and matching it would only hide it
   until the next time.

   Dropping the chrome is also the better answer to the page's brief. Calendly
   already draws a bordered, rounded card of its own, so this was a second
   frame around the only thing the page exists for. */
.crescita-prenota-panel {
  max-width: 960px;
  margin: 0 auto;
}

/* The fallback height only. prenota.js replaces it on every step of the
   Calendly flow from the height Calendly itself reports, because no single
   number is correct for the calendar, the time list and the confirmation form
   at once. This value is deliberately on the generous side: if the script
   never runs, an embed with spare white below it still books, and one clipped
   mid-form does not. */
.crescita-prenota-widget {
  display: block;
  width: 100%;
  height: 900px;
}

/* JS-off path. Carries its own padding — the panel has none, and without it
   the message and its button would sit flush against the surrounding copy and
   read as a broken embed rather than a deliberate fallback. */
.crescita-prenota-fallback {
  padding: var(--space-xl) var(--space-md);
  text-align: center;
}

.crescita-prenota-fallback p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-md);
}

/* The one link off this page, and it is deliberately the quietest thing on
   it: some visitors will not book from a calendar, and a dead end costs more
   than a small exit. Sized and coloured as metadata, well below the panel. */
.crescita-prenota-note {
  text-align: center;
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  margin: var(--space-md) 0 0;
}

.crescita-prenota-note a {
  color: var(--color-link);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 782px) {
  .crescita-prenota-hero {
    padding-block: clamp(1.5rem, 4vw, 2.25rem) var(--space-md);
  }
}