/* ============================================================
   RECENSIONI — pagina dedicata (V2 test)
   Segue la stessa convenzione delle altre pagine interne
   (careers.css / whitepaper.css): file CSS dedicato, classi
   prefissate "rec-page-" per non collidere con le .rec-* già
   usate nel carosello della home.
   ============================================================ */

/* ---------- HERO ---------- */
.rec-page-hero {
  position: relative;
  overflow: hidden;
  min-height: 68vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--sv) + 40px) 0 60px;
}
/* Sfondo: riusa le classi condivise .hero-bg/.orb/.hero-grid/#hero-canvas
   (stesso identico effetto dell'home — orbite animate + griglia prospettica
   in canvas — vedi style.css e main.js, nessuna classe nuova da mantenere) */

.rec-page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 780px;
  text-align: center;
}
.rec-page-hero-content { display: flex; flex-direction: column; align-items: center; }
.rec-page-h1 {
  font-family: var(--font-h);
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 20px;
}
/* Senza questa regola lo span .hl dentro .rec-page-h1 resta testo piatto
   (il gradiente animato è scoped per-classe, non ereditato — vedi nota in style.css) */
.rec-page-h1 .hl {
  background: linear-gradient(110deg, var(--brand-d) 0%, var(--brand) 22%, var(--brand-l) 42%, #6366F1 60%, var(--brand) 80%, var(--brand-d) 100%);
  background-size: 280% 280%;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  animation: hlMeshFlow 9s ease-in-out infinite;
}
[data-theme="dark"] .rec-page-h1 .hl {
  background: linear-gradient(110deg, var(--brand-l) 0%, var(--brand) 22%, #60CCEF 42%, #818CF8 60%, var(--brand-l) 80%, var(--brand) 100%);
  background-size: 280% 280%;
  -webkit-background-clip: text; background-clip: text;
  animation: hlMeshFlow 9s ease-in-out infinite;
}
.rec-page-sub {
  font-size: 1.08rem;
  color: var(--text-2);
  line-height: 1.75;
  max-width: 600px;
  margin: 0 auto;
}

/* ---------- GRIGLIA RECENSIONI ----------
   Mosaico a colonne CSS (non grid): gli screenshot LinkedIn condividono
   la stessa larghezza ma hanno altezze molto diverse (da ~550 a ~1030px),
   quindi una grid classica creerebbe righe con spazio vuoto attorno alle
   foto più corte. Le colonne CSS impilano ogni card alla sua altezza
   naturale, incastrandole come un vero mosaico. */
.rec-grid-section { padding-top: 0; }
.rec-grid {
  column-count: 3;
  column-gap: 28px;
}

/* Scheda "foto": screenshot già completo (foto+nome+ruolo+testo) — la card
   è solo una cornice premium, senza padding pesante che soffochi l'immagine */
.rec-gcard {
  background: var(--card);
  border: 1.5px solid rgba(43,181,232,.45);
  border-radius: var(--r);
  box-shadow: var(--sh-card);
  transition: transform var(--t), box-shadow var(--t), border-color var(--t);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: 28px;
}
.rec-gcard:hover {
  transform: translateY(-5px);
  border-color: rgba(43,181,232,.8);
  box-shadow: 0 24px 50px -18px rgba(2,10,20,.22);
}
[data-theme="dark"] .rec-gcard:hover { box-shadow: 0 24px 50px -18px rgba(0,0,0,.55); }

/* Recensioni aziende: riga a parte in testa, 2 card affiancate alla loro
   altezza naturale (align-items:start, niente stretch — le due foto hanno
   proporzioni diverse). Nessuna etichetta visibile: la distinzione dalla
   mosaico persone sotto è solo bordo oro/ambra + posizione, non testo. */
.rec-biz-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 28px;
  margin-bottom: 40px;
}
.rec-gcard-biz {
  border: 1.5px solid rgba(234,163,44,.45);
  margin-bottom: 0;
}
.rec-gcard-biz:hover {
  border-color: rgba(234,163,44,.8);
  box-shadow: 0 24px 50px -18px rgba(234,163,44,.3);
}
@media (max-width: 768px) {
  .rec-biz-row { grid-template-columns: 1fr; gap: 22px; margin-bottom: 32px; }
}

.rec-gcard-photo { padding: 14px; display: flex; }
.rec-gcard-photo img { width: 100%; height: auto; display: block; border-radius: calc(var(--r) - 6px); }

/* Bottone che avvolge lo screenshot: apre la lightbox. Reset completo
   dello stile nativo del <button> cosi resta identico al vecchio <img>
   nudo, con in piu la tendina di zoom al passaggio del mouse/focus. */
.rec-gcard-zoom-btn {
  display: block;
  width: 100%;
  position: relative;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  border-radius: calc(var(--r) - 6px);
}
.rec-gcard-zoom-ico {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(4,12,24,.42);
  border-radius: calc(var(--r) - 6px);
  color: #fff;
  font-size: 1.4rem;
  opacity: 0;
  transition: opacity var(--t);
  pointer-events: none;
}
.rec-gcard-zoom-btn:hover .rec-gcard-zoom-ico,
.rec-gcard-zoom-btn:focus-visible .rec-gcard-zoom-ico {
  opacity: 1;
}
.rec-gcard-zoom-btn:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

/* Scheda "testo": pronta per le recensioni che arriveranno come testo
   (stessa impostazione — stelle, virgolettato, autore — del formato già
   collaudato nella home, non ancora usata su questa pagina) */
.rec-gcard-text {
  padding: 34px 32px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}
.rec-gcard-text .rgt-stars { display: flex; gap: 4px; margin-bottom: 18px; }
.rec-gcard-text .rgt-stars i { color: #F5A623; font-size: .9rem; }
.rec-gcard-text .rgt-text {
  font-family: var(--font-h);
  font-size: 1.02rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 24px;
}
.rec-gcard-text .rgt-author { display: flex; align-items: center; gap: 13px; margin-top: auto; }
.rec-gcard-text .rgt-avatar {
  width: 48px; height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-h); font-weight: 700; font-size: .9rem; color: #fff;
  background: linear-gradient(135deg, var(--brand-d), var(--brand-l));
}
.rec-gcard-text .rgt-author-info { display: flex; flex-direction: column; }
.rec-gcard-text .rgt-author-info strong { font-family: var(--font-h); font-size: .93rem; color: var(--text); }
.rec-gcard-text .rgt-author-info span { font-size: .78rem; color: var(--text-2); margin-top: 2px; }

/* .rec-grid segue lo stesso doppio breakpoint (1080/768) già usato dalle
   altre griglie a 3 colonne del sito (.comp-grid in style.css). */
@media (max-width: 1080px) {
  .rec-grid { column-count: 2; }
}
@media (max-width: 768px) {
  .rec-grid { column-count: 1; }
  .rec-gcard { margin-bottom: 22px; }
}

@media (max-width: 860px) {
  .rec-page-hero { min-height: 58vh; padding: calc(var(--sv) + 20px) 0 40px; }
  .rec-gcard-text { padding: 28px 24px; }
}

/* ---------- FORM "RACCONTA LA TUA ESPERIENZA" ----------
   Riusa .cont-intro/.cont-form-wrap/.form-card/.form-wizard globali
   (già usati da Lavora con Noi) — qui solo il widget upload immagine,
   che nel resto del sito vive in careers.css sotto ".car-*". */
.rec-file-upload {
  border: 1.5px dashed var(--border-a);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--t), background var(--t);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  background: var(--bg);
}
.rec-file-upload:hover { border-color: var(--brand); background: var(--brand-xs); }
.rec-file-upload.drag-over { border-color: var(--brand); background: var(--brand-xl); }
.rec-file-upload.has-file  { border-color: var(--brand); background: var(--brand-xs); }
.rec-file-upload i { font-size: 1.5rem; color: var(--text-3); }
.rec-file-upload span { font-size: .875rem; color: var(--text-2); }
.rec-file-btn {
  background: none; border: none; cursor: pointer;
  color: var(--brand); font-weight: 600; font-family: inherit;
  text-decoration: underline; padding: 0;
}

