/* ============================================================
   GLS · CTA INTERMEDIA (Invito con ritratto) · 1.0 · child theme 1.1.68
   Fondo Navy: a sinistra titolo, sommario e tre passi; a destra un biglietto
   bianco con il ritratto piccolo (foto intera, con il suo fondo), la cornice
   Navy sfalsata con due tacche d angolo in Royal, i dettagli della call e i
   pulsanti. All ingresso la cornice scivola da dietro la foto e le tacche
   compaiono; al passaggio sul biglietto la cornice si allontana di 4px.
   Markup nella pagina (section[data-gls-cta]), comportamento in gls-cta.js.
   Senza script: tutto in posizione e fermo. Royal solo sul bianco.
   ============================================================ */
.gls-cta { position: relative; overflow: hidden; padding-block: 96px; background: var(--gls-surface-inverse); color: var(--gls-ink-inverse); }
.gls-cta .gls-container { position: relative; z-index: 1; }
.gls-cta .gls-cta-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 80px; align-items: center; }
.gls-cta .gls-eyebrow { color: color-mix(in srgb, var(--gls-ink-inverse) 62%, transparent); }
.gls-cta .gls-cta-h { margin-top: 18px; font-family: var(--gls-font-display); font-weight: var(--gls-weight-light); font-size: clamp(36px, 4vw, 56px); line-height: 1.05;
  letter-spacing: -.02em; color: var(--gls-ink-inverse); text-wrap: balance; }
.gls-cta .gls-cta-lead { margin-top: 22px; max-width: 56ch; font-size: 18px; line-height: 1.6; color: color-mix(in srgb, var(--gls-ink-inverse) 80%, transparent); }
.gls-cta .gls-cta-micro { font-size: 10.5px; line-height: 1.2; font-weight: var(--gls-weight-semi); letter-spacing: .14em; text-transform: uppercase; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--gls-ink-inverse) 60%, transparent); }
.gls-cta .gls-cta-steps { display: grid; gap: 14px; margin: 32px 0 0; padding: 0; list-style: none; }
.gls-cta .gls-cta-steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; list-style: none; }
.gls-cta .gls-cta-steps .gls-cta-micro { padding-top: 3px; }
.gls-cta .gls-cta-st { font-size: 16px; line-height: 1.35; font-weight: var(--gls-weight-medium); color: var(--gls-ink-inverse); }
.gls-cta .gls-cta-sd { margin-top: 4px; font-size: 14.5px; line-height: 1.55; color: color-mix(in srgb, var(--gls-ink-inverse) 72%, transparent); }

/* biglietto */
.gls-cta .gls-cta-card { position: relative; padding: 30px 32px 28px; background: var(--gls-surface-base); color: var(--gls-ink-body); }
.gls-cta .gls-cta-card::before { content: ""; position: absolute; left: 12px; right: -12px; top: 12px; bottom: -12px; z-index: -1;
  border: 1px solid color-mix(in srgb, var(--gls-ink-inverse) 30%, transparent); }
.gls-cta .gls-cta-top { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 30px; align-items: end; padding: 6px 0 20px; border-bottom: var(--gls-border-hairline); }
.gls-cta .gls-cta-fr { position: relative; width: 132px; height: 165px; margin: 0 16px 16px 0; }
.gls-cta .gls-cta-fr img { position: relative; z-index: 1; display: block; width: 132px; height: 165px; max-width: none; margin: 0; object-fit: cover; object-position: 50% 30%;
  background: var(--gls-blue-050); }
.gls-cta .gls-cta-fr::before { content: ""; position: absolute; inset: 0; z-index: 0; border: 1px solid var(--gls-primary); transform: translate(12px, 12px);
  transition: transform 1.2s var(--gls-ease-in) .25s; }
