/* =========================================================
   My Jurney — fanned deck of career/experience cards
   Fonte: assets/pagine/{S,Tablet,L,XL}.png ("My Jurney" section)
   Token: tokens.css (§7.0 griglia condivisa)
   ========================================================= */

:root {
  --jurney-duration: 220ms;
  --jurney-ease: cubic-bezier(0.32, 0.72, 0, 1); /* stessa glide "liquid glass" del resto del sito */
  /* Stessi due numeri di --eppoi-lightbox-enter/exit (css/eppoi.css):
     un solo ritmo per "un pannello che si apre sopra la pagina", in
     tutto il sito. */
  --jurney-lightbox-enter: 240ms;
  --jurney-lightbox-exit: 180ms;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
}

.jurney-demo {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  padding: var(--space-6) 0;
}

.jurney {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--grid-margin);
  text-align: center;
}

.jurney__title {
  margin: 0 0 var(--space-7);
  font-size: var(--font-size-h2);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
}

/* ---------- Deck ----------
   Mobile-first: verticale, una card per riga, leggera sovrapposizione
   e rotazione alternata (nessun testo troncato: qui l'overlap è solo
   decorativo, copre il margine sotto la card precedente, non il testo). */

.jurney__deck {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 var(--space-7);
}

.jurney__card {
  width: 100%;
  max-width: 344px; /* stessa larghezza mobile della project-card, non un valore nuovo */
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  text-align: left;
  position: relative;
  transition: transform var(--jurney-duration) var(--jurney-ease), box-shadow var(--jurney-duration) var(--jurney-ease);
}

.jurney__card:not(:first-child) {
  margin-top: -4px;
}

.jurney__card:nth-child(odd) {
  transform: rotate(-1.4deg);
}

.jurney__card:nth-child(even) {
  transform: rotate(1.2deg);
}

/* z-index crescente: ogni card successiva copre il margine di quella
   prima, come nella reference. */
.jurney__card:nth-child(1) { z-index: 1; }
.jurney__card:nth-child(2) { z-index: 2; }
.jurney__card:nth-child(3) { z-index: 3; }
.jurney__card:nth-child(4) { z-index: 4; }
.jurney__card:nth-child(5) { z-index: 5; }

.jurney__label {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  color: var(--color-grey-2);
}

.jurney__role {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-h5);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
}

.jurney__desc {
  margin: 0;
  font-size: var(--font-size-body-small);
  font-weight: var(--font-weight-regular);
  color: var(--color-grey-2);
}

/* L'attributo HTML "hidden" (index.html/my-jurney.html) gia' basta da
   solo (e' verificato in tests/test_jurney.py sul valore RESO, non
   dichiarato): questa regola non nasconde niente di nuovo, esiste solo
   perche' un domani, aggiungendo qui vicino una regola tipografica con
   "display: block" a specificita' piu' alta di "[hidden]" (0,1,0),
   quella vincerebbe e riaprirebbe la card senza che nessuno lo voglia.
   Un rinforzo esplicito, non un cambiamento di comportamento. */
.jurney__more {
  display: none;
}

/* ---------- M / L (600–1279px) ----------
   Ventaglio orizzontale che, non avendo spazio per le 5 card in riga,
   va a capo su due righe (3 + 2, la seconda centrata sotto la prima) —
   stesso comportamento della reference a questo tier (Tablet.png e
   L.png sono identiche in questa sezione).

   Posizionamento assoluto con larghezze fisse invece di CSS Grid a
   colonne "1fr": le colonne 1fr riempiono sempre il 100% dello spazio
   disponibile, quindi "justify-content: center" non aveva nulla da
   centrare (il ventaglio veniva sempre stirato a tutta larghezza del
   container). Con un blocco di larghezza fissa e margin:auto invece si
   centra davvero, e le due righe possono essere allineate al centro
   l'una rispetto all'altra invece che a filo del bordo destro. */

