/* ============================================
   DRUPAL IMAGE ALIGNMENT & CAPTION
   Bazat pe data-align și data-caption de pe <img>
   ============================================ */

/* ---------- ALIGNMENT ---------- */

/* Centrat */
img[data-align="center"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Stânga */
img[data-align="left"] {
    display: block;
    float: left;
    margin: 0 20px 15px 0;
}

/* Dreapta */
img[data-align="right"] {
    display: block;
    float: right;
    margin: 0 0 15px 20px;
}

/* ---------- CAPTION ---------- */

/* Orice imagine cu data-caption devine un bloc cu caption vizibil */
img[data-caption] {
    display: block;
}

img[data-caption]::after {
    /* ::after nu funcționează pe <img>, deci folosim wrapper — vezi mai jos */
}

/*
   IMPORTANT: <img> nu suportă ::after.
   Drupal CKEditor5 în mod normal învelește imaginile cu <figure> + <figcaption>.
   Dacă la tine NU se generează <figure>, folosește JS-ul de mai jos
   sau activează filtrul "Caption images" în Drupal:
   Admin → Configuration → Text formats → Format-ul tău → Activează "Caption images"

   Dacă "Caption images" e activat, Drupal va genera automat:
   <figure data-align="center">
     <img src="..." />
     <figcaption>Caption text</figcaption>
   </figure>

   Stilurile de mai jos acoperă AMBELE situații:
   1) <figure> generat de Drupal (recomandat)
   2) <img> simplu cu data-caption (fallback JS)
*/


/* ========== VARIANTA 1: <figure> generat de Drupal ========== */

figure[data-align="center"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

figure[data-align="left"] {
    display: block;
    float: left;
    margin: 0 20px 15px 0;
}

figure[data-align="right"] {
    display: block;
    float: right;
    margin: 0 0 15px 20px;
}

figure[data-align] {
    max-width: 100%;
}

figure[data-align] img {
    display: block;
    max-width: 100%;
    height: auto;
}

figure[data-align] figcaption {
    font-size: 14px;
    color: #555;
    font-style: italic;
    padding: 8px 4px;
    line-height: 1.4;
    text-align: center;
}


/* ========== VARIANTA 2: fallback cu wrapper JS ========== */
/* Dacă nu ai <figure>, JS-ul de mai jos creează:
   <span class="img-caption-wrap" data-align="center">
     <img ... />
     <span class="img-caption-text">Caption text</span>
   </span>
*/

.img-caption-wrap {
    display: block;
    max-width: 100%;
}

.img-caption-wrap[data-align="center"] {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.img-caption-wrap[data-align="left"] {
    float: left;
    margin: 0 20px 15px 0;
}

.img-caption-wrap[data-align="right"] {
    float: right;
    margin: 0 0 15px 20px;
}

.img-caption-wrap img {
    display: block;
    max-width: 100%;
    height: auto;
}

.img-caption-text {

    font-size: 17px;
    color: rgba(25, 99, 182, 0.76);
    font-style: italic;
    margin: 15px 0px;
    line-height: 1.4;
    text-align: center;
}


/* ---------- CLEARFIX pentru float ---------- */
.field--type-text-with-summary::after,
.post-text::after,
.node__content::after {
    content: "";
    display: table;
    clear: both;
}