/* =====================================================
   VaiThailandia.com - Foglio di stile principale

   Impaginazione, trattamento delle immagini e misure dei
   caratteri e dei titoli sono quelli di ItaliaJapan.net
   (tmp/style.css di quel sito), riportati qui regola per
   regola e nello stesso ordine: diverse misure di
   ItaliaJapan non sono scritte da nessuna parte ma nascono
   dalla cascata, cioe' da quale regola viene dopo l'altra,
   e cambiando l'ordine cambierebbero anche qui.

   Restano di VaiThailandia i colori, il logo e la famiglia
   dei caratteri. Dove ItaliaJapan usa i suoi toni (il rosso
   hanko, il nero sumi, il crema washi) qui ci sono le
   variabili corrispondenti del sito:

     ItaliaJapan        VaiThailandia
     --hanko            --orange       (segni e filetti)
     --hanko (link)     --orange-dark  (testo dei link)
     --hanko-dark       --orange-deep  (link al passaggio)
     --sumi             --ink
     --washi-deep       --tint
     #333 del testo     --text
   ===================================================== */

/* ================= VARIABILI ================= */
:root{
  --orange:#d6336c;
  --orange-dark:#a02552;
  --orange-deep:#7d1b40;
  --ink:#2b2140;
  --text:#3d4152;
  /* sommari e descrizioni: un gradino sotto al testo, come il
     #4a4a4a e il #555 di ItaliaJapan */
  --text-soft:#505466;
  --muted:#6b7080;
  /* le etichette in maiuscoletto (orari, ingresso...) */
  --label:#8a8d99;
  --bg:#fff;
  --tint:#fbf0f4;
  --line:#e8e8ee;
  --max:1200px;

  /* Header: valori a riposo e valori compatti allo scorrimento.
     Sono quelli di ItaliaJapan; manca solo il pulsante "Prenota",
     quindi l'altezza della barra la detta il logo da solo. */
  --hdr-pad:26px;
  --hdr-logo:54px;
  --hdr-pad-scrolled:12px;
  --hdr-logo-scrolled:38px;

  /* Altezza dell'header nei due stati, +1px di bordo inferiore:
     serve allo spazio che il body riserva in cima e allo stacco
     delle ancore. */
  --hdr-h:calc(var(--hdr-logo) + var(--hdr-pad) * 2 + 1px);
  --hdr-h-scrolled:calc(var(--hdr-logo-scrolled) + var(--hdr-pad-scrolled) * 2 + 1px);
}

/* Schermi molto larghi: il contenuto si espande per ridurre i
   margini laterali */
@media (min-width:1920px){ :root{ --max:1440px; } }
@media (min-width:2600px){ :root{ --max:1680px; } }

/* ---------- LA MISURA DEL TESTO ----------
   Come su ItaliaJapan un blocco di testo occupa tutta la colonna
   che lo contiene, senza max-width in ch; sugli schermi molto
   larghi la colonna cresce con --max e il corpo del carattere con
   lei. Il blocco sta qui in testa come su ItaliaJapan, e come li'
   per il corpo degli articoli, il sommario e le informazioni
   pratiche vince la regola scritta piu' in basso: resta in vigore
   per l'introduzione delle regioni. */
@media (min-width:1920px){
  .article-body p,
  .article-body ul,
  .article-body ol,
  .article-header .dek,
  .percorso-intro,
  .info-utili__valore{ font-size:1.14rem; }
}
@media (min-width:2600px){
  .article-body p,
  .article-body ul,
  .article-body ol,
  .article-header .dek,
  .percorso-intro,
  .info-utili__valore{ font-size:1.22rem; }
}

/* ================= RESET E BASE ================= */
*{margin:0; padding:0; box-sizing:border-box;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  /* l'header e' fuori dal flusso: senza questo stacco le ancore
     interne finirebbero nascoste sotto la barra */
  scroll-padding-top:calc(var(--hdr-h-scrolled) + 12px);
  /* Il pannello del menu mobile resta fuori schermo a destra e
     allargherebbe l'area di scorrimento. "clip" e non "hidden":
     hidden creerebbe un contenitore di scorrimento e romperebbe
     il position:sticky della colonna di fianco. */
  overflow-x:clip;
}

body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  /* spazio riservato all'header, che essendo fisso non occupa
     posto nel flusso */
  padding-top:var(--hdr-h);
}

