/* =====================================================
   CONTATTI — Hero + email card (no form). Same vibe as
   the home: black background, big Anton title, decorative
   giant "Z" in the back.
   ===================================================== */

.contatti-page {
  position: relative;
  background: var(--zink);
  color: #fff;
  overflow: hidden;
  min-height: calc(100vh - 80px);
  padding-top: 80px;
}
@media (min-width: 768px) {
  .contatti-page { padding-top: 92px; min-height: calc(100vh - 92px); }
}

/* Decorative giant Z behind everything */
.contatti-page::before {
  content: "Z";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Anton', sans-serif;
  font-size: 80vw;
  line-height: 0.8;
  color: rgba(227, 6, 19, 0.045);
  pointer-events: none;
  z-index: 0;
}
@media (min-width: 1200px) {
  .contatti-page::before { font-size: 880px; }
}

/* ---------- HERO ---------- */
.contatti-hero {
  position: relative;
  z-index: 1;
  padding: 110px 0 40px;
  text-align: center;
}
@media (min-width: 768px) { .contatti-hero { padding: 150px 0 56px; } }

.contatti-hero .eyebrow-row {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 28px;
}
.contatti-hero .eyebrow-row .bar {
  display: inline-block;
  width: 36px;
  height: 1px;
  background: rgba(255, 255, 255, 0.35);
}
.contatti-hero .eyebrow-row .accent { color: var(--zred); }

.contatti-hero h1 {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(56px, 10vw, 140px);
  line-height: 0.86;
  letter-spacing: -0.005em;
  margin: 0;
}
.contatti-hero h1 .red { color: var(--zred); }

.contatti-hero p {
  max-width: 580px;
  margin: 24px auto 0;
  color: rgba(244, 241, 236, 0.7);
  font-size: 17px;
  line-height: 1.6;
}

/* ---------- EMAIL SECTION ---------- */
.contatti-email-section {
  position: relative;
  z-index: 1;
  padding: 20px 0 140px;
}
@media (min-width: 768px) { .contatti-email-section { padding: 32px 0 170px; } }

.contatti-email-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 24px;
}
@media (min-width: 768px) { .contatti-email-wrap { padding: 0 40px; } }

.email-card {
  display: block;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--hairline);
  padding: 40px 28px 44px;
  color: inherit;
  text-align: center;
  transition: background 220ms ease, border-color 220ms ease, transform 220ms ease;
}
@media (min-width: 768px) {
  .email-card { padding: 56px 48px 60px; }
}
@media (hover: hover) {
  .email-card:hover {
    background: rgba(227, 6, 19, 0.06);
    border-color: var(--zred);
    transform: translateY(-2px);
  }
  .email-card:hover .address { color: var(--zred); }
  .email-card:hover .address .arrow { transform: translateX(8px); color: var(--zred); }
}

.email-card .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.6);
  display: block;
  margin-bottom: 22px;
}
.email-card .label .accent { color: var(--zred); margin-right: 8px; }

.email-card .address {
  font-family: 'Anton', sans-serif;
  font-size: clamp(28px, 5.4vw, 64px);
  letter-spacing: 0.005em;
  line-height: 1.05;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  word-break: break-word;
  transition: color 220ms ease;
}
.email-card .address .arrow {
  width: clamp(22px, 3vw, 32px);
  height: clamp(22px, 3vw, 32px);
  transition: transform 240ms ease, color 220ms ease;
}
/* hover for address moved into @media (hover: hover) block above */

.email-card .note {
  margin-top: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.45);
}

/* ============ CONTATTI · MOBILE TUNING ============ */
@media (max-width: 480px) {
  .contatti-hero { padding: 80px 0 28px; }
  .contatti-hero .eyebrow-row { margin-bottom: 20px; font-size: 10px; letter-spacing: 0.24em; }
  .contatti-hero p { font-size: 15px; margin-top: 18px; }

  .contatti-email-section { padding: 16px 0 100px; }
  .contatti-email-wrap { padding: 0 18px; }
  .email-card { padding: 32px 20px 36px; }
  .email-card .label { font-size: 10px; letter-spacing: 0.24em; margin-bottom: 18px; }
  .email-card .address {
    font-size: clamp(20px, 6vw, 32px);
    gap: 12px;
    flex-wrap: wrap;
  }
  .email-card .address .arrow { width: 18px; height: 18px; }
  .email-card .note { margin-top: 18px; font-size: 9px; letter-spacing: 0.18em; }
}