/* ==================================================
   "Aiutami a progettare il nostro prossimo viaggio trasformativo"
   (V3.2, FASE 1 — frontend + mock API)
   File dedicato, caricato SOLO da prossimo-viaggio.html. Riusa il
   sistema .ios-card generico (radius, restringimento laterale in
   uscita via [data-ios-card], vedi css/ios-cards.css/js/hero.js —
   nessuna animazione nuova per quella parte) e i token di
   css/variables.css: nessuna palette/tipografia nuova.
   ================================================== */

.travel-planner-page {
  padding-top: calc(var(--brand-bar-height) + var(--safe-top) + var(--scene-gap));
  /* V3.7 — vedi nota identica in css/pages.css. */
  padding-bottom: max(var(--scene-gap), calc(34 * var(--ps-stage-pct)));
}

.ios-card--travel-planner {
  background: #ffffff;
}

.travel-planner__nav {
  padding: clamp(20px, calc(5 * var(--vw)), 32px) clamp(20px, calc(6 * var(--vw)), 40px) 0;
}

.travel-planner__nav--bottom {
  padding-top: clamp(28px, calc(6 * var(--vw)), 40px);
  padding-bottom: clamp(28px, calc(6 * var(--vw)), 40px);
}

.travel-planner__intro {
  padding: clamp(24px, calc(6 * var(--vw)), 40px) clamp(20px, calc(6 * var(--vw)), 40px) 0;
  max-width: 42rem;
}

.travel-planner__title {
  margin: 0 0 var(--space-md);
  font-family: var(--font-display);
  font-weight: 480;
  line-height: 1.1;
  font-size: clamp(1.9rem, calc(6 * var(--vw)), 2.9rem);
  color: var(--text);
}

.travel-planner__intro-body p {
  margin: 0 0 0.9em;
  font-family: var(--font-body);
  font-size: clamp(1rem, calc(3.6 * var(--vw)), 1.1rem);
  line-height: 1.65;
  color: var(--text-muted);
}

.travel-planner__intro-body p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------
   Regole community (Parte 13): la distinzione tra "raccontami" e
   "classifica" deve essere chiara fin da subito.
   -------------------------------------------------- */
.travel-planner__rules {
  margin: clamp(28px, calc(6 * var(--vw)), 40px) clamp(20px, calc(6 * var(--vw)), 40px) 0;
  padding: clamp(18px, calc(4 * var(--vw)), 26px) clamp(20px, calc(5 * var(--vw)), 28px);
  max-width: 42rem;
  background: var(--background);
  border-radius: var(--radius-medium);
}

.travel-planner__rules p {
  margin: 0 0 0.6em;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.travel-planner__rules p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------
   V3.4 — Feed verticale a colonna singola, stile Instagram/Reel ma
   coerente con Psicologia Selvatica (Parte 2 del prompt): "un'esperienza
   protagonista per volta", non piu' una griglia a due colonne.
   -------------------------------------------------- */
.travel-planner__feed {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, calc(6 * var(--vw)), 40px);
  padding: clamp(28px, calc(6 * var(--vw)), 40px) clamp(20px, calc(6 * var(--vw)), 40px) 0;
}

.travel-planner__loading {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-muted);
  text-align: center;
  padding: var(--space-lg) 0;
}

.experience-post {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-medium);
  overflow: hidden;
  background: var(--background);
  border: 1px solid var(--border);
}

/* Area video/media grande e verticale (Parte 2 — "grande area video
   verticale"): 4:5 e' un formato editoriale gia' familiare (post
   verticali), senza scomodare l'intero schermo come una vera Story. */
.experience-post__media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: linear-gradient(155deg, var(--background-secondary), #e2d5c2);
}

.experience-post__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* V3.8 — Modifica 3: quando il media mostrato è un'immagine reale (mai un
   video), il contenitore passa da 4:5 (verticale, riservato ai video) a
   4:3 — il rapporto nativo delle foto Avventure fornite (800x600), cosi'
   object-fit:cover non deve ritagliare nulla di significativo. */
.experience-post__media--image {
  aspect-ratio: 4 / 3;
}

.experience-post__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.experience-post__media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0.5rem;
}