@media (prefers-reduced-motion:reduce){
  *{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* I titoli restano a 700 e non a 800 come su ItaliaJapan: li'
   l'800 e' un peso di Archivo, mentre fra i caratteri di sistema
   di questo sito Windows lo farebbe cadere sul Segoe UI Black,
   che e' un nero da manifesto. La stretta fra le lettere invece
   e' la stessa. */
h1,h2,h3,h4{
  font-weight:700;
  letter-spacing:-0.015em;
  color:var(--ink);
}
h3,h4{ letter-spacing:-0.01em; }

a{color:inherit; text-decoration:none;}

img{max-width:100%; height:auto; display:block;}

.eyebrow{
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--orange);
}

/* La sezione e la meta nell'occhiello sono collegamenti, ma non
   devono sembrare un link infilato in un'etichetta: tengono il
   colore della riga e si sottolineano al passaggio. */
.eyebrow a{
  color:inherit;
  border-bottom:1px solid transparent;
  transition:border-color 0.2s ease;
}
.eyebrow a:hover{border-bottom-color:currentColor;}

.wrap{
  max-width:var(--max);
  margin:0 auto;
  padding:0 28px;
}

/* ================= ACCESSIBILITA' ================= */
.skip-link{
  position:absolute;
  left:-999px;
  top:0;
  background:var(--orange-dark);
  color:#fff;
  padding:10px 18px;
  z-index:200;
}
.skip-link:focus{ left:8px; top:8px; }

a:focus-visible,
button:focus-visible{
  outline:2px solid var(--orange);
  outline-offset:3px;
  border-radius:3px;
}

/* ================= HEADER ================= */
/* Fisso e non sticky, come su ItaliaJapan: da sticky restava nel
   flusso, e comprimendosi allo scorrimento toglieva altezza al
   documento, il browser correggeva la posizione e la barra
   vibrava. Fuori dal flusso comprimersi non sposta niente: lo
   spazio in cima lo riserva il padding-top del body. */
.site-header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  transition:box-shadow 0.3s ease;
}

/* ombra piu' pronunciata quando l'header e' compatto */
.site-header.scrolled{
  box-shadow:0 2px 16px rgba(43,33,64,0.10);
}

.header-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:var(--hdr-pad) 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  transition:padding-top 0.35s ease, padding-bottom 0.35s ease;
}

.site-header.scrolled .header-inner{
  padding-top:var(--hdr-pad-scrolled);
  padding-bottom:var(--hdr-pad-scrolled);
}

.brand{
  display:flex;
  align-items:center;
  flex-shrink:0;
}

.brand-logo{
  height:var(--hdr-logo);
  width:auto;
  display:block;
  transition:height 0.35s ease;
}

.site-header.scrolled .brand-logo{
  height:var(--hdr-logo-scrolled);
}

/* ================= MENU ================= */
.main-nav ul{
  display:flex;
  gap:clamp(12px, 1.5vw, 26px);
  list-style:none;
}
.main-nav li{flex:0 0 auto;}

.main-nav a{
  font-size:0.87rem;
  font-weight:500;
  position:relative;
  padding:6px 2px;
  white-space:nowrap;
}

.main-nav a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:2px;
  background:var(--orange);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 0.25s ease;
}

.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav a[aria-current="page"]::after{ transform:scaleX(1); }

.hamburger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:34px;
  height:34px;
  background:none;
  border:none;
  cursor:pointer;
  /* sopra al pannello del menu, che entra da destra e lo
     coprirebbe: cosi' la X per chiuderlo resta visibile */
  position:relative;
  z-index:95;
}
.hamburger span{
  display:block;
  height:2px;
  background:var(--ink);
  border-radius:1px;
  transition:transform 0.25s ease, opacity 0.25s ease;
}
.hamburger span:nth-child(1){width:100%;}
.hamburger span:nth-child(2){width:70%; margin-left:auto;}
.hamburger span:nth-child(3){width:100%;}

.hamburger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg); width:100%;}
.hamburger.is-open span:nth-child(2){opacity:0;}
.hamburger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg); width:100%;}

/* ================= STRISCIA HERO (home) ================= */
.hero-strip{
  position:relative;
  /* spessore responsive: scala con la finestra tra 240px e 520px */
  height:clamp(240px, 42vw, 520px);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* La fotografia fa da sfondo: stesso ritaglio del background
   cover di ItaliaJapan, centrata un po' sotto la meta'. */
.hero-strip__img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 60%;
}

/* velo scuro per far risaltare il testo sopra l'immagine */
.hero-strip__overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    to bottom,
    rgba(28,28,30,0.45) 0%,
    rgba(28,28,30,0.30) 50%,
    rgba(28,28,30,0.55) 100%
  );
}

.hero-strip__title{
  position:relative;
  z-index:1;
  color:#fff;
  font-weight:700;
  font-size:clamp(1.8rem, 5vw, 3.6rem);
  letter-spacing:0.02em;
  text-align:center;
  padding:0 20px;
  text-shadow:0 2px 20px rgba(0,0,0,0.45);
}

/* ---- informazioni pratiche in coda alla scheda di un luogo ----
   Righe separate da una linea sottile invece che in un riquadro:
   restano parte dell'articolo, come i paragrafi che hanno sopra.
   L'icona sta in una colonna sua e occupa entrambe le righe della
   voce, cosi' etichetta e valore restano allineati fra loro. */
.info-utili{
  margin-top:22px;
  border-top:1px solid var(--line);
}

.info-utili__voce{
  display:grid;
  grid-template-columns:22px 1fr;
  column-gap:16px;
  padding:15px 2px;
  border-bottom:1px solid var(--line);
}

.info-utili__icona{
  grid-row:1 / span 2;
  align-self:start;
  margin-top:1px;
  color:var(--orange);
}
.info-utili__icona svg{
  display:block;
  width:20px;
  height:20px;
}

/* L'etichetta e' un titoletto, non l'inizio della frase: sta un
   gradino sotto al valore per corpo e colore. */
.info-utili__etichetta{
  font-size:0.72rem;
  font-weight:600;
  letter-spacing:0.09em;
  text-transform:uppercase;
  color:var(--label);
  margin-bottom:4px;
}

