/* ══ BANNERUL DE PROFIL AL SPECIALISTULUI ═════════════════════════════
   O singura foaie pentru toate cele opt pagini de profil, incarcata dupa
   foaia fiecarei familii (profil.css, profil-pacient.css,
   profil-specialist.css), ca sa aiba ultimul cuvant.

   Din fotografie pastram doar foile in evantai si pixul, pe fond
   TRANSPARENT (assets/img/profil-banner.*). Lumina bleumarinului o
   desenam aici: daca am fi pastrat fondul pozei, marginea ei s-ar fi
   vazut ca un dreptunghi, fiindca nicio culoare din CSS nu se potriveste
   la pixel cu o fotografie.

   Foile sunt taiate de marginea de jos a pozei, deci trebuie sa stea pe
   o margine: pe desktop, marginea de jos a bannerului — aceeasi linie pe
   care sta portretul specialistului.

   Tot ce tine de marime se trage din --pb-h (scara: 578px din poza
   originala = --pb-h). In decupaj, foile + pixul ocupa:
     - pe latime, de la 16.1% la 89.3% din --pb-h, masurat de la dreapta
     - pe inaltime, de la 10.5% din --pb-h in jos, pana la marginea de jos
   Decupajul intreg are 73.4% din --pb-h in inaltime. */

