/* ============================================================================
   profile-v2.css — redesign della pagina profilo pubblica (professionista.html)
   Caricato DOPO css/style.css: riusa i token globali (colori, raggi, ombre,
   font) definiti in :root, senza ridefinire hex a mano. Tre blocchi:
     1) .pv2-mosaic       — galleria foto a mosaico/collage (cover + tessere)
     2) .pv2-practice-*   — card fotografiche delle pratiche (link al dettaglio)
     3) .pv2-event-*      — striscia compatta scorribile degli eventi
   ========================================================================== */

/* ---------- 0) Layout profilo "concept 6": colonna unica centrata ----------
   Intestazione centrata con foto TONDA sopra il nome, galleria a carosello,
   sezioni impilate una sotto l'altra e riquadro contatti in fondo. Usa i token
   reali di style.css così l'aspetto è identico al resto del sito. */
.p6-container { max-width: 820px; }
.p6-profile { padding: 44px 0 80px; }

.p6-head { text-align: center; margin-bottom: 6px; }
.p6-avatar {
  width: 132px; height: 132px; border-radius: 50%; overflow: hidden;
  margin: 0 auto 18px; display: flex; align-items: center; justify-content: center;
  background: var(--bg-alt);
  box-shadow: 0 0 0 6px rgba(239,200,115,0.22), 0 8px 26px rgba(0,0,0,0.12);
}
.p6-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p6-avatar svg { width: 54px; height: 54px; opacity: 0.8; }
.p6-head h1 { margin: 10px 0 8px; }
.p6-meta { justify-content: center; }
.p6-tagline { text-align: center; margin-left: auto; margin-right: auto; }
.p6-cta { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 18px; flex-wrap: wrap; }
.p6-head .report-profile-wrap { margin-top: 12px; }

