/* CSIA — Popup Benvenuto (nuovo sito). Scoped sotto .csia-welcome-overlay.
   Adattato dal design "Popup Benvenuto.html": font del tema (ff-din-paneuropean
   / -cond) al posto di Barlow, Cormorant Garamond per gli italici. */
.csia-welcome-overlay {
    --csia-c-blu:      #015B99;
    --csia-c-azzurro:  #00ADEF;
    --csia-c-navy:     #08273A;
    --csia-c-arancio:  #FF9700;
    --csia-c-ink:      #0e1a26;
    --csia-c-ink-soft: #3a4a5a;
    --csia-c-ink-dim:  #6b7886;
    --csia-c-line-2:   #d7dde4;
    --csia-c-paper:    #ffffff;
    --csia-font-body:  'ff-din-paneuropean', sans-serif;
    --csia-font-cond:  'ff-din-paneuropean-cond', 'ff-din-paneuropean', sans-serif;
    --csia-font-serif: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;

    position: fixed; inset: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(8, 39, 58, 0.55);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity .35s ease;
}
.csia-welcome-overlay *,
.csia-welcome-overlay *::before,
.csia-welcome-overlay *::after { box-sizing: border-box; }
.csia-welcome-overlay[data-open] { opacity: 1; }
.csia-welcome-overlay[hidden] { display: none; }

.csia-welcome {
    position: relative;
    width: 100%;
    max-width: 880px;
    background: var(--csia-c-paper);
    border-radius: 4px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    box-shadow: 0 4px 12px rgba(8,39,58,0.10), 0 40px 80px -32px rgba(8,39,58,0.55);
    transform: translateY(16px) scale(0.98);
    opacity: 0;
    transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
    color: var(--csia-c-ink);
    font-family: var(--csia-font-body);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
.csia-welcome-overlay[data-open] .csia-welcome { transform: translateY(0) scale(1); opacity: 1; }

/* ---- Colonna sinistra: testo ---- */
.csia-welcome-body {
    padding: 44px 42px 40px;
    display: flex; flex-direction: column;
    position: relative;
}
.csia-welcome-body::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0;
    width: 4px; background: var(--csia-c-arancio);
}

.csia-welcome-logo {
    display: inline-flex; align-items: center;
    height: 46px; margin-bottom: 30px;
}
.csia-welcome-logo img {
    height: 46px; width: auto; max-width: 220px; display: block;
}

.csia-welcome h2 {
    font-family: var(--csia-font-cond); font-weight: 600;
    font-size: clamp(30px, 3.4vw, 44px); line-height: 1.0;
    letter-spacing: 0.005em; text-transform: uppercase;
    color: var(--csia-c-navy);
    margin: 0 0 6px;
}
.csia-welcome h2 .accent {
    font-family: var(--csia-font-serif); font-style: italic; font-weight: 500;
    text-transform: none; letter-spacing: -0.01em; color: var(--csia-c-blu);
    display: block; font-size: 0.62em; margin-top: 6px;
}

.csia-welcome p.lead {
    font-family: var(--csia-font-serif); font-style: italic;
    font-size: 20px; line-height: 1.45; color: var(--csia-c-ink-soft);
    margin: 16px 0 14px;
    text-wrap: pretty;
}
.csia-welcome p.body {
    font-size: 15px; line-height: 1.6; color: var(--csia-c-ink-soft);
    margin: 0 0 26px;
    text-wrap: pretty;
}

.csia-welcome-actions {
    margin-top: auto;
    display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
}
.csia-welcome-btn {
    font-family: var(--csia-font-cond); font-weight: 600; font-size: 15px;
    letter-spacing: 0.07em; text-transform: uppercase;
    padding: 13px 24px; border-radius: 2px; cursor: pointer;
    border: 1px solid transparent;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
    text-decoration: none; display: inline-flex; align-items: center; gap: 9px;
}
.csia-welcome-btn--primary { background: var(--csia-c-arancio); color: var(--csia-c-navy); }
.csia-welcome-btn--primary:hover { background: #ffa825; transform: translateY(-1px); color: var(--csia-c-navy); }
.csia-welcome-btn svg { width: 16px; height: 16px; }

/* ---- Colonna destra: immagine ---- */
.csia-welcome-media {
    position: relative;
    background: var(--csia-c-navy);
    min-height: 360px;
    overflow: hidden;
}
.csia-welcome-media img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}

/* ---- Chiudi ---- */
.csia-welcome-close {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    width: 38px; height: 38px; border-radius: 50%;
    border: none; cursor: pointer;
    background: rgba(255,255,255,0.92);
    color: var(--csia-c-navy);
    display: grid; place-items: center;
    transition: background .2s ease, transform .2s ease;
    box-shadow: 0 2px 8px rgba(8,39,58,0.18);
    padding: 0;
}
.csia-welcome-close:hover { background: #fff; transform: rotate(90deg); }
.csia-welcome-close svg { width: 16px; height: 16px; }

@media (max-width: 760px) {
    .csia-welcome { grid-template-columns: 1fr; max-width: 440px; }
    .csia-welcome-media { order: -1; min-height: 200px; }
    .csia-welcome-body { padding: 34px 28px 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .csia-welcome-overlay, .csia-welcome { transition: none; }
}