@media (min-width: 600px) {
  /* Griglia a 13 colonne invece di posizioni assolute in px: ogni card
     occupa 5 colonne e parte 4 colonne dopo la precedente, cioe' le
     stesse proporzioni del layout approvato (card 260px, passo 210px su
     680px totali) ma FLUIDE — con la larghezza fissa a 680px il deck
     sbordava sotto i ~730px di viewport creando scroll orizzontale.
     La riga 2 parte dalla colonna 3 e finisce alla 12: 2 colonne di
     margine per lato, quindi centrata sotto la riga 1. */
  .jurney__deck {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    width: 100%;
    max-width: 680px;
    margin: 0 auto var(--space-7);
  }

  .jurney__card {
    position: relative;
    width: auto;
    max-width: none;
    align-self: start; /* ogni card tiene la sua altezza, non si stira alla riga */
    transform: none;
  }

  .jurney__card:not(:first-child) {
    margin-top: 0; /* annulla la sovrapposizione verticale del tier mobile */
  }

  .jurney__card:nth-child(1) { grid-column: 1 / 6;  grid-row: 1; }
  .jurney__card:nth-child(2) { grid-column: 5 / 10; grid-row: 1; }
  .jurney__card:nth-child(3) { grid-column: 9 / 14; grid-row: 1; }
  .jurney__card:nth-child(4) { grid-column: 3 / 8;  grid-row: 2; margin-top: -40px; }
  .jurney__card:nth-child(5) { grid-column: 7 / 12; grid-row: 2; margin-top: -40px; }
}

/* ---------- XL / XXL (≥1280px) ----------
   Le 5 card entrano in un'unica riga, ventaglio orizzontale continuo,
   centrato con lo stesso meccanismo (blocco a larghezza fissa + auto). */

@media (min-width: 1280px) {
  /* Stesso schema (card = 5 colonne, passo = 4) esteso a 21 colonne per
     far stare tutte e 5 le card in un'unica riga. */
  .jurney__deck {
    grid-template-columns: repeat(21, 1fr);
    max-width: 1060px;
  }

  .jurney__card:nth-child(1) { grid-column: 1 / 6;   grid-row: 1; margin-top: 10px; }
  .jurney__card:nth-child(2) { grid-column: 5 / 10;  grid-row: 1; margin-top: 24px; }
  .jurney__card:nth-child(3) { grid-column: 9 / 14;  grid-row: 1; margin-top: 0; }
  .jurney__card:nth-child(4) { grid-column: 13 / 18; grid-row: 1; margin-top: 18px; }
  .jurney__card:nth-child(5) { grid-column: 17 / 22; grid-row: 1; margin-top: 18px; }
}

/* ---------- Hover (emil-design-eng) ----------
   Mancava del tutto: stesso gesto del project-card standalone (questa
   card e' lo stesso componente, vedi assets/Cards.png "card desktop – m"
   / "card mobile") — scala + piccola rotazione aggiuntiva, glide pesato.
   Non e' nella tavola (che e' statica): serve un'ombra piu profonda
   perche' il sollevamento si legga come fisico, non come una rotazione
   piatta. In piu', visto che qui le card si accavallano a ventaglio, la
   card in hover sale sopra le vicine (z-index) — altrimenti il bordo di
   quella successiva le passerebbe sopra a meta' sollevamento. */

@media (hover: hover) and (pointer: fine) {
  .jurney__card:hover {
    z-index: 50;
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.16);
  }

  /* Il verso alterna come la rotazione di base (mobile): a ≥600px la
     card riparte piatta (transform:none), quindi qui l'hover e' cio'
     che introduce "quella piccola rotazione" — su mobile la approfondisce
     leggermente rispetto al riposo. */
  .jurney__card:nth-child(odd):hover {
    transform: scale(1.035) rotate(-2.6deg);
  }

  .jurney__card:nth-child(even):hover {
    transform: scale(1.035) rotate(2.4deg);
  }
}

