/* ==========================================================================
   families/utility.css
   Pagine di servizio: errori, ringraziamento, offline.
   Caricato da 5 pagine.
   ========================================================================== */

body.v2-editorial-utility {
  background: var(--v2-canvas);
  color: var(--v2-ink);
}

body.v2-editorial-utility .error-wrap,
body.v2-editorial-utility .grazie-wrap,
body.v2-editorial-utility.v2-utility-offline .box {
  width: min(760px,calc(100% - 32px));
  margin: clamp(3rem,8vw,7rem) auto;
  padding: clamp(2rem,5vw,3.5rem);
  background: var(--v2-surface);
  border: 1px solid var(--v2-border);
  border-radius: var(--v2-radius-xl);
  box-shadow: var(--v2-shadow-card-strong);
  text-align: center;
}

body.v2-editorial-utility .error-code {
  font-family: var(--v2-serif);
  font-size: clamp(5rem,13vw,8rem);
  line-height: .82;
  color: #dce3ea;
  font-weight: 600;
  letter-spacing: -.05em;
}

body.v2-editorial-utility .error-code::before {
  content: attr(data-code);
}

body.v2-editorial-utility .error-icon {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  margin: -1.7rem auto 1.25rem;
  border-radius: 50%;
  background: var(--v2-navy-800);
  color: #fff;
  font-size: 2rem;
  box-shadow: 0 12px 28px rgba(8,23,37,.18);
}

body.v2-editorial-utility :is(.error-wrap h1,.grazie-wrap h1,.box h1) {
  font-family: var(--v2-serif);
  color: var(--v2-heading);
  letter-spacing: -.02em;
  margin: .35rem 0 1rem;
}

body.v2-editorial-utility :is(.error-wrap p,.grazie-wrap p,.box p) {
  margin: .55rem auto;
  color: var(--v2-text);
  text-align: center;
}

body.v2-editorial-utility :is(.error-actions,.grazie-actions) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.6rem;
}

body.v2-editorial-utility :is(.btn-primary,.btn-secondary,.btn-back,.btn-soft) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .72rem 1.25rem;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
}

body.v2-editorial-utility :is(.btn-primary,.btn-back) {
  background: var(--v2-navy-800);
  color: #fff;
  border: 1px solid var(--v2-navy-800);
}

body.v2-editorial-utility :is(.btn-secondary,.btn-soft) {
  background: var(--v2-surface-soft);
  color: var(--v2-navy-800);
  border: 1px solid var(--v2-border-strong);
}

body.v2-editorial-utility .quick-links {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--v2-divider);
}

body.v2-editorial-utility .quick-links-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .55rem;
}

body.v2-editorial-utility .quick-links-grid a {
  padding: .55rem .8rem;
  background: var(--v2-surface-soft);
  border: 1px solid var(--v2-border);
  border-radius: 999px;
  color: var(--v2-heading);
  text-decoration: none;
}

body.v2-editorial-utility .status-info {
  margin-top: 1.6rem;
  padding: 1rem 1.15rem;
  background: var(--v2-surface-muted);
  border-radius: var(--v2-radius-md);
  text-align: left;
}

body.v2-editorial-utility.v2-utility-offline {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: var(--v2-cover-bg);
}

body.v2-editorial-utility.v2-utility-offline .box {
  margin: 0;
}

@media (max-width: 560px) {
  body.v2-editorial-utility .error-wrap,
  body.v2-editorial-utility .grazie-wrap {
    margin: 2.2rem auto;
    padding: 2rem 1.25rem;
  }
  body.v2-editorial-utility :is(.error-actions,.grazie-actions) {
    flex-direction: column;
  }
  body.v2-editorial-utility :is(.error-actions a,.error-actions button,.grazie-actions a) {
    width: 100%;
  }
}