/* =========================================================================
   CARTONCINO 6 · UN DONO DA CUSTODIRE (la bomboniera)
   Cinque cartellini sigillati con la nostra ceralacca: ognuno si apre dalla
   sua data (js/bomboniera.js mette .is-aperto / .is-nuovo). L'ultimo, la
   mattina delle nozze, svela la foto e il nome.
   Richiede base.css, foglietto.css e programma.css (per .programma__carta).
   ========================================================================= */

/* ---------- la carta lunga (come il programma, specchiata dall'altra parte) */
.foglietto--bomboniera{ --specchio: scaleY(-1); }
.foglietto--bomboniera .foglietto__fondo::before,
.foglietto--bomboniera .foglietto__fondo::after,
.foglietto--bomboniera .foglietto__fondo-mezzo{ transform: var(--specchio); }
.foglietto--bomboniera .foglietto__fondo-mezzo{
  top: 52cqw;
  bottom: 52cqw;
  height: auto;
  background: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14cqw, #000 calc(100% - 14cqw), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 14cqw, #000 calc(100% - 14cqw), transparent 100%);
}
/* spazio in fondo per i rametti negli angoli, sotto l'ultimo cartellino */
.foglietto--bomboniera .foglietto__carta{ padding-bottom: max(96px, 30cqw); }

/* ---------- introduzione */
.bomboniera__intro .foglietto__racconto + .foglietto__racconto{ margin-top: .7em; }
.bomboniera__invito{ margin-top: 1em; }

.bomboniera__prossima{
  margin: .9em 0 1.3em;
  font-family: var(--cardo);
  font-size: var(--t-etichetta);
  letter-spacing: .18em;
  padding-left: .18em;
  text-transform: uppercase;
  color: var(--mauve);
  text-align: center;
}

/* ---------- i cartellini */
.bomboniera__svelate{
  list-style: none;
  margin: .4em 0 0;
  padding: 0;
  width: min(100%, 31em);
  display: grid;
  gap: max(16px, 4.6cqw);
}
.cartellino{
  --carta-cartellino: #f8f4ed;
  position: relative;
  padding: 1.15em 1.4em 1.2em 2.6em;
  border-radius: 3px 10px 10px 3px;
  /* cartoncino un filo più chiaro, con il foro per il cordino a sinistra */
  background:
    radial-gradient(circle at 1.15em 50%, rgba(160, 150, 130, .55) 0 .26em, rgba(0, 0, 0, 0) .3em),
    radial-gradient(circle at 1.15em 50%, rgba(255, 255, 255, .9) 0 .42em, rgba(0, 0, 0, 0) .46em),
    linear-gradient(160deg, #fbf8f2 0%, var(--carta-cartellino) 60%, #f1ebe1 100%);
  box-shadow:
    0 0 0 1px rgba(110, 98, 78, .14),
    0 1px 1.5px rgba(70, 56, 40, .12),
    0 6px 14px -8px rgba(70, 56, 40, .35);
  text-align: left;
}
/* un filo di cotone che passa nel foro */
.cartellino::before{
  content: "";
  position: absolute;
  left: -.55em; top: 50%;
  width: 1.7em; height: 1px;
  background: rgba(128, 114, 92, .55);
  transform: rotate(-8deg);
  transform-origin: 100% 50%;
}

/* chiuso: la data grande e "si svela il…", con la ceralacca sopra */
.cartellino__chiuso{
  display: grid;
  gap: .25em;
  padding-right: 3.4em;          /* posto per la ceralacca */
}
.cartellino__data{
  font-family: var(--cardo);
  font-size: calc(var(--t-corpo) * 1.18);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  color: var(--inchiostro-dati);
}
.cartellino__attesa{
  font-family: var(--cardo);
  font-style: italic;
  font-size: calc(var(--t-corpo) * 1.02);
  color: var(--inchiostro-tenue);
}
.cartellino__sigillo{
  position: absolute;
  right: .9em; top: 50%;
  width: 3.2em; height: 3.2em;
  margin-top: -1.6em;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(70, 40, 40, .3)) drop-shadow(0 3px 5px rgba(70, 48, 40, .2));
  transform: rotate(-8deg);
}