/* ---------- Apertura (click) ----------
   Il feedback hover (sopra) non basta piu': "mi piacerebbe che se
   clicco ... il testo si espandesse". La card diventa un vero
   controllo (vedi js/my-jurney.js), e un pannello condiviso mostra
   tutte le informazioni, comprese quelle che a riposo restano nascoste
   (.jurney__more, sopra).

   cursor:pointer e focus-visible qui e non nella regola base di
   .jurney__card: sono la parte visiva di "questo e' cliccabile",
   introdotta insieme al click stesso, non un dettaglio della card a
   riposo. */
.jurney__card {
  cursor: pointer;
}

.jurney__card:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 3px;
}

/* Il pannello: stesso linguaggio di .eppoi-lightbox (css/eppoi.css) —
   sfondo scurito identico, stessa curva di entrata/uscita, stesso
   fade+scale. Qui il contenuto e' testo, non un'immagine: il pannello
   e' una card bianca con gli stessi due token della card chiusa
   (--radius-card, --shadow-card), non un <img>. E' il gesto di
   "prendere in mano" di js/card-focus.js applicato a un pannello
   NUOVO, non alla card originale — che resta al suo posto nel
   ventaglio (vedi la spec, decisione 3, sul perche' non e' una
   trasformazione sul posto). */
.jurney-lightbox {
  position: fixed;
  inset: 0;
  /* Sopra il piu' alto z-index oggi dichiarato su index.html (401,
     css/card-focus.css): questo pannello vive sia li' sia nella pagina
     demo isolata my-jurney.html, e deve stare sopra qualunque altro
     overlay possa in teoria coesistere sulla pagina reale. */
  z-index: 450;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  /* Finche' non e' visibile non deve rubare click a niente sotto di se':
     stesso motivo di .eppoi-lightbox. */
  pointer-events: none;
  transition: opacity var(--jurney-lightbox-exit) var(--jurney-ease);
}

.jurney-lightbox.is-visible {
  opacity: 1;
  pointer-events: auto;
  transition-duration: var(--jurney-lightbox-enter);
}

.jurney-lightbox__pannello {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 100%;
  /* Il pannello NON scorre piu' lui stesso: e' solo la FORMA (sfondo,
     bordo, ombra, animazione). Chi scorre e' .jurney-lightbox__corpo,
     qui sotto — separare i due ruoli e' cio' che permette al tasto di
     chiusura di restare figlio del pannello (quindi posizionato
     rispetto a LUI, non alla finestra intera) senza scorrere via col
     testo. overflow:hidden (non piu' auto): sono gli angoli arrotondati
     a tagliare qualunque cosa — compresa la scrollbar del corpo interno
     — invece di lasciarla sporgere oltre la forma.

     display:flex; flex-direction:column — necessario perche' .corpo,
     sotto, riesca DAVVERO a diventare scorrevole: un semplice
     "max-height:100%" su .corpo non basta, perche' l'altezza di
     .pannello e' "auto" (solo limitata da max-height, che non e' un
     valore di altezza "specificato" ai fini della risoluzione delle
     percentuali — CSS2.1 §10.5). Senza flex, .corpo cresce
     illimitato quanto il suo contenuto, e overflow:hidden del pannello
     si limita a TAGLIARLO invece di renderlo scorrevole (verificato dal
     vivo: con testo lungo, .corpo.scrollHeight cresceva a 2508px pur
     restando clientHeight=2508, cioe' mai in overflow rispetto a se'
     stesso — nulla da scorrere). Con flex-direction:column, l'altezza
     di .pannello (gia' vincolata dal suo max-height, quello si' contro
     un antenato — .jurney-lightbox — a altezza definita) si propaga
     correttamente al figlio flessibile. */
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  text-align: left;
  transform: scale(0.96);
  opacity: 0;
  transition:
    transform var(--jurney-lightbox-exit) var(--jurney-ease),
    opacity var(--jurney-lightbox-exit) var(--jurney-ease);
}