.gls-cta .gls-cta-tk { position: absolute; z-index: 2; width: 14px; height: 14px; pointer-events: none; transition: opacity 1s var(--gls-ease) .9s; }
.gls-cta .gls-cta-tk--a { left: -8px; top: -8px; border-left: 1.5px solid var(--gls-royal); border-top: 1.5px solid var(--gls-royal); }
.gls-cta .gls-cta-tk--b { right: -8px; bottom: -8px; border-right: 1.5px solid var(--gls-royal); border-bottom: 1.5px solid var(--gls-royal); }
.gls-cta.is-armed:not(.is-in) .gls-cta-fr::before { transform: none; }
.gls-cta.is-armed:not(.is-in) .gls-cta-tk { opacity: 0; }
.gls-cta .gls-cta-card:hover .gls-cta-fr::before { transform: translate(16px, 16px); transition-delay: 0s; }
.gls-cta .gls-cta-who .gls-cta-micro { margin-bottom: 10px; color: var(--gls-royal); }
.gls-cta .gls-cta-name { font-family: var(--gls-font-display); font-weight: var(--gls-weight-regular); font-size: 20px; line-height: 1.2; color: var(--gls-primary); }
.gls-cta .gls-cta-role { margin-top: 4px; font-size: 10.5px; line-height: 1.3; font-weight: var(--gls-weight-semi); letter-spacing: .12em; text-transform: uppercase; color: var(--gls-ink-muted); }
.gls-cta .gls-cta-ttl { margin-top: 18px; font-family: var(--gls-font-display); font-weight: var(--gls-weight-light); font-size: 28px; line-height: 1.1; color: var(--gls-primary); }
.gls-cta .gls-cta-rows { margin: 16px 0 0; padding: 0; border-top: 1px solid var(--gls-primary); }
.gls-cta .gls-cta-rows div { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 11px 0; border-bottom: var(--gls-border-hairline); }
.gls-cta .gls-cta-rows dt { padding-top: 3px; font-size: 10.5px; font-weight: var(--gls-weight-semi); letter-spacing: .14em; text-transform: uppercase; color: var(--gls-ink-muted); }
.gls-cta .gls-cta-rows dd { margin: 0; font-size: 16px; line-height: 1.4; color: var(--gls-primary); }
.gls-cta .gls-cta-act { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.gls-cta.gls-inverse .gls-cta-card .gls-btn { text-decoration: none; }
.gls-cta.gls-inverse .gls-cta-card .gls-btn--primary, .gls-cta.gls-inverse .gls-cta-card .gls-btn--primary:visited { background: var(--gls-royal); color: var(--gls-ink-inverse); border: 1px solid var(--gls-royal); }
.gls-cta.gls-inverse .gls-cta-card .gls-btn--primary:hover { background: var(--gls-primary); color: var(--gls-ink-inverse); border-color: var(--gls-primary); }
.gls-cta.gls-inverse .gls-cta-card .gls-btn--secondary, .gls-cta.gls-inverse .gls-cta-card .gls-btn--secondary:visited { background: transparent; color: var(--gls-primary); border: 1px solid var(--gls-primary); }
.gls-cta.gls-inverse .gls-cta-card .gls-btn--secondary:hover { background: var(--gls-blue-050); color: var(--gls-primary); }
.gls-cta .gls-cta-card :focus-visible { outline: 2px solid var(--gls-royal); outline-offset: 2px; }

@media (max-width: 980px) {
  .gls-cta { padding-block: 80px; }
  .gls-cta .gls-cta-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .gls-cta .gls-cta-card { margin-right: 12px; }
}
@media (max-width: 560px) {
  .gls-cta .gls-cta-card { padding: 24px 20px; }
  .gls-cta .gls-cta-top { grid-template-columns: 120px minmax(0, 1fr); gap: 22px; }
  .gls-cta .gls-cta-fr, .gls-cta .gls-cta-fr img { width: 104px; height: 130px; }
  .gls-cta .gls-cta-rows div { grid-template-columns: 88px minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .gls-cta *, .gls-cta *::before { transition: none !important; }
}