/* ==============================================================
   0. RESET MINIMO
   ============================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* JetBrains Mono in locale (cartella fonts/, copiata da miver.top; licenza OFL.txt).
   Dichiarate solo Regular (400) ed ExtraBold (800), le due grafie che
   servono ai testi dei box: le parole-chiave chiedono 900 e ricadono
   sull'800, il più pesante disponibile. */
@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/JetBrainsMono-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}

body {
    background-color: #ffffff;
    background-image: url('img/background.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 16px;
}

/* ==============================================================
   1. STRUTTURA — 3 riquadri impilati + box quadrato a destra.
   Bordo e arrotondamento sono su .faccia (dentro), NON su
   .lavagna: un bordo sul contenitore esterno resterebbe fermo
   durante il flip e "appiattirebbe" l'effetto 3D — l'occhio si
   aggancia alla cornice immobile invece di percepire la
   rotazione. Mettendolo su .faccia, ruota insieme al contenuto.
   ============================================================== */
.riga-lavagne {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    width: min(1300px, 96vw);
}

.colonna-lavagne {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.lavagna {
    width: 100%;
    height: 170px;
    perspective: 1600px;
    cursor: pointer;
}

.lavagna-interno {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

.lavagna.girata .lavagna-interno {
    transform: rotateX(180deg);
}

#lavagna-way.girata .lavagna-interno {
    transform: rotateX(-180deg);
}

#lavagna-this.girata .lavagna-interno {
    transform: rotate3d(1, 1, 0, 180deg);
}

#lavagna-quadrato.girata .lavagna-interno {
    transform: rotateY(180deg);
}

#lavagna-quadrato .faccia-retro {
    transform: rotateY(180deg);
    padding: 0;
}

.faccia {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #000000;
    border-radius: 10px;
}

.faccia-retro {
    transform: rotateX(180deg);
}

#lavagna-this .faccia-retro {
    transform: rotate3d(1, 1, 0, 180deg);
}

/* ==============================================================
   1bis. BOX QUADRATO
   ============================================================== */
.box-quadrato {
    width: calc(170px * 3 + 4px * 2);
    height: calc((170px * 3 + 4px * 2) * 1.0);
    flex-shrink: 0;
    container-type: inline-size;
}

/* ==============================================================
   2. FRONTE — testo verde pisello su sfondo bianco (Job/This/Way).
   ============================================================== */
.faccia-fronte {
    background-color: #ffffff;
    color: #5cb82f;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800; /* ExtraBold, la grafia più pesante di JetBrains Mono (Poppins Black era 900) */
    /* Spessore del contorno, dello stesso colore del testo, che "riempie"
       i caratteri (JetBrains Mono non ha nulla di più pesante dell'800). Un solo
       valore da cambiare: 0 = nessun ispessimento, più alto = più pieni, più
       basso = più snelli. Vale per i titoli e, ereditato come variabile, anche
       per il "?" del box quadrato (in em: si adatta al corpo di ciascuno). */
    --riempimento-lettere: 0.04em;
    -webkit-text-stroke: var(--riempimento-lettere) currentColor;
    font-size: clamp(48px, 7.8vw, 84px); /* era clamp(36px, 6vw, 64px): circa +30% */
    letter-spacing: 0.01em;
    text-align: center;
    line-height: 1.25;
}

/* ==============================================================
   2bis. FRONTE DEL BOX QUADRATO — niente più
   nuvola di "?". Freccia e un "?" enorme si sovrappongono ESATTAMENTE
   al centro del box (entrambi position:absolute, tolti dal flusso
   flex, centrati con lo stesso trucco top/left 50% + translate) e
   lampeggiano in modo netto (acceso/spento, non in dissolvenza) in
   controfase: quando l'una è visibile l'altro è invisibile. Lo sfondo
   pulsa con un colore casuale ad ogni intervallo, gestito dal piccolo
   script.js (impossibile in puro CSS: le
   @keyframes sono deterministiche, non generano numeri casuali).
   ============================================================== */
#lavagna-quadrato .faccia-fronte {
    /* --blink-duration: UNICA fonte del ritmo di tutto il fronte — la
       leggono sia la freccia che il "?" qui sotto (animation-duration),
       sia script.js (via getComputedStyle, per
       far cambiare colore allo sfondo in sincrono con ogni scatto
       acceso/spento). Cambiando SOLO questo valore, freccia/"?"/sfondo
       restano sempre in fase fra loro senza dover toccare altro. */
    --blink-duration: 0.8s;
    background-color: var(--pulse-bg, #ffe066); /* colore di partenza prima che lo script parta */
    transition: background-color 0.4s ease; /* dà la sensazione di "pulsazione" morbida ad ogni cambio colore */
    overflow: hidden;
    /* NIENTE position:relative qui: .faccia è già position:absolute (da cui
       eredita inset:0, che riempie .lavagna-interno e fa funzionare il
       flip) — ridichiararlo come relative con un selettore più specifico
       lo sovrascriverebbe silenziosamente, facendo collassare la faccia a
       un'altezza pressoché nulla. Era già una base valida per i figli
       assoluti sotto senza bisogno di toccarla. */
}