/* aperto: il testo, la ceralacca resta in alto come "rotta" */
.cartellino__aperto{ display: none; }
.cartellino.is-aperto .cartellino__chiuso{ display: none; }
.cartellino.is-aperto .cartellino__aperto{ display: block; }
.cartellino.is-aperto .cartellino__sigillo{
  top: -.9em; right: .6em; margin-top: 0;
  width: 2.3em; height: 2.3em;
  opacity: .9;
  transform: rotate(14deg);
}
.cartellino__quando{
  display: block;
  margin-bottom: .35em;
  font-family: var(--cardo);
  font-size: var(--t-etichetta);
  letter-spacing: .2em;
  text-transform: uppercase;
  font-variant-numeric: lining-nums;
  color: var(--inchiostro-tenue);
}
.cartellino__titolo{
  margin: 0 0 .4em;
  font-family: var(--cardo);
  font-weight: 400;
  font-size: calc(var(--t-corpo) * 1.08);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--inchiostro-dati);
}
.cartellino__testo{
  margin: 0;
  font-family: var(--cardo);
  font-style: italic;
  font-size: calc(var(--t-corpo) * 1.08);
  line-height: 1.55;
  color: var(--inchiostro-stampa);
}
/* il cartellino del mese: un filo mauve */
.cartellino.is-nuovo{
  box-shadow:
    0 0 0 1px rgba(156, 123, 141, .55),
    0 1px 1.5px rgba(70, 56, 40, .12),
    0 8px 18px -8px rgba(110, 70, 90, .35);
}
.cartellino.is-nuovo .cartellino__quando::after{
  content: " · la novità di questo mese";
  color: var(--mauve);
  letter-spacing: .12em;
}

/* ---------- la svelata finale */
.cartellino--finale{ text-align: center; padding: 1.4em 1.4em 1.5em 2.6em; }
.cartellino--finale .cartellino__chiuso{ justify-items: start; text-align: left; }
.cartellino--finale.is-aperto{ padding: 1.6em 1.6em 1.7em; }
.cartellino--finale.is-aperto::before{ display: none; }
.cartellino--finale.is-aperto{
  background: linear-gradient(160deg, #fbf8f2 0%, #f8f4ed 60%, #f1ebe1 100%);
}
.cartellino__foto{
  margin: .6em auto 1.1em;
  width: min(100%, 22em);
  padding: .55em .55em 1.6em;               /* come una foto stampata con il bordo bianco */
  background: #fffdf9;
  box-shadow: 0 1px 2px rgba(60, 48, 36, .18), 0 10px 22px -10px rgba(60, 48, 36, .45);
  transform: rotate(-1.6deg);
}
.cartellino__foto img{
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 900 / 1350;
  object-fit: cover;
}
.cartellino__presenta{
  margin: 0;
  font-family: var(--cardo);
  font-size: var(--t-etichetta);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--inchiostro-tenue);
}
.cartellino__nome{
  margin: .05em 0 .25em;
  font-family: var(--script);
  font-weight: 400;
  font-size: calc(var(--t-script) * 1.25);
  line-height: 1.15;
  color: var(--inchiostro-dati);
}
.cartellino--finale .cartellino__testo{ max-width: 24em; margin: 0 auto; }
.cartellino--finale.is-aperto .cartellino__sigillo{ top: -1.1em; right: 50%; margin-right: -1.4em; width: 2.8em; height: 2.8em; transform: rotate(-6deg); }

/* ---------- apertura animata (solo quando un cartellino si apre davanti ai propri occhi) */
@keyframes cartellino-apri{
  from{ opacity: 0; transform: translateY(6px); }
  to{ opacity: 1; transform: none; }
}
.cartellino.is-appena-aperto .cartellino__aperto{ animation: cartellino-apri .9s cubic-bezier(.2, .7, .2, 1) both; }
@media (prefers-reduced-motion: reduce){
  .cartellino.is-appena-aperto .cartellino__aperto{ animation: none; }
}

/* il "°" di 1° attaccato al numero anche con le lettere spaziate */
.cartellino__o{ letter-spacing: 0; margin-left: -.1em; margin-right: .08em; }

/* niente parola sola in fondo alla frase finale */
.cartellino--finale .cartellino__testo{ text-wrap: balance; }

/* leggibili sul telefono: il testo dei cartellini grande come il racconto sopra,
   e un po' più di spazio utile dentro il cartellino */
.cartellino__testo{ font-size: max(15.5px, calc(var(--t-corpo) * 1.12)); line-height: 1.5; }
.cartellino__attesa{ font-size: max(14.5px, calc(var(--t-corpo) * 1.06)); }
.cartellino__titolo{ font-size: max(14.5px, calc(var(--t-corpo) * 1.1)); }
.cartellino__quando{ font-size: max(12.5px, var(--t-etichetta)); }
@container foglietto (max-width: 469px){
  .cartellino{ padding: 1.05em 1.05em 1.15em 2.2em; }
  .cartellino::before{ left: -.75em; }
  .cartellino{ background-position: -.25em 0, -.25em 0, 0 0; }
}