/* ============================================================
   Landing "Volt · cold glass" — Consulente
   Estratto da landing-v2/proposta-b-cons.html, prefissato lv- e
   scopato a #fl-landing.lv-landing per non collidere con lo
   stile esistente del playground (css/styles.css, css/board-kanban.css).

   Palette: Yoyomove brand (amber/blu/verde/rosso/viola) — vedi
   token qui sotto. Non magenta/cyan/chartreuse/purple.
   ============================================================ */

/* ---- Sofia Pro @font-face (locale, css sta in public/css/, fonts in public/fonts/sofia-pro/) ---- */
@font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/sofia-pro/SofiaProLight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/sofia-pro/SofiaProLight-Italic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/sofia-pro/SofiaProRegular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/sofia-pro/SofiaProRegular-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/sofia-pro/SofiaProMedium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/sofia-pro/SofiaProMedium-Italic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/sofia-pro/SofiaProBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/sofia-pro/SofiaProBold-Italic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Sofia Pro';
    src: url('../fonts/sofia-pro/SofiaProBlack.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

#fl-landing.lv-landing{
  --lv-bg:#0a0b0d;
  --lv-fg:#e8ecf5;
  --lv-muted:#8b8f98;
  --lv-amber:#f59e0b;
  --lv-amber-warm:#fbbf24;
  --lv-blue:#3b82f6;
  --lv-blue-tenue:#60a5fa;
  --lv-green:#22c55e;
  --lv-red:#ef4444;
  --lv-violet:#a78bfa;
  --lv-gray:#6b7280;
  --lv-glass:rgba(18,20,26,0.55);
  --lv-hair:rgba(255,255,255,0.10);
  --lv-label-sm:#a5b0c8;
  --lv-label-lg:#f7dcae;
  --lv-chip-bg:rgba(20,25,55,0.35);

  position:relative;
  color:var(--lv-fg);
  font-family:'Manrope',ui-sans-serif,system-ui,sans-serif;
  font-weight:500;
  overflow-x:hidden;

  /* Layout: hero(35%) | rinnovi+flotta(65%) — sovrascrive con priorità
     (ID+classe) l'eventuale .bento-grid legacy di css/styles.css che
     imponeva un grid 1fr 1fr non voluto su questo stesso elemento
     (stesse classi condivise nel markup). */
  display:grid;
  grid-template-columns:35fr 42fr 23fr;
  grid-template-rows:auto;
  gap:24px;
  align-items:stretch;
  max-width:1320px;
  margin:0 auto;
  padding:52px 40px 100px;
}

#fl-landing.lv-landing a{color:inherit;text-decoration:none;}
#fl-landing.lv-landing .lv-mono{font-family:'JetBrains Mono',ui-monospace,monospace;}

/* ---------- Sofia Pro roles ----------
   .lv-italic-serif → micro-copy (Regular 400 italic)
   .lv-title-serif  → titoli sezione (Medium 500)
   .lv-num-serif    → numeri chip piccoli (Bold 700); il KPI gigante
   (.lv-rinnovi-num) e il titolo hero (.lv-statement) hanno override
   dedicati più sotto, dato che condividono queste classi ma richiedono
   pesi diversi (Light 300 / Bold 700 non-italic). */
#fl-landing.lv-landing .lv-italic-serif{font-family:'Sofia Pro',serif;font-style:italic;font-weight:400;}
#fl-landing.lv-landing .lv-title-serif{font-family:'Sofia Pro',serif;font-style:normal;font-weight:500;}
#fl-landing.lv-landing .lv-num-serif{font-family:'Sofia Pro',serif;font-style:normal;font-weight:700;}

/* ---------- aurora background ---------- */
#fl-landing.lv-landing .lv-aurora{
  position:fixed;inset:0;
  overflow:hidden;
  z-index:-2;
  background:var(--lv-bg);
}
#fl-landing.lv-landing .lv-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(140px) saturate(140%);
  mix-blend-mode:screen;
}
/* b1 grande top-left: amber · b2 centrale: blu · b3 bottom-right: viola tenue
   b4 bottom-left sottile: verde · b5 top-right piccolo: amber warm · b6 mid piccolo: blu tenue */
