/**
 * PNRR Comune di Crotone - Stili Frontend
 * Layout ispirato a calabriaeuropa.regione.calabria.it
 */

/* ─── BANNER ────────────────────────────────────────────────── */

.pnrr-banner {
    width: 100%;
    overflow: hidden;
    line-height: 0;
    margin-bottom: 0;
}

.pnrr-banner img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* ─── CONTENUTO PRINCIPALE (2 colonne 75/25) ─────────────────── */

.pnrr-content-section {
    padding: 48px 0;
}

.pnrr-content-row {
    display: flex;
    gap: 30px;
}

.pnrr-content-main:not(.fullwidth-row-pnrr) {
    flex: 0 0 calc(75% - 15px);
    max-width: calc(75% - 15px);
}

.pnrr-content-main.fullwidth-row-pnrr {
    flex: initial;
    max-width: 100%;
}

.pnrr-content-sidebar {
    flex: 0 0 calc(25% - 15px);
    max-width: calc(25% - 15px);
    position: sticky;
    top: 100px;
    align-self: flex-start;
}

.pnrr-content-main h2 {
    color: #003366;
    font-size: 2rem;
    margin-bottom: 20px;
}

.pnrr-content-main h3 {
    color: #003366;
    font-size: 1.375rem;
    margin-top: 30px;
    margin-bottom: 16px;
    padding-top: 20px;
    border-top: 1px solid #e0e0e0;
}

.pnrr-content-main .pnrr-text-body {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #3d4955;
}

.pnrr-content-main .pnrr-text-body ul {
    list-style-type: disc !important;
    padding-left: 20px;
    margin-left: 1rem;
    margin-top: 1rem;
}

.pnrr-content-main .pnrr-text-body li {
    margin-bottom: 8px;
}

/* ─── SIDEBAR ──────────────────────────────────────────────── */

.pnrr-sidebar-docs {
    background: #fff;
    border-radius: 0;
    padding: 0;
}

.pnrr-sidebar-pagine {
    margin-top: 24px;
}

.pnrr-sidebar-docs h4 {
    color: #003366;
    font-size: 1.375rem;
    font-weight: 600;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0066cc;
}

.pnrr-sidebar-docs ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.pnrr-sidebar-docs li {
    margin-bottom: 0;
}

.pnrr-sidebar-docs a {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0066cc;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    transition: color 0.2s;
}

.pnrr-sidebar-docs a:hover {
    color: #005177;
    text-decoration: underline;
}

.pnrr-sidebar-docs a .bi {
    font-size: 1.1rem;
    flex-shrink: 0;
    color: #0066cc;
}

/* ─── PNRR NEL TERRITORIO ───────────────────────────────────── */

.pnrr-territorio {
    background: #003366;
    color: #fff;
    padding: 60px 0;
}

.pnrr-territorio h2 {
    color: #fff;
    font-size: 2rem;
    margin-bottom: 24px;
}

.pnrr-territorio .pnrr-text-body {
    font-size: 1.125rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
}

.pnrr-territorio .pnrr-text-body a {
    color: #8cc6ff;
}

.pnrr-territorio-inner {
    display: flex;
    gap: 40px;
    align-items: center;
}

.pnrr-territorio-text {
    flex: 1;
}

.pnrr-territorio-image {
    flex: 0 0 40%;
    max-width: 40%;
}

.pnrr-territorio-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
}

/* ─── GRAFICO A BARRE TERRITORIO ──────────────────────────── */

.pnrr-territorio-chart {
    margin-top: 40px;
    padding-top: 32px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.pnrr-territorio-chart-title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}

.pnrr-territorio-chart-wrap {
    position: relative;
    width: 100%;
    min-height: 250px;
}

/* ─── DATI PER MISSIONE ────────────────────────────────────── */

.pnrr-missioni {
    padding: 40px 0 60px;
    background: #fff;
}

/* Titolo con linee decorative ai lati */
.pnrr-missioni-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 8px;
}

.pnrr-missioni-header h2 {
    color: #3d4955;
    font-size: 1.5rem;
    font-weight: 400;
    font-style: italic;
    margin: 0;
    white-space: nowrap;
}

.pnrr-missioni-line {
    flex: 1;
    max-width: 120px;
    height: 1px;
    background: #ccc;
}

.pnrr-missioni-subtitle {
    text-align: center;
    color: #888;
    font-size: 0.85rem;
    margin-bottom: 28px;
}

