/* ============================================================
   contatti.css — /contatti/ only.

   Loads AFTER legal.css (see the page's $page_css array), which
   supplies the shared interior-page header band, .legal-inner and
   the document-card treatment. This file adds the dark call band,
   the two-column contact layout, the social row and the
   click-to-load map.

   NOTE: "legal.css" is an awkward name to load on a contacts page.
   It is the shared interior-page stylesheet in practice — worth
   renaming to page.css once there are more non-legal static pages.
============================================================ */

/* ============================================================
   1. CALL BAND — dark variant of .legal-head
   The old page put the H1 on a #1a1b27 band, which is exactly the
   --green-950 token, so the original colour is reproduced without
   introducing a raw hex.
============================================================ */
.legal-head.legal-head--call{
  background:var(--green-950);
  text-align:center;
  padding:clamp(40px,6vw,72px) 5vw clamp(56px,7vw,84px);
}

.legal-head--call .legal-head__shape{
  top:-50%; right:auto; left:50%;
  transform:translateX(-50%);
  width:min(90vw,900px);
  background:radial-gradient(circle at 50% 50%,
              rgba(255,81,0,.22) 0%,
              rgba(41,145,214,.10) 45%,
              transparent 70%);
}

.legal-head--call h1{
  color:var(--paper-000);
  font-size:clamp(1.35rem,1.05rem + 1.6vw,2.4rem);
  line-height:1.15;
}

.legal-head--call h1 a{
  color:inherit;
  text-decoration:none;
  display:inline-flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:baseline;
  gap:.35em;
  padding:6px 4px;
  border-radius:var(--radius-s);
}

.legal-head--call h1 a:hover .accent{ color:var(--amber-400); }
.legal-head--call h1 a:focus-visible{ outline:3px solid var(--amber-500); outline-offset:4px; }


/* ============================================================
   2. PAGE BODY
============================================================ */
.contatti{ padding:0 5vw clamp(72px,9vw,110px); }

.contatti-inner{ max-width:1080px; margin:0 auto; }

.contatti-grid{
  display:grid;
  gap:clamp(28px,4vw,52px);
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  align-items:start;
}

.contatti-card{
  position:relative;
  z-index:1;
  margin-top:-40px;
  background:var(--paper-000);
  border:1px solid var(--line-200);
  border-radius:var(--radius-l);
  box-shadow:var(--shadow-card);
  padding:clamp(26px,4vw,48px);
}

.contatti h2{
  margin:0 0 16px;
  color:var(--green-900);
  font-size:clamp(1.3rem,1.15rem + .6vw,1.7rem);
}

.contatti p{
  margin:0 0 16px;
  font-size:16.5px;
  line-height:1.8;
  color:var(--ink-700);
}

.contatti p:last-child{ margin-bottom:0; }

.contatti a[href]{
  color:var(--green-700);
  text-decoration:underline;
  text-underline-offset:2px;
}
.contatti a[href]:hover{ color:var(--amber-600); }


/* ============================================================
   3. CONTACT DETAILS PANEL
============================================================ */
.contact-panel{
  background:var(--green-050);
  border:1px solid var(--line-200);
  border-radius:var(--radius-m);
  padding:clamp(22px,3vw,32px);
}

.contact-panel p{
  margin:0 0 12px;
  font-size:1.05rem;
}

.contact-panel p:last-child{ margin-bottom:0; }

.contact-panel b{ color:var(--green-900); }


/* ============================================================
   4. SOCIAL ROW
============================================================ */
.social{ margin-top:clamp(28px,4vw,40px); }

.social__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
}

.social__link{
  display:grid;
  place-items:center;
  width:52px; height:52px;
  border-radius:var(--radius-s);
  background:var(--green-900);
  color:var(--paper-000);
  text-decoration:none;
  transition:background .18s ease, transform .18s ease;
}

.social__link:hover{ background:var(--amber-500); transform:translateY(-2px); }
.social__link:focus-visible{ outline:3px solid var(--amber-500); outline-offset:3px; }
.social__link svg{ width:24px; height:24px; fill:currentColor; }


/* ============================================================
   5. CLICK-TO-LOAD MAP
   The Google iframe is not in the markup — site.js-free, the page's
   own contatti.js injects it from data-src on click, so nothing
   reaches Google until the visitor asks for it.
============================================================ */
.map-embed{
  position:relative;
  aspect-ratio:3 / 2;
  border:1px solid var(--line-200);
  border-radius:var(--radius-m);
  overflow:hidden;
  background:
    radial-gradient(circle at 30% 30%, var(--green-100) 0%, transparent 55%),
    var(--green-050);
  display:grid;
  place-items:center;
}

.map-embed__prompt{
  display:grid;
  justify-items:center;
  gap:14px;
  padding:var(--space-m);
  text-align:center;
}

.map-embed__note{
  margin:0;
  max-width:34ch;
  font-size:.88rem;
  line-height:1.6;
  color:var(--ink-500);
}

.map-embed iframe{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  border:0;
}

.map-embed.is-loaded .map-embed__prompt{ display:none; }


/* ============================================================
   6. PHOTO
============================================================ */
.contatti-photo{ margin:0; }

.contatti-photo img{
  display:block;
  width:100%; height:auto;
  border-radius:var(--radius-m);
  box-shadow:var(--shadow-card);
}