/* =========================================================
   STYLE
   Struttura e componenti condivisi da tutto il sito
   ========================================================= */


/* =========================
   VARIABILI DEL SITO
   ========================= */

:root {
  /* Griglia desktop */
  --site-columns: 4;
  --site-rows: 5;

  --site-column-gap: 0.75rem;
  --site-row-gap: 0.75rem;

  /*
   * Larghezza della prima colonna desktop.
   * Tiene conto dei margini esterni e dei gutter.
   */
  --desktop-sidebar-width: calc(
    (
      100vw -
      (2 * var(--page-padding-inline)) -
      ((var(--site-columns) - 1) * var(--site-column-gap))
    ) /
    var(--site-columns)
  );

  /* Tipografia dell'interfaccia */
  --site-name-size: 0.875rem;
  --navigation-size: 0.625rem;

  /* Elementi mobile */
  --mobile-header-height: 4rem;
  --mobile-label-top: 6.5rem;
  --menu-icon-size: 1.75rem;

  /* Componenti */
  --arrow-size: 1.25rem;
  --scroll-fade-height: clamp(4rem, 10vh, 8rem);
}


/* =========================
   STRUTTURA GENERALE
   ========================= */

.site-page {
  position: relative;

  width: 100%;
  min-height: 100svh;
}

.site-layout {
  width: 100%;
  height: 100svh;
  min-height: 0;

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

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

  column-gap: var(--site-column-gap);
  row-gap: var(--site-row-gap);
}

.site-main {
  min-width: 0;
  min-height: 0;

  grid-column: 2 / -1;
  grid-row: 1 / -1;
}


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

.site-sidebar {
  position: fixed;
  z-index: var(--z-navigation);

  top: var(--page-padding-block);
  bottom: var(--page-padding-block);
  left: var(--page-padding-inline);

  width: var(--desktop-sidebar-width);

  display: grid;
  grid-template-rows:
    repeat(var(--site-rows), minmax(0, 1fr));

  row-gap: var(--site-row-gap);

  pointer-events: none;
}

.site-sidebar a,
.site-sidebar button {
  pointer-events: auto;
}

.site-name {
  display: inline-block;
  width: fit-content;

  color: var(--color-accent);

  font-size: var(--site-name-size);
  font-weight: 600;
  line-height: 1;
  text-transform: uppercase;

  transition: color var(--transition-base);
}

.site-sidebar > .site-name {
  grid-row: 1;
  align-self: end;
}

.site-navigation {
  grid-row: 3 / -1;

  min-height: 0;
  margin: 0;

  display: flex;
  flex-direction: column;

  font-size: var(--navigation-size);
  font-weight: 500;
  line-height: 1.35;
  text-transform: uppercase;
}

