/* ==========================================================================
   B4P UNIFIED GALLERY STYLES - v4.1 (RESPONSIVE & MOBILE-OPTIMIZED)
   ========================================================================== */

/* --- Stiluri de bază (Listă Verticală) pentru AMBELE pluginuri --- */

/* Containerul principal al listei de proiecte. 
   'display: block' asigură că se comportă ca un bloc standard de derulare (scroll). */
#b4p-projects-modal-content #b4p-projects-list-container {
    display: block !important;
    padding: 0 !important;
    overflow-y: auto !important; /* Permite derularea listei pe verticală dacă depășește înălțimea modalului */
    flex-grow: 1 !important;
}

/* Stilul implicit pentru desktop (ecrane mari).
   Aici așezăm elementele pe un singur rând orizontal (row). */
#b4p-projects-modal-content .b4p-project-item {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex-direction: row !important; /* Pune poza, textul și butoanele pe aceeași linie orizontală */
    align-items: center !important; /* Aliniază toate elementele pe mijlocul rândului (pe verticală) */
    justify-content: space-between !important; /* Lasă spațiu liber proporțional între elemente */
    gap: 15px !important; /* Spațiu minim de siguranță între componente ca să nu se lipească */
    padding: 15px 10px !important;
    border: none !important;
    border-bottom: 1px solid #f0f0f0 !important; /* Linie fină separatoare gri între proiecte */
    border-radius: 0 !important;
    background: transparent !important;
    transition: background-color 0.2s; /* Tranziție fluidă de 0.2 secunde când punem mouse-ul peste */
}

/* Efect vizual plăcut la trecerea mouse-ului pe desktop (Hover) */
#b4p-projects-modal-content .b4p-project-item:hover {
    background-color: var(--b4p-color-secondary-bg, #F0E6FA) !important;
}

/* Elimină linia gri de jos pentru ultimul element din listă pentru un aspect curat */
#b4p-projects-modal-content .b4p-project-item:last-child {
    border-bottom: none !important;
}

/* Containerul imaginii de previzualizare (thumbnail) sau placeholder-ului */
#b4p-projects-modal-content .b4p-project-thumbnail, 
#b4p-projects-modal-content .b4p-project-thumbnail-placeholder {
    display: flex !important;
    flex-shrink: 0 !important; /* FOARTE IMPORTANT: Împiedică browser-ul să strivească poza pe orizontală */
    width: 120px !important; /* Lățime fixă pe desktop */
    height: 80px !important; /* Înălțime fixă pe desktop */
    padding-top: 0 !important;
    position: static !important;
}

/* Imaginea din interiorul thumbnail-ului */
#b4p-projects-modal-content .b4p-project-thumbnail img {
    width: 100% !important; /* Se întinde perfect pe lățimea containerului său parent */
    height: 100% !important; /* Se întinde perfect pe înălțimea containerului său parent */
    object-fit: cover !important; /* Decupează imaginea inteligent (fără să o lungească sau să o distorsioneze) */
    position: static !important;
    border-radius: 4px !important; /* Colțuri elegant rotunjite */
}

/* Forțează vizibilitatea textului (info) și a butoanelor (actions) */
#b4p-projects-modal-content .b4p-project-info,
#b4p-projects-modal-content .b4p-project-actions {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Caseta care conține titlul/data proiectului (mijloc) */
#b4p-projects-modal-content .b4p-project-info {
    flex-grow: 1 !important; /* Îi spune textului să ocupe tot spațiul rămas liber între poză și butoane */
    padding: 0 !important;
    min-width: 0 !important; /* Permite browserului să micșoreze containerul de text și să forțeze auto-wrap-ul corect */
}

/* Containerul butoanelor "Load" și "Delete" */
#b4p-projects-modal-content .b4p-project-actions {
    display: flex !important;
    flex-direction: row !important; /* Pe desktop butoanele stau unul lângă altul */
    gap: 8px !important; /* Spațiu între cele două butoane */
    border-top: none !important;
}

/* Stilul butoanelor */
#b4p-projects-modal-content .b4p-project-actions button {
    display: inline-block !important;
    flex: 0 1 auto !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
}


/* ==========================================================================
   OPTIMIZĂRI UX/UI PENTRU MOBIL & TABLETĂ (MEDIA QUERIES)
   ========================================================================== */