#fl-landing.lv-landing .lv-blob.lv-b1{width:60vw;height:60vw;top:-14%;left:-12%;background:var(--lv-amber);opacity:0.35;}
#fl-landing.lv-landing .lv-blob.lv-b2{width:52vw;height:52vw;top:18%;left:32%;background:var(--lv-blue);opacity:0.28;}
#fl-landing.lv-landing .lv-blob.lv-b3{width:58vw;height:58vw;bottom:-18%;right:-10%;background:var(--lv-violet);opacity:0.30;}
#fl-landing.lv-landing .lv-blob.lv-b4{width:46vw;height:46vw;bottom:-10%;left:-8%;background:var(--lv-green);opacity:0.20;}
#fl-landing.lv-landing .lv-blob.lv-b5{width:26vw;height:26vw;top:-6%;right:6%;background:var(--lv-amber-warm);opacity:0.22;}
#fl-landing.lv-landing .lv-blob.lv-b6{width:34vw;height:34vw;top:42%;right:-8%;background:var(--lv-blue-tenue);opacity:0.18;}

#fl-landing.lv-landing .lv-grain{
  position:fixed;inset:0;z-index:-1;
  pointer-events:none;opacity:0.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- glass base ---------- */
#fl-landing.lv-landing .lv-glass{
  position:relative;
  background:var(--lv-glass);
  -webkit-backdrop-filter:blur(40px) saturate(160%) brightness(110%);
  backdrop-filter:blur(40px) saturate(160%) brightness(110%);
  border:1px solid var(--lv-hair);
  border-radius:20px;
  box-shadow:0 40px 100px -20px rgba(0,0,0,0.50), inset 0 1px 0 rgba(255,255,255,0.08);
}
#fl-landing.lv-landing .lv-glass::before{
  content:"";position:absolute;top:0;left:24px;right:24px;height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
}

/* ---------- mini glass chips ---------- */
#fl-landing.lv-landing .lv-glass-chip{
  background:var(--lv-chip-bg);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
  backdrop-filter:blur(20px) saturate(140%);
  border:1px solid var(--lv-hair);
  border-radius:12px;
  padding:14px 18px;
  display:flex;flex-direction:column;
}
#fl-landing.lv-landing .lv-chip-num{font-size:40px;line-height:1;color:var(--lv-fg);}
#fl-landing.lv-landing .lv-chip-lbl{
  font-family:'Sofia Pro',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--lv-label-sm);
  margin-top:8px;
}

/* label style reserved per una caption sopra un KPI grande
   (non attaccata a nessun elemento in questo layout — tenuta
   disponibile per riuso futuro) */
#fl-landing.lv-landing .lv-kpi-label-lg{
  font-family:'Sofia Pro',sans-serif;
  font-size:13px;font-weight:900;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--lv-label-lg);
}

/* ---------- hero ---------- */
#fl-landing.lv-landing .lv-hero{
  grid-column:1;
  grid-row:1;
  padding:0;
  position:relative;z-index:1;
  display:flex;flex-direction:column;justify-content:center;
  background:transparent;
}
#fl-landing.lv-landing .lv-hero-meta{
  display:flex;justify-content:space-between;align-items:flex-start;
  margin-bottom:26px;flex-wrap:wrap;gap:10px;
}
#fl-landing.lv-landing .lv-hero-meta .lv-eyebrow-group{display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
#fl-landing.lv-landing .lv-eyebrow{
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:var(--lv-fg);
}
#fl-landing.lv-landing .lv-subtitle{
  font-size:11px;letter-spacing:3px;text-transform:uppercase;
  color:var(--lv-muted);
}
#fl-landing.lv-landing .lv-dot-sep{color:var(--lv-muted);}
#fl-landing.lv-landing .lv-page-num{
  font-size:12px;letter-spacing:2px;color:var(--lv-muted);
}
#fl-landing.lv-landing .lv-statement{
  font-family:'Sofia Pro',serif;
  font-style:normal;font-weight:700;
  font-size:clamp(34px,4vw,84px);
  line-height:1.04;
  max-width:100%;
  color:var(--lv-fg);
}
#fl-landing.lv-landing .lv-statement em{
  font-style:normal;color:var(--lv-amber);
}
#fl-landing.lv-landing .lv-timestamp{
  margin-top:22px;
  font-size:11px;letter-spacing:2px;
  color:var(--lv-muted);
}