/* Riga orizzontale missioni */
.pnrr-missioni-row {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.pnrr-missione-item {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    text-align: left;
    cursor: pointer;
    padding: 10px 8px;
    flex: 1;
    transition: opacity .2s;
}

.pnrr-missione-item:not(.active) .pnrr-missione-icon {
	opacity:.5;
}

.pnrr-missione-item:hover {
    opacity: 0.75;
}

.pnrr-missione-item.active {
    opacity: 1;
}

.pnrr-missione-item.active .pnrr-missione-label {
    font-weight: 700;
}

.pnrr-missione-icon {
    font-size: 1.8rem;
    margin-bottom: 4px;
    line-height: 1;
    width: 4rem;
    border-radius:50%;
    overflow:hidden;
}

.pnrr-missione-icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display:block;
}

.pnrr-missione-label {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.2;
    width:calc(100% - 4rem);
    padding-left:.75rem;
}

.pnrr-missione-desc {
    font-size: 0.75rem;
    color: #666;
    line-height: 1.3;
    max-width: 100%;
    width:100%;
    margin-top:.5rem;
}

/* Contenuto espandibile */
.pnrr-missione-content {
    margin-top: 20px;
    animation: pnrrFadeIn 0.3s ease;
}

.pnrr-missione-content-inner {
    position: relative;
    background: #f8f9fa;
    border-radius: 6px;
    padding: 30px;
    font-size: 1rem;
    line-height: 1.7;
    color: #3d4955;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.pnrr-missione-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #666;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
}

.pnrr-missione-close:hover {
    color: #333;
}

.pnrr-missione-content-inner h3,
.pnrr-missione-content-inner h4 {
    color: #003366;
    margin-bottom: 12px;
}

.pnrr-missione-content-inner ul {
    padding-left: 20px;
    margin-bottom: 16px;
}

.pnrr-missione-content-inner table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.pnrr-missione-content-inner th,
.pnrr-missione-content-inner td {
    padding: 10px 12px;
    border: 1px solid #ddd;
    text-align: left;
}

.pnrr-missione-content-inner th {
    background: #003366;
    color: #fff;
    font-weight: 600;
}

@keyframes pnrrFadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── PROGETTI PNRR / BANDI ───────────────────────────────── */

.pnrr-bandi {
    padding: 60px 0;
    background: #f8f9fa;
}

.pnrr-bandi h2 {
    color: #003366;
    font-size: 2rem;
    margin-bottom: 32px;
    text-align: center;
}

.pnrr-bandi-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.pnrr-card {
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: box-shadow 0.2s, transform 0.2s;
    display: flex;
    flex-direction: column;
}

.pnrr-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.pnrr-card-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
}

.pnrr-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pnrr-card-body {
    padding: 12px 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.pnrr-card-date {
    font-size: 0.85rem;
    color: #666;
    margin-bottom: 8px;
}

.pnrr-card-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #003366;
    margin-bottom: 8px;
    line-height: 1.3;
}

.pnrr-card-title a {
    color: inherit;
    text-decoration: none;
}

.pnrr-card-title a:hover {
    color: #0066cc;
}

.pnrr-card-desc {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 12px;
    flex: 1;
}

.pnrr-card-stato {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    align-self: flex-start;
    background: #e8f0fe;
    color: #003366;
}

/* ─── NOVITA E AGGIORNAMENTI ──────────────────────────────── */

.pnrr-notizie {
    padding: 60px 0;
    background:#ffffff;
}

.pnrr-notizie h2 {
    color: #003366;
    font-size: 2rem;
    margin-bottom: 32px;
    text-align: center;
}

/* ─── CTA BANNER ITALIA DOMANI ──────────────────────────────── */

.pnrr-cta {
    background: linear-gradient(135deg, #004d99 0%, #0066cc 100%);
    color: #fff;
    padding: 24px 0;
    position:relative;
    overflow:hidden;
}

.pnrr-cta:before {
    content: '';
    display: block;
    position: absolute;
    top: -10rem;
    left: 0;
    bottom: -2rem;
    width: 70%;
    background: #2574d4;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 50%;
}

.pnrr-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    text-align: center;
    position: relative;
    z-index: 10;
    width: 100%;
}

.pnrr-cta-logo {
    width:15rem;
}

.pnrr-cta-logo img {
    height: auto;
    width: 100%;
    display:block;
}

.pnrr-cta-text {
    font-size: 1.125rem;
    font-weight: 600;
}