.info-utili__valore{
  /* stessi corpo e colore dei paragrafi dell'articolo: il blocco
     sta in fondo al testo e un salto di mezzo punto si vedrebbe */
  font-size:1.02rem;
  color:var(--text);
  line-height:1.65;
  /* gli indirizzi thailandesi sono lunghi e senza spazi utili */
  overflow-wrap:anywhere;
}

@media (max-width:520px){
  .info-utili__voce{ column-gap:12px; padding:13px 0; }
}

/* ================= COLONNA DI FIANCO ================= */
/* La colonna segue lo scorrimento. Lo stacco dall'alto sta nella
   variabile --sidebar-top, che lo script in footer.php ricalcola:
   se la colonna ci sta nella finestra resta ferma sotto la barra,
   se e' piu' alta sale con la pagina finche' non se ne vede il
   fondo. Il valore di ripiego serve se lo script non gira. */
.sidebar{
  display:flex;
  flex-direction:column;
  gap:28px;
  position:sticky;
  align-self:start;
  top:var(--sidebar-top, calc(var(--hdr-h) + 20px));
}

.side-box{
  background:#fff;
  border:1px solid var(--line);
  padding:24px;
}

.side-box h2{
  font-size:1rem;
  margin-bottom:16px;
}

/* La freccia al posto del punto elenco: i riquadri sono elenchi
   di collegamenti, non di cose. */
.link-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.link-list a{
  font-size:0.88rem;
  display:flex;
  gap:10px;
  align-items:baseline;
  transition:color 0.2s ease;
}
.link-list a::before{
  content:"\2192";
  color:var(--orange);
  font-size:0.8rem;
}
.link-list a:hover{color:var(--orange-dark);}

/* ================= FOOTER ================= */
/* Fondo scuro e collegamenti smorzati come su ItaliaJapan. Al
   posto della presentazione dell'autore e della mappa del sito
   ci sono le quattro colonne di VaiThailandia, ciascuna col suo
   titoletto. */
.site-footer{
  background:var(--ink);
  color:#cfcad8;
  padding:64px 0 28px;
  margin-top:40px;
}

.footer-cols{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:40px;
  padding-bottom:32px;
  border-bottom:1px solid rgba(255,255,255,0.12);
}

.footer-col__titolo{
  font-weight:700;
  font-size:1.12rem;
  letter-spacing:-0.01em;
  color:#fff;
  margin-bottom:14px;
}

