/* ================================================= */
/*       STILURI FINALE PENTRU PAGINA DE RAPOARTE    */
/*         (ÎNLOCUIEȘTE COMPLET STILURILE VECHI)     */
/* ================================================= */

/* Antetul vizual al paginii */
.page-header {
    background-color: var(--color-deep-teal);
    color: var(--color-white);
    text-align: center;
    padding: 80px 20px;
}

.page-header h1 {
    font-size: clamp(2.5em, 5vw, 3.5em);
    font-weight: 800;
    margin: 0 0 10px 0;
}

.page-header p {
    font-size: 1.2em;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0.9;
}

/* Wrapper-ul principal pentru conținut */
.page-content-wrapper {
    /* Setăm un fundal global pentru a se vedea sub "cardul" din container */
    background-color: var(--color-light-grey);
    padding: 60px 0;
}

.page-content-wrapper .container {
    /* Acesta este "cardul" alb principal care ține lista */
    background-color: var(--color-white);
    padding: 20px 40px;
    border-radius: var(--border-radius-large);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* Eliminăm punctele de listare */
.reports-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Stilul pentru fiecare rând de raport */
.report-item {
    display: flex;
    align-items: flex-start; /* Aliniem la partea de sus pentru consistență */
    justify-content: space-between;
    padding: 30px 0;
    border-bottom: 1px solid var(--color-light-grey);
}
.report-item:last-child { border-bottom: none; }

/* Partea principală din stânga (iconiță + text) */
.report-item-main {
    display: flex;
    align-items: flex-start; /* Aliniem și aici la partea de sus */
    flex-grow: 1;
    margin-right: 20px;
}

/* Iconița */
.report-icon {
    font-size: 1.8em;
    color: var(--color-saffron);
    margin-right: 20px;
    /* Adăugăm un mic spațiu sus pentru aliniere vizuală mai bună */
    margin-top: 5px; 
}

/* Containerul pentru Titlu + Sumar */
.report-text {
    display: flex;
    flex-direction: column;
}

/* TITLUL - h2, mare și de impact */
.report-text h2 {
    margin: 0 0 8px 0;
    color: var(--color-deep-teal);
    font-size: 1.5em;
    font-weight: 800;
    line-height: 1.3;
}

/* Linkul "Pe scurt..." */
.report-summary-link {
    font-size: 0.9em;
    font-style: italic;
    color: var(--text-medium);
    text-decoration: none;
    transition: color 0.3s ease;
}
.report-summary-link:hover {
    color: var(--color-deep-teal);
    text-decoration: underline;
}

/* Containerul din dreapta pentru buton */
.report-action {
    flex-shrink: 0;
}
.report-action .btn {
    padding: 10px 20px;
    font-size: 0.9em;
    border-radius: 20px;
}

/* Stilul pentru grupul de butoane de la final */
.cta-group {
    text-align: center;
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--color-light-grey);
}

/* ================== ADAPTARE PENTRU MOBIL ================== */
@media (max-width: 992px) {
    .report-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .report-item-main {
        margin-bottom: 20px; /* Adaugă spațiu între text și buton */
    }

    .report-action {
        width: 100%;
        display: flex;
        /* NOU: Aliniem butonul la dreapta */
        justify-content: flex-end; 
    }
    
    .report-action .btn {
        /* NOU: Butonul nu mai ocupă toată lățimea */
        width: auto;
    }
}

@media (max-width: 768px) {
    .page-content-wrapper .container {
        padding: 20px;
    }
    .report-text h2 {
        font-size: 1.5em;
    }
}```

După aceste modificări, pagina ta va arăta și va funcționa exact cum ai descris:
*   **Wrapper-ul este corectat** și creează un efect de "card" centrat pe un fundal gri.
*   Pe **desktop**, ai iconița, titlul `<h2>` și butonul pe același rând, cu linkul "Pe scurt" sub titlu.
*   Pe **mobil**, butonul nu se mai lățește inestetic, ci stă elegant aliniat în dreapta, sub blocul de text.