@import url('lance-theme.css');
/* ═══════════════════════════════════════════════════════════
   Lance Contact — sezione contatti split sfondo verde scuro
   Sinistra: kicker + titolo + griglia info + 2 CTA
   Destra: mappa embed o placeholder
   Classi: lcon-  |  Variabili: --red --red-deep --gold --ink --surface --f-display --f-body
   ═══════════════════════════════════════════════════════════ */

.lcon{
  background:linear-gradient(160deg, var(--red,#669900) 0%, color-mix(in srgb, var(--red,#669900) 50%, #10210a) 100%);
  color:#fff; overflow:hidden;
}
.lcon__in{
  max-width:1200px; margin-inline:auto;
  padding:clamp(48px,6vw,80px) clamp(20px,4vw,40px);
  display:grid; grid-template-columns:1.05fr .95fr; gap:0; align-items:stretch;
}

/* Colonna info */
.lcon__info{ padding-right:clamp(24px,4vw,52px); display:flex; flex-direction:column; }
.lcon__kicker{
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  /* gold quasi-bianco: il gold pieno sul fondo --red non passa la AA (~2.7:1) */
  color:color-mix(in srgb, var(--gold,#e2922f) 12%, #fff); margin-bottom:16px;
}
.lcon__title{
  font-family:var(--f-display,system-ui,sans-serif); font-weight:700;
  font-size:clamp(1.7rem,3vw,2.6rem); line-height:1.05; letter-spacing:-.02em; color:#fff; margin:0;
}
.lcon__sub{ color:rgba(255,255,255,.8); font-size:1.06rem; margin-top:14px; max-width:34em; line-height:1.6; }

/* Griglia contatti */
.lcon__grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px 36px; margin-top:38px; }
.lcon__item{}
.lcon__item-label{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:color-mix(in srgb, var(--gold,#e2922f) 12%, #fff); margin-bottom:8px; /* AA su fondo --red */
}
.lcon__item-label i,.lcon__item-label svg{ width:14px; height:14px; flex-shrink:0; }
.lcon__item-val{ font-size:.97rem; color:#fff; line-height:1.65; }
.lcon__item-val a{ color:#fff; text-decoration:none; }
.lcon__item-val a:hover{ color:color-mix(in srgb, var(--gold,#e2922f) 12%, #fff); }

/* Pulsanti */
.lcon__actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:40px; }
.lcon__btn{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--f-body,inherit);
  font-weight:600; font-size:.95rem; padding:.85em 1.4em; text-decoration:none;
  white-space:nowrap; transition:transform .15s, background .15s, border-color .15s;
}
.lcon__btn i,.lcon__btn svg{ width:17px; height:17px; }
.lcon__btn:hover{ transform:translateY(-2px); }
.lcon__btn--solid{ background:var(--gold,#e2922f); color:#3a2407; }
.lcon__btn--solid:hover{ background:color-mix(in srgb, var(--gold,#e2922f) 85%, #000); }
.lcon__btn--ghost{ border:1.5px solid rgba(255,255,255,.4); color:#fff; }
.lcon__btn--ghost:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

/* Colonna mappa */
.lcon__map{ position:relative; min-height:320px; }
.lcon__map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.lcon__map-ph{
  position:absolute; inset:0;
  background:color-mix(in srgb, var(--red-deep,#527a00) 70%, #000);
  display:grid; place-items:center;
}
.lcon__map-dot{
  width:18px; height:18px; border-radius:50%;
  background:var(--gold,#e2922f);
  box-shadow:0 0 0 6px rgba(226,146,47,.3), 0 0 0 14px rgba(226,146,47,.16);
}

/* Modulo mappa (jlopenstreetmap o altro) */
.lcon__map-module{ position:absolute; inset:0; }
.lcon__map-module > *{ height:100% !important; }
/* Forza leaflet/OSM a riempire la colonna */
.lcon__map-module .leaflet-container,
.lcon__map-module [id^="jlopenstreetmap"]{ height:100% !important; min-height:320px; }

/* Responsive */
@media(max-width:900px){
  .lcon__in{ grid-template-columns:1fr; }
  .lcon__info{ padding-right:0; }
  .lcon__map{ min-height:260px; margin-top:32px; position:relative; }
}
@media(max-width:600px){
  .lcon__grid{ grid-template-columns:1fr; gap:20px; }
}

/* Accessibilità: focus visibile per la navigazione da tastiera */
.lcon a:focus-visible{
  outline:2px solid #fff; outline-offset:2px;
}

/* ── RTL / arabo ─────────────────────────────────────────────
   Niente letter-spacing sul corsivo; la "gutter" interna passa al lato opposto. */
[dir="rtl"] .lcon__kicker,
[dir="rtl"] .lcon__item-label,
[dir="rtl"] .lcon__title{ letter-spacing:normal; }
[dir="rtl"] .lcon__info{ padding-right:0; padding-left:clamp(24px,4vw,52px); }
@media(max-width:900px){ [dir="rtl"] .lcon__info{ padding-left:0; } }