.footer-col ul{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.footer-col a{
  font-size:0.88rem;
  color:#b9b4c6;
  transition:color 0.2s ease;
}
.footer-col a:hover,
.footer-col a:focus-visible{ color:#fff; }

/* La riga di chiusura: copyright e informativa centrati insieme.
   Il testo del copyright e' lungo, e quando non ci sta sulla
   stessa riga l'informativa va a capo. */
.footer-bottom{
  display:flex;
  justify-content:center;
  align-items:center;
  padding-top:24px;
  font-size:0.78rem;
  color:#8f8aa0;
  flex-wrap:wrap;
  gap:6px 12px;
  text-align:center;
}
.footer-bottom__link{white-space:nowrap;}
.footer-bottom a{
  color:#b9b4c6;
  border-bottom:1px solid rgba(255,255,255,0.22);
  padding-bottom:1px;
  transition:color 0.2s ease, border-color 0.2s ease;
}
.footer-bottom a:hover,
.footer-bottom a:focus-visible{
  color:#fff;
  border-color:rgba(255,255,255,0.6);
}

/* ================= ARTICOLO ================= */
.article-header{
  padding:48px 0 36px;
  border-bottom:1px solid var(--line);
}

.article-header .eyebrow{display:block; margin-bottom:14px;}

.article-header h1{
  font-size:clamp(2rem, 3.6vw, 2.9rem);
  line-height:1.2;
  margin-bottom:18px;
}

.article-header .dek{
  font-size:1.08rem;
  color:var(--text-soft);
  margin-bottom:26px;
}

/* L'introduzione delle sezioni arriva dal database in paragrafi,
   a volte due e con qualche collegamento dentro: si leggono come
   il resto del sommario, con i link del corpo del testo. */
.article-header .dek p + p{margin-top:0.8em;}
.article-header .dek a{
  color:var(--orange-dark);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color 0.2s ease;
}
.article-header .dek a:hover{color:var(--orange-deep);}

/* La fotografia di apertura, ritagliata in due a uno. Il rapporto
   sta sul contenitore e non sull'immagine: lo spazio e' riservato
   prima che la fotografia arrivi e la pagina non salta. */
.article-cover{
  margin-top:36px;
  aspect-ratio:16/8;
  border-radius:2px;
  position:relative;
  overflow:hidden;
  background:var(--tint);
}
.article-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.article-cover .caption{
  position:absolute;
  bottom:0; left:0; right:0;
  padding:16px 20px;
  background:linear-gradient(to top, rgba(0,0,0,0.55), transparent);
  color:#fff;
  font-size:0.7rem;
  letter-spacing:0.1em;
}
.article-cover .caption .credito{
  /* l attribuzione delle fotografie Creative Commons: deve
     esserci ed essere leggibile, ma non deve pesare quanto il
     nome del luogo che le sta accanto */
  opacity:.72;
  font-size:.86em;
}

/* overflow-wrap e' l'unica aggiunta rispetto a ItaliaJapan: un
   indirizzo lungo senza spazi, su un telefono, sporgerebbe oltre
   la colonna e farebbe scorrere la pagina di lato. Una parola si
   spezza solo se non ci sta. */
.article-body{ margin-top:8px; overflow-wrap:break-word; }

.article-body > * + *{margin-top:1.1em;}

.article-body p{
  font-size:1.02rem;
  color:var(--text);
}

.article-body h2{
  font-size:1.5rem;
  margin-top:2.2em !important;
  margin-bottom:0.2em;
}

.article-body h3{
  font-size:1.18rem;
  margin-top:1.8em !important;
}

.article-body blockquote{
  border-left:3px solid var(--orange);
  padding:4px 0 4px 20px;
  font-size:1.18rem;
  color:var(--ink);
}

/* Anche gli elenchi numerati: su ItaliaJapan non ce ne sono nel
   corpo degli articoli, qui un paio si', e senza rientro i numeri
   finirebbero fuori dalla colonna. */
.article-body ul,
.article-body ol{
  padding-left:22px;
  color:var(--text);
  font-size:1.02rem;
}
.article-body li{margin-top:0.4em;}
.article-body li::marker{color:var(--orange);}

.article-body a{
  color:var(--orange-dark);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  transition:color 0.2s ease;
}
.article-body a:hover{color:var(--orange-deep);}

/* Le fotografie dentro il testo. Su ItaliaJapan stanno in una
   <figure class="pull-figure"> con la didascalia sotto: una
   cornice sottile staccata di quattro pixel dall'immagine. Nei
   testi di VaiThailandia le poche fotografie sono <img> nudi fra
   un paragrafo e l'altro, e prendono la stessa cornice senza
   bisogno di toccare il database; la classe .pull-figure resta
   pronta per le schede nuove che vorranno anche la didascalia. */
.pull-figure,
.article-body > img,
.article-body > p > img{
  border:1px solid var(--line);
  background:#fff;
  padding:4px;
}
.pull-figure img,
.article-body > img,
.article-body > p > img{
  width:100%;
  height:auto;
}
.pull-figure figcaption{
  padding:10px 6px 4px;
  font-size:0.7rem;
  letter-spacing:0.04em;
  color:#7a7d89;
}

/* Il riquadro del consiglio pratico, uno per scheda. ItaliaJapan
   non ne ha, e prende la forma dei suoi blocchi evidenziati: fondo
   appena tinto e filetto colorato a sinistra, senza angoli
   arrotondati e con il corpo del testo che ha intorno. */
.article-body .tip{
  padding:18px 22px;
  background:var(--tint);
  border-left:3px solid var(--orange);
  font-size:1.02rem;
  line-height:1.78;
  color:var(--text);
}

/* Box prodotto Amazon (oggi nessuna scheda lo usa) */
.amzbox{
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid var(--line);
  border-left:3px solid var(--orange);
  padding:14px 18px;
  background:#fff;
}
.amzbox .amz-ico{font-size:1.6rem;}
.amzbox p{font-size:0.95rem;}
.amzbox a{font-weight:700;}

/* ================= ELENCO LUOGHI DI UNA META ================= */
.poi-list{
  display:flex;
  flex-direction:column;
  /* senza cornice attorno a ciascuna voce e' lo spazio a
     separarle, quindi serve piu' aria che fra due paragrafi */
  gap:38px;
}
.poi-list h2{margin-bottom:0.2em;}

.poi{
  display:grid;
  grid-template-columns:230px 1fr;
  gap:24px;
  align-items:start;
}

.poi__img{
  display:block;
  position:relative;
  aspect-ratio:3/2;
  overflow:hidden;
  background:linear-gradient(135deg, var(--orange-dark) 0%, var(--ink) 100%);
}
.poi__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.35s ease;
}
.poi:hover .poi__img img{transform:scale(1.05);}

.poi__body{min-width:0;}

.poi__title{
  font-size:1.22rem;
  margin-top:0;
  margin-bottom:6px;
  /* allinea la prima riga di testo al filo della foto */
  line-height:1.25;
}

/* Il titolo deve partire alla stessa quota del bordo superiore
   della foto: dentro .article-body gli h3 hanno un margine
   superiore dichiarato !important, e senza questa regola il
   titolo scenderebbe di una trentina di pixel. */
.article-body .poi__title{margin-top:0 !important;}
.poi__title a{transition:color 0.2s ease;}
.poi__title a:hover{color:var(--orange-deep);}

.poi__desc{
  font-size:0.95rem;
  color:var(--text-soft);
  margin-bottom:10px;
}

.poi__links{
  font-size:0.88rem;
}
.poi__links a{
  color:var(--orange-dark);
  transition:color 0.2s ease;
}
.poi__links a:hover{color:var(--orange-deep);}
.poi__links span{
  color:#b5b5bc;
  margin:0 6px;
}

/* dentro il corpo dell'articolo: niente sottolineatura dei link
   del testo e margini coerenti */
.article-body .poi-list{margin-top:2.2em;}
.article-body .poi__links a,
.article-body .poi__title a{text-decoration:none;}
.article-body .poi__desc{font-size:0.95rem;}

@media (max-width:640px){
  .poi{grid-template-columns:1fr; gap:14px;}
  .poi__img{aspect-ratio:16/9;}
}

/* tabelle nel corpo dell'articolo */
.article-body table{
  width:100%;
  border-collapse:collapse;
  font-size:0.92rem;
}
.article-body td,
.article-body th{
  border:1px solid var(--line);
  padding:8px 12px;
  vertical-align:top;
  text-align:left;
}
.article-body tr:nth-child(even) td{
  background:#faf8fa;
}
@media (max-width:640px){
  .article-body table{display:block; overflow-x:auto;}
}

/* ================= LAYOUT PAGINA ================= */
.content-area{
  padding-top:48px;
  padding-bottom:64px;
}

.layout-grid{
  display:grid;
  grid-template-columns:minmax(0, 1fr) 320px;
  gap:32px;
  align-items:start;
}

/* ================= SCHEDE IN GRIGLIA ================= */
.home-cards{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}

.home-card{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
  color:inherit;
  transition:transform 0.28s ease, box-shadow 0.28s ease;
}

/* Il bordo resta del colore di riposo: al passaggio del mouse si
   muovono solo il sollevamento e l'ombra. */
.home-card:hover,
.home-card:focus-visible{
  transform:translateY(-6px);
  box-shadow:0 16px 34px rgba(43,33,64,0.13);
}

.home-card__img{
  position:relative;
  aspect-ratio:3/2;      /* le immagini sono 600x400 */
  overflow:hidden;
  background:var(--tint);
}
.home-card__img img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.4s ease;
}
.home-card:hover .home-card__img img,
.home-card:focus-visible .home-card__img img{
  transform:scale(1.06);
}