.jurney-lightbox.is-visible .jurney-lightbox__pannello {
  transform: scale(1);
  opacity: 1;
  transition-duration: var(--jurney-lightbox-enter);
}

/* Il contenitore che scorre davvero: il pannello sopra e' solo la
   forma, questo e' il testo. flex:1 1 auto lo fa occupare tutto lo
   spazio verticale che .pannello puo' concedergli; min-height:0 e'
   indispensabile (un figlio flessibile di default non si restringe
   sotto la dimensione del proprio contenuto: senza questo azzeramento
   esplicito, .corpo continuerebbe a crescere oltre .pannello esattamente
   come prima, vanificando flex-direction:column qui sopra). Il padding
   che prima stava sul pannello vive ora qui: e' il testo che deve stare
   staccato dai bordi, non la forma. */
.jurney-lightbox__corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--space-6);
}

/* padding-right: il tasto di chiusura (.jurney-lightbox__chiudi) e'
   largo --space-7 e sta a right:--space-5 dal bordo del pannello, cioe'
   copre gli ultimi (--space-7 + --space-5) del pannello sul lato
   destro. Senza questo spazio riservato, un ruolo lungo vero (es.
   "Tutor for middle school students") ci finisce sotto: il pannello
   ha solo un padding uniforme (--space-6), niente che tenga libero il
   lato destro del TESTO. Applicato a tutti e quattro i campi per
   coerenza: non si sa in anticipo quale sara' il piu' lungo quando il
   segnaposto verra' sostituito con testo vero. */
.jurney-lightbox__label,
.jurney-lightbox__role,
.jurney-lightbox__desc,
.jurney-lightbox__more {
  padding-right: calc(var(--space-7) + var(--space-5) + var(--space-2));
}

.jurney-lightbox__label {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-caption);
  font-weight: var(--font-weight-regular);
  color: var(--color-grey-2);
}

.jurney-lightbox__role {
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-h4);
  font-weight: var(--font-weight-bold);
  color: var(--color-black);
}

.jurney-lightbox__desc {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-grey-2);
}

.jurney-lightbox__more {
  margin: 0;
  font-size: var(--font-size-body);
  font-weight: var(--font-weight-regular);
  color: var(--color-grey-2);
}

/* Stesso cerchio, stessa posizione, stessa X di .eppoi-lightbox__chiudi
   (css/eppoi.css): un solo linguaggio per "chiudi questo pannello" in
   tutto il sito. */
.jurney-lightbox__chiudi {
  position: absolute;
  top: var(--space-5);
  right: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-7);
  height: var(--space-7);
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-grey);
  color: var(--color-black);
  cursor: pointer;
  transition: background-color 140ms ease, transform 90ms ease;
}

@media (hover: hover) and (pointer: fine) {
  .jurney-lightbox__chiudi:hover {
    background: var(--color-grey-2);
    color: var(--color-white);
  }
}

.jurney-lightbox__chiudi:active {
  transform: scale(0.92);
}

.jurney-lightbox__chiudi:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --jurney-duration: 1ms;
  }

  /* Stessa tecnica di .eppoi-lightbox (css/eppoi.css): "transition:
     none" qui perderebbe contro ".jurney-lightbox.is-visible" e
     ".jurney-lightbox.is-visible .jurney-lightbox__pannello", che sono
     piu' specifiche (0,2,0 contro 0,1,0) e ridichiarano
     transition-duration per l'apertura. !important su
     transition-duration vince a prescindere dalla specificita' di chi
     la ridichiara; il selettore universale copre anche il tasto di
     chiusura e i quattro campi di testo senza doverli nominare a
     parte. */
  .jurney-lightbox,
  .jurney-lightbox * {
    transition-duration: 0s !important;
  }

  /* "Senza scala": non solo zero durata, il pannello non deve MAI
     essere scalato, nemmeno per un istante impercettibile. */
  .jurney-lightbox__pannello,
  .jurney-lightbox.is-visible .jurney-lightbox__pannello {
    transform: none;
  }
}