/* --- [1] MOBIL (Ecrane sub 576px lățime) --- */
@media (max-width: 575px) {
    
    /* Transformăm rândul orizontal într-o coloană verticală elegantă */
    #b4p-projects-modal-content .b4p-project-item {
        flex-direction: column !important; /* Elementele vor curge de sus în jos: Poză -> Text -> Butoane */
        align-items: center !important; /* Centrează toate elementele pe mijloc */
        text-align: center !important; /* Aliniază textul din interior pe centru */
        padding: 20px 15px !important; /* Oferim mai mult spațiu (padding) ca să respire layout-ul pe telefon */
        gap: 15px !important; /* Spațiu vertical generos între cele 3 blocuri */
    }

    /* Redimensionăm poza pe mobil pentru a fi un punct de focus frumos */
    #b4p-projects-modal-content .b4p-project-thumbnail, 
    #b4p-projects-modal-content .b4p-project-thumbnail-placeholder {
        width: 140px !important; /* O facem puțin mai mare pe mobil deoarece acum are rândul ei dedicat */
        height: 90px !important;
        margin: 0 auto !important; /* O centrează perfect pe orizontală */
    }

    /* Secțiunea de text pe mobil (Titlul și Data proiectului) */
    #b4p-projects-modal-content .b4p-project-info {
        width: 100% !important; /* Forțează containerul de text să folosească toată lățimea ecranului */
        margin: 5px 0 !important;
        white-space: normal !important; /* Permite textului să se rupă natural pe mai multe rânduri */
        word-wrap: break-word !important; /* Rupe cuvintele lungi dacă depășesc marginea (previne stricarea layout-ului) */
        word-break: break-word !important; 
        overflow-wrap: break-word !important;
    }

    /* Mărim textul pe mobil pentru o lizibilitate optimă, prevenind ruperea pe litere */
    #b4p-projects-modal-content .b4p-project-info h4,
    #b4p-projects-modal-content .b4p-project-info p,
    #b4p-projects-modal-content .b4p-project-info span,
    #b4p-projects-modal-content .b4p-project-info div {
        font-size: 15px !important; /* Dimensiune ideală pentru citit de pe telefon */
        line-height: 1.4 !important; /* Spațiu suficient între rânduri */
        display: block !important;
    }

    /* Containerul butoanelor pe mobil */
    #b4p-projects-modal-content .b4p-project-actions {
        width: 100% !important; /* Butoanele vor ocupa toată lățimea de jos */
        display: flex !important;
        flex-direction: row !important; /* Rămân unul lângă altul pe un singur rând */
        gap: 10px !important; /* Spațiu de 10px între butonul de Load și cel de Delete */
    }

    /* Butoanele pe mobil devin mari, egale și foarte ușor de atins (UX Excelent pentru degete) */
    #b4p-projects-modal-content .b4p-project-actions button {
        flex: 1 !important; /* Împarte lățimea exact în mod egal: 50% pentru fiecare buton */
        padding: 12px 10px !important; /* Înălțime crescută conform normelor Google/Apple (minim 44px înălțime de atingere) */
        font-size: 15px !important; /* Text clar, ușor de citit */
        text-align: center !important;
        white-space: nowrap !important; /* Împiedică cuvântul din buton ("Load" sau "Delete") să se rupă urât pe verticală */
    }
}

/* --- [2] TABLETĂ (Ecrane între 576px și 768px lățime) --- */
@media (min-width: 576px) and (max-width: 768px) {
    
    /* Păstrăm structura de rând (orizontală), dar adaptăm dimensiunile ca să nu se înghesuie */
    #b4p-projects-modal-content .b4p-project-item {
        padding: 12px 10px !important;
        gap: 12px !important;
    }

    /* Micșorăm puțin thumbnail-ul ca să eliberăm spațiu pentru text și butoane */
    #b4p-projects-modal-content .b4p-project-thumbnail, 
    #b4p-projects-modal-content .b4p-project-thumbnail-placeholder {
        width: 100px !important;
        height: 70px !important;
    }

    /* Asigurăm că textele au loc de wrap și nu se rup literă cu literă */
    #b4p-projects-modal-content .b4p-project-info {
        white-space: normal !important;
        word-break: break-word !important;
    }

    /* Ajustăm spațiul și mărimea butoanelor pe tabletă */
    #b4p-projects-modal-content .b4p-project-actions {
        gap: 6px !important;
    }

    #b4p-projects-modal-content .b4p-project-actions button {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }
}