/* Pulsante e dialog del corso base e avanzato */
.course-open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    width: fit-content;
    max-width: 100%;
    margin: 1rem auto 0;
    min-height: 44px;
    padding: 0.4rem 0;
    border: 0;
    border-radius: var(--radius-full);
    background: transparent;
    color: var(--color-principale-accessible);
    font: inherit;
    font-size: 0.8rem;
    line-height: 1.4;
    text-align: center;
    font-weight: 400;
    cursor: pointer;
}

.course-open:hover {
    color: #555d1e;
    background: transparent;
}

.course-open:focus-visible,
.course-close:focus-visible {
    outline: 3px solid var(--color-principale-accessible);
    outline-offset: 4px;
}

.course-dialog {
    margin: auto;
    width: min(640px, calc(100% - 2rem));
    max-height: calc(100dvh - 2rem);
    padding: 2rem;
    border: 0;
    border-radius: var(--radius-lg);
    color: var(--color-testo);
    background: var(--color-bianco);
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.course-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
}

.course-dialog h3 {
    margin-bottom: 1.25rem;
    padding-right: 2.5rem;
    color: var(--color-principale-accessible);
    font-size: 1.5rem;
}

.course-dialog p + p {
    margin-top: 1rem;
}

.course-close {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--color-chiaro);
    color: var(--color-secondario-dark);
    font-size: 1.8rem;
    cursor: pointer;
}

html.course-dialog-open {
    overflow: hidden;
}

@media (max-width: 600px) {
    .course-dialog {
        padding: 1.5rem;
    }
}

/* Card più ampie: tre per riga sui desktop compatti, cinque sugli schermi larghi. */
@media (min-width: 1024px) {
    #spazi > .container {
        width: calc(100% - 64px);
        max-width: 1480px;
        padding: 0;
    }

    .spaces-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 24px;
    }

    .spaces-grid .space-card {
        flex: 0 1 max(15rem, calc((100% - 48px) / 3));
        min-width: 0;
        max-width: 100%;
    }

    .spaces-grid .space-content {
        padding: 24px;
    }
}

@media (min-width: 1360px) {
    .spaces-grid .space-card {
        flex-basis: max(15rem, calc((100% - 96px) / 5));
    }
}

/* Correzione della luminosità limitata alla foto della sala. */
.functional-room-image {
    filter: brightness(1.16);
}

@media (pointer: coarse) {
    .course-open {
        min-height: 44px;
    }
}

/* Entrata e uscita del dialog, con dissolvenza dello sfondo. */
.course-dialog[open],
.staff-modal-overlay.active .staff-modal {
    animation: course-dialog-in 220ms ease-out both;
}

.course-dialog[open]::backdrop,
.staff-modal-overlay.active {
    animation: course-backdrop-in 220ms ease-out both;
}

.course-dialog.is-closing,
.staff-modal-overlay.active.is-closing .staff-modal {
    animation: course-dialog-out 180ms ease-in both;
}

.course-dialog.is-closing::backdrop,
.staff-modal-overlay.active.is-closing {
    animation: course-backdrop-out 180ms ease-in both;
}

@keyframes course-dialog-in {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes course-dialog-out {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(8px) scale(0.98); }
}

@keyframes course-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes course-backdrop-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .course-dialog[open],
    .course-dialog[open]::backdrop,
    .staff-modal-overlay.active,
    .staff-modal-overlay.active .staff-modal {
        animation: none;
    }
}

/* Disattiva le vecchie transizioni: lo staff usa le animazioni del corso. */
.staff-modal-overlay,
.staff-modal-overlay.active,
.staff-modal {
    transition: none;
}

/* Area di tocco della chiusura staff coerente con quella del corso. */
.staff-modal-close {
    width: 44px;
    height: 44px;
}

.course-info-icon {
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1;
}

.course-open > span:last-child {
    min-width: 0;
    white-space: nowrap;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
}

.course-note-section + .course-note-section {
    margin-top: 1.25rem;
}

.course-note-section h4 {
    margin-bottom: 0.4rem;
    font-size: 1rem;
    color: var(--color-secondario-dark);
}

/* I pulsanti di chiusura restano fuori dall'area scorrevole. */
.course-dialog {
    padding: 0;
    overflow: hidden;
    width: min(640px, calc(100% - 32px));
    max-height: calc(100dvh - 32px);
}
.course-dialog[open] {
    display: flex;
    flex-direction: column;
}
.course-dialog-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-shrink: 0;
    padding: clamp(20px, 4vw, 32px) clamp(20px, 4vw, 32px) 16px;
}
.course-dialog-header h3 {
    min-width: 0;
    flex: 1;
    margin: 0;
    padding: 0;
}
.course-dialog-body {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 clamp(20px, 4vw, 32px) clamp(20px, 4vw, 32px);
}
.course-close,
.staff-modal-close {
    position: static;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    font-size: 28px;
    line-height: 1;
}
.staff-modal {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.staff-modal-header {
    flex-shrink: 0;
    display: flex;
    justify-content: flex-end;
    padding: 12px 12px 0;
}
.staff-modal-scroll {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.staff-modal-content {
    padding: 16px clamp(20px, 4vw, 40px) clamp(20px, 4vw, 40px);
}
.staff-modal-education,
.staff-modal-bio {
    padding: clamp(16px, 3vw, 20px);
}
.staff-modal-specialties span {
    max-width: 100%;
    overflow-wrap: anywhere;
}
.staff-modal-image img {
    max-width: 100%;
}

/* A testo ingrandito la nota resta leggibile anche negli schermi stretti. */
#spazi .space-content {
    text-align: center;
    container-type: inline-size;
}
@container (max-width: 10.5rem) {
    .course-open > span:last-child {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}