/* =========================================================================
   CARTONCINO 4 · "Ci vediamo qui" (.foglietto--logistica, parts/logistica.html)
   Dove si festeggia, come arrivare, dove lasciare l'auto.

   È un cartoncino come gli altri: stessa carta, stessi corpi e stesse
   variabili di foglietto.css (va caricato DOPO foglietto.css). Qui ci sono
   solo le parti nuove:
     - in alto l'acquerello della villa (lo stesso della partecipazione),
       "stampato" sulla carta con multiply;
     - titolo e data nel maiuscolo spaziato, il divisore, il racconto;
     - l'indirizzo, un po' più grande dei testi, e il tasto "Apri in Maps";
     - "Come raggiungerci": racconto in tondo, la nota sul parcheggio
       esterno in corsivo, il tasto "Parcheggio di Via Crotta";
     - due iconcine a tratto sottile (posizione; auto e parcheggio), color
       inchiostro tenue, come schizzi a matita;
     - i rametti della stampa negli angoli in basso, più piccoli che sul
       terzo cartoncino.
   I tasti parlano la stessa lingua di "Sarò Presente": a riposo solo un
   contorno sottile, il mauve compare quando li si sfiora o li si preme.
   ========================================================================= */

/* la carta: la stessa, specchiata (il 2° la usa dritta, il 3° girata di
   180°): i bordi strappati sono ancora diversi */
.foglietto--logistica .foglietto__fondo::before,
.foglietto--logistica .foglietto__fondo::after,
.foglietto--logistica .foglietto__fondo-mezzo{
  transform: scaleX(-1);
}

/* corpi propri di questo cartoncino (telefono; computer più sotto) */
.foglietto--logistica .foglietto__carta{
  --t-sotto: max(12px, calc(var(--t-corpo) * .96));          /* "27 maggio 2027 · Villa Lattuada" */
  --t-indirizzo: calc(var(--t-corpo) * 1.12);                /* 14-14,5px */
  --t-sottotitolo: calc(var(--t-corpo) * 1.04);              /* "Come raggiungerci" */
  --t-tasto: max(15px, calc(var(--t-corpo) * 1.18));         /* corsivo dei tasti */
  --t-icona: max(29px, 7.6cqw);                              /* altezza dell'icona "posizione" */
  --stacco-blocchi: max(2.4em, 8.6cqw);                      /* respiro fra indirizzo e "Come raggiungerci" */

  padding-top: 7.4cqw;                                       /* il campanile arriva quasi al bordo dell'immagine */
  padding-bottom: 24cqw;                                     /* sotto l'ultimo tasto: i rametti */
}
@container foglietto (min-width: 420px){
  .foglietto--logistica .foglietto__carta{
    --t-sotto: max(11.5px, calc(var(--t-corpo) * 1.02));
    --t-indirizzo: calc(var(--t-corpo) * 1.24);              /* ~13,5-15px */
    --t-sottotitolo: calc(var(--t-corpo) * 1.15);
    --t-tasto: max(15px, calc(var(--t-corpo) * 1.36));
    --t-icona: max(30px, 6.4cqw);
    --stacco-blocchi: 9cqw;
    padding-bottom: 26cqw;
  }
}