.home-card__body{
  display:flex;
  flex-direction:column;
  flex:1;
  padding:22px 22px 24px;
}

.home-card__title{
  font-weight:700;
  font-size:1.28rem;
  line-height:1.25;
  margin-bottom:10px;
}

.home-card__desc{
  font-size:0.95rem;
  color:var(--text-soft);
  line-height:1.6;
}

/* tablet: 2 colonne */
@media (max-width:980px){
  .home-cards{grid-template-columns:repeat(2, 1fr); gap:24px;}
}

/* mobile: 1 colonna */
@media (max-width:640px){
  .home-cards{grid-template-columns:1fr; gap:22px;}
}

/* ---------- griglia fitta: solo /destinazioni ----------
   Cinque schede per riga come su ItaliaJapan: le schede scendono
   a circa 210px, quindi titolo e sommario si riscalano. Il
   sommario si legge per intero; il pavimento di cinque righe
   evita le schede troppo basse accanto a quelle piene. */
.home-cards--fitta{
  grid-template-columns:repeat(5, 1fr);
  gap:18px;
}
.home-cards--fitta .home-card__body{
  padding:15px 15px 17px;
}
.home-cards--fitta .home-card__title{
  font-size:1.02rem;
  line-height:1.3;
  margin-bottom:7px;
}
.home-cards--fitta .home-card__desc{
  font-size:0.82rem;
  line-height:1.5;
  min-height:7.5em;
}

@media (max-width:1150px){
  .home-cards--fitta{grid-template-columns:repeat(4, 1fr);}
}
@media (max-width:980px){
  .home-cards--fitta{grid-template-columns:repeat(3, 1fr); gap:14px;}
}
@media (max-width:760px){
  .home-cards--fitta{grid-template-columns:repeat(2, 1fr);}
  /* da qui in giu' le schede sono larghe e il pavimento
     lascerebbe un vuoto */
  .home-cards--fitta .home-card__desc{min-height:0;}
}
@media (max-width:420px){
  .home-cards--fitta{grid-template-columns:1fr;}
  .home-cards--fitta .home-card__title{font-size:1.1rem;}
  .home-cards--fitta .home-card__desc{font-size:0.9rem;}
}

/* ================= BREADCRUMBS ================= */
/* Le briciole di pane sono una striscia scura sotto l'header, come
   la riga di un indirizzo. Il separatore e' l'unico segno di
   colore. */
.breadcrumbs{
  background:var(--ink);
}

.breadcrumbs ol{
  max-width:var(--max);
  margin:0 auto;
  padding:11px 28px;
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  font-size:0.74rem;
  letter-spacing:0.05em;
}

.breadcrumbs li{
  display:flex;
  align-items:center;
  gap:10px;
}

.breadcrumbs li + li::before{
  content:"/";
  color:var(--orange);
}