/* ---------- composition ---------- */
#fl-landing.lv-landing .lv-compose{
  grid-column:2 / 4;
  grid-row:1;
  display:grid;
  grid-template-columns:42fr 23fr;
  gap:24px;align-items:stretch;
}
#fl-landing.lv-landing .lv-panel{
  padding:32px;
  display:flex;flex-direction:column;
  cursor:pointer;
}
/* Colonna Flotta più stretta (23%): padding e chip più contenuti */
#fl-landing.lv-landing .lv-panel.lv-flotta{padding:26px 22px;}
#fl-landing.lv-landing .lv-panel.lv-flotta .lv-glass-chip{padding:11px 14px;}

/* Tag pannello: Rinnovi (Live) → amber, Flotta (Assegnata) → blu */
#fl-landing.lv-landing .lv-panel-tag{
  display:inline-flex;align-self:flex-start;
  font-size:10px;letter-spacing:3px;text-transform:uppercase;
  color:var(--lv-blue);
  border:1px solid rgba(59,130,246,0.35);
  background:rgba(59,130,246,0.06);
  padding:6px 12px;border-radius:999px;
  margin-bottom:22px;
}
#fl-landing.lv-landing .lv-panel.lv-rinnovi .lv-panel-tag{
  color:var(--lv-amber);
  border-color:rgba(245,158,11,0.35);
  background:rgba(245,158,11,0.06);
}
#fl-landing.lv-landing .lv-panel-title{
  font-size:22px;color:var(--lv-fg);
  margin-bottom:6px;
}
#fl-landing.lv-landing .lv-panel-micro{
  font-size:13px;color:var(--lv-muted);
  max-width:34ch;margin-bottom:8px;
}

/* ---------- rinnovi hero number (Pendenti Consulente) → amber ---------- */
#fl-landing.lv-landing .lv-rinnovi-figure{
  display:flex;align-items:center;gap:22px;
  margin:18px 0 4px;
}
#fl-landing.lv-landing .lv-rinnovi-num{
  font-family:'Sofia Pro',serif;
  font-style:normal;font-weight:300;
  font-size:clamp(110px,13vw,180px);
  line-height:0.88;
  color:var(--lv-amber);
}
/* dot pulsante: rosso con glow amber attorno */
#fl-landing.lv-landing .lv-pulse-dot{
  position:relative;width:12px;height:12px;border-radius:50%;
  background:var(--lv-red);flex-shrink:0;margin-bottom:.4em;
}
#fl-landing.lv-landing .lv-pulse-dot::after{
  content:"";position:absolute;inset:-8px;border-radius:50%;
  border:1px solid var(--lv-amber);
  animation:lv-pulse 2s infinite;
}
@keyframes lv-pulse{
  0%{transform:scale(0.5);opacity:0.9;}
  100%{transform:scale(2.2);opacity:0;}
}
#fl-landing.lv-landing .lv-rinnovi-caption{
  font-size:16px;color:var(--lv-muted);
  margin-bottom:30px;
}

#fl-landing.lv-landing .lv-stat-row{
  display:flex;gap:14px;flex-wrap:wrap;
  border-top:1px solid var(--lv-hair);
  padding-top:22px;margin-top:auto;
}
#fl-landing.lv-landing .lv-stat-chip{flex:1 1 120px;}
/* Confermati (1°) → verde, Scaduti (2°) → rosso, Trattativa (3°, .lv-chartreuse) → viola tenue */
#fl-landing.lv-landing .lv-stat-row .lv-stat-chip:nth-child(1) .lv-chip-num{color:var(--lv-green);}
#fl-landing.lv-landing .lv-stat-row .lv-stat-chip:nth-child(2) .lv-chip-num{color:var(--lv-red);}
#fl-landing.lv-landing .lv-stat-chip .lv-chip-num.lv-chartreuse{color:var(--lv-violet);}

