/* =========================================================
INSTITUTIE – FINAL PRODUCTION SAFE 💎
========================================================= */


/* =========================================================
SCOPE SAFETY (CRITIC 🔥)
Prevenim conflicte globale
========================================================= */

.institutie-page{
    position:relative;
}


/* =========================================================
HERO IMAGE
========================================================= */

.inst-hero{
    position:relative;
    height:420px;

    background:url('/assets/images/spital-institutie.jpg') center/cover no-repeat;

    display:flex;
    align-items:flex-end;
}

.inst-hero-overlay{
    width:100%;
    padding:60px 0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,0.75),
        rgba(0,0,0,0.25)
    );

    backdrop-filter: blur(2px);
}

/* TEXT */
.inst-hero h1{
    color:#fff;
    font-size:38px;
    margin-bottom:10px;
}

.hero-subtitle{
    color:rgba(255,255,255,0.9);
    max-width:700px;
    margin-bottom:20px;
}

/* BREADCRUMB */
.breadcrumb-light{
    color:#fff;
    margin-bottom:10px;
}

.breadcrumb-light a{
    color:#fff;
    opacity:0.9;
}

/* BADGE */
.inst-hero-badge{
    display:inline-block;

    background:rgba(11,61,145,0.95);
    color:#fff;

    padding:14px 26px;
    border-radius:30px;

    font-size:14px;
    font-weight:600;
}


/* =========================================================
SECTIONS (SAFE – NU MAI ASCUNDE PAGINA 🔥)
========================================================= */

/* 🔥 SAFE: nu mai ascunde nimic implicit */
.inst-section{
    opacity:1;
    transform:none;
}

/* animație DOAR când JS controlează */
.js-enabled .inst-section.animate{
    opacity:0;
    transform:translateY(30px);
    transition:opacity .6s ease, transform .6s ease;
}

.js-enabled .inst-section.animate.visible{
    opacity:1;
    transform:translateY(0);
}


/* =========================================================
TEXT
========================================================= */

.inst-text{
    max-width:720px;
    margin:0 auto;

    font-size:16px;
    line-height:1.7;
    color:var(--text);
}

.inst-text p{
    margin-bottom:18px;
}

.inst-founded{
    max-width:720px;
    margin:0 auto 30px;

    font-size:17px;
    font-weight:500;
    color:var(--primary);
}


/* =========================================================
HIGHLIGHT BOX
========================================================= */

.inst-highlight-box{
    max-width:800px;
    margin:0 auto;

    background:var(--bg-soft);
    padding:40px;

    border-left:6px solid var(--primary);
    border-radius:var(--radius-md);
}


/* =========================================================
VALUES GRID
========================================================= */

.inst-values-grid{
    max-width:900px;
    margin:40px auto 0;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
}

.inst-value-item{
    background:#fff;
    padding:20px;
    border-radius:var(--radius-md);

    border:1px solid var(--border);
    transition:.25s;
}

.inst-value-item:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md);
}

.inst-value-item h3{
    font-size:15px;
    margin-bottom:8px;
    color:var(--primary);
}


/* =========================================================
STATS
========================================================= */

.inst-capacity{
    background:var(--bg-soft);
}

.inst-stats{
    display:flex;
    justify-content:center;
    gap:50px;

    max-width:700px;
    margin:30px auto;

    text-align:center;
}

.inst-stat span{
    font-size:42px;
    font-weight:700;
    color:var(--primary);
}

.inst-stat p{
    font-size:14px;
    color:var(--text-light);
}


/* =========================================================
LISTS
========================================================= */

.inst-structure-list{
    max-width:800px;
    margin:20px auto;
    padding-left:18px;
}

.inst-structure-list li{
    margin-bottom:6px;
}


/* =========================================================
ORGANIGRAMA
========================================================= */

.org-box{
    max-width:700px;
    margin:0 auto;

    background:#fff;
    padding:40px;

    border-radius:var(--radius-md);
    text-align:center;

    box-shadow:var(--shadow-sm);
}

.org-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;

    margin-top:20px;
    padding:12px 28px;

    background:var(--primary);
    color:#fff;

    border-radius:var(--radius-sm);
    text-decoration:none;
}

.org-btn:hover{
    background:var(--primary-dark);
}


/* =========================================================
LEGAL GRID
========================================================= */

.legal-grid{
    max-width:900px;
    margin:30px auto 0;

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
}

.legal-item{
    background:#fff;

    padding:18px;
    border-radius:var(--radius-sm);

    box-shadow:var(--shadow-sm);
}

.legal-item strong{
    display:block;
    margin-bottom:6px;
    color:var(--primary);
}


/* =========================================================
IBAN
========================================================= */

.iban-rows{
    max-width:900px;
    margin:20px auto 0;
}

.iban-row{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:40px;
    padding:12px 20px;
}

.iban-row:nth-child(even){
    background:var(--bg-soft);
}

.iban-entry code{
    display:block;

    text-align:center;
    background:#e9edf2;

    padding:8px 14px;
    border-radius:8px;

    font-family:monospace;
    font-size:13px;
}


/* =========================================================
CTA
========================================================= */

.inst-cta-box{
    max-width:700px;
    margin:0 auto;

    background:var(--bg-soft);
    padding:40px;

    border-radius:var(--radius-md);
    text-align:center;
}


/* =========================================================
RESPONSIVE
========================================================= */

@media (max-width:768px){

    .inst-hero{
        height:300px; /* 🔥 fix bug (era inst-hero-image) */
    }

    .inst-stats{
        flex-direction:column;
        gap:30px;
    }

}

/* =========================================================
SPACING FINAL PAGINĂ
========================================================= */

.institutie-page .inst-section:last-of-type{
    margin-bottom: 80px; /* 🔥 ajustezi cât vrei */
}

.institutie-page .inst-section {
    padding-top: 50px;
}

.institutie-page .inst-section:first-of-type {
    margin-top: 40px;
}

.institutie-page .container {
    max-width: 1100px;
}