/* sezioni impilate e centrate */
.p6-sec { margin: 48px 0 0; }
.p6-sec > h2, .p6-sec .profile-section-header { text-align: center; justify-content: center; }
.p6-prose { max-width: 62ch; margin: 0 auto; text-align: center; }
.p6-sec .profile-stats { justify-content: center; }
.p6-sec .cert-list { max-width: 620px; margin-left: auto; margin-right: auto; }
.p6-sec .profile-reviews { max-width: 640px; margin-left: auto; margin-right: auto; }
/* le card di pratiche/eventi restano allineate a sinistra dentro la sezione centrata */
.p6-sec .pv2-practice-body, .p6-sec .pv2-event-body { text-align: left; }
.p6-sec .pv2-practice-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* galleria a CAROSELLO: una foto grande alla volta + frecce semplici */
.p6-carousel { position: relative; max-width: 700px; margin: 0 auto; }
.p6-slides { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 10; box-shadow: var(--shadow-sm); background: var(--bg-alt); }
.p6-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
.p6-slide.on { opacity: 1; }
.p6-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.p6-arrow { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 6px; cursor: pointer; color: #fff; opacity: .72; z-index: 2; filter: drop-shadow(0 1px 4px rgba(0,0,0,.55)); transition: opacity .2s; }
.p6-arrow:hover { opacity: 1; }
.p6-arrow.prev { left: 8px; } .p6-arrow.next { right: 8px; }
.p6-arrow svg { width: 36px; height: 36px; display: block; }
.p6-dots { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.p6-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); border: none; padding: 0; cursor: pointer; transition: background .2s; }
.p6-dot.on { background: var(--lavender-dark, #805693); }

/* pulsante "Espandi" su pratiche ed eventi */
.p6-expand { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; align-self: flex-start; font-size: .8rem; font-weight: 700; color: var(--lavender-dark, #805693); border: 1px solid var(--lavender, #d8c7e2); border-radius: 100px; padding: 5px 13px; background: var(--card-bg, #fff); }
.pv2-practice-card:hover .p6-expand, .pv2-event-item:hover .p6-expand { background: var(--bg-alt); }
.pv2-event-item .p6-expand { margin-top: 6px; }

/* riquadro contatti in fondo, centrato e non troppo largo */
#contattaSection { max-width: 600px; margin-left: auto; margin-right: auto; }
#contattaSection .contact-card { margin-bottom: 18px; }

@media (max-width: 640px) {
  .p6-slides { aspect-ratio: 4 / 3; }
  .p6-sec { margin-top: 38px; }
  .p6-avatar { width: 116px; height: 116px; }
}

/* ---------- 1) Galleria a MOSAICO ----------
   Il contenitore resta #profileGallery (la lightbox si aggancia comunque alle
   .profile-gallery-tile); qui la classe .pv2-mosaic sostituisce la griglia
   uniforme di .profile-gallery con un collage: tessera "cover" grande + tessere
   quadrate. Le regole globali su .profile-gallery-tile img (object-fit, hover,
   lightbox) restano valide. */
.pv2-mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.pv2-mosaic .pv2-mosaic-tile {
  aspect-ratio: 1;
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* Tessera cover: 2x2 accanto alla griglia di tessere quadrate. Con tracce
   definite dalle tessere quadrate, lo span 2x2 risulta a sua volta quadrato. */
.pv2-mosaic .pv2-mosaic-cover {
  grid-column: span 2;
  grid-row: span 2;
}

/* Nessuna foto in galleria: c'è solo la cover — occupa tutta la larghezza come
   banner, invece di restare una mezza tessera con spazio vuoto a fianco. */
.pv2-mosaic .pv2-mosaic-cover:only-child {
  grid-column: 1 / -1;
  grid-row: auto;
  aspect-ratio: 16 / 9;
}

@media (max-width: 640px) {
  .pv2-mosaic { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  /* Su telefono la cover NON deve più occupare 2x2 (diventava enorme): banner a
     tutta larghezza con altezza contenuta, poi le altre foto in due colonne. */
  .pv2-mosaic .pv2-mosaic-cover {
    grid-column: 1 / -1;
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
}

/* ---------- 2) Card pratiche (fotografiche, link alla pagina di dettaglio) ----------
   .pv2-practice-grid sostituisce .listings-grid/.practices-list sul contenitore
   #profileListings. Card a superficie chiara, bordo morbido, angoli ~16px. */
.pv2-practice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 18px;
}

.pv2-practice-card {
  display: flex;
  flex-direction: column;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s ease-in-out, box-shadow 0.35s ease-in-out;
}
.pv2-practice-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-sm); }

.pv2-practice-photo {
  aspect-ratio: 4 / 3;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pv2-practice-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv2-practice-photo--placeholder svg { width: 40px; height: 40px; opacity: 0.6; }

.pv2-practice-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Titolo e descrizione tagliati a 2 righe → card di altezza uniforme. */
.pv2-practice-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--text-dark);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pv2-practice-desc {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- 3) Eventi: striscia compatta scorribile ----------
   .pv2-event-strip sostituisce .listings-grid sul contenitore #profileEvents:
   voci compatte (miniatura + titolo + "data · prezzo") in fila, con scroll
   orizzontale quando non ci stanno. */
.pv2-event-strip {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}

.pv2-event-item {
  flex: 0 0 auto;
  width: 264px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 10px;
  text-decoration: none;
  color: inherit;
  scroll-snap-align: start;
  transition: transform 0.35s ease-in-out, box-shadow 0.35s ease-in-out;
}
.pv2-event-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

.pv2-event-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pv2-event-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pv2-event-thumb--placeholder svg { width: 26px; height: 26px; opacity: 0.6; }

.pv2-event-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.pv2-event-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.2;
  color: var(--text-dark);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.pv2-event-meta {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--sage-dark);
}

/* ---------- Rifiniture mobile ----------
   Su telefono lo spazio vuoto tra l'intestazione del profilo e i contenuti era
   eccessivo (la sezione contenuti ha 100px di padding sopra/sotto, pensati per
   desktop). Lo riduciamo solo su schermi piccoli e solo per la pagina profilo
   (scoping via :has(.profile-layout)), senza toccare il desktop né le altre pagine. */
@media (max-width: 720px) {
  main > section:has(.profile-layout) {
    padding-top: 28px;
    padding-bottom: 48px;
  }
}

/* ============================================================================
   Ritocchi concept 6 (23 ago): intestazione con foto a SINISTRA su computer
   (su telefono resta centrata), certificazioni/esperienza in alto, meno spazio
   verticale tra le sezioni su desktop, foto tonda centrata meglio, avviso
   "Amani non è parte dell'accordo" più discreto, Recensioni/Messaggia vicine.
   ========================================================================== */

/* Foto tonda: inquadratura spostata verso l'alto per centrare meglio il viso */
.p6-avatar img { object-position: center 25%; }

/* Avviso legale nel riquadro Messaggia: piccolo e discreto, non un blocco grande */
#contactCard .disclaimer-line { font-size: .8rem; color: var(--text-muted); font-style: normal; opacity: .9; margin: 4px 0 10px; line-height: 1.45; }

/* Recensioni e Messaggia molto più vicine (riquadri contatti ravvicinati) */
#contattaSection .contact-card { margin-bottom: 10px; }

/* --- Solo su COMPUTER (da 641px in su) --- */
@media (min-width: 641px) {
  /* intestazione: foto a sinistra, testo allineato IN ALTO e a SINISTRA
     (il titolo parte dal bordo superiore della foto, non più a metà). */
  .p6-head--left { display: flex; gap: 36px; align-items: flex-start; text-align: left; }
  /* la foto scende un po' così è ben bilanciata con il blocco di testo
     (il titolo resta in alto, la foto si allinea al cuore delle scritte). */
  .p6-head--left .p6-avatar { margin: 22px 0 0; width: 180px; height: 180px; flex: 0 0 auto; }
  /* testo in colonna, allineato a sinistra, con la DISCIPLINA sotto il nome */
  .p6-head--left .p6-head-info { flex: 1; min-width: 0; padding-top: 4px; display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
  .p6-head--left #profileName { order: 1; margin: 0; }
  /* la disciplina va SOTTO il nome e allineata a SINISTRA (non più "in mezzo":
     .pro-tag ha align-self:center di default, qui lo forziamo a sinistra). */
  .p6-head--left #profileTag { order: 2; align-self: flex-start; text-align: left; margin: 10px 0 0; }
  .p6-head--left #profileProBadge { order: 2; align-self: flex-start; margin: 10px 0 0; }
  .p6-head--left #profileBioShort { order: 3; text-align: left; margin: 6px 0 0; }
  .p6-head--left .p6-meta { order: 4; justify-content: flex-start; margin-top: 12px; }
  /* la riga della modalità ("riceve online") va subito sotto la sede: qui
     l'ordine dei blocchi è dato per id, e senza questa riga finirebbe in cima
     alla colonna, sotto l'header (verificato a schermo). */
  .p6-head--left #profileLocation, .p6-head--left #profileServiceMode { order: 5; }
  .p6-head--left .p6-cta { order: 6; justify-content: flex-start; }
  .p6-head--left .report-profile-wrap { order: 7; margin-top: 12px; }
  /* i blocchi di testo occupano tutta la larghezza della colonna e vanno a capo
     normalmente (l'etichetta disciplina e i pulsanti restano invece a misura). */
  .p6-head--left #profileName, .p6-head--left #profileBioShort,
  .p6-head--left #profileLocation, .p6-head--left #profileServiceMode,
  .p6-head--left .p6-meta { width: 100%; }

  /* certificazioni ed esperienza in alto, allineate a sinistra */
  .p6-exp { text-align: left; border-top: 1px solid var(--border); padding-top: 24px; }
  .p6-exp > h2 { text-align: left; }
  .p6-exp .profile-stats { justify-content: flex-start; }
  .p6-exp .cert-list { max-width: none; margin-left: 0; margin-right: 0; }

  /* meno spazio verticale tra le sezioni */
  .p6-sec { margin-top: 30px; }
  .p6-profile { padding: 34px 0 70px; }
}

/* ============================================================================
   Ritocchi 23 ago (sera): eventi con frecce come la galleria (via la barra
   grigio scura), Recensioni e Messaggia come pop-up.
   ========================================================================== */

/* ---------- Eventi: carosello con frecce, senza barra di scorrimento ----------
   La striscia scorre orizzontalmente ma la scrollbar (che risultava grigio scura)
   è nascosta; si scorre con due frecce identiche a quelle della galleria. */
.pv2-event-strip { scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 0; scroll-behavior: smooth; }
.pv2-event-strip::-webkit-scrollbar { display: none; }
.pv2-event-carousel { position: relative; }
/* le frecce riusano .p6-arrow (chevron bianco + ombra) e restano centrate
   verticalmente sulla striscia; compaiono solo quando servono (gestito in JS). */
.pv2-event-carousel .p6-arrow.prev { left: 2px; }
.pv2-event-carousel .p6-arrow.next { right: 2px; }
.pv2-event-carousel .p6-arrow[hidden] { display: none; }

/* ---------- Pop-up (modale): Recensioni e Messaggia ---------- */
.p6-modal-ov {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; background: rgba(30,26,22,0.55);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.p6-modal-ov[hidden] { display: none; }
.p6-modal {
  position: relative; width: 100%; margin: auto 0;
  background: var(--card-bg, #fffdf8);
  border-radius: 22px; box-shadow: 0 30px 80px rgba(0,0,0,0.35);
  animation: p6pop 0.26s ease;
}
.p6-modal--msg { max-width: 540px; }
.p6-modal--rev { max-width: 640px; }
@keyframes p6pop { from { opacity: 0; transform: translateY(14px) scale(0.985); } to { opacity: 1; transform: none; } }
.p6-modal-x {
  position: absolute; top: 12px; right: 12px; width: 38px; height: 38px;
  border-radius: 50%; border: none; background: var(--bg-alt, #efe7db);
  color: var(--text-dark, #34291f); cursor: pointer; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center; z-index: 3; transition: background 0.2s;
}
.p6-modal-x:hover { background: var(--border, #e7ddcb); }
.p6-modal-scroll { padding: 30px 30px 32px; }

/* dentro il modale la sezione non ha margini di flusso e la card non ha
   sfondo/bordo propri (è il modale stesso a fare da riquadro). */
.p6-modal .p6-sec { margin: 0; }
.p6-modal .profile-section { padding: 0; }
/* La lista recensioni è pronta a ospitarne TANTE: quando sono molte scorre da
   sola (barra sottile color tema), così il disclaimer resta in alto e il modulo
   "Lascia una recensione" resta raggiungibile in fondo. Con poche recensioni non
   compare alcuna barra. L'aspetto delle singole recensioni non cambia. */
.p6-modal .profile-reviews {
  max-width: none;
  max-height: 46vh; overflow-y: auto;
  margin-right: -6px; padding-right: 6px;
  scrollbar-width: thin; scrollbar-color: #cbb98f transparent;
}
.p6-modal .profile-reviews::-webkit-scrollbar { width: 6px; }
.p6-modal .profile-reviews::-webkit-scrollbar-thumb { background: #cbb98f; border-radius: 100px; }
.p6-modal .profile-reviews::-webkit-scrollbar-track { background: transparent; }
.p6-modal .contact-card { background: none; border: none; box-shadow: none; padding: 0; margin: 0; max-width: none; }
.p6-modal h2 { text-align: left; margin: 0 0 4px; padding-right: 34px; }
.p6-modal h3 { margin-top: 0; }

/* disclaimer recensioni: riquadro morbido, gentile e discreto */
.p6-rev-note {
  font-size: 0.88rem; color: var(--text-muted, #7c7166); line-height: 1.5;
  margin: 0 0 20px; padding: 12px 16px; background: var(--bg-alt, #efe7db); border-radius: 12px;
}

/* modulo "Lascia una recensione" separato dalla lista con una linea */
.p6-modal #reviewCard:not([hidden]) { border-top: 1px solid var(--border); margin-top: 22px; padding-top: 22px; }

body.p6-modal-open { overflow: hidden; }

@media (max-width: 640px) {
  .p6-modal-ov { padding: 20px 12px; }
  .p6-modal-scroll { padding: 26px 20px 28px; }
}