/**
 * ATS Service - Extra pagina Area Riservata (tutor)
 * Caricato DOPO chi-siamo.css (page_css = ['chi-siamo','amministrazione']).
 */

/* ===== HERO: immagine a tutto schermo + maschera blu (come le altre pagine) ===== */
.page-hero { position: relative; }
.page-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 102, 0.60);
    z-index: 1;
}
.page-hero__inner { position: relative; z-index: 2; }

/* Immagine-titolo sopra la maschera */
.page-hero__img {
    display: block;
    max-width: 460px;
    width: 100%;
    height: auto;
    margin: 0 auto var(--space-5);
}

/* ===== CHI / COSA ===== */
.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
}
.info-card {
    background: var(--bg-white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-8);
    transition: all var(--transition-base);
}
.info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); }
.info-card h3 { margin-bottom: var(--space-3); }
.info-card p { margin: 0; color: var(--text-secondary); line-height: var(--line-height-relaxed); }
.info-card p strong { color: var(--ats-primary); }

/* ===== PRIMO ACCESSO: step ===== */
.steps-title { text-align: center; margin-bottom: var(--space-10); }
.steps {
    list-style: none;
    counter-reset: none;
    max-width: 760px;
    margin: 0 auto;
    padding: 0;
}
.steps li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-5);
    padding: var(--space-5) 0;
    border-bottom: 1px solid var(--gray-200);
}
.steps li:last-child { border-bottom: none; }
.steps__n {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--gradient-secondary);
    color: var(--text-white);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
    display: flex;
    align-items: center;
    justify-content: center;
}
.steps__text {
    font-size: var(--font-size-lg);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}
.steps__text strong { color: var(--ats-primary); }

.inline-link { color: var(--ats-secondary); font-weight: var(--font-weight-medium); text-decoration: underline; }
.inline-link:hover { color: var(--ats-secondary-dark); }

.video-sub {
    text-align: center;
    color: var(--text-secondary);
    font-size: var(--font-size-lg);
    margin-top: calc(var(--space-8) * -1 + var(--space-2));
    margin-bottom: var(--space-8);
}

/* ===== CTA A DUE BOTTONI ===== */
.about-cta__buttons {
    display: flex;
    gap: var(--space-4);
    justify-content: center;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .info-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}