/* =========================================================
   CONTACTS
   Layout della pagina contatti
   ========================================================= */


/* =========================
   VARIABILI
   ========================= */

.contacts-page {
  --color-accent: var(--palette-orange);

  --contacts-columns: 3;
  --contacts-column-gap: var(--site-column-gap);

  --contacts-content-top-row: 3;
  --contacts-title-gap: var(--space-4);
}


/* =========================
   PAGINA
   ========================= */

.contacts-page {
  width: 100%;
  height: 100svh;

  overflow: hidden;

  background-color: var(--color-background);
}

.contacts-page__layout {
  height: 100svh;
}


/* =========================
   NAVIGAZIONE DESKTOP
   ========================= */

.contacts-page .site-name,
.contacts-page
  .site-navigation__link[aria-current="page"] {
  color: var(--color-accent);
}

.contacts-navigation {
  grid-row: 3 / -1;
}


/* =========================
   AREA PRINCIPALE
   ========================= */

.contacts-page__main {
  grid-column: 2 / -1;
  grid-row: var(--contacts-content-top-row) / -1;

  min-width: 0;
  min-height: 0;
}


/* =========================
   GRIGLIA CONTATTI
   ========================= */

.contacts-grid {
  width: 100%;

  display: grid;
  grid-template-columns:
    repeat(var(--contacts-columns), minmax(0, 1fr));

  column-gap: var(--contacts-column-gap);

  align-items: start;
}


/* =========================
   GRUPPI
   ========================= */

.contacts-group {
  min-width: 0;
}

.contacts-group__title {
  margin-bottom: var(--contacts-title-gap);

  color: var(--color-text);

  font-size: var(--navigation-size);
  font-weight: 500;
  line-height: 1;

  text-transform: uppercase;
}

.contacts-group__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;

  gap: var(--space-2);

  margin: 0;

  font-size: var(--font-size-base);
  font-style: normal;
  line-height: var(--line-height-base);
}

.contacts-group__content p {
  max-width: 32ch;
}

.contacts-group__content a {
  width: fit-content;
}


/* =========================
   LINK
   ========================= */

.contacts-group__content a {
  transition:
    color var(--transition-fast),
    opacity var(--transition-fast);
}

.contacts-group__content a:hover,
.contacts-group__content a:focus-visible {
  color: var(--color-accent);
}


/* =========================
   TABLET
   ========================= */

@media
  (min-width: 768px)
  and (max-width: 1100px) {

  .contacts-page {
    --contacts-title-gap: var(--space-3);
  }

  .contacts-group__content {
    font-size: 0.8125rem;
  }
}


/* =========================
   MOBILE
   ========================= */

@media (max-width: 767px) {
  .contacts-page {
    width: 100%;
    min-height: 100svh;
    height: auto;

    overflow-x: hidden;
    overflow-y: auto;

    --contacts-columns: 1;
    --contacts-title-gap: var(--space-3);
  }


  /* Elementi fixed */

  .contacts-page .mobile-header .site-name,
  .contacts-page .menu-button,
  .contacts-page .page-label {
    color: var(--color-accent);
  }

  .contacts-page .page-label {
    right: var(--page-padding-inline);
    left: auto;

    width: auto;

    text-align: right;
  }


  /* Layout */

  .contacts-page__layout {
    width: 100%;
    min-height: 100svh;
    height: auto;

    padding:
      var(--page-padding-block)
      var(--page-padding-inline);

    display: block;
  }

  .contacts-page__main {
    width: 100%;
    min-width: 0;

    padding-top:
      calc(
        var(--mobile-label-top) +
        var(--space-7)
      );
  }


  /* Contatti impilati */

  .contacts-grid {
    width: 100%;

    display: block;
  }

  .contacts-group {
    width: 100%;
  }

  .contacts-group + .contacts-group {
    margin-top: var(--space-8);
  }

  .contacts-group__title {
    font-size: var(--font-size-base);
  }

  .contacts-group__content {
    font-size: var(--font-size-base);
  }

  .contacts-group__content p {
    max-width: none;
  }
}


/* =========================
   MOBILE PICCOLO
   ========================= */

@media (max-width: 430px) {
  .contacts-group + .contacts-group {
    margin-top: var(--space-7);
  }
}

.contacts-location {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);

  color: inherit;
  text-decoration: none;
}

.contacts-location:hover,
.contacts-location:focus-visible {
  color: var(--color-accent);
}