.rec-field-hint {
  font-size: .82rem;
  color: var(--text-3);
  line-height: 1.5;
  margin: -3px 0 10px;
}

/* Sezione come "banda" premium: stesso trattamento del .cta-band di
   home (style.css) — gradiente diagonale a bassa opacità + bordi sottili —
   cosi la sezione ha un'identita propria invece di poggiare piatta sullo
   sfondo pagina. */
.rec-form-section {
  position: relative;
  background: linear-gradient(135deg, rgba(43,181,232,.10) 0%, rgba(99,102,241,.07) 50%, rgba(34,211,238,.08) 100%);
  border-top: 1px solid rgba(43,181,232,.18);
  border-bottom: 1px solid rgba(43,181,232,.18);
}
/* Titolo | testo su due colonne (invece del blocco centrato .cont-intro
   condiviso con Contatti/Lavora con Noi — qui serve un layout diverso,
   quindi classi page-scoped dedicate invece di forzare override su quelle
   globali). Lede (prima frase) in risalto tramite lo <strong> globale
   (color:var(--text)+weight:600 di default) contro il grigio del resto
   del paragrafo, per dare un punto d'ingresso invece di un blocco uniforme. */
.rec-cta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  text-align: left;
  margin-bottom: 40px;
}
.rec-cta-grid-head .tag { margin-bottom: 16px; }
.rec-cta-grid h2 {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: clamp(1.9rem, 2.6vw, 2.6rem);
  margin: 0;
}
.rec-cta-text {
  font-size: 1.08rem;
  line-height: 1.75;
  color: var(--text-2);
  margin: 0;
}
.rec-cta-text strong { color: var(--text); font-weight: 700; }

