/*
 * Stiluri comune pentru paginile de serviciu (gastric-sleeve.html,
 * bypass-gastric.html, operatie-hernie.html, colecistectomie.html).
 * drseverionescu.ro — 2026-08-02
 *
 * Se încarcă DUPĂ css/style.css și refolosește variabilele de temă definite
 * acolo (--blue, --navy, --card-bg etc.). Dacă schimbați paleta în style.css,
 * aceste pagini se actualizează automat.
 */

/* ── Firimituri de navigare (breadcrumbs) ──
   Dublate în JSON-LD pe fiecare pagină, ca Google să afișeze calea
   „Acasă › Servicii › ..." sub rezultatul din căutare. */
.breadcrumb {
    max-width: 860px;
    margin: 0 auto;
    padding: 20px 24px 0;
    font-size: 13px;
    color: var(--muted);
}
.breadcrumb ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
}
.breadcrumb li::after {
    content: "›";
    margin-left: 8px;
    color: #b8c4e0;
}
.breadcrumb li:last-child::after { content: ""; }
.breadcrumb a { color: var(--blue); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ── Corpul paginii ── */
.serviciu {
    max-width: 860px;
    margin: 0 auto;
    padding: 28px 24px 72px;
}
.serviciu h1 {
    font-size: 32px;
    line-height: 1.2;
    color: var(--navy);
    margin: 0 0 14px;
}
.serviciu .lead {
    font-size: 17px;
    line-height: 1.7;
    color: var(--text);
    margin: 0 0 28px;
}
.serviciu h2 {
    font-size: 22px;
    color: var(--navy);
    margin: 40px 0 14px;
    line-height: 1.3;
}
.serviciu h3 {
    font-size: 17px;
    color: var(--navy);
    margin: 26px 0 10px;
}
.serviciu p,
.serviciu li {
    font-size: 15.5px;
    line-height: 1.75;
}
.serviciu ul, .serviciu ol { padding-left: 22px; }
.serviciu li { margin-bottom: 8px; }
.serviciu a { color: var(--blue); }

/* Caseta de preț — element cu rol comercial, deci evidențiat. */
.pret-box {
    background: var(--card-bg);
    border: 1.5px solid #c3cff0;
    border-radius: 12px;
    padding: 20px 24px;
    margin: 28px 0;
}
.pret-box .pret {
    font-size: 26px;
    font-weight: 800;
    color: var(--navy);
    display: block;
    margin-bottom: 6px;
}
.pret-box small {
    display: block;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.6;
}

/* Casetă de avertizare medicală. Obligatorie pe conținut de sănătate:
   textul de pe site NU înlocuiește consultul de specialitate. */
.nota-medicala {
    background: #fff8e6;
    border: 1px solid #f0dca8;
    border-left: 4px solid #d99e0b;
    border-radius: 8px;
    padding: 16px 18px;
    margin: 28px 0;
    font-size: 14.5px;
    line-height: 1.7;
}

/* Listă de criterii / indicații */
.criterii {
    background: #fff;
    border: 1.5px solid #e0e8ff;
    border-radius: 12px;
    padding: 20px 24px;
    margin: 22px 0;
}
.criterii h3 { margin-top: 0; }

/* Întrebări frecvente — dublate în JSON-LD (FAQPage), ceea ce poate produce
   un rezultat extins în Google, cu întrebările afișate direct în SERP. */
.faq details {
    border: 1.5px solid #e0e8ff;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 10px;
    background: #fff;
}
.faq summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--navy);
    font-size: 15.5px;
    list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
    content: "+";
    display: inline-block;
    width: 18px;
    color: var(--blue);
    font-weight: 800;
}
.faq details[open] summary::before { content: "–"; }
.faq details p { margin: 10px 0 0 18px; }

/* Apel la acțiune */
.cta-serviciu {
    background: var(--blue);
    color: #fff;
    border-radius: 12px;
    padding: 28px 30px;
    margin: 40px 0 0;
    text-align: center;
}
.cta-serviciu h2 { color: #fff; margin: 0 0 10px; }
.cta-serviciu p { margin: 0 0 18px; opacity: .92; }
.cta-serviciu .btn-cta {
    display: inline-block;
    background: #fff;
    color: var(--blue);
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    padding: 13px 26px;
    border-radius: 8px;
}
.cta-serviciu .btn-cta:hover { background: #eaf0ff; }
.cta-serviciu .tel {
    display: block;
    margin-top: 14px;
    font-size: 14px;
    color: #fff;
}
.cta-serviciu .tel a { color: #fff; font-weight: 700; }

/* Legături către celelalte proceduri — leagă paginile între ele, ceea ce
   ajută Google să înțeleagă că formează un grup tematic. */
.alte-servicii {
    margin-top: 44px;
    padding-top: 28px;
    border-top: 1.5px solid #e0e8ff;
}
.alte-servicii ul {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}
.alte-servicii li { margin: 0; }
.alte-servicii a {
    display: block;
    border: 1.5px solid #e0e8ff;
    border-radius: 10px;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--navy);
    font-weight: 600;
    font-size: 14.5px;
    background: #fff;
}
.alte-servicii a:hover { border-color: var(--blue); }

@media (max-width: 600px) {
    .serviciu h1 { font-size: 25px; }
    .serviciu h2 { font-size: 19px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDURILE CELOR TREI PROCEDURI BARIATRICE (chirurgie-bariatrica.html)

   Aici fiecare card ESTE un <a> care învelește tot conținutul — spre deosebire
   de cardurile de pe pagina principală, unde a fost nevoie de stratul ::after.
   Diferența: aceste carduri nu conțin alte legături în interior, deci nu apare
   problema de <a> în <a>. Dacă adăugați vreodată o legătură în interiorul unui
   card, această structură trebuie schimbată.
   ═══════════════════════════════════════════════════════════════════════════ */
.proceduri-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 18px;
    margin: 26px 0 36px;
}

.procedura-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1.5px solid #e0e8ff;
    border-radius: 12px;
    padding: 22px 22px 18px;
    text-decoration: none;
    color: var(--text);
    transition: transform .2s, box-shadow .2s, border-color .2s;
}

.procedura-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(26,63,208,.12);
    border-color: #c7d4ff;
}

.procedura-card:focus-visible {
    outline: 3px solid var(--blue);
    outline-offset: 3px;
}

.procedura-card h3 {
    margin: 0 0 4px;
    font-size: 18px;
    color: var(--navy);
}

/* Rândul scurt care spune, dintr-o privire, rolul procedurii. */
.procedura-card .rol {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--blue);
    line-height: 1.4;
}

.procedura-card p {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--muted);
    margin: 0;
}

/* Împinge indicatorul în josul cardului, ca toate cardurile să îl alinieze
   la aceeași înălțime, indiferent de lungimea textului. */
.procedura-card .mai-mult {
    margin-top: auto;
    padding-top: 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--blue);
}