/* l'acquerello della villa ------------------------------------------------- */
.logistica__villa{
  width: 80cqw;
  height: auto;
  aspect-ratio: 1100 / 725;
  mix-blend-mode: multiply;                 /* l'acquerello è "stampato" sulla carta */
  /* in alto a sinistra il ritaglio porta con sé due macchioline della
     partecipazione: le sfuma via (gli alberi cominciano ben dopo) */
  -webkit-mask-image: linear-gradient(135deg, transparent 6.5%, #000 10.5%);
          mask-image: linear-gradient(135deg, transparent 6.5%, #000 10.5%);
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
@container foglietto (min-width: 420px){
  .logistica__villa{ width: 74cqw; }
}

/* titolo e data ------------------------------------------------------------ */
.logistica__testata{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.foglietto--logistica .logistica__titolo{
  margin-top: max(.85em, 4.4cqw);
}
.logistica__data{
  margin-top: .65em;
  padding-left: .2em;                        /* compensa la spaziatura dopo l'ultima lettera */
  font-size: var(--t-sotto);
  line-height: 1.55;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--inchiostro-tenue);
}
/* telefono: data e villa su due righe (un punto in mezzo, a fine riga,
   resterebbe appeso); computer: su una riga, divise dal punto della stampa */
.logistica__data-giorno,
.logistica__data-luogo{ display: block; }
@container foglietto (min-width: 420px){
  .logistica__data-giorno,
  .logistica__data-luogo{ display: inline; }
  .logistica__data-luogo::before{
    content: "·";
    content: "·" / "";                         /* i lettori di schermo non lo leggono */
    margin-right: .55em;
  }
}

.foglietto--logistica .foglietto__divisore{
  margin-top: max(1.15em, 4.4cqw);
}

/* il racconto: come "Il nostro viaggio", tondo minuscolo */
.foglietto--logistica .logistica__racconto{
  margin-top: max(.95em, 4cqw);
  max-width: 25em;
  text-wrap: balance;                         /* righe pari, come composte a mano */
}

/* blocchi: indirizzo, come arrivare ------------------------------------------ */
.logistica__blocco{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-top: var(--stacco-blocchi);
}
.logistica__blocco--arrivo{ margin-top: calc(var(--stacco-blocchi) * 1.12); }   /* argomento nuovo: un respiro in più */

/* iconcine: tratto sottile e costante a ogni misura, come una matita */
.logistica__icona{
  display: block;
  flex: none;
  overflow: visible;
  fill: none;
  stroke: var(--inchiostro-tenue);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  mix-blend-mode: multiply;
}
.logistica__icona *{ vector-effect: non-scaling-stroke; }
.logistica__tratto-lieve{ stroke-opacity: .55; }
.logistica__icona--posizione{
  height: var(--t-icona);
  width: calc(var(--t-icona) * 32 / 34);
}
.logistica__icona--auto{
  height: calc(var(--t-icona) * .92);
  width: calc(var(--t-icona) * .92 * 52 / 26);
  margin-left: calc(var(--t-icona) * .3);     /* il cartello sta a destra: l'auto resta in centro a occhio */
}

/* indirizzo: un po' più grande dei testi, nell'inchiostro dei dati */
.logistica__indirizzo{
  margin-top: .8em;
  font-style: normal;
  font-size: var(--t-indirizzo);
  line-height: 1.62;
  color: var(--inchiostro-dati);
  text-transform: uppercase;
}
.logistica__riga{
  --spaziatura: .17em;
  display: block;
  padding-left: var(--spaziatura);            /* righe centrate davvero */
  letter-spacing: var(--spaziatura);
  text-wrap: balance;
}
.logistica__riga--nome{
  --spaziatura: .22em;
  margin-bottom: .14em;
  font-size: 1.08em;
}

/* "Come raggiungerci" */
.logistica__sottotitolo{
  margin-top: .85em;
  padding-left: .24em;
  font-size: var(--t-sottotitolo);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--inchiostro-dati);
  text-wrap: balance;
}
.foglietto--logistica .logistica__testo{
  margin-top: .75em;
  max-width: 25.5em;
  text-wrap: balance;
}
/* il parcheggio esterno: corsivo tenue, come una nota degli sposi */
.logistica__nota{
  margin: .8em 0 0;
  max-width: 26em;
  font-size: calc(var(--t-racconto) * .97);
  font-style: italic;
  line-height: 1.55;
  letter-spacing: .01em;
  color: var(--inchiostro-tenue);
  text-wrap: balance;
  hyphens: manual;
}

@container foglietto (min-width: 420px){
  .logistica__nota{ max-width: 24em; }       /* righe più corte: le cime dei rametti restano libere */
}

/* tasti-link ---------------------------------------------------------------- */
.logistica__azione{
  margin: max(1.05em, 3.9cqw) 0 0;
  font-size: var(--t-tasto);
}
.logistica__blocco--arrivo .logistica__azione{ margin-top: max(1.15em, 4.4cqw); }

/* stessa lingua di "Sarò Presente" (foglietto.css): contorno sottile,
   il mauve si versa dentro solo al passaggio del mouse o al tocco */
.logistica__tasto{
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42em;
  min-height: 44px;                            /* bersaglio comodo per il dito */
  padding: .34em 1.3em .4em 1.45em;
  border: 1px solid rgba(124, 98, 112, .5);
  border-radius: 999px;
  color: var(--inchiostro-stampa);
  font: italic 400 1em/1.2 var(--cardo);
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition:
    color .45s ease,
    border-color .45s ease,
    box-shadow .45s ease,
    transform .35s cubic-bezier(.3, .7, .3, 1);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.logistica__tasto::before{
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(120% 150% at 32% 12%, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, #9d7d8f 0%, #8b6b7d 60%, #7f6072 100%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
}
.logistica__tasto-testo{ white-space: nowrap; }
/* freccina "si apre fuori", appena accennata */
.logistica__freccia{
  flex: none;
  width: .66em;
  height: .66em;
  margin-right: -.1em;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.05;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .75;
  transform: translateY(-.04em);
  transition: transform .45s cubic-bezier(.3, .7, .3, 1), opacity .45s ease;
}
.logistica__freccia path{ vector-effect: non-scaling-stroke; }

@media (hover: hover){
  .logistica__tasto:hover{
    color: #fbf6ef;
    border-color: #8b6b7d;
    box-shadow: 0 6px 16px -8px rgba(70, 48, 58, .45);
  }
  .logistica__tasto:hover::before{ opacity: 1; }
  .logistica__tasto:hover .logistica__freccia{
    opacity: 1;
    transform: translate(.08em, -.12em);
  }
}
.logistica__tasto:active{
  color: #fbf6ef;
  border-color: #7f6072;
  box-shadow: inset 0 1px 3px rgba(64, 36, 50, .35);
  transform: translateY(1px) scale(.985);
  transition-duration: .12s;
}
.logistica__tasto:active::before{
  opacity: 1;
  transition-duration: .12s;
}
.logistica__tasto:focus-visible{
  outline: 1px solid var(--mauve);
  outline-offset: 3px;
}

/* rametti: gli stessi del terzo cartoncino, più piccoli, negli angoli bassi.
   Il tasto del parcheggio cade fra le loro cime. */
.foglietto--logistica .foglietto__fiori--sx{ width: 26cqw; left: 3.2cqw; bottom: 6cqw; }
.foglietto--logistica .foglietto__fiori--dx{ width: 26cqw; right: 3.2cqw; bottom: 6cqw; }
@container foglietto (min-width: 420px){
  .foglietto--logistica .foglietto__fiori--sx{ width: 25cqw; left: 4cqw; bottom: 6.5cqw; }
  .foglietto--logistica .foglietto__fiori--dx{ width: 25cqw; right: 4cqw; bottom: 6.5cqw; }
}

/* telefoni piccoli (320-360px): spaziature un filo più strette, come sugli
   altri cartoncini */
@container foglietto (max-width: 339.98px){
  .logistica__riga{ --spaziatura: .13em; }
  .logistica__riga--nome{ --spaziatura: .18em; }
  .logistica__data{ letter-spacing: .16em; padding-left: .16em; }
  .logistica__tasto{ padding-inline: 1.1em 1em; }
  /* rametti più piccoli: il tasto del parcheggio occupa quasi due terzi
     della carta e non deve sfiorarli */
  .foglietto--logistica .foglietto__carta{ padding-bottom: 21.5cqw; }
  .foglietto--logistica .foglietto__fiori--sx{ width: 23.5cqw; left: 2.6cqw; bottom: 5.6cqw; }
  .foglietto--logistica .foglietto__fiori--dx{ width: 23.5cqw; right: 2.6cqw; bottom: 5.6cqw; }
}

@media (prefers-reduced-motion: reduce){
  .logistica__tasto,
  .logistica__tasto::before,
  .logistica__freccia{ transition-duration: .01s; }
}