.site-navigation__primary,
.site-navigation__secondary,
.site-navigation__projects {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-navigation__primary {
  gap: 0;
}

.site-navigation__projects {
  margin-top: var(--space-4);
}

.site-navigation__secondary {
  margin-top: auto;
}

.site-navigation__link,
.site-navigation__project-link {
  display: inline-block;
  width: fit-content;

  color: var(--color-text);
  line-height: inherit;

  transition:
    color var(--transition-fast),
    opacity var(--transition-fast);
}

.site-navigation__link:hover,
.site-navigation__link:focus-visible,
.site-navigation__project-link:hover,
.site-navigation__project-link:focus-visible {
  color: var(--color-accent);
}

.site-navigation__link[aria-current="page"],
.site-navigation__project-link[aria-current="page"],
.site-navigation__link.is-active,
.site-navigation__project-link.is-active {
  color: var(--color-accent);
}


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

.mobile-header,
.mobile-menu,
.page-label {
  display: none;
}


/* =========================
   PULSANTE MENU MOBILE
   ========================= */

.menu-button {
  position: relative;

  width: var(--menu-icon-size);
  height: var(--menu-icon-size);

  flex: 0 0 auto;

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

.menu-button__line {
  position: absolute;
  left: 0;

  width: 100%;
  height: 1px;

  background-color: currentColor;

  transform-origin: center;

  transition:
    top var(--transition-fast),
    transform var(--transition-fast),
    opacity var(--transition-fast);
}

.menu-button__line:first-child {
  top: 38%;
}

.menu-button__line:last-child {
  top: 62%;
}

.menu-button[aria-expanded="true"] .menu-button__line:first-child {
  top: 50%;
  transform: rotate(45deg);
}

.menu-button[aria-expanded="true"] .menu-button__line:last-child {
  top: 50%;
  transform: rotate(-45deg);
}


/* =========================
   ELEMENTI DI ACCENTO
   ========================= */

.accent,
.text-accent {
  color: var(--color-accent);
}

.accent-fill {
  fill: var(--color-accent);
}

.accent-stroke {
  stroke: var(--color-accent);
}


/* =========================
   FRECCE
   ========================= */

.arrow-button {
  width: var(--arrow-size);
  height: var(--arrow-size);

  display: inline-grid;
  place-items: center;

  color: var(--color-accent);

  transition:
    opacity var(--transition-fast),
    transform var(--transition-fast),
    color var(--transition-fast);
}

.arrow-button svg {
  width: 100%;
  height: 100%;

  fill: none;
  stroke: currentColor;
  stroke-width: 1;

  vector-effect: non-scaling-stroke;
}

.arrow-button:hover,
.arrow-button:focus-visible {
  transform: translateY(0.15rem);
}

.arrow-button--left:hover,
.arrow-button--left:focus-visible {
  transform: translateX(-0.15rem);
}

.arrow-button--right:hover,
.arrow-button--right:focus-visible {
  transform: translateX(0.15rem);
}

.arrow-button--up:hover,
.arrow-button--up:focus-visible {
  transform: translateY(-0.15rem);
}

.arrow-button:disabled,
.arrow-button.is-hidden {
  opacity: 0;
  pointer-events: none;
}


/* =========================
   CONTENITORI SCORREVOLI
   ========================= */

.scroll-area {
  position: relative;

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

.scroll-area__content {
  width: 100%;
  height: 100%;

  overflow-y: auto;
  overscroll-behavior: contain;

  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.scroll-area__content::-webkit-scrollbar {
  display: none;
}

.scroll-area__fade {
  position: absolute;
  z-index: var(--z-content);

  right: 0;
  bottom: 0;
  left: 0;

  height: var(--scroll-fade-height);

  background:
    linear-gradient(
      to bottom,
      rgb(242 241 237 / 0),
      var(--color-background)
    );

  pointer-events: none;

  transition:
    opacity var(--transition-base),
    visibility var(--transition-base);
}

.scroll-area__arrow {
  position: absolute;
  z-index: calc(var(--z-content) + 1);

  bottom: 0;
  left: 50%;

  transform: translateX(-50%);

  transition:
    opacity var(--transition-base),
    visibility var(--transition-base),
    transform var(--transition-fast);
}

.scroll-area__arrow:hover,
.scroll-area__arrow:focus-visible {
  transform: translate(-50%, 0.15rem);
}

.scroll-area.is-at-end .scroll-area__fade,
.scroll-area.is-at-end .scroll-area__arrow {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


/* =========================
   IMMAGINI E VIDEO
   ========================= */

.media-frame {
  position: relative;

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

  overflow: hidden;
}

.media-frame img,
.media-frame video {
  width: 100%;
  height: 100%;
}

.media-frame--contain img,
.media-frame--contain video {
  object-fit: contain;
}

.media-frame--cover img,
.media-frame--cover video {
  object-fit: cover;
}


/* =========================
   STATI DEI PROGETTI
   ========================= */

.project-link {
  --project-color: var(--color-accent);

  transition:
    color var(--transition-fast),
    opacity var(--transition-fast);
}

.project-link:hover,
.project-link:focus-visible,
.project-link.is-active,
.project-link[aria-current="page"] {
  color: var(--project-color);
}

.project-cover {
  transition:
    opacity var(--transition-base),
    transform var(--transition-base);
}

.project-cover.is-active,
.project-cover:hover {
  opacity: 1;
  transform: scale(1.015);
}

.project-list.has-active-project
  .project-cover:not(.is-active) {
  opacity: 0.25;
}


/* =========================
   CONTATORE
   ========================= */

.media-counter {
  font-variant-numeric: tabular-nums;
  line-height: 1;
}


/* =========================
   CLASSI DI UTILITÀ
   ========================= */

.is-fixed {
  position: fixed;
}

.is-hidden {
  display: none;
}

.is-invisible {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.no-scroll {
  overflow: hidden;
}

.full-height {
  min-height: 100svh;
}


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

@media (min-width: 768px) {
  .desktop-hidden {
    display: none;
  }

  .desktop-fixed-page {
    height: 100svh;
    overflow: hidden;
  }
}


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

@media (max-width: 767px) {
  :root {
    --site-columns: 5;
    --site-rows: 5;

    --mobile-header-height: 4rem;
    --mobile-label-top: 6.5rem;

    --menu-icon-size: 1.75rem;
    --arrow-size: 1.125rem;

    --site-name-size: 0.875rem;
    --navigation-size: 0.75rem;
  }

  .mobile-hidden {
    display: none;
  }

  .site-layout {
    width: 100%;
    min-height: 100svh;
    height: auto;

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

    display: block;
  }

  .site-main {
    width: 100%;
    min-width: 0;
  }

  .site-sidebar {
    display: none;
  }


  /* Header fisso */

  .mobile-header {
    position: fixed;
    z-index: var(--z-navigation);

    top: 0;
    right: 0;
    left: 0;

    height: auto;

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

    display: flex;
    align-items: center;
    justify-content: space-between;

    pointer-events: none;
  }

  .mobile-header .site-name,
  .mobile-header .menu-button {
    pointer-events: auto;
  }


  /* Etichetta della sezione */

  .page-label {
    position: fixed;
    z-index: var(--z-navigation);

    top: var(--mobile-label-top);
    left: var(--page-padding-inline);

    display: block;

    color: var(--color-accent);

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

    pointer-events: none;
  }


  /* Menu mobile */

  .mobile-menu {
    position: fixed;
    z-index: calc(var(--z-navigation) - 1);

    inset: 0;

    padding:
      calc(var(--mobile-header-height) + var(--space-6))
      var(--page-padding-inline)
      var(--page-padding-block);

    display: flex;
    flex-direction: column;

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

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
      opacity var(--transition-base),
      visibility var(--transition-base);
  }

  .mobile-menu.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .mobile-menu__navigation {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: 0;

    font-size: var(--navigation-size);
    font-weight: 500;
    line-height: 1.35;
    text-transform: uppercase;
  }

  .mobile-menu__link {
    display: inline-block;
    width: fit-content;

    color: var(--color-text);

    transition: color var(--transition-fast);
  }

  .mobile-menu__link:hover,
  .mobile-menu__link:focus-visible,
  .mobile-menu__link[aria-current="page"] {
    color: var(--color-accent);
  }


  /* Spazio sotto gli elementi fixed */

  .mobile-page-content {
    padding-top:
      calc(var(--mobile-label-top) + var(--space-7));

    padding-bottom: var(--space-8);
  }

  .mobile-page-content--without-label {
    padding-top:
      calc(var(--mobile-header-height) + var(--space-4));
  }


  /* Scroll naturale su mobile */

  .desktop-fixed-page {
    height: auto;
    min-height: 100svh;
    overflow: visible;
  }

  .scroll-area,
  .scroll-area__content {
    height: auto;
    overflow: visible;
  }

  .scroll-area__fade,
  .scroll-area__arrow {
    display: none;
  }


  /* Stati hover disattivati sui contenuti touch */

  .project-cover:hover,
  .project-cover.is-active {
    transform: none;
  }

  .project-list.has-active-project
    .project-cover:not(.is-active) {
    opacity: 1;
  }
}


/* =========================
   DISPOSITIVI SENZA HOVER
   ========================= */

@media (hover: none) {
  .project-cover:hover {
    transform: none;
  }

  .arrow-button:hover {
    transform: none;
  }
}