/* Base */
* { box-sizing: border-box; }

:root {
  /* Design tokens */
  --text-size: 24px;

  /* Brand colors */
  --color-black: #1E1E1E;
  --color-white: #EAEAEA;

  /* Theme (default = ON/light) */
  --bg: var(--color-white);
  --fg: var(--color-black);

  /* Typography */
  --font-main: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* =========================
   Global utilities
   ========================= */

.mobile-only {
  display: none;
}

.desktop-only {
  display: block;
}


/* Theme OFF: funziona sia se la classe è su html che su body */
html.theme-off,
body.theme-off {
  --bg: var(--color-black);
  --fg: var(--color-white);
}

/* Page */
html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-main);
  font-size: var(--text-size);
  background: var(--bg);
  color: var(--fg);
  overflow: hidden; /* niente scroll */
}

/* Global links */
a {
  color: inherit;
  text-decoration: none;
  font-size: inherit;
}

/* Viewport wrapper (scaling system) */
.viewport {
  position: fixed;
  inset: 0;
  overflow: hidden;
}

/* App layout */
.app {
  height: 100%;
  display: grid;

  /* Desktop: sinistra fluida, destra fissa */
  grid-template-columns: 1fr 480px;
  column-gap: 16px;

  /* lo scaling è gestito dal JS: su desktop --scale=1 */
  transform-origin: top left;
  transform: scale(var(--scale, 1));
}