/* ---------- flotta KPIs (Contratti/Provider/Regioni) → blu ---------- */
#fl-landing.lv-landing .lv-kpi-stack{
  display:flex;flex-direction:column;gap:14px;
  margin:6px 0 auto;
}
#fl-landing.lv-landing .lv-kpi-stack .lv-glass-chip .lv-chip-num{color:var(--lv-blue);font-size:30px;}

/* ---------- CTA ---------- */
#fl-landing.lv-landing .lv-cta{
  align-self:flex-start;
  margin-top:28px;
  display:inline-flex;align-items:center;gap:10px;
  font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--lv-fg);
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:999px;
  padding:13px 22px;
  -webkit-backdrop-filter:blur(20px);
  backdrop-filter:blur(20px);
  transition:border-color .2s ease, background .2s ease, transform .2s ease;
}
#fl-landing.lv-landing .lv-panel.lv-rinnovi .lv-cta:hover{border-color:var(--lv-amber);background:rgba(245,158,11,0.12);color:var(--lv-bg);transform:translateX(2px);}
#fl-landing.lv-landing .lv-panel.lv-flotta .lv-cta:hover{border-color:var(--lv-blue);background:rgba(59,130,246,0.12);transform:translateX(2px);}
#fl-landing.lv-landing .lv-cta .lv-arrow{transition:transform .2s ease;}
#fl-landing.lv-landing .lv-cta:hover .lv-arrow{transform:translateX(3px);}

@media (max-width:900px){
  #fl-landing.lv-landing{grid-template-columns:1fr;padding:40px 20px 60px;}
  #fl-landing.lv-landing .lv-hero{grid-column:1;grid-row:auto;padding:0 0 32px;}
  #fl-landing.lv-landing .lv-compose{grid-column:1;grid-row:auto;grid-template-columns:1fr;gap:20px;}
  #fl-landing.lv-landing .lv-panel.lv-rinnovi,
  #fl-landing.lv-landing .lv-panel.lv-flotta{max-width:100%;}
  #fl-landing.lv-landing .lv-rinnovi-num{font-size:clamp(120px,32vw,220px);}
  #fl-landing.lv-landing .lv-chip-num{font-size:32px;}
  #fl-landing.lv-landing .lv-kpi-stack .lv-glass-chip .lv-chip-num{font-size:32px;}
  #fl-landing.lv-landing .lv-stat-row{gap:10px;}
  #fl-landing.lv-landing .lv-stat-chip{flex:1 1 40%;}
}

/* ============================================================
   FIX LAYOUT URGENTE [2026-09-04] — fullscreen no-scroll
   Hero compatto in alto + grid 2 pannelli (1.7fr/1fr) che riempie
   il viewport senza scroll interno. Override in cascata (stessa
   specificità #fl-landing.lv-landing, dichiarato dopo → vince) sulle
   regole grid/hero/panel sopra definite.
   ============================================================ */

/* ---- 1. Container principale: da grid 3 colonne a flex verticale ---- */
#fl-landing.lv-landing {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    height: calc(100vh - 200px) !important;
    min-height: 600px;
    overflow: hidden !important;
    padding: 0 !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
}

/* ---- 2. Hero compatto in alto ---- */
#fl-landing.lv-landing .lv-hero {
    flex: 0 0 auto;
    background: transparent !important;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 60px;
    max-height: 100px;
}
#fl-landing.lv-landing .lv-hero-meta {
    display: flex; align-items: center; gap: 8px;
}
#fl-landing.lv-landing .lv-eyebrow-group {
    display: flex; align-items: center; gap: 8px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px; letter-spacing: 2px;
    color: #8b8f98; text-transform: uppercase;
}
#fl-landing.lv-landing .lv-statement {
    font-family: 'Sofia Pro', sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: clamp(28px, 3.4vw, 44px) !important;
    letter-spacing: -0.02em;
    line-height: 1;
    margin: 0;
    color: #f0f2f7;
    white-space: nowrap;
}

