/* ------------------- */
/* ✅ Responsive Design */
/* ------------------- */

/* ≤1024px: imposta la nav dell'HEADER in riga, layout più fluido */
@media (max-width: 1024px) {
    /* Solo l'header, NON la sidebar */
    .header .main-nav ul {
        display: flex;
        flex-wrap: nowrap;
        gap: 20px;
    }

    .header .main-nav a {
        white-space: nowrap;
        padding: 8px 12px;
    }

    /* Contenuti */
    .main-content {
        /* layout più stretto ma ancora “desktop-like” */
        border-left: 1px solid #1d1c1c;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        padding: 32px 32px 0;
        max-width: 100%;
    }

    .metrics-container {
        flex-direction: column;
    }

    .metrics-column,
    .metrics-column.selector-column {
        padding: 0;
        width: 100%;
    }

    .vertical-divider {
        display: none;
    }

    .metric-card {
        padding: 15px;
        border-radius: 20px;
    }

    .metric-value {
        font-size: 18px;
    }

    .progress-indicator::after,
    .scale-indicator::after {
        font-size: 10px;
        padding: 2px 6px;
    }
}

/* ≤768px: layout mobile (padding interno, 1 colonna, separatori soft) */
@media (max-width: 768px) {
    .main-content {
        border-left: none; /* la linea verticale sparisce su mobile */
        padding: 12px 16px 24px 16px; /* più respiro ai lati */
    }

    .right-grid-2col {
        grid-template-columns: 1fr;
    }

    .vertical-separator {
        background-color: transparent;
    }
}

/* ≤600px: ritocchi tipografici e footer */
@media (max-width: 600px) {
    .page-title h1 {
        font-size: 24px;
    }

    .section-title {
        font-size: 20px;
    }

    .metric-card h3 {
        font-size: 16px;
    }

    .use-case-selector select {
        font-size: 14px;
    }

    .questionnaire-dots {
        gap: 6px;
    }

    .dot {
        width: 12px;
        height: 12px;
    }

    .partner-logos img,
    .project-logo img {
        height: 30px;
    }

    footer {
        flex-direction: column;
        gap: 20px;
        align-items: flex-start;
    }
}