/* ============================================================
   Parla con noi (Talk to us) — book-a-call / consultation page.
   Split hero (pitch + calendar) + team band. Uses only DS tokens.
   Built ON the design system (colors_and_type + components + shell);
   load AFTER shell.css.
   ============================================================ */

/* ===== Hero — split: text left, our custom calendar right ===== */
.talk-hero--split { padding: 124px 0 84px; }
@media (max-width: 900px){ .talk-hero--split { padding: 100px 0 64px; } }
.talk-hero--split .wrap.hero-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: center; text-align: left; }
.talk-hero--split .hero-col { display: flex; flex-direction: column; align-items: flex-start; }
.talk-hero--split .hero-col .t-hero { margin-top: 18px; max-width: 15ch; }
.talk-hero--split .hero-bullets { margin-top: 26px; }
.talk-hero--split .trust-wrap { margin-top: 22px; }
.talk-hero--split .hero-cal { align-self: center; }
.talk-hero--split .book-card { padding: 22px 22px 24px; }
.talk-hero--split .bc-body { grid-template-columns: 1.4fr 1fr; gap: 16px; }
.talk-hero--split .slots { gap: 6px; }
.talk-hero--split .slot { padding: 7px 10px; font-size: 13px; border-radius: 7px; }
@media (max-width: 1280px){ .talk-hero--split .wrap.hero-split { gap: 32px; } }
@media (max-width: 980px){ .talk-hero--split .wrap.hero-split { grid-template-columns: 1fr; gap: 38px; } }