/* Left column */
.sidebar {
  padding: 8px 0 8px 8px; /* top right bottom left */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* Slideshow */
.slideshow__frame {
  /* full-bleed: annulla padding (8px) + offset extra (16px) = 24px */
  margin-top: -24px;
  margin-left: -24px;
  width: calc(100% + 24px);

  height: 496px;              /* placeholder (lo mettiamo definitivo dopo) */
  border: 0;
  background: #d9d9d9;        /* placeholder immagine (resta grigio anche in dark) */

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Desktop wide: più verticalità allo slideshow */
@media (min-width: 1441px) {
  .slideshow__frame {
    height: 672px;
  }
}


.slideshow__info {
  margin-top: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: baseline;
  font-size: 20px;
  line-height: 1.1;
}

.slideshow__count { justify-self: start; }

.slideshow__credit {
  justify-self: end;
  font-style: normal;
}

.slideshow__credit.is-active {
  font-style: italic;
  text-decoration: underline;
}

/* Projects list */
.projects {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.projects__list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}

.projects__item { margin: 0; padding: 0; }

.projects__link {
  display: block;
  font-size: 20px;
  line-height: 1.4;
  text-align: right;
  font-style: normal;
}

.projects__link.is-active {
  font-style: italic;
  text-decoration: underline;
}

/* Bottom bar in left column */
.sidebar__bottom {
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.theme {
  font-size: 20px;
  line-height: 1.05;
}

.theme__option { font-style: normal; }
.theme__option.is-active {
  font-style: italic;
  text-decoration: underline;
}

.theme__sep { padding: 0 4px; }

.contacts-link {
  font-size: 20px;
  line-height: 1.05;
  text-align: right;
  font-style: normal;
}

.contacts-link.is-active {
  font-style: italic;
  text-decoration: underline;
}

/* Right column */
.content {
  padding-top: 8px;
  padding-right: 8px;  /* margine destro fisso */
  padding-bottom: 8px;
  padding-left: 0;     /* lo spazio tra colonne lo fa già il gap */
  overflow: hidden;
}


#projectDescription {
  white-space: pre-line;
  font-size: var(--text-size);
  line-height: 1.4;
  margin: 0;
}

/* Spazio tra lista progetti e bottom bar (Theme/Contacts) */
.projects {
  padding-bottom: 8px; /* aumenta/diminuisci: prova 12px o 20px */
}

/* Text selection */
::selection {
  background: rgba(30, 30, 30, 0.15); /* selezione su tema ON */
  color: var(--color-black);
}

html.theme-off ::selection,
body.theme-off ::selection {
  background: rgba(234, 234, 234, 0.25); /* selezione su tema OFF */
  color: var(--color-white);
}

.slideshow__current {
  font-style: italic;
}

/* =========================
   TABLET (slideshow sopra + 2 colonne sotto)
   ========================= */
@media (max-width: 1024px) {
  /* Scroll generale */
  body { overflow: auto; }

  /* Anti-bounce orizzontale (tablet) */
  html, body { overflow-x: clip; }

  .viewport {
    position: static;
    inset: auto;
    overflow: visible;
  }

  /* App: 2 righe (slideshow / contenuti) */
  .app {
    transform: none;
    height: auto;

    padding: 8px;
    padding-top: 0;

    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    column-gap: 16px;

    grid-template-rows: auto auto;
    row-gap: 0;

    align-items: start;
  }

  /* Slideshow full width + full bleed */
  .slideshow {
    grid-column: 1 / -1;
    grid-row: 1;

    padding: 0;
    margin: 0;

    margin-left: -8px;
    margin-right: -8px;
  }

  /* FIX tablet: elimina overflow causato dal frame (desktop bleed) */
  #slideshowFrame.slideshow__frame {
    margin: 0 !important;
    width: 100% !important;
  }

  /* Sidebar "promossa" come items grid (serve per posizionare i figli) */
  .sidebar {
    grid-column: 1;
    grid-row: 2;

    padding: 0;
    display: contents;
    align-self: start;
  }

  /* Info in colonna sinistra */
  .slideshow__info {
    grid-column: 1;
    grid-row: 2;
    margin-top: 16px;
  }

  /* Andrea su una riga */
  .slideshow__credit { white-space: nowrap; }

  /* Progetti sotto info */
  .projects {
    grid-column: 1;
    grid-row: 2;
    margin-top: 56px;
    padding-bottom: 80px;
  }

  /* Bottom fisso */
  .sidebar__bottom {
    position: fixed;
    left: 8px;
    bottom: 8px;
    z-index: 10;

    width: calc((100vw - 32px - 16px) * 0.45);

    /* Fallback: stabilizza rendering fixed su alcuni device */
    transform: translateZ(0);
    will-change: transform;
  }

  /* Contenuto testo colonna destra */
  .content {
    grid-column: 2;
    grid-row: 2;
    padding: 0;
    margin-top: 12px;
    overflow: visible;
  }

  /* Tipografia tablet */
  .projects__link,
  .slideshow__count,
  .slideshow__credit,
  .theme,
  .contacts-link {
    font-size: 20px;
  }

  #projectDescription {
    font-size: 22px;
    line-height: 1.4;
  }
}

/* Extra fix */
@media (max-width: 834px) {
  .slideshow__credit { font-size: 20px; }
}

/* =========================
   MOBILE
   ========================= */
@media (max-width: 600px) {

  /* attiva contenuti mobile */
  .mobile-only {
    display: block;
  }
    /* nasconde UI desktop/tablet */
  .projects,
  .sidebar__bottom,
  .slideshow__info {
    display: none !important;
  }

  /* mobile: layout a colonna singola */
  .app {
    transform: none;
    height: auto;
    display: block;
    padding: 0;
  }

  /* mobile: slideshow full-bleed top/left/right */
  .slideshow {
    margin: 0;
    padding: 0;
    margin-left: 0;
    margin-right: 0;
  }

  /* IMPORTANT: su mobile blocchiamo il "desktop bleed" del frame */
  #slideshowFrame.slideshow__frame {
    margin: 0 !important;
    width: 100% !important;
    aspect-ratio: 1 / 1;
    height: auto;
  }


  /* mobile: testo leggibile con margini 8px */
  .content {
    padding: 8px;
    margin: 0;
    margin-top: 32px;
  }

}