/* Freccia: dimensionata per LARGHEZZA (quasi quanto il box), non per
   altezza come il "?" — è una forma molto orizzontale (viewBox
   200x48): se la si scalasse per altezza al pari del "?" uscirebbe
   larghissima dal box. */
#lavagna-quadrato .box-quadrato__arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90cqw; /* quasi quanto il box in larghezza: è lei l'asse orizzontale della croce percepita */
    height: auto;
    animation: blink-onoff var(--blink-duration) steps(1, end) infinite;
	color: #ffffff;
}

/* ==============================================================
   NOTA A MARGINE — come cambiare a mano la dimensione del "?" qui
   sotto, senza bisogno di ripassare da qui:

   - "font-size" (68cqw) = dimensione di base. Più alto = "?" più
     grande. È in "cqw" (container query width): 1cqw = 1% della
     LARGHEZZA del box quadrato, non dello schermo — cresce/si
     restringe insieme al box su ogni breakpoint automaticamente.
   - "scaleY" (1.08) = quanto viene stirato in ALTEZZA oltre al
     font-size. Il glifo "?" da solo occupa solo ~70-75%
     dell'em-square in altezza, quindi senza questo stiramento
     sembra più corto della freccia (che invece è larga quasi
     quanto il box). Alzarlo lo allunga verticalmente.
   - "scaleX" (1 = nessuna compressione; era 0.85 e risultava
     schiacciato) = quanto viene RISTRETTO in LARGHEZZA. Più
     basso = "?" più snello ma anche più "schiacciato"/innaturale
     (comprime le curve arrotondate del glifo, che sono proprio
     quelle che gli danno la sua forma riconoscibile); più vicino
     a 1 = forma più fedele all'originale del font.

   Attenzione: valori aggressivi su scaleY/scaleX INSIEME creano
   due problemi diversi — troppo scaleY (provato: 1.3) fa toccare
   la testa del "?" al bordo superiore del box; troppo scaleX
   basso (provato: 0.7) lo fa sembrare schiacciato/innaturale. Gli
   attuali 1.05/0.85 privilegiano la forma naturale del glifo
   rispetto al riempire lo spazio al massimo — se si alza uno dei
   due valori conviene ricontrollare entrambi gli effetti.
   ============================================================== */
#lavagna-quadrato .box-quadrato__question {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scaleY(1.08) scaleX(1);
    font-size: 68cqw;
    font-family: 'JetBrains Mono', monospace; /* i valori di scaleX/scaleY qui sopra sono tarati a occhio su questo glifo */
    -webkit-text-stroke: var(--riempimento-lettere) currentColor; /* stesso ispessimento dei titoli, calcolato sul corpo del "?" */
    font-weight: 800;
    line-height: 1;
    animation: blink-onoff var(--blink-duration) steps(1, end) infinite;
    animation-delay: calc(var(--blink-duration) / 2); /* metà ciclo di scarto: controfase esatta rispetto alla freccia, qualunque sia --blink-duration */
	color: #ffffff;
}

