/* =========================================================
 * CONTATTI — info, orari, social e mappa OpenStreetMap.
 * Markup in template-parts/section-contatti.php.
 * ========================================================= */

.contacts{
  display:grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px);
  max-width: 1200px; margin: 0 auto;
}
.contacts-info{ display:flex; flex-direction:column; gap: 24px;}
.contacts-info h3{
  margin:0;
  font-family:"Cormorant Garamond", serif; font-style:italic; font-weight:400;
  font-size: clamp(36px, 5vw, 64px); line-height:1; letter-spacing:-0.02em;
}
.contacts-info .sub{
  font-family:"Cormorant Garamond", serif; font-style:italic; font-weight:400;
  font-size: clamp(17px, 1.6vw, 20px); line-height:1.5; color:var(--ink-2);
  margin: 0;
}

.info-row{ display:flex; flex-direction:column; gap: 6px; padding-bottom: 18px; border-bottom: 1px solid rgba(26,26,26,.15);}
.info-row .lbl{ font-family:"Inter", sans-serif; font-size:10.5px; font-weight:600; letter-spacing:0.28em; text-transform:uppercase; color: var(--muted);}
.info-row .val{
  font-family:"Inter", sans-serif; font-weight:400;
  font-size: clamp(17px, 1.7vw, 20px); line-height:1.4;
  letter-spacing: 0;
}
.info-row .val.big{
  font-family:"Inter", sans-serif; font-weight:500;
  font-size: clamp(24px, 2.5vw, 30px); line-height:1.15; letter-spacing:-0.01em;
}
/* Telefono cliccabile (tel:) — area di tap limitata al testo. */
.info-row .val-tel{
  width: max-content; max-width: 100%;
  transition: color .2s ease;
}
.info-row .val-tel:hover,
.info-row .val-tel:focus-visible{ color: var(--muted); text-decoration: underline; text-underline-offset: 4px;}

.hours{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 4px 24px; }
.hours .h{
  display:flex; justify-content:space-between; gap: 12px;
  padding: 8px 0; border-bottom: 1px dashed rgba(26,26,26,.18);
  font-family:"Inter", sans-serif; font-size: 13px;
}
.hours .h .d{ font-family:"Cormorant Garamond", serif; font-style:italic; font-weight:400; font-size: 16px;}
.hours .h.closed{ opacity: .45;}
.hours .h.closed span:last-child{ text-decoration: line-through;}

@media (max-width: 640px){
  .hours{ grid-template-columns: 1fr; gap: 0; }
  .hours .h{ padding: 12px 0; }
}

.socials{ display:flex; gap:8px; flex-wrap:wrap;}
.socials a{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 16px; border:1px solid var(--ink);
  font-family:"Inter", sans-serif; font-size:10.5px; font-weight:600; letter-spacing:0.22em; text-transform:uppercase;
  transition: background .25s, color .25s;
}
.socials a:hover{ background: var(--ink); color: var(--bg);}

/* Mappa — niente bordo, niente squadrato. Tile reali da OpenStreetMap. */
.map-wrap{
  position: relative;
  min-height: 520px;
  overflow: hidden;
}
.map-wrap iframe{
  width: 100%; height: 100%;
  min-height: 520px;
  border: 0;
  display: block;
  filter: grayscale(0.3) contrast(0.95);
}
.map-pin-overlay{
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -100%);
  display:flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
  z-index: 2;
}
.map-pin-overlay .label{
  font-family:"Cormorant Garamond", serif; font-style:italic; font-weight:500; font-size: 15px; line-height:1;
  background: var(--bg); color: var(--ink);
  padding: 8px 14px;
  box-shadow: 0 6px 18px -6px rgba(0,0,0,.25);
  white-space: nowrap;
}
.map-pin-overlay .marker{
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(168,68,45,.25), 0 0 0 8px rgba(168,68,45,.12);
}
.map-foot{
  margin-top: 14px;
  display:flex; justify-content: space-between; align-items: center; gap: 12px;
  font-family:"Inter", sans-serif; font-size:10.5px; letter-spacing:0.22em; text-transform:uppercase;
  color: var(--muted);
}
.map-foot a{
  border-bottom: 1px solid var(--ink); padding-bottom: 2px; color: var(--ink);
  transition: opacity .2s;
}
.map-foot a:hover{ opacity: .6;}
@media (max-width: 880px){
  .contacts{ grid-template-columns:1fr;}
}