.cp-banner {
    --pb-h: 270px;
    /* Marginea dreapta a coloanei de continut (1200px, centrata). Pe ecrane
       late foile raman langa nume, nu fug la marginea monitorului. */
    --pb-col: max(0px, calc((100% - 1200px) / 2));
    /* Loc pentru foi + un spatiu de respiro fata de text. Include si cei
       40px de margine interioara pe care ii avea deja coloana. */
    --pb-rezerva: calc(var(--pb-h) * 0.732 + 68px);

    z-index: 1;
    /* Inaltimea e un minim, nu o limita: un nume lung pe trei randuri
       creste bannerul in jos, in loc sa urce sub meniu si sa fie taiat.
       Coloana flex tine continutul lipit de marginea de jos, ca portretul
       si foile sa stea tot timpul pe aceeasi linie. */
    height: auto;
    min-height: var(--pb-h);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* Pe paginile antrenorilor <main> e grid cu min-height: cand pagina e
       scurta, randurile se intind sa-l umple, iar un banner cu inaltime
       automata ar lua tot surplusul. Asa ramane cat ii trebuie. */
    align-self: start;
    background-color: #070e1e;
    /* Lumina pozei: cade de deasupra foilor si se stinge spre colturi. */
    background-image:
        radial-gradient(ellipse 65% 140% at calc(100% - var(--pb-col) - 40px - var(--pb-h) * 0.4) 62%,
            #121c37 0%, #0e172f 32%, #0a1226 62%, #070e1e 100%);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.07);
}

/* Foile si pixul. Refolosim ::before din foaia antrenorilor, dar fara
   imaginea cosmica si fara jumatatea opaca din ::after. */
.cp-banner::before {
    content: '';
    position: absolute;
    top: auto; left: auto;
    bottom: 0;
    /* marginea dreapta a foilor cade pe marginea coloanei de continut */
    right: calc(var(--pb-col) + 40px - var(--pb-h) * 0.161);
    height: calc(var(--pb-h) * 0.734);
    width: auto;
    aspect-ratio: 803 / 613;
    background: url('../../img/profil-banner.png') center bottom / 100% 100% no-repeat;
    background-image: image-set(url('../../img/profil-banner.webp') type('image/webp'),
                                url('../../img/profil-banner.png')  type('image/png'));
    -webkit-mask-image: none;
            mask-image: none;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
}
.cp-banner::after { display: none; }

/* Textul se opreste inainte de foi. */
.cp-banner-inner {
    /* Portretul pornește la 4.1vw de marginea ecranului, ca pe telefon (nu
       din coloana de 1200px a paginii). Textul se oprește tot la foi: rezerva
       plus distanța dintre coloană și marginea ecranului. */
    max-width: none;
    padding-left: calc(4.1vw / var(--mv-z, 1));
    padding-right: calc(var(--pb-rezerva) + var(--pb-col));
    width: 100%;
    height: auto;
}

/* ── Numele: un singur rând, micșorat automat ──────────────────────────
   Numele nu se rupe niciodată pe rânduri. Dacă e mai lung decât locul lui
   (până la foi, sau până la jumătatea bannerului pe cel video),
   assets/js/profil-banner.js îl măsoară și pune --pb-nume-scala (<1) exact
   cât să încapă. Fără JavaScript rămâne la mărimea normală. */
.cp-banner .cp-name {
    --pb-nume: 3.2rem;
    font-size: calc(var(--pb-nume) * var(--pb-nume-scala, 1));
    line-height: 1.05;
    white-space: nowrap;
}
/* phone-perfect.css pune reguli !important pe orice h1; aici nu vrem ruperi. */
body .cp-banner h1.cp-name {
    overflow-wrap: normal !important;
    word-break: normal !important;
    /* phone-perfect.css forțează și mărimea h1 sub 320px (telefoane pliabile) */
    font-size: calc(var(--pb-nume) * var(--pb-nume-scala, 1)) !important;
    /* O regulă globală pune `transition: all 0.2s` pe titluri. Aici ar strica
       măsurătoarea: scriptul scoate micșorarea ca să afle lățimea naturală, iar
       fontul ar crește animat în loc să sară, deci s-ar măsura o valoare de
       la jumătatea animației și numele ar ieși din coloană. */
    transition: none !important;
}
/* Subtitlul și durata: tot pe un rând, ca bannerul să aibă mereu aceeași formă. */
.cp-banner .cp-subtitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-banner .cp-meta { flex-wrap: nowrap; }
/* Pe profilurile cu videoclipuri, subtitlul e ultimul rând. */
.cp-subtitle:last-child { margin-bottom: 0; }

/* ── Poza specialistului ───────────────────────────────────────────────
   Bannerul nu crește niciodată pentru poză. Pozele vin în orice formă
   (portrete decupate, dreptunghiuri înalte), așa că au o înălțime maximă,
   iar ce trece de ea se încadrează cu `object-fit: cover`, păstrând fața. */
.cp-banner { --pb-poza-max: calc(var(--pb-h) - 60px - 24px); }
/* Rama e FIXĂ (155x186 la 1366px, proporțional mai jos), oricare ar fi forma
   pozei: pătrată (avatarul implicit), lată sau înaltă. Așa orice profil nou
   are exact încadrarea Roxanei; poza se potrivește în ramă cu `cover`,
   păstrând fața. */
.cp-photo img {
    width: 100%;
    height: var(--pb-poza-max);
    max-height: none;
    object-fit: cover;
    object-position: 50% 12%;
}

/* ── Paginile cu videoclipuri ──────────────────────────────────────────
   Antrenori, nutriționiști și specialist-video-profil: cadre de video
   suprapuse (assets/img/profil-banner-video.*, 1920x430). Stânga imaginii e
   exact fondul bannerului (#070e1e), deci stă lipită la dreapta fără
   cusătură. Textul are exact coloana de pe profilurile de programare (până
   unde ar începe foile), deci numele și specializările arată la fel pe
   ambele: aceeași mărime, același loc, aceeași micșorare automată. */
.cp-banner--video {
    background-color: #070e1e;
    background-image: url('../../img/profil-banner-video.jpg');
    background-image: image-set(url('../../img/profil-banner-video.webp') type('image/webp'),
                                url('../../img/profil-banner-video.jpg')  type('image/jpeg'));
    /* Doar sub meniu (60px): meniul e translucid. */
    background-size: auto calc(100% - 60px);
    background-position: right bottom;
    background-repeat: no-repeat;
}
.cp-banner--video::before { display: none; }
/* Textul se oprește înainte de primul cadru. Imaginea are 210px înălțime
   (sub meniu) și e lipită la dreapta, deci primul cadru începe la ~493px de
   marginea ecranului; 509px = cadrul + 16px de respiro. */
.cp-banner--video .cp-banner-inner { padding-right: 509px; }
/* Pe paginile cu videoclipuri <main> e grid cu min-height: când pagina e
   scurtă, rândurile se întindeau să-l umple și apărea un gol sub banner.
   Rândurile stau acum sus, iar spațiul în plus rămâne la final. */
main:has(> .cp-banner) { align-content: start; }

/* ══ SUB 1366px: ACELAȘI BANNER, MICȘORAT PROPORȚIONAL ══════════════════
   Pe orice ecran mai îngust bannerul arată exact ca la 1366px, doar mai
   mic, ca o imagine: aceeași așezare, aceleași proporții. Fiecare mărime e
   valoarea de la 1366px transformată în vw (px / 1366 × 100). Meniul (60px)
   nu face parte din banner și rămâne la fel.

   Valorile de referință la 1366px: zona de sub meniu 210px, coloana de
   conținut 1200px (margine 83px), marginea ei interioară 40px, portretul
   155px lat / max. 186px înalt, spațiul portret–text 36px, numele 51.2px
   (40px pe cel video), subtitlul 14.4px, durata 13px, foile 198px înalte.

   Subtitlul și durata au totuși un minim de 9px: la 4px (cât ar ieși pe un
   telefon) nu s-ar mai putea citi. */
@media (max-width: 1365.98px) {
    .cp-banner {
        --pb-h: 19.766vw;                    /* 270px */
        --pb-col: 0px;
        --pb-rezerva: 19.444vw;              /* 265.6px: foile + respiro */
        --pb-poza-max: 13.616vw;             /* 186px */
        /* meniul + 210px. Minim, nu fix: pe ecrane foarte înguste subtitlul și
           durata (care nu coboară sub 9px) cer puțin mai mult loc, iar bannerul
           crește în jos în loc să împingă numele sub meniu. */
        height: auto;
        min-height: calc(60px + 15.373vw);
        padding-top: 60px;
        padding-bottom: 0;
    }
    .cp-banner::before {
        right: 5.82vw;                       /* 79.5px */
        height: 14.495vw;                    /* 198px */
    }
    .cp-banner-inner {
        max-width: 100%;
        padding: 0 25.52vw 0 4.1vw;          /* stânga ca pe telefon; dreapta: foile */
        align-items: flex-end;
        gap: 0;
        height: auto;
        padding-top: 6px;                    /* niciodată lipit de meniu */
    }
    .cp-photo {
        width: 11.347vw;                     /* 155px */
        margin: 0 2.635vw -1px 0;            /* 36px */
        border-radius: 0.586vw 0.586vw 0 0;
    }
    .cp-info { padding-bottom: 2.05vw; }     /* 28px */
    .cp-banner .cp-name { --pb-nume: 3.748vw; margin: 0 0 0.439vw; }
    .cp-banner .cp-subtitle { font-size: max(1.054vw, 9px); margin: 0 0 1.318vw; }
    .cp-banner .cp-meta { font-size: max(0.96vw, 9px); gap: 0.732vw; }
    .cp-subtitle:last-child { margin-bottom: 0; }

    /* primul cadru: 36.1vw de la margine + 1.2vw respiro */
    .cp-banner--video .cp-banner-inner { padding-right: 37.3vw; }
}

/* Sub 400px bannerul crește puțin (subtitlul și durata nu scad sub 9px), deci
   și imaginea: primul cadru se apropie de stânga (≈62% la 390px, ≈55% la 313px). */
@media (max-width: 400px) {
    .cp-banner--video .cp-banner-inner { padding-right: calc(38.5vw + (400px - 100vw) * 0.32); }
}

/* De la tabletă în sus numele e cu ~15% mai mic (43px la 1366px, nu
   51px). Pe telefon rămâne cum era. min(): 2.7rem pe ecrane
   late, iar sub 1366px scade proporțional cu restul bannerului. */
@media (min-width: 601px) {
    .cp-banner .cp-name { --pb-nume: min(2.7rem, 3.16vw); }
}