/* ==========================================================================
   tour-archive.css — Port Douglas Luxe Tours
   Stili di /tour/, l'archivio del CPT. Caricato SOLO li'.

   Namespace: .pdlt-tours (plurale). Non tocca .pdlt-tour, e .pdlt-tour non
   tocca questo: sono due template diversi con due fogli diversi. Colori,
   caratteri e easing arrivano dai token su :root in pdlt-base.css.

   Regole di brand applicate qui, per chi ci torna:
   - L'oro e' una spezia: in questa pagina ce n'e' UNO, l'eyebrow in testa.
     Sulle card no. Con otto card a schermo un eyebrow dorato per card
     farebbe otto elementi d'oro nel viewport contro un massimo di due.
   - Card: angoli vivi, nessun bordo, ombra morbida. Il raggio pillola e'
     riservato alle CTA primarie, e qui non ce ne sono.
   - Una riga di corsivo Cormorant per sezione: e' il .lead dell'intro.
   - L'animazione e' one-shot e muore sotto prefers-reduced-motion.
   ========================================================================== */

.pdlt-tours{
  --pdlt-shadow:0 1px 3px rgba(18,16,12,.05), 0 10px 34px rgba(18,16,12,.07);
  --pdlt-shadow-lift:0 2px 6px rgba(18,16,12,.07), 0 18px 48px rgba(18,16,12,.11);
  --pdlt-maxw:1220px;

  background:var(--pdlt-paper);
  color:var(--pdlt-ink);
  font-family:var(--pdlt-font-body);
}

.pdlt-tours-wrap{
  max-width:var(--pdlt-maxw);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,48px);
}

/* ---------- Testata ------------------------------------------------------
   La pagina porta la body class transparent-header, quindi #headerwrap e'
   fixed e galleggia sopra questa fascia. Il padding-top alto e' cio' che
   tiene l'H1 sotto il menu: non c'e' nessuna misura dell'header qui dentro,
   deliberatamente — vedi la nota su --pdlt-header-h in tour.css.
   ------------------------------------------------------------------------ */
.pdlt-tours-intro{
  background:var(--pdlt-ink);
  color:var(--pdlt-paper);
  padding-block:clamp(140px,17vw,210px) clamp(48px,7vw,88px);
  text-align:center;
}

.pdlt-tours-intro .eyebrow{
  display:block;
  font-family:var(--pdlt-font-wordmark);
  font-size:clamp(10px,1.1vw,12px);
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--pdlt-gold-bright);
  margin-bottom:clamp(14px,2vw,22px);
}

.pdlt-tours-intro h1{
  font-family:var(--pdlt-font-display);
  font-weight:300;
  font-size:clamp(38px,6.4vw,72px);
  line-height:1.04;
  letter-spacing:-.01em;
  margin:0;
  color:var(--pdlt-paper);
}

.pdlt-tours-intro .lead{
  font-family:var(--pdlt-font-display);
  font-size:clamp(17px,2.1vw,23px);
  line-height:1.5;
  color:color-mix(in srgb, var(--pdlt-linen) 78%, transparent);
  max-width:40ch;
  margin:clamp(16px,2.4vw,26px) auto 0;
}

/* ---------- Griglia ------------------------------------------------------ */
.pdlt-tours-grid{
  list-style:none;
  margin:clamp(48px,7vw,86px) 0 0;
  padding:0;
  display:grid;
  gap:clamp(28px,4vw,56px);
  grid-template-columns:1fr;
}

@media (min-width:900px){
  .pdlt-tours-grid{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Card --------------------------------------------------------- */
.pdlt-tours-card{
  background:#fff;                 /* card elevata su ivory: l'unica eccezione al "mai bianco puro" */
  box-shadow:var(--pdlt-shadow);
  transition:box-shadow .32s var(--pdlt-ease-luxe);
}

.pdlt-tours-card:hover{box-shadow:var(--pdlt-shadow-lift)}

.pdlt-tours-card .card-link{
  display:flex;
  flex-direction:column;
  height:100%;
  text-decoration:none;
  color:inherit;
}

.pdlt-tours-card .card-link:focus-visible{
  outline:2px solid var(--pdlt-gold);
  outline-offset:3px;
}

.pdlt-tours-card .card-photo{
  margin:0;
  aspect-ratio:16/10;
  overflow:hidden;
  background:var(--pdlt-linen);
}

.pdlt-tours-card .card-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  /* Nessuna scala e nessun sollevamento: si scurisce appena, e basta.
     I bouncy spring e i lift sono fuori dal brand. */
  transition:filter .32s var(--pdlt-ease-luxe);
}

.pdlt-tours-card:hover .card-photo img{filter:brightness(.94)}

.pdlt-tours-card .card-body{
  padding:clamp(22px,2.8vw,34px);
  display:flex;
  flex-direction:column;
  flex:1;
}

.pdlt-tours-card .card-eyebrow{
  font-family:var(--pdlt-font-wordmark);
  font-size:10px;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--pdlt-ink-soft);      /* non oro: vedi la nota in testa al file */
}

.pdlt-tours-card .card-title{
  font-family:var(--pdlt-font-display);
  font-weight:400;
  font-size:clamp(25px,2.9vw,34px);
  line-height:1.12;
  margin:clamp(10px,1.4vw,16px) 0 0;
  color:var(--pdlt-ink);
}

.pdlt-tours-card .card-tagline{
  font-size:15px;
  line-height:1.62;
  color:var(--pdlt-ink-soft);
  margin:clamp(10px,1.4vw,15px) 0 0;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.pdlt-tours-card .card-meta{
  font-family:var(--pdlt-font-wordmark);
  font-size:10px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--pdlt-ink-soft);
  margin:clamp(18px,2.4vw,26px) 0 0;
  padding-top:clamp(14px,1.8vw,18px);
  border-top:1px solid color-mix(in srgb, var(--pdlt-ink) 10%, transparent);
  /* margin-top:auto tiene la riga incollata in fondo anche quando le tagline
     hanno lunghezze diverse: le card restano allineate fra loro. */
  margin-top:auto;
}

/* ---------- Paginazione e vuoto ------------------------------------------ */
.pdlt-tours .navigation.pagination{
  margin-top:clamp(48px,6vw,72px);
  font-family:var(--pdlt-font-wordmark);
  font-size:12px;
  letter-spacing:.18em;
  text-align:center;
}

.pdlt-tours .navigation.pagination .page-numbers{
  padding:8px 14px;
  color:var(--pdlt-ink-soft);
  text-decoration:none;
}

.pdlt-tours .navigation.pagination .current{color:var(--pdlt-gold)}

.pdlt-tours-empty{
  font-family:var(--pdlt-font-display);
  font-size:22px;
  color:var(--pdlt-ink-soft);
  text-align:center;
  margin:clamp(60px,8vw,110px) 0;
}

/* ---------- Coda della pagina -------------------------------------------- */
.pdlt-tours-grid{margin-bottom:clamp(80px,10vw,140px)}

/* ---------- Rivelazione, one-shot ---------------------------------------- */
/* Sola CSS, nessun JS e nessun observer: le card sono poche e l'animazione
   tocca solo opacity e transform, quindi non produce layout shift. */
@media (prefers-reduced-motion:no-preference){
  .pdlt-tours-card{
    opacity:0;
    transform:translateY(14px);
    animation:pdlt-tours-in .56s var(--pdlt-ease-luxe) forwards;
    animation-delay:var(--pdlt-delay,0ms);
  }
  @keyframes pdlt-tours-in{
    to{opacity:1;transform:none}
  }
}