@media (max-width: 860px) {
  .rec-cta-grid { grid-template-columns: 1fr; gap: 20px; text-align: center; margin-bottom: 32px; }
  .rec-cta-grid-head .tag { margin: 0 auto 16px; }
}

.rec-form-cta { text-align: center; }

/* ---------- MODALE "RACCONTA LA TUA ESPERIENZA" ----------
   Il bottone in pagina apre il form in overlay, cosi la pagina
   resta pulita finche l'utente non lo richiede esplicitamente. */
.rec-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.rec-modal.open { display: flex; }
.rec-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 12, 24, .6);
  opacity: 0;
  transition: opacity .25s ease;
}
.rec-modal.open .rec-modal-backdrop { opacity: 1; }
.rec-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 880px;
  max-height: calc(100vh - 48px);
  transform: translateY(16px) scale(.98);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
}
.rec-modal.open .rec-modal-panel { transform: translateY(0) scale(1); opacity: 1; }
/* Lo scroll avviene sul .form-card interno, non su .rec-modal-panel:
   cosi il bottone di chiusura (assoluto rispetto al panel) resta sempre
   visibile in alto a destra invece di scorrere via col contenuto. */
.rec-modal-panel .form-card {
  padding: 40px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
}
.rec-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-s);
  background: var(--card);
  color: var(--text-2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: .95rem;
  transition: background var(--t), color var(--t), border-color var(--t);
}
.rec-modal-close:hover { background: var(--brand-xs); color: var(--brand-d); border-color: var(--brand); }

@media (max-width: 768px) {
  .rec-modal { padding: 0; }
  .rec-modal-panel { max-width: 100%; max-height: 100vh; height: 100%; }
  .rec-modal-panel .form-card { padding: 26px; border-radius: 0; height: 100%; max-height: 100%; }
}

/* ---------- LIGHTBOX: RECENSIONE INGRANDITA ----------
   .rec-lightbox-panel sovrascrive solo width/max-width di .rec-modal-panel:
   qui il contenuto è una singola immagine (ogni screenshot ha proporzioni
   diverse), quindi il pannello deve stringersi sulla foto (width:auto)
   invece di occupare sempre 880px, altrimenti il bottone di chiusura
   (assoluto rispetto al pannello) galleggerebbe lontano dagli screenshot
   più stretti/alti. */
.rec-lightbox-panel {
  width: auto;
  max-width: min(960px, 94vw);
}
.rec-lightbox-panel img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 90vh;
  border-radius: var(--r);
}