.pnrr-cta-link a {
    display: inline-block;
    background: #fff;
    color: #0066cc;
    padding: 10px 24px;
    border-radius: 9999px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.125rem;
    transition: background 0.2s, color 0.2s;
}

.pnrr-cta-link a:hover {
    background: #e6f0ff;
    color: #003366;
}

/* ─── INTERVENTI PER MISSIONE (tabella + grafico) ─────────── */

.pnrr-interventi-layout {
    display: flex;
    margin-top: 24px;
    flex-flow:row wrap;
}

.importo-totale-interventi-pnrr {
	color:#003366;
    width:100%;
    margin-bottom:2rem !important;
    font-weight:500 !important;
}

.importo-totale-interventi-pnrr span {
    display:block;
    font-weight:600 !important;
}

.pnrr-interventi-left {
    width:60%;
    max-width: 60%;
    overflow-x: auto;
}

.pnrr-interventi-right {
    width:40%;
    max-width: 40%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pnrr-interventi-table {
    width: 100%;
    border-collapse: collapse;
}

.pnrr-interventi-table th {
    background: #003366;
    color: #fff;
    font-weight: 600;
    padding: 10px 12px;
    text-align: left;
    font-size: 0.85rem;
    border: 1px solid #003366;
}

.pnrr-interventi-table td {
    padding: 10px 12px;
    border: 1px solid #ddd;
    font-size: 0.9rem;
    vertical-align: middle;
}

.pnrr-interventi-table tbody tr:nth-child(even) {
    background: #f8f9fa;
}

.pnrr-interventi-table tbody tr:nth-child(odd) {
    background: #fff;
}

.pnrr-intervento-color {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 2px;
    vertical-align: middle;
}

.pnrr-intervento-stato {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.pnrr-intervento-stato.in-corso {
    background: #dbeafe;
    color: #1d4ed8;
}

.pnrr-intervento-stato.concluso {
    background: #dcfce7;
    color: #15803d;
}

.pnrr-interventi-table a {
    color: #0066cc;
    font-size: 1.1rem;
}

.pnrr-interventi-table a:hover {
    color: #003366;
}

.pnrr-chart-container {
    max-width: calc(100% - 2rem);
    width:calc(100% - 2rem);
    margin: 0 auto;
}

/* ─── RESPONSIVE ────────────────────────────────────────────── */

@media (max-width: 991px) {
    .pnrr-content-row {
        flex-direction: column;
    }

    .pnrr-content-main,
    .pnrr-content-sidebar {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .pnrr-content-sidebar {
        position: static;
    }

    .pnrr-territorio-inner {
        flex-direction: column;
    }

    .pnrr-territorio-image {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .pnrr-bandi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pnrr-missioni-row {
        gap: unset;
    }

    .pnrr-missione-item {
        flex: initial;
        width: 33.333%;
        text-align:center;
    }
    .pnrr-missione-label {
    	width:100%;
        text-align:center;
        padding-left:0;
    }
   .pnrr-missione-icon {
        width: 100%;
        max-width: 4rem;
        margin: 0 auto .5rem auto;
    }
    .pnrr-interventi-left {
        width:100%;
        max-width:100%;
        margin-bottom:2rem;
    }
    .pnrr-interventi-right {
        width:100%;
        max-width:100%;
    }
}

@media (max-width: 768px) {
    .pnrr-interventi-layout {
        flex-direction: column;
    }

    .pnrr-interventi-left,
    .pnrr-interventi-right {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .pnrr-chart-container {
        max-width: calc(100% - 2rem);
    }
    .pnrr-missione-content-inner {
    padding:2rem 1rem 1rem 1rem;
    }
}

@media (max-width: 575px) {
    .pnrr-bandi-grid {
        grid-template-columns: 1fr;
    }

    .pnrr-missioni-row {
        flex-wrap: wrap;
        gap: unset;
    }

    .pnrr-missione-item {
        flex: initial;
        width:50%;
    }

    .pnrr-banner img {
        max-height: 250px;
    }

    .pnrr-content-section {
        padding: 32px 0;
    }

    .pnrr-territorio,
    .pnrr-missioni {
        padding: 40px 0;
    }

    .pnrr-bandi,
    .pnrr-notizie {
        padding: 40px 0;
    }
}

.pnrr-missione-item:focus {
    outline: 2px solid #0066cc;
    outline-offset: 4px;
    border-radius: 4px;
}