.breadcrumbs a{
  color:#b9b4c6;
  transition:color 0.2s ease;
}
.breadcrumbs a:hover{color:#fff;}

.breadcrumbs [aria-current="page"]{
  color:#fff;
  font-weight:500;
}

@media (max-width:760px){
  .breadcrumbs ol{padding-left:20px; padding-right:20px;}
}

/* ================= PAGINA DESTINAZIONI ================= */
/* ---------- testata: mappa a sinistra, prime dieci a destra ----------
   Le due colonne devono finire alla stessa altezza, come su
   ItaliaJapan. Chi la detta e' la mappa, che ha proporzioni fisse;
   l'elenco a destra si adatta con align-items:stretch qui e
   grid-template-rows:repeat(5, 1fr) sulle righe, che si dividono in
   parti uguali l'altezza avanzata.

   Su ItaliaJapan le colonne sono meta' e meta', perche' il Giappone
   e' alto poco piu' di quanto e' largo. La Thailandia e' alta una
   volta e mezza la sua larghezza: a meta' pagina la mappa sarebbe
   alta novecento pixel e le righe delle dieci mete si allargherebbero
   a vuoto. La colonna della mappa e' percio' piu' stretta, quanto
   basta perche' le due colonne arrivino in fondo insieme. */
.testata-dest{
  display:grid;
  grid-template-columns:minmax(0, 0.68fr) minmax(0, 1fr);
  gap:40px;
  align-items:stretch;
  margin-bottom:56px;
}

/* Sotto i 1024px le colonne si impilano, ed e' anche la soglia
   sotto la quale la mappa lascia il posto all'elenco delle
   regioni: le due cose vanno insieme. */
@media (max-width:1024px){
  .testata-dest{grid-template-columns:1fr; gap:40px;}
}

/* L'introduzione di una regione, sotto il suo titolo */
.percorso-intro{
  margin:-12px 0 26px;
  color:var(--text-soft);
  line-height:1.7;
}

/* sezioni per regione: le ancore #regione non finiscono sotto
   l'header */
.dest-region{
  scroll-margin-top:110px;
}

.dest-region + .dest-region{
  margin-top:52px;
}

.dest-region__title{
  display:flex;
  align-items:baseline;
  gap:12px;
  font-size:1.45rem;
  padding-bottom:12px;
  margin-bottom:24px;
  border-bottom:2px solid var(--ink);
}

/* "TOP 10 THAILANDIA", "TOP 7 THAILANDIA CENTRALE": l'etichetta
   in fondo alla riga del titolo. Il titolo e' un flex: basta che
   il margine sinistro si prenda tutto lo spazio avanzato, e il gap
   resta come distanza minima su schermo stretto. */
.dest-region__etichetta{
  font-size:0.72rem;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--orange);
}
.dest-region__etichetta--destra{
  margin-left:auto;
  text-align:right;
}

/* Il nome della regione nel titolo porta alla sua pagina: resta
   scuro come un titolo e prende il colore solo al passaggio. */
.dest-region__title a{
  color:inherit;
  border-bottom:2px solid transparent;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.dest-region__title a:hover{
  color:var(--orange-deep);
  border-bottom-color:var(--orange);
}

/* "Tutte le mete delle Andamane →" in fondo a ogni regione */
.dest-region__tutte{
  margin-top:18px;
  font-size:0.95rem;
  font-weight:500;
}
.dest-region__tutte a{
  border-bottom:1px solid var(--line);
  padding-bottom:2px;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.dest-region__tutte a:hover{
  color:var(--orange-deep);
  border-bottom-color:var(--orange);
}

/* ---------- le dieci mete da non perdere ---------- */

/* La colonna si allunga fino all'altezza della mappa e l'elenco si
   prende lo spazio che resta: e' cosi' che le due colonne della
   testata finiscono alla stessa altezza senza numeri magici. */
.top-dest{
  display:flex;
  flex-direction:column;
  scroll-margin-top:110px;
}

/* Due colonne da cinque, numerate lungo la colonna e non lungo la
   riga: grid-auto-flow:column riempie 1-5 a sinistra e 6-10 a
   destra, che in una classifica e' l'ordine in cui si legge.
   Le righe sono 1fr, quindi si dividono in parti uguali l'altezza
   disponibile. */
.top-dest__elenco{
  flex:1;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-template-rows:repeat(5, 1fr);
  grid-auto-flow:column;
  gap:4px 22px;
  list-style:none;
}

.top-dest__elenco > li{ display:flex; }

.top-dest__scheda{
  position:relative;
  flex:1;
  display:grid;
  grid-template-columns:minmax(104px, 45%) 1fr;
  gap:16px;
  align-items:center;
  padding:7px;
  color:inherit;
  transition:background 0.2s ease;
}
.top-dest__scheda:hover,
.top-dest__scheda:focus-visible{ background:var(--tint); }

.top-dest__miniatura{
  display:block;
  position:relative;
  aspect-ratio:3/2;     /* le immagini sono 600x400: nessun taglio */
  overflow:hidden;
  background:var(--tint);
}
.top-dest__miniatura img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform 0.4s ease;
}
.top-dest__scheda:hover .top-dest__miniatura img,
.top-dest__scheda:focus-visible .top-dest__miniatura img{ transform:scale(1.07); }

/* Il numero sta sull'angolo della foto, con la stessa regola per
   le dieci da non perdere e per le schede delle regioni: sono la
   stessa classifica vista a due livelli. */
.top-dest__numero,
.home-card__numero{
  position:absolute;
  top:0;
  left:0;
  min-width:25px;
  height:23px;
  padding:0 5px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--orange);
  color:#fff;
  font-weight:700;
  font-size:0.87rem;
  font-variant-numeric:tabular-nums;
}

.top-dest__testo{ display:block; min-width:0; }

.top-dest__nome{
  display:block;
  font-weight:700;
  font-size:1.06rem;
  line-height:1.25;
}
.top-dest__scheda:hover .top-dest__nome{ color:var(--orange-dark); }

/* Tre righe e non piu' di tre: una rete di sicurezza, le frasi
   sono scritte per starci. */
.top-dest__motivo{
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  margin-top:3px;
  font-size:0.87rem;
  color:var(--muted);
  line-height:1.45;
}

