/* ==========================================================================
   tour-grid.css: Port Douglas Luxe Tours
   La griglia dello shortcode [pdlt_tour_grid], oggi in homepage. Accodato
   in homepage da functions.php, altrove dallo shortcode stesso.

   Namespace: .pdlt-tourgrid. Non tocca .pdlt-tour (pagina del tour) ne'
   .pdlt-tours (archivio), e non tocca nulla di Themify. Colori, caratteri e
   easing arrivano dai token su :root in pdlt-base.css.

   Le misure di titolo, testo, velatura e freccia sono quelle della griglia
   costruita a mano in Themify che questa sostituisce, lette dagli stili
   calcolati il 2026-10-19: il cambio non deve vedersi, a parte le foto.

   Colonne:
   - desktop (>1024px): 3 o 4, le decide functions.php e arrivano qui come
     classe pdlt-tourgrid--cols-N. L'ultima riga incompleta sta al centro
     (flex + center).
   - tablet (681-1024px): 2. A 1024 Themify ne teneva 4 da 217px, con titoli
     spezzati su tre righe.
   - mobile (<=680px): 1.

   Regole di brand applicate qui:
   - niente oro sulle card: con 9 card a schermo sarebbero 9 elementi d'oro.
   - angoli vivi; il gradiente esiste solo come velatura sotto il testo.
   - hover che cambia colore e luce, mai scala o sollevamento.
   - transizioni spente sotto prefers-reduced-motion.
   ========================================================================== */

ul.pdlt-tourgrid{
  --pdlt-gap-x:20px;
  --pdlt-gap-y:48px;
  --pdlt-card-h:500px;

  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:var(--pdlt-gap-y) var(--pdlt-gap-x);
}

.pdlt-tourgrid--cols-1{--pdlt-cols:1}
.pdlt-tourgrid--cols-2{--pdlt-cols:2}
.pdlt-tourgrid--cols-3{--pdlt-cols:3}
.pdlt-tourgrid--cols-4{--pdlt-cols:4}

ul.pdlt-tourgrid > li.pdlt-tourgrid-card{
  /* (100% - gli spazi fra le colonne) diviso il numero di colonne */
  flex:0 0 calc((100% - (var(--pdlt-cols,3) - 1) * var(--pdlt-gap-x)) / var(--pdlt-cols,3));
  min-width:0;
  margin:0;
  padding:0;
  list-style:none;
}

.pdlt-tourgrid-link{
  position:relative;
  display:block;
  height:var(--pdlt-card-h);
  overflow:hidden;
  background:var(--pdlt-ink);       /* quello che si vede finche' la foto lazy non arriva */
  color:var(--pdlt-paper);
  text-decoration:none;
}

.pdlt-tourgrid-link:hover,
.pdlt-tourgrid-link:focus{
  color:var(--pdlt-paper);
  text-decoration:none;
}

.pdlt-tourgrid-link:focus-visible{
  outline:2px solid var(--pdlt-ink);
  outline-offset:3px;
}

.pdlt-tourgrid-photo{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:cover;
  display:block;
  transition:filter .32s var(--pdlt-ease-luxe);
}

.pdlt-tourgrid-link:hover .pdlt-tourgrid-photo{filter:brightness(.88)}

/* Velatura sotto il testo, come prima: trasparente in alto, 75% in basso.
   Inchiostro del brand al posto del nero puro. */
.pdlt-tourgrid-body{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:72px 12px 12px;
  background:linear-gradient(180deg, rgba(20,17,12,0) 0%, rgba(20,17,12,.75) 100%);
}

.pdlt-tourgrid .pdlt-tourgrid-title{
  font-family:var(--pdlt-font-display);
  font-weight:500;
  font-size:clamp(32px,2.85vw,41px);
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--pdlt-paper);
  margin:0;
  padding:0;
  text-transform:none;
}

.pdlt-tourgrid .pdlt-tourgrid-text{
  font-family:var(--pdlt-font-body);
  font-size:16px;
  line-height:1.65;
  color:var(--pdlt-paper);
  margin:8px 0 0;
  padding:0;
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* La freccia a destra, e sotto una linea che si apre da sinistra all'hover:
   lo stesso gesto del vecchio .hover-underline. */
.pdlt-tourgrid-arrow{
  position:relative;
  display:block;
  margin-top:8px;
  padding-bottom:4px;
  font-family:var(--pdlt-font-body);
  font-size:38px;
  line-height:26px;
  text-align:right;
  color:var(--pdlt-linen);
}

.pdlt-tourgrid-arrow::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  background:var(--pdlt-linen);
  transform:scaleX(0);
  transform-origin:left bottom;
  transition:transform .32s var(--pdlt-ease-luxe);
}

.pdlt-tourgrid-link:hover .pdlt-tourgrid-arrow::after,
.pdlt-tourgrid-link:focus-visible .pdlt-tourgrid-arrow::after{transform:scaleX(1)}

/* ---------- Tablet ------------------------------------------------------- */
@media (max-width:1024px){
  ul.pdlt-tourgrid{
    --pdlt-cols:2;
    --pdlt-gap-x:24px;
    --pdlt-gap-y:32px;
    --pdlt-card-h:460px;
  }
}

/* Margini laterali. Sopra i 768px li da' la riga Themify che contiene il
   modulo; sotto, Themify li azzera e li metteva la subrow con le card che
   questo shortcode sostituisce (32px, poi 12px). Senza, le card toccano i
   bordi dello schermo. */
@media (max-width:768px){
  ul.pdlt-tourgrid{padding-inline:32px}
}

@media (max-width:420px){
  ul.pdlt-tourgrid{padding-inline:12px}
}

/* ---------- Mobile ------------------------------------------------------- */
@media (max-width:680px){
  ul.pdlt-tourgrid{
    --pdlt-cols:1;
    --pdlt-gap-y:24px;
    --pdlt-card-h:440px;
  }
  .pdlt-tourgrid-body{padding:64px 16px 12px}
  .pdlt-tourgrid .pdlt-tourgrid-text{
    font-size:15px;
    -webkit-line-clamp:3;
  }
}

@media (prefers-reduced-motion:reduce){
  .pdlt-tourgrid-photo,
  .pdlt-tourgrid-arrow::after{transition:none}
}