/* booking form (shown once a slot is chosen) + states */
.bc-form { display: flex; flex-direction: column; gap: 8px; }
.bc-input { width: 100%; background: #1B2440; border: 1px solid var(--card-line); border-radius: var(--r-input, 8px); color: var(--bone); padding: 10px 12px; font-family: var(--font); font-size: 14px; outline: none; transition: border-color .15s ease; }
.bc-input::placeholder { color: var(--muted); }
.bc-input:focus { border-color: var(--accent, var(--apex-blue)); }
.bc-form .bc-confirm { margin-top: 4px; }
.bc-error { margin: 8px 0 0; text-align: center; font-size: 12px; color: var(--no-red); }
.slots-empty { font-family: var(--font); font-size: 13px; color: var(--muted); padding: 6px 0; }
.bc-done { text-align: center; padding: 6px 0; }
.bc-done-tick { width: 40px; height: 40px; margin: 0 auto 10px; border-radius: 999px; display: grid; place-items: center; color: var(--accent-ink, #fff); background: var(--accent, var(--apex-blue)); }
.bc-done-tick svg { width: 20px; height: 20px; }
.bc-done-title { margin: 0; font-family: var(--font); font-size: 16px; font-weight: 600; color: var(--bone); }
.bc-done .bc-reassure { margin-top: 8px; }

/* ===== Booking calendar card ===== */
.book-card {
  position: relative; z-index: 1;
  background: linear-gradient(168deg, #16213C 0%, #121B33 60%, #0F1830 100%);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-box, 28px);
  padding: 26px 28px 28px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.02), 0 30px 60px -34px rgba(2,4,12,0.7);
}
.book-card::before {
  content: ""; position: absolute; inset: -30% -18% -22% -18%;
  background: radial-gradient(54% 50% at 30% 24%, var(--accent-halo, rgba(30,91,255,.16)), transparent 70%);
  filter: blur(42px); pointer-events: none; z-index: -1;
}
.bc-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 22px; }
.bc-title { font-family: var(--font); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; color: var(--bone); }
.bc-badge {
  display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--r-pill); white-space: nowrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: .04em; color: var(--accent-hi, var(--apex-blue-hi));
  background: rgba(30,91,255,0.12); box-shadow: inset 0 0 0 1px rgba(30,91,255,0.28);
}
.bc-badge i { width: 6px; height: 6px; border-radius: 999px; background: var(--accent, var(--apex-blue)); }

.bc-body { display: grid; grid-template-columns: 1.32fr 1fr; gap: 26px; }

/* month + day grid */
.cal-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cal-month { font-family: var(--font); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--bone); }
.cal-navs { display: flex; gap: 6px; }
.cal-nav {
  appearance: none; cursor: pointer; width: 30px; height: 30px; border-radius: 9px;
  display: grid; place-items: center; color: var(--soft-grey);
  background: rgba(255,255,255,0.04); border: 1px solid var(--hair); transition: background .2s var(--ease), color .2s var(--ease);
}
.cal-nav:hover { background: rgba(255,255,255,0.09); color: var(--bone); }
.cal-nav:disabled { opacity: .35; cursor: not-allowed; }
.cal-nav svg { width: 15px; height: 15px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-dow { text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding-bottom: 6px; }
.cal-day {
  aspect-ratio: 1 / 1; display: grid; place-items: center; border-radius: 10px;
  font-family: var(--font); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--soft-grey);
  cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease), box-shadow .18s var(--ease); user-select: none;
}
.cal-day:hover { background: rgba(255,255,255,0.06); color: var(--bone); }
.cal-day.is-off { color: var(--muted); opacity: .3; pointer-events: none; }
.cal-day.is-empty { pointer-events: none; }
.cal-day.is-today { box-shadow: inset 0 0 0 1px var(--accent-ring, rgba(30,91,255,.5)); }
.cal-day.is-sel { background: var(--accent, var(--apex-blue)); color: var(--accent-ink, #fff); font-weight: 600; box-shadow: 0 8px 20px -8px rgba(30,91,255,.7); }

/* time slots */
.slots-wrap { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.slots-label { flex: 0 0 auto; font-family: var(--mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
/* slots-scroll fills exactly the calendar's height (grid stretch); .slots is absolute inside it
   so its content NEVER grows the card — it scrolls. Card height == calendar height, always. */
.slots-scroll { position: relative; flex: 1 1 0; min-height: 0; }
.slots { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.22) transparent; }
.slots::-webkit-scrollbar { width: 6px; }
.slots::-webkit-scrollbar-track { background: transparent; }
.slots::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 999px; }
.slot {
  appearance: none; cursor: pointer; padding: 11px 14px; border-radius: var(--r-input, 8px);
  background: rgba(255,255,255,0.03); border: 1px solid var(--hair);
  font-family: var(--font); font-size: 14px; font-weight: 500; color: var(--bone); text-align: center;
  font-variant-numeric: tabular-nums; transition: background .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
}
.slot:hover { background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px var(--accent-ring, rgba(30,91,255,.4)); }
.slot.is-sel { background: rgba(30,91,255,0.14); color: var(--accent-hi, var(--apex-blue-hi)); box-shadow: inset 0 0 0 1px var(--accent, var(--apex-blue)); }
.slot:disabled { opacity: .45; cursor: not-allowed; }

.bc-foot { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--hair); }
.bc-confirm { width: 100%; }
.bc-confirm[disabled] { opacity: 1; cursor: not-allowed; }
.bc-reassure { margin: 12px 0 0; text-align: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--muted); }

/* hero check-list bullets */
.claim-list { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.claim-list li { display: flex; align-items: flex-start; gap: 12px; color: var(--soft-grey); font-size: 15.5px; line-height: 1.5; }
.claim-check { flex: 0 0 auto; margin-top: 1px; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; color: var(--accent-hi, var(--apex-blue-hi)); background: rgba(30,91,255,0.14); box-shadow: inset 0 0 0 1px rgba(30,91,255,0.3); }
.claim-check svg { width: 13px; height: 13px; }

/* ===== Team / account managers ===== */
.team-head { max-width: 720px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; }
.team-head .t-h2 { margin-top: 18px; max-width: 22ch; text-wrap: wrap; }
.team-head .t-lede { margin-top: 18px; }
.team-head .aq-btn { margin-top: 30px; }

.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 56px; }
/* Person card — design-system component aq-person (variant B · "in card", design handoff 2026-06) */
.aq-person { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }
.aq-person__photo {
  width: 132px; height: 132px; border-radius: 50%;                 /* SEMPRE cerchio */
  object-fit: cover; object-position: center top;
  box-shadow: inset 0 0 0 2px var(--accent-ring);                  /* anello accent */
}
.aq-person__photo--mono {
  display: grid; place-items: center; user-select: none;
  background:
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 9px, rgba(255,255,255,0.014) 9px 18px),
    linear-gradient(168deg, #1A2647, #0E1730);
  font-family: var(--font); font-size: 38px; font-weight: 600; letter-spacing: -0.02em; color: var(--accent-hi);
}
.aq-person__meta { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.aq-person--card {
  background: var(--card-2); border-radius: var(--r-card, 20px);
  box-shadow: inset 0 0 0 1px var(--card-line);
  padding: 34px 26px 30px; gap: 18px;
}
.p-name { font-family: var(--font); font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--bone); }
.p-cert { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.p-cert svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* ===== Responsive ===== */
@media (max-width: 980px) {
  .team-grid { grid-template-columns: 1fr; max-width: 460px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 560px) {
  .bc-body { grid-template-columns: 1fr; gap: 22px; }
  /* stacked: no calendar height to match → normal flow, capped, scrollable */
  .slots-scroll { position: static; flex: none; }
  .slots { position: static; max-height: 52vh; display: grid; grid-template-columns: repeat(2, 1fr); }
}