/* ============================================================
 * Be-Boost website — preview chrome
 * Forked + extended from /ui_kits/beboost-website/site.css
 * ============================================================ */
@import url("./assets/colors_and_type.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { background: var(--bg); color: var(--fg-1); }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* ── Containers ─────────────────────────────────────────────── */
.container { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.container--wide { max-width: 1440px; }
.container--narrow { max-width: 880px; }

/* ── Section spacing — switchable by density tweak ─────────── */
.bb-density-airy   .section { padding: 112px 0; }
.bb-density-normal .section { padding: 96px 0; }
.bb-density-compact .section { padding: 64px 0; }
.section { padding: 96px 0; }

/* ── Buttons ────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.005em;
  padding: 14px 22px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  transition: background 140ms ease, transform 80ms ease, color 140ms ease, border-color 140ms ease;
  text-decoration: none;
  white-space: nowrap;
}
.btn--primary {
  background: var(--bb-yellow);
  color: var(--bb-ink);
}
.btn--primary:hover { background: var(--bb-yellow-hover); }
.btn--primary:active { transform: scale(0.98); filter: brightness(0.95); }

.btn--secondary {
  background: transparent;
  color: var(--accent-deep);
  border: 1.5px solid var(--accent);
  padding: 12.5px 20.5px;
  font-weight: 500;
}
.btn--secondary:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

.btn--ghost-dark {
  background: transparent;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.4);
  border-radius: 0;
  padding: 4px 0;
  font-weight: 500;
}
.btn--ghost-dark:hover { border-bottom-color: rgba(255,255,255,.9); }

/* ── Cards ──────────────────────────────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--bg-divider);
  border-radius: 18px;
  padding: 32px;
  transition: border-color 160ms ease;
}
.card--lg { border-radius: 24px; padding: 40px; }
.card--clickable:hover { border-color: var(--bb-warm-grey); }

/* ── Pill / badge ───────────────────────────────────────────── */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent-deep);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 5px 12px;
  border-radius: 999px;
  font-family: var(--font-sans);
}
.pill--mono { font-family: var(--font-mono); letter-spacing: 0.04em; }
.pill--ai { background: var(--bb-aubergine); color: var(--bb-clay); border: 1px solid var(--bb-clay-deep); }

/* ── Eyebrow / italic — direct CSS classes (no JSX needed) ─── */
.eyebrow-muted {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bb-warm-grey);
  margin: 0;
}

/* ── Stripe ─────────────────────────────────────────────────── */
.stripe { height: 4px; }
.stripe--yellow { background: var(--bb-yellow); }
.stripe--green  { background: var(--bb-green); }
.stripe--clay   { background: var(--bb-clay); }

/* ── Divider ────────────────────────────────────────────────── */
.hairline { height: 1px; background: var(--bg-divider); border: 0; margin: 0; }

/* ── Forms ──────────────────────────────────────────────────── */
.field-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--bb-ink);
  margin-bottom: 6px;
}
.field-input,
.field-textarea,
.field-select {
  width: 100%;
  background: var(--bb-bone);
  border: 1px solid var(--bg-divider);
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--bb-ink);
  outline: none;
  transition: border-color 120ms ease;
}
.field-input:focus,
.field-textarea:focus,
.field-select:focus { border-color: var(--bb-ink); }
.field-textarea { resize: vertical; }

/* ── Mono row ───────────────────────────────────────────────── */
.mono-row {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--bb-warm-grey);
  letter-spacing: 0.02em;
}

/* ── Reveal-on-scroll ───────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 600ms ease, transform 600ms ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Mobile drawer slide-in ─────────────────────────────────── */
@keyframes bb-drawer-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Caret blink (AI chat) ──────────────────────────────────── */
@keyframes blinkCaret { 0%,49%{opacity:1} 50%,100%{opacity:0} }
.caret-blink {
  display: inline-block;
  width: 8px;
  height: 14px;
  background: var(--bb-clay);
  margin-left: 3px;
  vertical-align: text-bottom;
  animation: blinkCaret 1.05s steps(1) infinite;
}

/* ── Hover link underline ───────────────────────────────────── */
.link-underline {
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: color 140ms ease;
}
.link-underline:hover { color: var(--accent-deep); }

/* ── Progress bar (ESG hero card) ──────────────────────────── */
.progress-track {
  height: 4px;
  background: var(--bg-divider);
  border-radius: 999px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--bb-green);
  transition: width 800ms cubic-bezier(.22,.61,.36,1);
}

/* ── Counters ───────────────────────────────────────────────── */
.counter-num {
  font-feature-settings: "tnum" on, "lnum" on;
  font-variant-numeric: tabular-nums;
}