.experience-post__media-placeholder-label {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* Titolo chiaramente associato al video (Parte 2 — "sovrapposto o
   chiaramente associato"): qui in overlay, in basso, su una sfumatura
   scura leggera — mai un vero e proprio scrim opaco sull'immagine. */
.experience-post__title-wrap {
  position: absolute;
  inset: auto 0 0 0;
  padding: clamp(28px, calc(8 * var(--vw)), 44px) clamp(16px, calc(4 * var(--vw)), 24px) clamp(14px, calc(3.4 * var(--vw)), 18px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 100%);
}

.experience-post__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(1.15rem, calc(4.6 * var(--vw)), 1.4rem);
  line-height: 1.2;
  color: #ffffff;
}

.experience-post__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(14px, calc(3.4 * var(--vw)), 20px);
}

.experience-post__desc {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--text-muted);
}

.experience-post__votes {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text-muted);
}

.experience-post__cta-row {
  margin-top: 0.2rem;
}

/* CTA WhatsApp (Parte 2B): "Mi piacerebbe partecipare" + icona chiara,
   stesso linguaggio a pillola gia' usato per i CTA principali del
   sito, colore WhatsApp riconoscibile ma senza inventare un intero
   nuovo sistema grafico. */
.experience-post__whatsapp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  min-height: 48px;
  padding: 0.8rem 1.2rem;
  border-radius: 999px;
  border: none;
  background: #25d366;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  color: #063b1e;
  transition: transform var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
}

.experience-post__whatsapp-btn:hover {
  transform: translateY(-1px);
  background: #22c55e;
}

.experience-post__whatsapp-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.experience-post__whatsapp-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.experience-post__whatsapp-feedback {
  margin: 0.6rem 0 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
}

/* --------------------------------------------------
   Classifica (Parte 30-31): podio + resto, mai in stile "elettorale".
   -------------------------------------------------- */
.travel-planner__ranking {
  margin: clamp(36px, calc(8 * var(--vw)), 56px) clamp(20px, calc(6 * var(--vw)), 40px) 0;
  max-width: 42rem;
}

.travel-planner__ranking-head {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: clamp(16px, calc(3.4 * var(--vw)), 22px);
}

.travel-planner__ranking-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.35rem, calc(4.6 * var(--vw)), 1.75rem);
  color: var(--text);
}

/* "Dati dimostrativi" — deve poter sparire da sola quando il backend
   reale sara' collegato: e' popolato da JS a partire da `ranking.demo`
   (vedi js/travel-planner.js), non e' testo fisso nell'HTML. */
.travel-planner__demo-badge {
  display: inline-block;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: var(--background);
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.travel-planner__podium {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, calc(2.4 * var(--vw)), 14px);
  margin-bottom: clamp(18px, calc(4 * var(--vw)), 24px);
}

.travel-planner__podium-row {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-medium);
  background: var(--background);
}

.travel-planner__podium-medal {
  flex: 0 0 auto;
  font-size: 1.4rem;
  line-height: 1.25;
}

.travel-planner__podium-text {
  flex: 1;
  min-width: 0;
}

.travel-planner__podium-name {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 560;
  font-size: 1rem;
  line-height: 1.25;
  color: var(--text);
}

.travel-planner__podium-votes {
  margin: 0.25rem 0 0;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.travel-planner__rest {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.travel-planner__rest-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.4rem 0.2rem;
  border-bottom: 1px solid var(--border);
  font-family: var(--font-body);
  font-size: 0.85rem;
}

.travel-planner__rest-name {
  flex: 1;
  color: var(--text);
}

.travel-planner__rest-votes {
  color: var(--text-muted);
  white-space: nowrap;
}

/* --------------------------------------------------
   Brochure Viva (Parte 12) + chiusura.
   -------------------------------------------------- */
.travel-planner__brochure-info {
  margin: clamp(36px, calc(8 * var(--vw)), 56px) clamp(20px, calc(6 * var(--vw)), 40px) 0;
  max-width: 42rem;
}

.travel-planner__brochure-info h2 {
  margin: 0 0 0.6em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.2rem, calc(4.2 * var(--vw)), 1.5rem);
  color: var(--text);
}

.travel-planner__brochure-info p {
  margin: 0 0 0.8em;
  font-family: var(--font-body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-muted);
}

.travel-planner__brochure-info p:last-child {
  margin-bottom: 0;
}

.travel-planner__closing {
  margin: clamp(40px, calc(9 * var(--vw)), 64px) clamp(20px, calc(6 * var(--vw)), 40px) 0;
  max-width: 34rem;
}

.travel-planner__closing p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.15rem, calc(4 * var(--vw)), 1.4rem);
  line-height: 1.4;
  color: var(--text);
}