.pub-img-text {
    padding: 48px 0;
}

.pub-img-text--fundal-activ {
    background: var(--pub-header-footer-bg);
}

.pub-img-text-inner {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

/* Cand "Extindere fundal" e activ dar "Extindere bloc" NU e (vezi block_needs_boxed_inner() din
   includes/core/page_blocks.php), .pub-img-text-inner primeste clasa "--boxed" - continutul
   (imagini+text) ramane pe latimea normala de container desi fundalul din jur e intins pe tot
   ecranul, la fel ca la nadragaventura_vs (.block-full-width > *) - altfel textul/imaginile ar
   ajunge lipite de marginile ecranului pe monitoare late. Cu "Extindere bloc" activ, clasa nu se
   adauga si continutul ramane intins natural. */
.pub-img-text-inner--boxed {
    /* --pub-block-width-scale (0-1, vezi Latime continut % din admin) ingusteaza suplimentar
       continutul, independent de fundalul care ramane intins pe tot ecranul (vezi page_blocks.php). */
    width: calc(clamp(min(var(--pub-container-min), 100%), min(var(--pub-container-width), 100%), var(--pub-container-max)) * var(--pub-block-width-scale, 1));
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}

.pub-img-text--img-dreapta {
    flex-direction: row-reverse;
}

.pub-img-text--no-image {
    justify-content: center;
    text-align: center;
}

/* "Centru" - imaginea sta deasupra textului (nu langa el), iar tot continutul (eyebrow/titlu/text/
   puncte/buton) e centrat, la fel ca la varianta fara imagine. */
.pub-img-text--img-centru {
    flex-direction: column;
    text-align: center;
}

/* Fara max-width fix - acelasi motiv ca la .pub-img-text--no-image mai jos (respecta "Latime
   continut %" din admin in loc sa o ignore cu un plafon propriu). */
.pub-img-text--img-centru .pub-img-text-content {
    flex: 1 1 auto;
    min-width: 0;
}

/* flex:0 0 auto (nu mostenitul 1 1 320px) - in layout pe coloana (flex-direction:column de mai
   sus), flex-basis actioneaza pe axa principala acum VERTICALA, deci un 320px mostenit ar forta o
   inaltime arbitrara in loc sa lase imaginea sa-si pastreze inaltimea naturala (data de aspect-ratio). */
.pub-img-text--img-centru .pub-img-text-images {
    flex: 0 0 auto;
}

.pub-img-text--img-centru .pub-img-text-eyebrow {
    justify-content: center;
}

.pub-img-text--img-centru .pub-img-text-bullets {
    align-items: center;
}

.pub-img-text-images {
    flex: 1 1 320px;
    display: flex;
    align-items: stretch;
    gap: 16px;
    min-width: 240px;
    max-width: 480px;
}

/* Latime mai mica doar pt forma "capsula" (o singura imagine, portret, ingusta) - la 1-2 imagini
   normale (rotunjit/patrat/cerc/oval/arc), max-width ramane cel general de mai sus. */
.pub-img-text-inner.pub-img-text--shape-capsula .pub-img-text-images {
    max-width: 300px;
}

.pub-img-text-img {
    flex: 1 1 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    object-fit: cover;
    display: block;
}

.pub-img-text--shape-rotunjit .pub-img-text-img {
    border-radius: 16px;
    aspect-ratio: 4 / 5;
}

.pub-img-text--shape-patrat .pub-img-text-img {
    border-radius: 0;
    aspect-ratio: 4 / 5;
}

.pub-img-text--shape-cerc .pub-img-text-img {
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

.pub-img-text--shape-oval .pub-img-text-img {
    border-radius: 50%;
    aspect-ratio: 3 / 4;
}

/* Rotunjit sus si jos, dar drept pe laterale (nu o elipsa completa) - trucul e raza orizontala
   mult mai mare decat cea verticala (border-radius: orizontal / vertical), care "intinde" curbura
   doar pe inaltime, lasand mijlocul lateral aproape vertical. */
.pub-img-text--shape-capsula .pub-img-text-img {
    border-radius: 50% / 32%;
    aspect-ratio: 4 / 6;
}

.pub-img-text--shape-arc .pub-img-text-img {
    border-radius: 999px 999px 16px 16px;
    aspect-ratio: 3 / 4;
}

.pub-img-text-content {
    flex: 1 1 360px;
    min-width: 260px;
}

/* Fara max-width fix aici - blocul are deja propriul control de latime din admin ("Latime continut
   %"), care se aplica pe tot .pub-modul/.pub-img-text-inner; un plafon suplimentar aici l-ar
   ignora, lasand textul ingust in mijlocul containerului chiar si la 100%. */
.pub-img-text--no-image .pub-img-text-content {
    flex: 1 1 100%;
}

.pub-img-text-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--pub-text-secundar, #777);
    margin: 0 0 12px;
}

.pub-img-text--no-image .pub-img-text-eyebrow {
    justify-content: center;
}

.pub-img-text-eyebrow::before {
    content: '';
    display: inline-block;
    width: 32px;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}

.pub-img-text-title {
    font-size: 1.9rem;
    margin: 0 0 16px;
    line-height: 1.25;
}

.pub-img-text--font-serif .pub-img-text-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 700;
}

.pub-img-text--font-script .pub-img-text-title {
    font-family: 'Brush Script MT', 'Segoe Script', cursive;
    font-weight: 400;
    font-size: 2.3rem;
}

.pub-img-text-body {
    color: var(--pub-text-secundar, #555);
    line-height: 1.7;
    margin: 0 0 16px;
}

.pub-img-text-bullets {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pub-img-text--no-image .pub-img-text-bullets {
    align-items: center;
}

.pub-img-text-bullets li {
    position: relative;
    padding-left: 26px;
}

.pub-img-text-bullets li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.4em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--pub-header-footer-bg);
}

.pub-img-text-btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}

/* Fara asta, regula generica "a:hover" din base.css (element + pseudo-clasa, mai specifica decat
   o singura clasa) suprascrie culoarea textului cu accentul temei la hover - text aproape invizibil
   pe un fundal de aceeasi culoare. Acelasi bug/fix ca la .pub-hero-cat-btn din hero-categorii.css. */
.pub-img-text-btn:hover {
    color: #fff;
    opacity: 0.9;
    text-decoration: none;
}

.pub-img-text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: underline;
    font-weight: 600;
}

@media (max-width: 720px) {
    .pub-img-text-inner {
        gap: 24px;
    }

    .pub-img-text-images {
        /* !important - un max-width custom setat per bloc (style inline, vezi imagine_text.php)
           ar bate altfel aceasta regula pe mobil, unde coloana de imagini trebuie sa ramana mereu
           100% latime, indiferent de valoarea aleasa in admin. */
        max-width: 100% !important;
    }
}