/* ── Mobile menu placeholder (sticky header) ──────────────── */
.nav-link {
  font-size: 14px;
  font-weight: 500;
  color: var(--bb-ink);
  transition: color 140ms ease;
}
.nav-link:hover { color: var(--accent-deep); border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.nav-link.is-active { font-weight: 600; }

/* ── Headings utility ──────────────────────────────────────── */
.h-display {
  font-size: clamp(48px, 6.2vw, 88px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
  margin: 0;
}
.h-display--mid { font-size: clamp(40px, 5.2vw, 72px); }
.h-display--sm  { font-size: clamp(32px, 3.6vw, 48px); }

/* ============================================================
 * MOBILE · breakpoint 768px
 * Riduce font, padding, e collassa griglie 2-3 col a singola col.
 * Nasconde hint testuali poco utili su mobile per ridurre rumore.
 * ============================================================ */
@media (max-width: 768px) {
  .container, .container--wide, .container--narrow { padding: 0 20px; }

  /* Section padding ridotto */
  .bb-density-airy   .section,
  .bb-density-normal .section,
  .bb-density-compact .section,
  .section { padding: 48px 0; }

  /* Header navigation · desktop nav nascosta, hamburger visibile */
  .bb-nav-desktop { display: none !important; }
  .bb-nav-toggle  { display: inline-flex !important; }
  .bb-header-tagline { display: none !important; }
  .bb-header-row { gap: 12px !important; }

  /* Headings compatti */
  .h-display { font-size: clamp(36px, 9vw, 56px); }
  .h-display--mid { font-size: clamp(30px, 7.5vw, 44px); }
  .h-display--sm { font-size: clamp(24px, 6vw, 34px); }

  /* Collassa griglie 2-3 col → 1 col · ovunque ci sia un grid inline */
  [style*="grid-template-columns: 1fr 1fr"],
  [style*="gridTemplateColumns:\"1fr 1fr\""],
  [style*="grid-template-columns: 5fr 6fr"],
  [style*="grid-template-columns: 5fr 7fr"],
  [style*="grid-template-columns: 7fr 5fr"],
  [style*="grid-template-columns: 6fr 5fr"],
  [style*="grid-template-columns: 1fr 2fr"],
  [style*="grid-template-columns: 2fr 1fr 1fr 1fr"],
  [style*="grid-template-columns: 5fr 4fr"],
  [style*="grid-template-columns: 5fr 7fr"],
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns: repeat(5, 1fr)"],
  [style*="grid-template-columns: 80px 5fr 7fr"],
  [style*="grid-template-columns: 72px 4fr 8fr"],
  [style*="grid-template-columns: 80px 4fr 7fr"],
  [style*="grid-template-columns: 2fr 3fr 2fr"] {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  /* Home hero · meno padding, hint nascosto */
  .bb-home-hero .container { padding: 56px 20px 40px !important; }
  .bb-home-hero-hint { display: none !important; }
  .bb-home-hero-lead { grid-template-columns: 1fr !important; }

  /* Card / pannelli generici */
  .card, .card--lg { padding: 24px !important; border-radius: 16px !important; }

  /* Buttons più compatti */
  .btn { padding: 12px 18px; font-size: 14px; }
  .btn--primary { padding: 12px 18px; }

  /* Counter big numbers */
  .counter-num { font-size: 40px !important; }

  /* Tweaks panel · sposto in basso a destra ma più piccolo */
  .bb-tweaks { bottom: 12px !important; right: 12px !important; max-width: 240px !important; }

  /* ESG hero · OperiaPreviewCard più piccola, ordine inverso (foto sopra titolo) */
  .bb-esg-hero-grid { padding: 40px 20px !important; gap: 32px !important; }
  .bb-operia-preview {
    aspect-ratio: 16 / 10 !important;
    padding: 22px !important;
    border-radius: 16px !important;
  }
  .bb-operia-preview > div:last-child > div:nth-child(2) > div:first-child {
    font-size: 44px !important;
  }

  /* ESG selector card · padding più stretto */
  .bb-esg-selector {
    padding: 18px 16px 16px !important;
    margin-top: 24px !important;
  }
  .bb-esg-selector h3 { font-size: 18px !important; }

  /* ESG strip (Premio + Academy) · stack verticale, allinea a sinistra */
  .bb-esg-strip {
    flex-direction: column !important;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 10px !important;
    padding: 14px 20px !important;
  }
  .bb-esg-strip > div { gap: 10px !important; }
  .bb-esg-strip span { font-size: 13px !important; }

  /* OperiaPreviewCard label fixes su mobile */
  .bb-operia-preview .counter-num { font-size: 40px !important; }
}

/* ============================================================
 * MOBILE SMALL · < 480px · ulteriore stretta
 * ============================================================ */
@media (max-width: 480px) {
  .container, .container--wide, .container--narrow { padding: 0 16px; }
  .h-display { font-size: 36px; line-height: 1.05; }
  .h-display--sm { font-size: 22px; }
  .section { padding: 36px 0; }
}