/* ---- 3. Compose grid: 2 colonne (1.7fr / 1fr) ---- */
#fl-landing.lv-landing .lv-compose {
    flex: 1 1 auto;
    display: grid !important;
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: 20px;
    min-height: 0;
    overflow: hidden;
}

/* ---- 4. Pannelli: altezza piena del proprio slot ---- */
#fl-landing.lv-landing .lv-panel {
    height: 100%; min-height: 0;
    display: flex; flex-direction: column;
    padding: clamp(20px, 2.5vw, 32px);
    box-sizing: border-box; overflow: hidden;
}
#fl-landing.lv-landing .lv-rinnovi { justify-content: space-between; }
#fl-landing.lv-landing .lv-flotta { justify-content: flex-start; }

/* ---- 5. KPI grande "3" + chip proporzionati ---- */
#fl-landing.lv-landing .lv-rinnovi-num {
    font-family: 'Sofia Pro', sans-serif !important;
    font-weight: 300 !important;
    font-style: normal !important;
    font-size: clamp(140px, 24vh, 300px) !important;
    line-height: 0.85;
    color: #f59e0b;
}
#fl-landing.lv-landing .lv-chip-num {
    font-family: 'Sofia Pro', sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
    font-size: clamp(28px, 3vh, 40px);
}
#fl-landing.lv-landing .lv-chip-lbl {
    font-size: 10.5px; letter-spacing: 1.2px;
}
#fl-landing.lv-landing .lv-stat-chip,
#fl-landing.lv-landing .lv-glass-chip {
    padding: 10px 12px;
}

/* ---- 6. Responsive: torna a scroll normale sotto 900px ---- */
@media (max-width: 900px) {
    #fl-landing.lv-landing {
        height: auto !important; overflow: visible !important;
    }
    #fl-landing.lv-landing .lv-compose {
        grid-template-columns: 1fr; grid-template-rows: auto auto;
    }
}

/* =============================================================
 * PATCH BUGFIX 2026-09-04 — fit reale viewport + click intero panel
 * ============================================================= */

/* Container: min-height dvh, no overflow hidden */
#fl-landing.lv-landing {
    height: auto !important;
    min-height: calc(100dvh - 230px);
    max-height: calc(100dvh - 80px);
    overflow: visible !important;
}

/* Hero più compatto */
#fl-landing.lv-landing .lv-hero {
    max-height: 80px !important;
}
#fl-landing.lv-landing .lv-statement {
    font-size: clamp(22px, 2.6vw, 32px) !important;
}

/* Compose grid: gap ridotto */
#fl-landing.lv-landing .lv-compose {
    gap: 14px !important;
}

/* Pannelli: padding ridotto + cliccabili + hover */
#fl-landing.lv-landing .lv-panel {
    padding: clamp(16px, 2vw, 24px) !important;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
#fl-landing.lv-landing .lv-panel:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.20);
}

/* KPI grande "3": ridotto per far stare CTA */
#fl-landing.lv-landing .lv-rinnovi-num {
    font-size: clamp(100px, 18vh, 220px) !important;
}

/* Chip più compatti */
#fl-landing.lv-landing .lv-chip-num {
    font-size: clamp(22px, 2.4vh, 32px) !important;
}
#fl-landing.lv-landing .lv-stat-chip,
#fl-landing.lv-landing .lv-glass-chip {
    padding: 8px 10px !important;
}

/* Micro-copy: più piccola */
#fl-landing.lv-landing .lv-panel-micro,
#fl-landing.lv-landing .lv-rinnovi-caption {
    font-size: 12px !important;
}

/* CTA sempre pushato in fondo al pannello */
#fl-landing.lv-landing .lv-cta {
    margin-top: auto !important;
}