@import url('lance-theme.css');
/* ═══════════════════════════════════════════════════════════
   Lance Services — griglia card servizi 3 colonne
   Card con icona + titolo + tag + desc + link hover.
   Ultima card opzionale "feature" (sfondo verde scuro).
   Classi: lsvc-  |  Variabili: --red --red-deep --gold --ink --muted --surface --line --bg --f-display --f-body
   ═══════════════════════════════════════════════════════════ */

.lsvc{ background:var(--bg,#f6f4ef); padding-block:clamp(60px,7vw,96px); }
.lsvc__in{ max-width:1200px; margin-inline:auto; padding-inline:clamp(20px,4vw,40px); }

/* Intestazione */
.lsvc__head{ text-align:center; max-width:720px; margin:0 auto clamp(36px,4vw,54px); }
/* gold scurito con l'ink: il gold puro su fondo chiaro non passa la AA (contrasto ~1.8:1) */
.lsvc__kicker{ font-size:.8rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:color-mix(in srgb, var(--gold,#e2922f) 50%, var(--ink,#16202c)); margin-bottom:14px; }
.lsvc__title{ font-family:var(--f-display,system-ui,sans-serif); font-weight:700; font-size:clamp(1.9rem,3.2vw,2.8rem); line-height:1.05; letter-spacing:-.02em; color:var(--ink,#16202c); margin:0; }
.lsvc__intro{ color:var(--muted,#5c6b7a); font-size:1.1rem; margin-top:16px; }

/* Griglia */
.lsvc__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }

/* Card */
.lsvc__card{
  background:var(--surface,#fff); border:1px solid var(--line,rgba(18,33,48,.10));
  padding:30px 28px 28px; position:relative; overflow:hidden;
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
  transition:transform .2s, box-shadow .2s, border-color .2s;
}
.lsvc__card::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--red,#669900), var(--gold,#e2922f));
  transform:scaleX(0); transform-origin:left; transition:transform .3s;
}
.lsvc__card:hover{ transform:translateY(-6px); box-shadow:0 8px 30px rgba(13,40,71,.10); border-color:transparent; }
.lsvc__card:hover::before{ transform:scaleX(1); }

/* Icona */
.lsvc__ic{
  width:54px; height:54px;
  background:color-mix(in srgb, var(--red,#669900) 13%, #fff);
  color:var(--red,#669900); display:grid; place-items:center;
  margin-bottom:22px; flex-shrink:0; transition:background .2s, color .2s;
}
.lsvc__ic i,.lsvc__ic svg{ width:27px; height:27px; }
.lsvc__card:hover .lsvc__ic{ background:var(--red,#669900); color:#fff; }

/* Nome + tag */
.lsvc__name{
  font-family:var(--f-display,system-ui,sans-serif); font-weight:700; font-size:1.25rem;
  color:var(--ink,#16202c); margin:0;
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
}
.lsvc__tag{
  font-family:var(--f-body,inherit); font-size:.78rem; font-weight:600;
  color:color-mix(in srgb, var(--gold,#e2922f) 50%, var(--ink,#16202c)); letter-spacing:.02em; /* gold scurito: AA su card chiara */
}

/* Descrizione */
.lsvc__desc{ color:var(--muted,#5c6b7a); font-size:.92rem; margin-top:12px; line-height:1.6; flex:1; }

/* Link hover */
.lsvc__more{
  display:inline-flex; align-items:center; gap:6px; margin-top:18px;
  font-weight:600; font-size:.88rem; color:var(--red-deep,#527a00);
  opacity:0; transform:translateX(-6px); transition:opacity .2s, transform .2s;
  align-self:flex-start;
}
.lsvc__more svg{ width:15px; height:15px; }
.lsvc__card:hover .lsvc__more{ opacity:1; transform:translateX(0); }

/* Card feature (sfondo verde scuro) */
.lsvc__card--feature{
  background:linear-gradient(155deg, var(--red,#669900) 0%, color-mix(in srgb, var(--red,#669900) 50%, #10210a) 100%);
  color:#fff; border-color:transparent;
}
.lsvc__card--feature::before{ display:none; }
.lsvc__card--feature .lsvc__ic{ background:rgba(255,255,255,.14); color:#fff; }
.lsvc__card--feature:hover .lsvc__ic{ background:var(--gold,#e2922f); color:#3a2407; }
.lsvc__card--feature .lsvc__name{ color:#fff; }
.lsvc__card--feature .lsvc__tag{ color:var(--gold,#e2922f); }
.lsvc__card--feature .lsvc__desc{ color:rgba(255,255,255,.82); }
.lsvc__card--feature .lsvc__more{ color:rgba(255,255,255,.9); opacity:0; }
.lsvc__card--feature:hover .lsvc__more{ opacity:1; }

/* Card statica (senza link): solo testo, non cliccabile → niente lift/ombra/barra hover */
.lsvc__card--static{ cursor:default; }
.lsvc__card--static:hover{ transform:none; box-shadow:none; border-color:var(--line,rgba(18,33,48,.10)); }
.lsvc__card--static:hover::before{ transform:scaleX(0); }
.lsvc__card--static:hover .lsvc__ic{ background:color-mix(in srgb, var(--red,#669900) 13%, #fff); color:var(--red,#669900); }
.lsvc__card--feature.lsvc__card--static{ border-color:transparent; }
.lsvc__card--feature.lsvc__card--static:hover .lsvc__ic{ background:rgba(255,255,255,.14); color:#fff; }

/* Ancora di sezione (#id): compensa l'header sticky così il titolo non resta coperto */
.lsvc[id]{ scroll-margin-top:var(--lsvc-anchor-offset,90px); }

/* Responsive */
@media(max-width:960px){ .lsvc__grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .lsvc__grid{ grid-template-columns:1fr; } }

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

/* ── RTL / arabo: niente letter-spacing sul corsivo (spezza le legature) ── */
[dir="rtl"] .lsvc__kicker,
[dir="rtl"] .lsvc__tag,
[dir="rtl"] .lsvc__title{ letter-spacing:normal; }