/*
 * Viaggi WeRoad nei post (C1 sidebar, C2 barra mobile, C3 carosello, C6 card nel testo).
 * Design: variante C.4 del canvas "Blog — card viaggio nei post" (scelta il 15/10/2026):
 * foto con giorni, partenze e rating come badge, parte dati scura Secondary-900, CTA rosse.
 * Token dal design system del sito: font Google Sans, primary #ff4758 / hover #f51f47,
 * secondary #418089 e la sua scala (50 #f2f9f9 … 900 #1a2d32).
 * CSS a sé, non Tailwind: il bundle del tema è in purge mode e non conosce classi nuove.
 */

.wr-trips {
  --wr-primary: #ff4758;
  --wr-primary-hover: #f51f47;
  --wr-secondary: #418089;
  --wr-dark: #1a2d32;          /* secondary-900: superficie delle card */
  --wr-on-dark: #fff;
  --wr-on-dark-soft: #c0e0e1;  /* secondary-200: testi secondari sulla superficie scura */
  --wr-on-dark-kicker: #94cacc;/* secondary-300: etichette sulla superficie scura */
  --wr-badge-bg: #ddeff0;
  --wr-badge-fg: #2d454c;
  --wr-gray-200: #e5e5e5;
  --wr-gray-900: #171717;
  --wr-heading: oklch(0.278 0.033 256.848); /* colore dei titoli del blog */
}
/* Le card usano il font del sito; il titolo del carosello resta nel font dei titoli del blog. */
.wr-trip, .wr-trips__kicker { font-family: 'Google Sans', system-ui, sans-serif; }

/* Reset dello stile "prose" degli articoli, che altrimenti sottolinea i link e dà margini a img e p. */
.wr-trips a { color: inherit; text-decoration: none; }
.wr-trips img { margin: 0; max-width: 100%; }
.wr-trips p { margin: 0; }
.wr-trips__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------------------------------------------------------- card */

.wr-trip {
  position: relative; /* contiene il testo per screen reader (.wr-trips__sr): senza, allarga la pagina su mobile */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 16px;
  background: var(--wr-dark);
  color: var(--wr-on-dark);
}
.wr-trip__media {
  position: relative; display: block; aspect-ratio: 3 / 1.86; overflow: hidden;
  background: var(--wr-gray-200);
  container-type: inline-size; /* per nascondere il badge delle partenze quando la foto è stretta */
}
.wr-trip__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wr-trip__pills { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-wrap: nowrap; gap: 6px; }
.wr-trip__pill {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  height: 26px; padding: 0 10px; border-radius: 1000px;
  background: rgba(255, 255, 255, .92); color: var(--wr-gray-900);
  font-size: 13px; line-height: 16px; font-weight: 600; white-space: nowrap;
}
.wr-trip__pill svg { flex: none; width: 14px; height: 14px; } /* il tema dà misure proprie agli svg */
/* Se i tre badge non stanno su una riga (card strette, carosello mobile), via le partenze. */
@container (max-width: 330px) { .wr-trip__pill--dep { display: none; } }