@media (max-width:1024px){
  .top-dest__elenco{
    grid-template-rows:none;
    grid-auto-flow:row;
    gap:2px 26px;
  }
}
@media (max-width:640px){
  .top-dest__elenco{grid-template-columns:1fr;}
}
@media (max-width:460px){
  .top-dest__scheda{grid-template-columns:84px 1fr; gap:11px;}
  .top-dest__nome{font-size:0.92rem;}
}

/* ---------- mappa della Thailandia cliccabile ---------- */
/* Senza margine in basso: il distacco dalle sezioni per regione lo
   mette .testata-dest. Con il margine sarebbe il margin-box della
   mappa a dettare l'altezza della riga della griglia. */
.mappa{ scroll-margin-top:110px; }

.mappa__tela{
  display:flex;
  justify-content:center;
  align-items:flex-start;
}

/* Nessun tetto in pixel accanto alle dieci mete: la mappa prende
   tutta la sua colonna, ed e' la colonna a essere dimensionata in
   .testata-dest. Impilata invece prenderebbe tutta la pagina, e
   con le proporzioni della Thailandia sarebbe alta piu' di uno
   schermo: li' la si ferma a una misura che si legge intera. */
.mappa__svg{
  width:100%;
  height:auto;
}
@media (max-width:1024px){
  .mappa__svg{max-width:440px;}
}

.mappa__svg a{cursor:pointer;}

/* ATTENZIONE alle unita': dentro l'SVG spessori e corpo del
   carattere sono in unita' del viewBox, non in pixel di schermo.
   Il viewBox e' largo 320 unita' e la mappa e' disegnata fra i 440
   e i 460 pixel, quindi un'unita' vale circa 1,4px: 0,9 di tratto
   sono 1,3px reali e un corpo 9 sono 12,5px. */
.mappa__area{
  fill:var(--tint);
  stroke:#c9a3b2;
  stroke-width:0.9;
  stroke-linejoin:round;
  transition:fill 0.18s ease, stroke 0.18s ease;
}

.mappa__nome{
  fill:#5a5566;
  font-size:9px;
  font-weight:600;
  letter-spacing:0.02em;
  dominant-baseline:middle;
}

/* La regione scelta si tinge invece di riempirsi di colore pieno:
   i nomi delle due coste stanno in mare, accanto alla sagoma, e con
   un fondo pieno accanto si leggerebbero male. */
.mappa__svg a:hover .mappa__area,
.mappa__svg a:focus-visible .mappa__area{
  fill:#f3c6d6;
  stroke:var(--orange);
}
.mappa__svg a:hover .mappa__nome,
.mappa__svg a:focus-visible .mappa__nome{
  fill:var(--orange-deep);
}
.mappa__svg a:focus-visible{outline:none;}
.mappa__svg a:focus-visible .mappa__area{stroke-width:1.8;}

/* Compare solo sotto i 640px, dove la mappa si nasconde perche' i
   nomi non si leggerebbero piu': sopra quella soglia sarebbe un
   doppione dei collegamenti della mappa. */
.mappa__elenco{
  display:none;
  flex-wrap:wrap;
  gap:9px;
  list-style:none;
}
.mappa__elenco a{
  display:inline-block;
  padding:6px 12px;
  border:1px solid var(--line);
  font-size:0.88rem;
  font-weight:500;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.mappa__elenco a:hover{border-color:var(--orange); background:var(--tint);}
.mappa__conta{
  font-size:0.7rem;
  color:var(--label);
  margin-left:4px;
}

@media (max-width:640px){
  .mappa__tela{display:none;}
  .mappa__elenco{display:flex;}
}

/* ---------- pagina di regione ---------- */
/* layout senza colonna di fianco: la guida della regione e le
   mete a tutta larghezza */
.layout-full{
  display:block;
}

/* Le mete arrivano dopo il testo della regione: ci vuole uno
   stacco piu' marcato di quello fra due paragrafi. */
.regione-mete{
  margin-top:52px;
  padding-top:8px;
}

.altre-regioni{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:10px 16px;
  margin-top:52px;
  padding-top:26px;
  border-top:1px solid var(--line);
}
.altre-regioni__etichetta{
  font-size:0.7rem;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--label);
}
.altre-regioni ul{
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  list-style:none;
}
.altre-regioni a{
  display:inline-block;
  padding:6px 12px;
  border:1px solid var(--line);
  font-size:0.88rem;
  font-weight:500;
  transition:border-color 0.2s ease, background 0.2s ease;
}
.altre-regioni a:hover{border-color:var(--orange); background:var(--tint);}

/* ================= RESPONSIVE ================= */
@media (max-width:980px){
  .layout-grid{grid-template-columns:minmax(0, 1fr) 260px; gap:28px;}
  .footer-cols{grid-template-columns:repeat(2, minmax(0, 1fr)); gap:32px 40px;}
}

/* Menu a scomparsa. Su ItaliaJapan la soglia e' 1129px perche' la
   barra deve contenere sei voci e il pulsante di prenotazione;
   qui le voci sono cinque e corte, la barra intera sta in poco
   piu' di 600px, e il pannello arriva insieme al resto del
   passaggio al telefono. */
