@import url('lance-theme.css');
/* ═══════════════════════════════════════════════════════════
   Lance Hero — GR Servizi
   Sfondo chiaro, split 2 colonne: copy + immagine. Stats strip.
   Classi: lhero-  |  Variabili: --red --gold --ink --bg --muted --surface --f-display --f-body
   ═══════════════════════════════════════════════════════════ */

.lhero{ background:var(--bg,#f6f4ef); overflow:hidden; }

.lhero__in{
  max-width:1200px; margin-inline:auto;
  padding:clamp(60px,7vw,96px) clamp(20px,4vw,40px);
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,56px); align-items:center;
}

/* Eyebrow */
.lhero__eyebrow{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--f-body,inherit); font-size:.8rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--red-deep,#527a00); background:color-mix(in srgb, var(--red,#669900) 13%, #fff);
  padding:8px 14px; margin-bottom:22px;
}
.lhero__eyebrow i,.lhero__eyebrow svg{ width:15px; height:15px; color:var(--gold,#e2922f); }

/* Titolo */
.lhero__title{
  font-family:var(--f-display,system-ui,sans-serif); font-weight:700;
  font-size:clamp(2.3rem,4.8vw,3.9rem); line-height:1.03; letter-spacing:-.02em;
  color:var(--ink,#16202c); margin:0 0 .15em;
}
.lhero__title .hl{
  color:var(--red,#669900); position:relative;
}
.lhero__title .hl::after{
  content:""; position:absolute; left:0; right:0; bottom:.06em; height:.14em;
  background:var(--gold,#e2922f); opacity:.35;
}

/* Lead */
.lhero__lead{
  font-size:clamp(1rem,1.4vw,1.2rem); color:var(--muted,#5c6b7a);
  line-height:1.6; max-width:38ch; margin:0;
}

/* Azioni */
.lhero__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:34px; }
.lhero__btn{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--f-body,inherit);
  font-weight:600; font-size:1rem; padding:.9em 1.6em; text-decoration:none;
  white-space:nowrap; transition:transform .15s, background .15s, border-color .15s;
}
.lhero__btn i,.lhero__btn svg{ width:18px; height:18px; }
.lhero__btn:hover{ transform:translateY(-2px); }
.lhero__btn--primary{ background:var(--red,#669900); color:#fff; box-shadow:0 8px 30px rgba(13,40,71,.10); }
.lhero__btn--primary:hover{ background:var(--red-deep,#527a00); }
.lhero__btn--ghost{ background:var(--surface,#fff); color:var(--ink,#16202c); border:1px solid rgba(18,33,48,.16); }
.lhero__btn--ghost:hover{ border-color:var(--red,#669900); color:var(--red-deep,#527a00); }

/* Stats */
.lhero__stats{
  display:flex; gap:clamp(18px,3vw,30px); margin-top:44px;
  padding-top:28px; border-top:1px solid rgba(18,33,48,.10);
  flex-wrap:wrap;
}
.lhero__stat{ display:flex; flex-direction:column; }
.lhero__stat b{ font-family:var(--f-display,system-ui,sans-serif); font-size:1.9rem; color:var(--red,#669900); letter-spacing:-.03em; line-height:1; }
.lhero__stat span{ font-size:.84rem; color:var(--muted,#5c6b7a); font-weight:500; margin-top:3px; }

/* Visual */
.lhero__visual{ position:relative; }
.lhero__photo{
  aspect-ratio:4/4.4; overflow:hidden;
  box-shadow:0 24px 60px rgba(13,40,71,.16);
  border:1px solid rgba(18,33,48,.10);
}
.lhero__photo img{ width:100%; height:100%; object-fit:cover; display:block; }

/* Placeholder */
.lhero__photo--ph .lhero__ph{
  width:100%; height:100%;
  background-color:color-mix(in srgb, var(--red,#669900) 13%, #fff);
  background-image:repeating-linear-gradient(135deg, rgba(102,153,0,.12) 0 12px, transparent 12px 24px);
}

/* Badge */
.lhero__badge{
  position:absolute; left:-22px; bottom:34px;
  background:var(--surface,#fff); border:1px solid rgba(18,33,48,.10);
  padding:16px 18px; box-shadow:0 8px 30px rgba(13,40,71,.10);
  display:flex; align-items:center; gap:13px; max-width:250px;
}
.lhero__badge-ic{
  width:42px; height:42px; flex-shrink:0;
  background:color-mix(in srgb, var(--gold,#e2922f) 18%, #fff);
  color:var(--gold,#e2922f); display:grid; place-items:center;
}
.lhero__badge-ic i,.lhero__badge-ic svg{ width:22px; height:22px; }
.lhero__badge-body b{ font-family:var(--f-display,system-ui,sans-serif); font-size:.94rem; display:block; color:var(--ink,#16202c); }
.lhero__badge-body span{ font-size:.78rem; color:var(--muted,#5c6b7a); }

/* Responsive */
@media(max-width:900px){
  .lhero__in{ grid-template-columns:1fr; }
  .lhero__visual{ display:none; }
}
@media(max-width:600px){
  .lhero__stats{ gap:16px; }
  .lhero__stat b{ font-size:1.5rem; }
}

/* Accessibilità: focus visibile per la navigazione da tastiera */
.lhero a:focus-visible{
  outline:2px solid var(--red,#E2001A); outline-offset:2px;
}

/* ── RTL / arabo ─────────────────────────────────────────────
   L'arabo è corsivo: il letter-spacing spezza le legature → normal.
   Badge e freccia "avanti" seguono il verso specchiato del layout. */
[dir="rtl"] .lhero__eyebrow,
[dir="rtl"] .lhero__title{ letter-spacing:normal; }
[dir="rtl"] .lhero__badge{ left:auto; right:-22px; }
[dir="rtl"] .lucide-arrow-right{ transform:scaleX(-1); }