@keyframes blink-onoff {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ==============================================================
   3. RETRO
   ============================================================== */
.faccia-retro {
    background-color: #f2f5ee;
    color: #111111;
    font-family: system-ui, sans-serif;
    font-size: 20px;
    padding: 14px;
    text-align: center;
}

/* Le tre parole-chiave (Job / This / Way) dentro i testi del retro: più
   grandi e in grassetto pieno, SOLO loro (nel testo restano normali le
   versioni minuscole tipo "this domain" o "job related"). line-height:1
   evita che il corpo maggiore allarghi l'interlinea delle righe in cui
   compaiono — i testi sono già lunghi rispetto all'altezza dei box. */
.parola-chiave {
    font-size: 1.4em;
    font-weight: 900;
    line-height: 1;
}

/* I quattro "This" linkati nel box THIS: colore ereditato (niente blu da
   link di default), nessuna sottolineatura e verde JobThisWay al passaggio
   del mouse. Il primo è anche grande e grassetto (classe .parola-chiave
   sullo stesso elemento); gli altri tre restano di corpo normale e portano
   in più .link-this--sottolineato. */
.link-this {
    color: inherit;
    text-decoration: none;
}

.link-this:hover {
    color: #5cb82f;
}

.link-this--sottolineato {
    text-decoration: underline;
    text-decoration-color: #5cb82f;
    text-decoration-thickness: 0.12em;
    text-underline-offset: 0.15em;
}

/* Testo sul retro dei tre box rettangolari in JetBrains Mono, un verso per
   riga. white-space: pre-line rispetta gli "a capo" già scritti nell'HTML
   (dopo ogni punto e dopo i due punti) e fa comunque andare a capo le righe
   troppo lunghe. Il corpo segue la larghezza dello schermo (clamp su vw) così
   il numero di righe resta simile a ogni larghezza; per ingrandire o
   rimpicciolire basta cambiare i tre valori di clamp(minimo, preferito, massimo). */
.colonna-lavagne .faccia-retro p {
    font-family: 'JetBrains Mono', monospace;
    font-size: clamp(12px, 1.25vw, 16px);
    line-height: 1.35;
    white-space: pre-line;
}

/* ==============================================================
   3bis. RETRO DEL BOX QUADRATO
   ============================================================== */
.quadrato-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    width: 100%;
    height: 100%;
    padding: 0.8em;
    border-radius: inherit;
    background: radial-gradient(circle at 75% 35%, #5b4fe0 0%, #352a8c 40%, #16123f 78%);
    color: #ffffff;
    text-decoration: none;
    text-align: center;
}

.quadrato-card__brand {
    display: flex;
    align-items: center;
    gap: 0.3em;
    font-size: 0.7em;
    font-weight: 600;
}

.quadrato-card__tag {
    font-size: 0.7em;
    color: #c7c2f5;
}

.quadrato-card__title {
    font-size: 1.25em;
    font-weight: 800;
    line-height: 1.15;
}

.quadrato-card__advantages {
    list-style: none;
    font-size: 0.62em;
    line-height: 1.5;
    color: #e3e1fb;
}

.quadrato-card__advantages strong {
    color: #ffffff;
}

.quadrato-card__panel {
    width: 100%;
    background: #ffffff;
    color: #111111;
    border-radius: 0.6em;
    padding: 0.6em 0.8em;
    display: flex;
    flex-direction: column;
    gap: 0.4em;
}

.quadrato-card__panel-label {
    font-size: 0.55em;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b6b6b;
    text-align: left;
}

.quadrato-card__price-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.8em;
}

.quadrato-card__price-row strong {
    font-size: 1.3em;
    font-weight: 900;
}

.quadrato-card__payments {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.35em 0.4em;
}

.quadrato-card__payments img {
    height: 1em;
    width: auto;
}

.quadrato-card__cta {
    display: block;
    background: #4b3ffb;
    color: #ffffff;
    font-weight: 700;
    font-size: 0.7em;
    padding: 0.55em;
    border-radius: 999px;
}

.quadrato-card__redirect {
    font-size: 0.5em;
    line-height: 1.4;
    color: #6b6b6b;
}

.quadrato-card__caption {
    font-size: 0.55em;
    color: #b7b3e8;
}

.quadrato-card__benefits {
    display: flex;
    flex-direction: column;
    gap: 0.35em;
    width: 100%;
    padding-top: 0.35em;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.quadrato-card__benefit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4em;
    font-size: 0.55em;
    font-weight: 600;
    color: #e3e1fb;
}

.quadrato-card__benefit img {
    height: 1.1em;
    width: auto;
    flex-shrink: 0;
}

/* ==============================================================
   5. TABLET (601px–1024px)
   ============================================================== */
@media (min-width: 601px) and (max-width: 1024px) {
    .riga-lavagne {
        width: min(90vw, 800px);
    }

    .lavagna {
        height: 120px;
    }

    .box-quadrato {
        width: calc(120px * 3 + 4px * 2);
        height: calc((120px * 3 + 4px * 2) * 1.18);
    }

    .faccia-fronte {
        font-size: clamp(36px, 6.5vw, 56px); /* era clamp(28px, 5vw, 44px): circa +30% */
    }

    .faccia-retro {
        font-size: 16px;
        padding: 16px;
    }
}

/* ==============================================================
   6. MOBILE (max 600px)
   ============================================================== */
