/* "Ti aspettiamo": a compact invitation instead of the big empty card. Three photos of the place fanned like postcards,
   the words in the middle, the two ways to book on the right, and a small live note. Shared by the Pilella sites:
   the colours come from each site's own variables and from .cta-card. */
.cta { padding-top: clamp(30px, 5vw, 60px); padding-bottom: clamp(70px, 9vw, 120px); }
.cta-card.invito { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(24px, 4vw, 56px);
  max-width: 1120px; margin: 0 auto; padding: clamp(26px, 3.4vw, 40px) clamp(26px, 4vw, 52px); border-radius: 32px; text-align: left; overflow: hidden; isolation: isolate; }
/* a slow band of light crossing the card */
.invito::before { content: ""; position: absolute; z-index: -1; inset: -40% -20%; background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .22) 50%, transparent 60%);
  transform: translateX(-70%); animation: invitoLuce 9s cubic-bezier(.4, 0, .2, 1) 1.5s infinite; pointer-events: none; }
@keyframes invitoLuce { 0% { transform: translateX(-70%); } 45%, 100% { transform: translateX(70%); } }

/* the postcards */
.invito-foto { position: relative; width: 330px; height: 178px; margin-left: -10px; }
.invito-foto img { position: absolute; top: 18px; left: 50%; width: 150px; height: 140px; object-fit: cover; border-radius: 14px; border: 4px solid var(--surface, #fff);
  box-shadow: 0 18px 34px -10px rgba(0, 0, 0, .35); transition: transform .7s var(--spring, cubic-bezier(.2, 1.4, .4, 1)); }
.invito-foto img:nth-child(1) { transform: translateX(-108%) rotate(-9deg); z-index: 1; }
.invito-foto img:nth-child(2) { transform: translateX(-50%) translateY(-10px) rotate(1.5deg); z-index: 3; animation: invitoGalla 6s ease-in-out infinite; }
.invito-foto img:nth-child(3) { transform: translateX(8%) rotate(8deg); z-index: 2; }
@keyframes invitoGalla { 0%, 100% { transform: translateX(-50%) translateY(-10px) rotate(1.5deg); } 50% { transform: translateX(-50%) translateY(-16px) rotate(.5deg); } }
.invito:hover .invito-foto img:nth-child(1) { transform: translateX(-122%) translateY(4px) rotate(-14deg); }
.invito:hover .invito-foto img:nth-child(3) { transform: translateX(22%) translateY(4px) rotate(13deg); }

.invito-testo .over { margin: 0 0 8px; }
.invito-t { margin: 0; font: 700 clamp(38px, 4vw, 54px)/1 var(--serif); color: var(--ink); }
.invito-testo .cta-line { margin: 12px 0 0; max-width: 40ch; }
.invito-act { display: grid; justify-items: stretch; gap: 10px; min-width: 230px; }
.invito-act .btn { justify-content: center; }
.invito-nota { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.invito-nota i { width: 8px; height: 8px; border-radius: 50%; background: #3fbf6f; box-shadow: 0 0 0 0 rgba(63, 191, 111, .5); animation: invitoVivo 2.2s ease-out infinite; }
@keyframes invitoVivo { 0% { box-shadow: 0 0 0 0 rgba(63, 191, 111, .55); } 80%, 100% { box-shadow: 0 0 0 9px rgba(63, 191, 111, 0); } }

@media (max-width: 959px) {
  .cta-card.invito { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; padding: 30px 22px 26px; }
  .invito-foto { width: 230px; height: 150px; }
  .invito-foto img { width: 128px; height: 118px; top: 14px; }
  .invito-testo .cta-line { margin-left: auto; margin-right: auto; }
  .invito-act { width: min(100%, 340px); }
}
@media (prefers-reduced-motion: reduce) { .invito::before, .invito-foto img, .invito-nota i { animation: none; } }