.wr-trip__body { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 14px 16px 16px; }
.wr-trip__kicker { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wr-on-dark-kicker); }
.wr-trip__title { font-size: 19px; line-height: 25px; font-weight: 700; color: var(--wr-on-dark) !important; }
.wr-trip__title:hover { text-decoration: underline !important; }
.wr-trip__foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; }
.wr-trip__price { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.wr-trip__from { font-size: 13px; line-height: 16px; color: var(--wr-on-dark-soft); }
/* prezzo pieno + sconto restano insieme; se la card è stretta vanno a capo sotto "A partire da" */
.wr-trip__was { white-space: nowrap; }
.wr-trip__from s { font-size: 13px; color: var(--wr-on-dark-soft); }
.wr-trip__amount { font-size: 24px; line-height: 30px; font-weight: 700; color: var(--wr-on-dark); white-space: nowrap; }
.wr-trip__badge {
  display: inline-flex; margin-left: 6px; padding: 2px 6px; border-radius: 4px;
  background: var(--wr-badge-bg); color: var(--wr-badge-fg);
  font-size: 12px; line-height: 1; font-weight: 700;
}
.wr-trip__cta {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: 44px; padding: 0 16px; border-radius: 8px;
  background: var(--wr-primary); color: #fff !important;
  font-size: 16px; font-weight: 600; white-space: nowrap;
  transition: background-color .2s;
}
.wr-trip__cta:hover { background: var(--wr-primary-hover); }
.wr-trip a:focus-visible, .wr-trip__close:focus-visible { outline: 2px solid var(--wr-on-dark-kicker); outline-offset: 2px; }

@media (min-width: 1024px) {
  .wr-trip__title { font-size: 20px; line-height: 26px; }
  .wr-trip__amount { font-size: 26px; line-height: 32px; }
  .wr-trip__from s { font-size: 14px; }
  .wr-trip__cta { padding: 0 18px; }
}

/* ---------------------------------------------------------------- C6: card nel testo */

.wr-trips--c6 { margin: 32px 0; }
@media (min-width: 1024px) { .wr-trips--c6 { margin: 36px 0; } }
/* Orizzontale da tablet in su: la foto segue l'altezza della parte scura. */
@media (min-width: 640px) {
  .wr-trip--horizontal { flex-direction: row; }
  .wr-trip--horizontal .wr-trip__media { flex: 0 0 44%; aspect-ratio: auto; min-height: 180px; }
}

/* ---------------------------------------------------------------- C1: sidebar desktop */

.wr-trips--c1 { display: none; }
@media (min-width: 1024px) {
  .wr-trips--c1 { display: block; margin-top: 40px; } /* stacco dal Sommario */
  .single-post__sidebar:not(.has-toc) .wr-trips--c1 { margin-top: 0; }
  /* Se indice + card superano lo schermo, il `top` dello sticky lo gestisce trip-widgets.js
     (sidebar che scorre nella direzione dello scroll). */
}

/* ---------------------------------------------------------------- C2: barra mobile */

.wr-trips--c2 {
  position: fixed; left: 12px; right: 12px; bottom: 10px; z-index: 5; /* sopra il contenuto, sotto il backdrop del Sommario (z-10) */
  transition: opacity .2s ease, transform .2s ease;
}
.wr-trips--c2[hidden] { display: none; }
.wr-trips--c2.is-out { opacity: 0; transform: translateY(8px); pointer-events: none; }
@media (min-width: 1024px) { .wr-trips--c2 { display: none !important; } }
.wr-trip--bar {
  position: relative;
  display: grid; grid-template-columns: 56px minmax(0, 1fr);
  column-gap: 12px; align-items: center;
  padding: 10px 34px 10px 10px; /* a destra: spazio per la X */
  border-radius: 14px;
  box-shadow: 0 8px 24px rgba(17, 29, 33, .35);
}
.wr-trip--bar .wr-trip__thumb { grid-row: 1 / 4; width: 56px; height: 56px; border-radius: 10px; object-fit: cover; }
.wr-trip--bar .wr-trip__kicker { grid-column: 2; font-size: 11px; line-height: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-trip__kicker-rating { margin-left: 10px; letter-spacing: 0; text-transform: none; }
.wr-trip__kicker-rating svg { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; } /* il tema rende gli svg blocchi da 28 px */
.wr-trip--bar .wr-trip__title { grid-column: 2; font-size: 14px; line-height: 18px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wr-trip--bar .wr-trip__title:hover { text-decoration: none !important; }
.wr-trip--bar .wr-trip__title::after { content: ''; position: absolute; inset: 0; } /* tutta la barra è cliccabile */
.wr-trip__meta { grid-column: 2; display: block; font-size: 13px; line-height: 18px; color: var(--wr-on-dark-soft); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.wr-trip__meta s { color: var(--wr-on-dark-kicker); margin: 0 2px; }
.wr-trip--bar .wr-trip__amount { font-size: 15px; line-height: 18px; }
.wr-trip__close {
  /* piccola, nell'angolo in alto a destra della barra; tutta la barra è il link al viaggio */
  position: absolute; top: 6px; right: 6px; z-index: 1;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%;
  background: none; color: var(--wr-on-dark-soft); cursor: pointer;
}
.wr-trip__close:hover { color: #fff; }
.wr-trip__close svg { width: 12px; height: 12px; }
/* area di tocco più grande dell'icona, senza coprire il resto della barra */
.wr-trip__close::before { content: ''; position: absolute; inset: -8px; }

/* ---------------------------------------------------------------- C3: carosello di fondo articolo */

.wr-trips--c3 { margin-top: 70px; }
@media (min-width: 1024px) { .wr-trips--c3 { margin-top: 90px; } }
.wr-trips .wr-trips__kicker { font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wr-secondary); }
.wr-trips__title {
  margin: 8px 0 28px; font-size: 30px; line-height: 34px; font-weight: 800; color: var(--wr-heading);
}
@media (min-width: 1024px) { .wr-trips__title { margin-bottom: 32px; font-size: 36px; line-height: 40px; } }
.wr-trips--c3 .wr-trip__title { font-size: 17px; line-height: 23px; }
.wr-trips--c3 .wr-trip__cta { height: 40px; padding: 0 14px; font-size: 15px; }
.wr-trips__track {
  display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  margin: 0 -16px; padding: 0 16px 4px; scroll-padding: 0 16px; scrollbar-width: none;
}
.wr-trips__track::-webkit-scrollbar { display: none; }
.wr-trips__track > .wr-trip { flex: 0 0 281px; scroll-snap-align: start; }
@media (min-width: 640px) {
  .wr-trips__track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; overflow: visible; margin: 0; padding: 0; }
}
@media (min-width: 1024px) {
  .wr-trips--c3 .wr-trip__title { font-size: 18px; line-height: 24px; }
  .wr-trips--c3 .wr-trip__cta { height: 44px; padding: 0 18px; font-size: 16px; }
}

/* ---------------------------------------------------------------- Sommario mobile (tema) */

/* Arrivato in fondo all'indice, lo scroll non passa alla pagina sfocata dietro. */
#toc-mobile-panel { overscroll-behavior: contain; }