@media (max-width: 600px) {
    body {
        --mob-pad-top: 12px;
        --mob-pad-right: 12px;
        --mob-pad-bottom: 12px;
        --mob-pad-left: 12px;
        padding: var(--mob-pad-top) var(--mob-pad-right) var(--mob-pad-bottom) var(--mob-pad-left);
        align-items: flex-start;
    }

    .riga-lavagne {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .colonna-lavagne {
        flex: 0 0 auto;
        height: calc(100dvh - var(--mob-pad-top) - var(--mob-pad-bottom));
    }

    .colonna-lavagne .lavagna {
        flex: 1 1 0;
        height: auto;
        min-height: 0;
    }

    .box-quadrato {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1.18;
        align-self: stretch;
    }

    .faccia-retro {
        font-size: 15px;
        padding: 12px;
    }

    .colonna-lavagne .faccia-retro p {
        font-size: 14px;
    }
}

/* Testo dei box troppo lungo per l'altezza disponibile (tablet/mobile):
   scorre dentro il riquadro con rotella o dito, senza barra laterale visibile. */
.colonna-lavagne .faccia-retro p {
    max-height: 100%;
    overflow-y: auto;
    scrollbar-width: none;
}

.colonna-lavagne .faccia-retro p::-webkit-scrollbar {
    display: none;
}

/* ==============================================================
   7. BOX THIS — testo tutto visibile, senza scroll, centrato
   verticalmente. Solo regole #lavagna-this (più specifiche di quelle
   condivise sopra), così Job e Way restano come sono. Su tablet This
   prende altezza a Job e Way (180 + 90 + 90 = 3 x 120): il totale
   dello stack non cambia.
   ============================================================== */
#lavagna-this .faccia-retro {
    padding-top: 5px;      /* era 14px desktop / 16px tablet */
    padding-bottom: 5px;
}

#lavagna-this .faccia-retro p {
    max-height: none;      /* era 100% */
    overflow-y: visible;   /* era auto: niente scroll su This a ogni larghezza */
}

@media (min-width: 601px) and (max-width: 1024px) {
    #lavagna-this {
        height: 180px;     /* era 120px */
    }

    #lavagna-job,
    #lavagna-way {
        height: 90px;      /* era 120px; totale invariato 360px */
    }

    #lavagna-this .faccia-retro p {
        line-height: 1.2;  /* era 1.35; corpo invariato */
    }
}

@media (max-width: 600px) {
    #lavagna-this .faccia-retro {
        padding-top: 2px;  /* era 12px */
        padding-bottom: 2px;
    }

    #lavagna-this .faccia-retro p {
        line-height: 1.2;  /* era 1.35 */
    }
}

@media (max-width: 600px) and (max-height: 600px) {
    #lavagna-this .faccia-retro p {
        line-height: 1.05; /* solo schermi molto bassi */
    }
}

.link-this {
  white-space: nowrap;
}
.link-this::after {
  content: "\2197";
  display: inline-block;
  box-sizing: border-box;
  width: 1.2em;
  height: 1.2em;
  margin-left: 0.3em;
  border: 0.09em solid currentColor;
  border-radius: 50%;
  font-size: 0.6em;
  font-weight: 700;
  line-height: 1.05em;
  text-align: center;
  vertical-align: 0.45em;
  text-decoration: none;
}

/* ==============================================================
   8. SOLO FIREFOX — box This: niente frammenti verdi dopo il flip.
   Questo blocco serve solo a Firefox: @supports (-moz-appearance: none)
   è vero solo lì, quindi Chrome, Edge e Safari lo ignorano.
   Dopo la rotazione diagonale (rotate3d(1, 1, 0, 180deg)) Firefox può
   lasciare a schermo pezzi delle grandi scritte del fronte. Qui la faccia
   non visibile viene nascosta del tutto (visibility: hidden) quando la
   rotazione supera i 90 gradi, e torna visibile subito al giro opposto.
   Calcolo del ritardo: .lavagna-interno ruota in 0.7s con
   cubic-bezier(0.4, 0, 0.2, 1). La rotazione passa i 90 gradi quando
   l'avanzamento y(s) = 3(1-s)s^2 + s^3 vale 0.5, cioè a s = 0.5;
   il tempo corrispondente è x(0.5) = 3(0.5)^2(0.5)(0.4) + 3(0.5)(0.5)^2(0.2)
   + (0.5)^3 = 0.15 + 0.075 + 0.125 = 0.35 della durata
   => 0.35 x 700ms = 245ms (non 350ms: a metà tempo la rotazione è
   già a circa 140 gradi). Al ritorno vale lo stesso ritardo.
   ============================================================== */
@supports (-moz-appearance: none) {
    #lavagna-this.girata .faccia-fronte {
        visibility: hidden;
        transition: visibility 0s linear 0.245s;
    }

    #lavagna-this:not(.girata) .faccia-retro {
        visibility: hidden;
        transition: visibility 0s linear 0.245s;
    }

    /* Firefox: This gira da sinistra a destra (asse verticale) invece che in
       diagonale: con rotateY larghezza e altezza non si scambiano, quindi la
       parola "This" non esce più dal box durante il giro (niente residui verdi).
       Chrome ed Edge mantengono il giro diagonale. */
    #lavagna-this.girata .lavagna-interno {
        transform: rotateY(180deg);
    }

    #lavagna-this .faccia-retro {
        transform: rotateY(180deg);
    }
}