/* =========================================================================
 * Vienodas nuotraukų ratio (post ir event kortelės bei single puslapiai).
 *
 * Problema: nuotraukos skirtingose vietose turi skirtingą proporciją, tad
 * object-fit: cover nukerpa galvas/kojas. Sprendimas – visur ta pati
 * proporcija ir vienodas kirpimas.
 *
 * Naudojimas Elementor'e (nuotraukos widget → Advanced → CSS Classes):
 *   ecw-img-ratio
 *
 * Proporciją keiti per kintamąjį --ecw-img-ratio:
 *   - globaliai: pakeisk reikšmę žemiau (pvz. 3 / 2, 4 / 3, 1 / 1);
 *   - vienam widget'ui: Advanced → Custom CSS →
 *       selector { --ecw-img-ratio: 3 / 2; }
 *
 * Jei kerpa svarbią vietą (galvas), kirpimo tašką valdyk object-position
 * (pvz. per widget Custom CSS: selector img { object-position: top; }).
 * ====================================================================== */

/* --- <img> variantas (Image / Featured Image widget) --- */
.ecw-img-ratio img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: var(--ecw-img-ratio, 16 / 9) !important;
    object-fit: cover !important;
    object-position: center;
}

/* --- background-image variantas (konteineris / section su fono nuotrauka) ---
 * Klasę `ecw-bg-ratio` dėk ant TO elemento, kuris turi fono nuotrauką.
 * SVARBU: jei Elementor'e tam elementui nustatytas „Min Height", nuimk jį
 * (arba 0), kad proporciją valdytų aspect-ratio. */
.ecw-bg-ratio {
    aspect-ratio: var(--ecw-img-ratio, 16 / 9) !important;
    min-height: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    overflow: hidden;
}

/* Jei fonas dedamas per Motion Effects (parallax) – tikrasis fono sluoksnis
   yra viduje; jam irgi reikia cover/center. */
.ecw-bg-ratio .elementor-motion-effects-container,
.ecw-bg-ratio .elementor-motion-effects-layer {
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* =========================================================================
 * HERO nuotrauka (single post/event): priverstinis aukštis, kad neperaugtų
 * konteinerio ir turinys nebelimptų.
 * Dėk klasę hero nuotraukos (Image) widget'ui: ecw-hero-img
 * Aukštį keiti per --ecw-hero-h (desktop), --ecw-hero-h-tablet, --ecw-hero-h-mobile.
 * Jei nenori kirpimo — pridėk dar ecw-fit-contain (bus visa nuotrauka + kraštai).
 * ====================================================================== */
.ecw-hero-img img {
    display: block;
    width: 100% !important;
    height: var(--ecw-hero-h, 736px) !important;
    object-fit: cover !important;
    object-position: center;
}

@media (max-width: 1024px) {
    .ecw-hero-img img { height: var(--ecw-hero-h-tablet, 480px) !important; }
}

@media (max-width: 600px) {
    .ecw-hero-img img { height: var(--ecw-hero-h-mobile, 300px) !important; }
}

.ecw-hero-img.ecw-fit-contain img {
    object-fit: contain !important;
    background: var(--ecw-img-bg, #ffffff);
}

/* =========================================================================
 * Kortelės nuotraukos santykis (dizaino slotas 416×155 px → 416:155 ≈ 2.68:1).
 * Dėk KARTU su ratio klase, pvz.: "ecw-bg-ratio ecw-ratio-card".
 * Nuotraukas kortelėms daryk 416:155 santykiu (pvz. 832×310 px).
 * ====================================================================== */
.ecw-ratio-card {
    --ecw-img-ratio: 416 / 155;
}

/* =========================================================================
 * Modifikatorius: VISA nuotrauka be kirpimo (plakatams su tekstu iki kraštų).
 * Dėk KARTU su ratio klase, pvz.:  "ecw-img-ratio ecw-fit-contain"
 * arba                              "ecw-bg-ratio ecw-fit-contain".
 * Likusią vietą užpildo fono spalva (keičiama per --ecw-img-bg).
 * ====================================================================== */

/* <img> variantas */
.ecw-img-ratio.ecw-fit-contain img {
    object-fit: contain !important;
    background: var(--ecw-img-bg, #ffffff);
}

/* background-image variantas (įskaitant Motion Effects sluoksnį) */
.ecw-bg-ratio.ecw-fit-contain {
    background-color: var(--ecw-img-bg, #ffffff);
}
.ecw-bg-ratio.ecw-fit-contain,
.ecw-bg-ratio.ecw-fit-contain .elementor-motion-effects-container,
.ecw-bg-ratio.ecw-fit-contain .elementor-motion-effects-layer {
    background-size: contain !important;
}