@media (max-width:760px){
  :root{
    --hdr-pad:21px;
    --hdr-logo:40px;
    --hdr-pad-scrolled:12px;
    --hdr-logo-scrolled:30px;
  }

  /* Chiuso, il pannello e' anche invisibile e non solo spostato
     fuori schermo: su ItaliaJapan la sua ombra sporge sul bordo
     destro della pagina come una striscia grigia, e le voci del
     menu restano raggiungibili col tasto Tab anche quando non si
     vedono. La visibilita' cambia a scorrimento finito, quindi
     l'uscita resta animata. */
  .main-nav{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:min(78vw, 320px);
    background:var(--bg);
    border-left:1px solid var(--line);
    padding:90px 28px 28px;
    transform:translateX(100%);
    visibility:hidden;
    transition:transform 0.3s ease, visibility 0s linear 0.3s;
    z-index:90;
    box-shadow:-12px 0 30px rgba(0,0,0,0.08);
  }
  .main-nav.is-open{
    transform:translateX(0);
    visibility:visible;
    transition:transform 0.3s ease, visibility 0s;
  }
  .main-nav ul{flex-direction:column; gap:22px;}
  .main-nav a{font-size:1.05rem;}
  .hamburger{display:flex;}

  .nav-backdrop{
    position:fixed; inset:0;
    background:rgba(43,33,64,0.4);
    opacity:0; pointer-events:none;
    transition:opacity 0.3s ease;
    z-index:80;
  }
  .nav-backdrop.is-open{opacity:1; pointer-events:auto;}

  .header-inner{
    padding-left:20px;
    padding-right:20px;
  }

  .layout-grid{grid-template-columns:minmax(0, 1fr);}
  .wrap{padding:0 20px;}
  .article-header{padding:36px 0 28px;}
  /* a una colonna la colonna di fianco finisce sotto all'articolo:
     non ha piu' niente accanto a cui restare agganciata */
  .sidebar{position:static;}
  .content-area{padding-top:36px; padding-bottom:48px;}
}

@media (max-width:520px){
  .footer-cols{grid-template-columns:1fr;}
}

/* =====================================================
   MISURA DEL TESTO
   Il testo occupa tutta la colonna; a righe piu' lunghe serve
   piu' aria fra le righe, altrimenti l'occhio sbaglia il ritorno
   a capo.
   ===================================================== */
.article-body p,
.article-body ul,
.article-body ol{
  line-height:1.78;
}

/* Ancore: senza questo il bersaglio finisce sotto l'header quando
   si clicca un link interno. */
:target{scroll-margin-top:110px;}
h2[id], h3[id], section[id]{scroll-margin-top:110px;}

/* Su schermi molto larghi cresce il testo, non la riga */
@media (min-width:1600px){
  .article-body > p,
  .article-body > ul,
  .article-body > ol{ font-size:1.06rem; }
  .article-body{ line-height:1.72; }
}

/* =====================================================
   HOMEPAGE: blocchi in evidenza
   ===================================================== */
.home-blocco{
  margin-top:60px;
  padding-top:44px;
  border-top:1px solid var(--line);
}
.home-blocco__testa{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  margin-bottom:26px;
}
.home-blocco__testa h2{
  font-size:clamp(1.45rem, 2.3vw, 1.95rem);
  margin-top:6px;
}
.home-blocco__tutti{
  font-size:0.7rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--orange-dark);
  white-space:nowrap;
  padding-bottom:4px;
  border-bottom:1px solid currentColor;
}
.home-blocco__tutti:hover{color:var(--orange-deep);}

/* mete in evidenza: fotografia con il nome sovrapposto */
.home-mete{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:20px;
}
.home-meta{
  position:relative;
  display:block;
  aspect-ratio:3/2;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--tint);
}
.home-meta img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform 0.45s ease;
}
.home-meta:hover img,
.home-meta:focus-visible img{transform:scale(1.06);}

.home-meta__overlay{
  position:absolute;
  inset:auto 0 0 0;
  padding:34px 18px 16px;
  background:linear-gradient(to top, rgba(28,28,30,0.85) 15%, rgba(28,28,30,0) 100%);
  color:#fff;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.home-meta__overlay strong{
  font-size:1.2rem;
  line-height:1.2;
}
/* La descrizione arriva gia' accorciata da descrizione_breve(): il
   taglio a due righe e' una rete di sicurezza. */
.home-meta__overlay small{
  font-size:0.82rem;
  line-height:1.35;
  color:rgba(255,255,255,0.88);
  margin-top:6px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

@media (max-width:900px){
  .home-mete{grid-template-columns:repeat(2, 1fr);}
}
@media (max-width:560px){
  .home-mete{grid-template-columns:1fr;}
  .home-blocco{margin-top:44px; padding-top:34px;}
}

/* =====================================================
   AREE DI TOCCO
   Su mobile alcuni link sarebbero alti meno dei 24px consigliati
   (WCAG 2.2) e scomodi da centrare col pollice: si allarga l'area
   cliccabile senza cambiare l'aspetto del testo.
   ===================================================== */
@media (max-width:760px){
  .home-blocco__tutti,
  .poi__links a,
  .link-list a,
  .breadcrumbs a{
    display:inline-block;
    padding-top:6px;
    padding-bottom:6px;
    min-height:24px;
  }

  /* nel menu a scomparsa le voci diventano bersagli ampi */
  .main-nav a{
    display:block;
    padding:10px 0;
  }
}

/* La testata dei blocchi va a capo pulita quando lo spazio non
   basta, invece di schiacciare titolo e link. */
@media (max-width:520px){
  .home-blocco__testa{
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }
}