/*
 * CUSMEX Listing Media Fit
 * Ajuste visual no destructivo: no recorta ni reescribe los archivos originales.
 */

:root {
    --cusmex-lmf-bg: #f4f5f7;
}

/* Targets comunes en temas de directorios/listados. */
:is(
    .listing-item,
    .listing-card,
    .listing-box,
    .listing-content,
    .listing-img-content,
    .listing-carousel,
    .listing-gallery,
    .listing-slider,
    .single-listing,
    .job_listing,
    .rtcl-listing-item,
    .property,
    .featured-image,
    .post-thumbnail
) img.cusmex-lmf-target,
img.cusmex-media-fit-image.cusmex-lmf-target {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-width: 100%;
    object-position: center center !important;
    background: var(--cusmex-lmf-bg);
}

img.cusmex-lmf-target.cusmex-fit-contain {
    object-fit: contain !important;
}

img.cusmex-lmf-target.cusmex-fit-cover {
    object-fit: cover !important;
}

/* Detalle del listado: se prioriza no cortar la imagen. */
body[class*="single-"] :is(
    .listing-gallery,
    .listing-slider,
    .listing-carousel,
    .featured-image,
    .post-thumbnail
) img.cusmex-lmf-detail-contain {
    object-fit: contain !important;
    object-position: center center !important;
    background: var(--cusmex-lmf-bg);
}

/* Multimedia adicional */
.cusmex-lmf-extra-gallery {
    width: 100%;
    margin: 28px 0;
}

.cusmex-lmf-extra-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: 16px;
}

.cusmex-lmf-media-item {
    width: 100%;
    min-height: 220px;
    max-height: 620px;
    background: #111;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cusmex-lmf-media-item img,
.cusmex-lmf-media-item video {
    display: block;
    width: 100%;
    max-width: 100%;
    max-height: 620px;
    object-fit: contain;
}

/* Cargador frontal */
.cusmex-lmf-uploader {
    margin: 18px 0;
    padding: 16px;
    border: 1px solid #d9dde3;
    border-radius: 10px;
    background: #fff;
}

.cusmex-lmf-uploader h4 {
    margin: 0 0 6px;
    font-size: 16px;
}

.cusmex-lmf-uploader p {
    margin: 0 0 12px;
    opacity: .78;
}

.cusmex-lmf-file-input {
    display: block;
    width: 100%;
    margin-bottom: 10px;
}

.cusmex-lmf-status {
    font-size: 13px;
    margin-top: 8px;
}

.cusmex-lmf-preview-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.cusmex-lmf-preview {
    border: 1px solid #e1e5ea;
    border-radius: 8px;
    padding: 8px;
    background: #fafbfc;
}

.cusmex-lmf-preview img,
.cusmex-lmf-preview video {
    display: block;
    width: 100%;
    height: 110px;
    object-fit: contain;
    background: #111;
    border-radius: 6px;
}

.cusmex-lmf-preview button {
    margin-top: 7px;
    font-size: 12px;
    cursor: pointer;
}


/* ============================================================
 * v1.0.4 — WP Job Manager / Listify compatibility
 * Listify-style galleries may render the photo as background-image
 * instead of a normal <img>. These rules prevent visual cropping.
 * ============================================================ */

body.single-job_listing .content-single-job_listing-gallery-wrapper {
    overflow: visible;
}

body.single-job_listing .content-single-job_listing-gallery-wrapper img,
body.single-job_listing .content-single-job_listing-gallery-wrapper .type-attachment img,
body.single-job_listing .content-single-job_listing-gallery-wrapper .entry-content img,
body.single-job_listing .content-single-job_listing-gallery-wrapper .gallery img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
}

body.single-job_listing .content-single-job_listing-gallery-wrapper [style*="background-image"],
body.single-job_listing .content-single-job_listing-gallery-wrapper article.type-attachment,
body.single-job_listing .content-single-job_listing-gallery-wrapper .listing-cover,
body.single-job_listing .content-single-job_listing-gallery-wrapper .entry-cover,
body.single-job_listing .content-single-job_listing-gallery-wrapper .gallery-preview-image {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* The main content photo should never be clipped by an image wrapper. */
body.single-job_listing .content-single-job_listing-gallery-wrapper .gallery,
body.single-job_listing .content-single-job_listing-gallery-wrapper .gallery-item,
body.single-job_listing .content-single-job_listing-gallery-wrapper .type-attachment,
body.single-job_listing .content-single-job_listing-gallery-wrapper figure {
    overflow: visible !important;
}

/* Also support galleries outside the canonical wrapper without altering the hero. */
body.single-job_listing :is(.listify-gallery-images, .listing-gallery, .job_listing-gallery)
    [style*="background-image"] {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* ============================================================
 * v1.0.5 — Imágenes completas en la descripción de job_listing
 * ============================================================ */

/* La prioridad en una ficha individual es que la foto se vea COMPLETA.
   No usamos height:100% porque muchos temas ponen una altura fija al
   contenedor y eso corta la parte inferior o lateral de la imagen. */
body.single-job_listing :is(
    .job_listing-description,
    .job_description,
    .single_job_listing,
    .entry-content,
    .listing-description,
    .listing-content,
    .content-single-job_listing,
    .content-single-job_listing-wrapper,
    .job-listing-description
) img,
body.single-job_listing img.cusmex-lmf-full-image,
body.single-job_listing img.cusmex-lmf-target {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Evita que el wrapper sea quien corte una foto correcta. */
body.single-job_listing :is(
    .job_listing-description,
    .job_description,
    .entry-content,
    .listing-description,
    .listing-content,
    .content-single-job_listing,
    .content-single-job_listing-wrapper,
    .job-listing-description
) :is(
    figure,
    .wp-caption,
    .gallery-item,
    .image,
    .listing-image,
    .job-image,
    .vc_single_image-wrapper
) {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Para fondos usados por algunas plantillas: mantener la imagen entera. */
body.single-job_listing :is(
    .job_listing-description,
    .job_description,
    .entry-content,
    .listing-description,
    .listing-content,
    .content-single-job_listing
) [style*="background-image"] {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* No se deforma el GIF ni el video. */
body.single-job_listing .cusmex-lmf-extra-gallery img,
body.single-job_listing .cusmex-lmf-extra-gallery video {
    width: 100% !important;
    height: auto !important;
    max-height: 720px !important;
    object-fit: contain !important;
}


/* ============================================================
 * v1.0.6 — SMART FIT universal para job_listing
 * ============================================================ */

/* Imagen principal generada por el plugin: 16:9, contenido completo y seguro. */
body.single-job_listing img.cusmex-lmf-smart-fit-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
}

/* Thumbnails / carrusel. El Smart Fit ya incorpora margen de seguridad,
   por lo que puede ajustarse al marco sin perder información. */
body.single-job_listing :is(
    .content-single-job_listing-gallery-wrapper,
    .listing-gallery,
    .job_listing-gallery,
    .listify-gallery-images,
    .gallery
) :is(
    .gallery-item,
    .gallery-preview-image,
    .slick-slide,
    .owl-item,
    .carousel-item,
    .type-attachment
) {
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

body.single-job_listing .cusmex-lmf-smart-fit-bg {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* El área de contenido no debe recortar la imagen por overflow del tema. */
body.single-job_listing :is(
    .single_job_listing,
    .content-single-job_listing,
    .content-single-job_listing-wrapper,
    .content-single-job_listing-gallery-wrapper,
    .job_listing-description,
    .job_description,
    .listing-description,
    .listing-content,
    .entry-content
) {
    max-height: none !important;
}

/* Mantener fuera de esta corrección el hero superior y el sidebar. */
body.single-job_listing :is(
    .listing-cover,
    .job_listing-cover,
    .page-cover,
    .site-header,
    .widget-area,
    .sidebar,
    .site-sidebar
) img {
    object-fit: initial;
}


/* ============================================================
 * v1.0.7 — HERO ARRIBA INTACTO / SOLO IMÁGENES DEL LISTING
 * ============================================================ */

/* La imagen superior detrás del título, rating y ubicación es COVER/HERO. */
body.single-job_listing :is(
    .listing-cover,
    .job_listing-cover,
    .page-cover,
    .entry-cover,
    .hero,
    .hero-image,
    .listing-hero,
    .job-listing-hero,
    .single-job_listing-cover,
    .content-single-job_listing-hero
),
body.single-job_listing :is(
    .listing-cover,
    .job_listing-cover,
    .page-cover,
    .entry-cover,
    .hero,
    .hero-image,
    .listing-hero,
    .job-listing-hero,
    .single-job_listing-cover,
    .content-single-job_listing-hero
) * {
    max-height: revert !important;
    overflow: revert !important;
}

body.single-job_listing :is(
    .listing-cover,
    .job_listing-cover,
    .page-cover,
    .entry-cover,
    .hero,
    .hero-image,
    .listing-hero,
    .job-listing-hero,
    .single-job_listing-cover,
    .content-single-job_listing-hero
) img {
    width: revert !important;
    max-width: revert !important;
    height: revert !important;
    max-height: revert !important;
    object-fit: revert !important;
    object-position: revert !important;
}

/* SOLO las fotos que el usuario sube para enseñar dentro del anuncio. */
body.single-job_listing :is(
    .content-single-job_listing-gallery-wrapper,
    .listing-gallery,
    .job_listing-gallery,
    .listify-gallery-images,
    .job_listing-description,
    .job_description,
    .listing-description,
    .job-listing-description,
    .single_job_listing .entry-content
) img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.single-job_listing :is(
    .content-single-job_listing-gallery-wrapper,
    .listing-gallery,
    .job_listing-gallery,
    .listify-gallery-images,
    .job_listing-description,
    .job_description,
    .listing-description,
    .job-listing-description,
    .single_job_listing .entry-content
) :is(
    figure,
    .gallery-item,
    .gallery-preview-image,
    .type-attachment,
    .wp-caption,
    .image,
    .listing-image,
    .job-image,
    .vc_single_image-wrapper
) {
    max-height: none !important;
}

body.single-job_listing :is(
    .content-single-job_listing-gallery-wrapper,
    .listing-gallery,
    .job_listing-gallery,
    .listify-gallery-images
) [style*="background-image"] {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* ============================================================
 * v1.0.8 — DOS FORMATOS INDEPENDIENTES
 * 1) HERO SUPERIOR = panorámico 3:1, cover
 * 2) GALERÍA INFERIOR = imagen completa, contain/Smart Fit
 * ============================================================ */

/* HERO: conserva exactamente el comportamiento de fondo ancho, pero usando
   una imagen generada específicamente a 1920x640. */
body.single-job_listing :is(
    .listing-cover,
    .job_listing-cover,
    .page-cover,
    .entry-cover,
    .hero,
    .hero-image,
    .listing-hero,
    .job-listing-hero,
    .single-job_listing-cover,
    .content-single-job_listing-hero
) {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    overflow: hidden !important;
}

body.single-job_listing :is(
    .listing-cover,
    .job_listing-cover,
    .page-cover,
    .entry-cover,
    .hero,
    .hero-image,
    .listing-hero,
    .job-listing-hero,
    .single-job_listing-cover,
    .content-single-job_listing-hero
) img.cusmex-lmf-hero-fit-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* GALERÍA/CONTENIDO INFERIOR: aquí sí se protege la imagen completa. */
body.single-job_listing :is(
    .content-single-job_listing-gallery-wrapper,
    .listing-gallery,
    .job_listing-gallery,
    .listify-gallery-images,
    .job_listing-description,
    .job_description,
    .listing-description,
    .job-listing-description,
    .single_job_listing .entry-content
) img:not(.cusmex-lmf-hero-fit-image) {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
}


/* ============================================================
 * v1.0.9 — IMÁGENES INFERIORES: FIT COMPLETO Y SIN RECORTE
 * La imagen superior/hero mantiene su tratamiento panorámico.
 * ============================================================ */

/*
 * Área grande de imágenes debajo del hero.
 * 4:3 crea un marco consistente y profesional para fotos de cualquier tamaño.
 */
body.single-job_listing :is(
    .content-single-job_listing-gallery-wrapper,
    .listing-gallery,
    .job_listing-gallery,
    .listify-gallery-images
) {
    width: 100% !important;
    max-width: 100% !important;
}

/* La imagen real siempre se ve completa. */
body.single-job_listing :is(
    .content-single-job_listing-gallery-wrapper,
    .listing-gallery,
    .job_listing-gallery,
    .listify-gallery-images,
    .job_listing-description,
    .job_description,
    .listing-description,
    .job-listing-description,
    .single_job_listing .entry-content
) img.cusmex-lmf-lower-image,
body.single-job_listing .cusmex-lmf-lower-scope img:not(.cusmex-lmf-hero-fit-image) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
}

/*
 * Wrappers de imágenes normales: sin alturas fijas ni overflow que recorte.
 */
body.single-job_listing .cusmex-lmf-lower-scope :is(
    figure,
    .wp-caption,
    .image,
    .listing-image,
    .job-image,
    .vc_single_image-wrapper
),
body.single-job_listing .cusmex-lmf-lower-frame {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/*
 * Celdas que el tema representa como background-image.
 * Aquí sí usamos un marco 4:3 y contain: entra la foto completa y el espacio
 * sobrante queda limpio en vez de cortar información.
 */
body.single-job_listing .cusmex-lmf-lower-scope :is(
    .gallery-preview-image,
    .gallery-item,
    .type-attachment,
    .slick-slide,
    .owl-item,
    .carousel-item
).cusmex-lmf-lower-bg,
body.single-job_listing .cusmex-lmf-lower-bg {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    height: auto !important;
    min-height: 0 !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #f4f5f7 !important;
}

/*
 * Miniaturas: mismo principio, pero con marco corto y estable.
 * Nunca usar cover en las imágenes de contenido del listing.
 */
body.single-job_listing .cusmex-lmf-lower-scope :is(
    .gallery-preview,
    .gallery-thumbnail,
    .gallery-thumbnails,
    .listing-gallery-thumbnail,
    .job_listing-gallery-thumbnail
) img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #f4f5f7 !important;
}

/* Protección adicional contra reglas inline del tema que vuelvan a cortar. */
body.single-job_listing .cusmex-lmf-lower-scope [style*="background-image"] {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}


/* ============================================================
 * v1.0.10 — MODO LIGERO, SIN PROCESAMIENTO MASIVO
 * ============================================================ */

/*
 * HERO / COVER SUPERIOR
 * Mantiene el formato panorámico esperado por el tema.
 * Puede recortar bordes de forma natural porque es un fondo/banner.
 */
body.single-job_listing :is(
    .listing-cover,
    .job_listing-cover,
    .page-cover,
    .entry-cover,
    .hero,
    .hero-image,
    .listing-hero,
    .job-listing-hero,
    .single-job_listing-cover,
    .content-single-job_listing-hero
) {
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/*
 * IMÁGENES INFERIORES
 * Son las fotos que el usuario sube para que el visitante vea el trabajo.
 * Aquí la prioridad es NO CORTAR.
 */
body.single-job_listing :is(
    .content-single-job_listing-gallery-wrapper,
    .listing-gallery,
    .job_listing-gallery,
    .listify-gallery-images,
    .job_listing-description,
    .job_description,
    .listing-description,
    .job-listing-description,
    .single_job_listing .entry-content
) img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Quitar el recorte impuesto por wrappers del tema. */
body.single-job_listing :is(
    .content-single-job_listing-gallery-wrapper,
    .listing-gallery,
    .job_listing-gallery,
    .listify-gallery-images,
    .job_listing-description,
    .job_description,
    .listing-description,
    .job-listing-description,
    .single_job_listing .entry-content
) :is(
    figure,
    .wp-caption,
    .image,
    .listing-image,
    .job-image,
    .vc_single_image-wrapper,
    .gallery-item,
    .gallery-preview-image,
    .type-attachment
) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/*
 * Cuando la galería inferior está construida con background-image,
 * mostrar la imagen completa dentro de un marco 4:3.
 */
body.single-job_listing :is(
    .content-single-job_listing-gallery-wrapper,
    .listing-gallery,
    .job_listing-gallery,
    .listify-gallery-images
) :is(
    [style*="background-image"],
    .gallery-preview-image,
    .gallery-item,
    .type-attachment,
    .slick-slide,
    .owl-item,
    .carousel-item
) {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #f4f5f7 !important;
}

/* El contenido inferior nunca debe heredar cover. */
body.single-job_listing .cusmex-lmf-lower-scope [style*="background-image"],
body.single-job_listing .cusmex-lmf-lower-bg {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #f4f5f7 !important;
}


/* ============================================================
 * v1.0.11 — HERO PANORÁMICO SIN PERDER LA FOTO + GALERÍA COMPLETA
 * ============================================================ */

/*
 * HERO SUPERIOR
 * Fondo 1 = foto ampliada/cover y suavizada para llenar todo el banner.
 * Fondo 2 = foto completa/contain para que no se pierdan logos, edificios,
 * personas o texto importante de la imagen subida.
 */
body.single-job_listing .cusmex-lmf-hero-smart {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    min-height: clamp(260px, 31vw, 500px) !important;
    background-image: none !important;
    background-color: #111 !important;
}

body.single-job_listing .cusmex-lmf-hero-smart::before {
    content: "" !important;
    position: absolute !important;
    inset: -20px !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-image:
        linear-gradient(rgba(0,0,0,.16), rgba(0,0,0,.16)),
        var(--cusmex-lmf-hero-url) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    filter: blur(14px) !important;
    transform: scale(1.08) !important;
    opacity: .82 !important;
}

body.single-job_listing .cusmex-lmf-hero-smart::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background-image: var(--cusmex-lmf-hero-url) !important;
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* El contenido del tema (nombre, estrellas, ubicación, share) queda encima. */
body.single-job_listing .cusmex-lmf-hero-smart > * {
    position: relative !important;
    z-index: 3 !important;
}

/* Si el tema usa un IMG real como fondo, dejamos que mantenga el alto
   pero ocultamos la copia porque la imagen ya se dibuja correctamente
   en las capas ::before/::after. */
body.single-job_listing .cusmex-lmf-hero-smart img.cusmex-lmf-hero-source-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: inherit !important;
    object-fit: contain !important;
    object-position: center center !important;
    opacity: 0 !important;
}

/*
 * IMÁGENES INFERIORES / LISTING IMAGES
 * Aquí NUNCA usamos cover. La imagen debe verse completa.
 */
body.single-job_listing .cusmex-lmf-lower-scope img.cusmex-lmf-lower-image,
body.single-job_listing :is(
    .content-single-job_listing-gallery-wrapper,
    .listing-gallery,
    .job_listing-gallery,
    .listify-gallery-images,
    .job_listing-description,
    .job_description,
    .listing-description,
    .job-listing-description,
    .single_job_listing .entry-content
) img:not(.cusmex-lmf-hero-source-image) {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Quitar el clipping únicamente de los wrappers de las imágenes inferiores. */
body.single-job_listing .cusmex-lmf-lower-scope :is(
    figure,
    .wp-caption,
    .image,
    .listing-image,
    .job-image,
    .vc_single_image-wrapper,
    .gallery-item,
    .gallery-preview-image,
    .type-attachment
),
body.single-job_listing .cusmex-lmf-lower-frame:is(
    figure,
    .wp-caption,
    .image,
    .listing-image,
    .job-image,
    .vc_single_image-wrapper,
    .gallery-item,
    .gallery-preview-image,
    .type-attachment
) {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Galerías inferiores construidas como background-image. */
body.single-job_listing .cusmex-lmf-lower-bg,
body.single-job_listing .cusmex-lmf-lower-scope [style*="background-image"] {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #f4f5f7 !important;
}

/* Miniaturas inferiores: completas, centradas y sin zoom/crop. */
body.single-job_listing .cusmex-lmf-lower-scope :is(
    .gallery-preview,
    .gallery-thumbnail,
    .gallery-thumbnails,
    .listing-gallery-thumbnail,
    .job_listing-gallery-thumbnail
) img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: #f4f5f7 !important;
}


/* ============================================================
 * v1.0.12 — ADAPTADOR ESPECÍFICO PARA LISTIFY
 * ============================================================ */

/* ---------- HERO / COVER SUPERIOR ---------- */

body.single-job_listing header.listing-cover.cusmex-listify-hero-fixed,
body.single-job_listing .listing-cover.cusmex-listify-hero-fixed {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    min-height: clamp(300px, 32vw, 520px) !important;
    background-image: none !important;
    background-color: #111 !important;
}

body.single-job_listing .cusmex-listify-hero-fill,
body.single-job_listing .cusmex-listify-hero-full {
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

body.single-job_listing .cusmex-listify-hero-fill {
    z-index: 0 !important;
    inset: -18px !important;
    background-size: cover !important;
    filter: blur(16px) brightness(.72) !important;
    transform: scale(1.07) !important;
}

body.single-job_listing .cusmex-listify-hero-full {
    z-index: 1 !important;
    background-size: contain !important;
}

body.single-job_listing .cusmex-listify-hero-content {
    position: relative !important;
    z-index: 3 !important;
}

/* ---------- GALERÍA GRANDE INFERIOR ---------- */

body.single-job_listing .content-single-job_listing-gallery-wrapper.cusmex-listify-gallery-fixed {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

body.single-job_listing
.content-single-job_listing-gallery-wrapper.cusmex-listify-gallery-fixed
article.type-attachment,
body.single-job_listing
.content-single-job_listing-gallery-wrapper.cusmex-listify-gallery-fixed
.type-attachment,
body.single-job_listing
.content-single-job_listing-gallery-wrapper.cusmex-listify-gallery-fixed
.gallery-item {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

body.single-job_listing
.content-single-job_listing-gallery-wrapper.cusmex-listify-gallery-fixed
img.cusmex-listify-gallery-image {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
}

/* Background-based attachment views */
body.single-job_listing
.content-single-job_listing-gallery-wrapper
.cusmex-listify-gallery-bg-fixed {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #f4f5f7 !important;
}

/* ---------- MINIATURAS LISTIFY ---------- */

body.single-job_listing
.listify-gallery-images
.gallery-preview-image.cusmex-listify-thumb-fixed {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    background-color: #f4f5f7 !important;
}

/* ---------- IMÁGENES EN DESCRIPCIÓN ---------- */

body.single-job_listing
.single_job_listing
.job_description
img.cusmex-listify-description-image,
body.single-job_listing
.single_job_listing
.entry-content
img.cusmex-listify-description-image {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}


/* ============================================================
 * v1.0.13 — EDITOR MANUAL DE IMÁGENES
 * ============================================================ */

.cusmex-lmf-edit-images-button {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 99999;
    border: 0;
    border-radius: 999px;
    padding: 12px 18px;
    background: #2271b1;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 6px 24px rgba(0,0,0,.22);
    cursor: pointer;
}

.cusmex-lmf-manual-editor {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 100000;
    width: min(420px, calc(100vw - 24px));
    max-height: min(760px, calc(100vh - 40px));
    overflow: auto;
    background: #fff;
    color: #1d2327;
    border-radius: 12px;
    box-shadow: 0 12px 50px rgba(0,0,0,.30);
}

.cusmex-lmf-editor-header {
    position: sticky;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid #e2e5e8;
}

.cusmex-lmf-editor-close {
    border: 0;
    background: transparent;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.cusmex-lmf-editor-body {
    padding: 14px 16px 18px;
}

.cusmex-lmf-editor-section {
    padding: 12px 0 16px;
    border-bottom: 1px solid #e2e5e8;
}

.cusmex-lmf-editor-section h4 {
    margin: 0 0 6px;
    font-size: 15px;
}

.cusmex-lmf-editor-section .description {
    margin: 0 0 12px;
    font-size: 12px;
    opacity: .75;
}

.cusmex-lmf-editor-section label {
    display: grid;
    grid-template-columns: 92px 1fr;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    font-size: 13px;
}

.cusmex-lmf-editor-section select,
.cusmex-lmf-editor-section input[type="range"] {
    width: 100%;
}

.cusmex-lmf-gallery-picker {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin: 10px 0 14px;
}

.cusmex-lmf-picker-item {
    position: relative;
    display: block;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #f1f3f5;
    overflow: hidden;
    cursor: pointer;
}

.cusmex-lmf-picker-item.is-active {
    border-color: #2271b1;
}

.cusmex-lmf-picker-item img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.cusmex-lmf-picker-item span {
    position: absolute;
    left: 4px;
    bottom: 4px;
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(0,0,0,.65);
    color: #fff;
    font-size: 10px;
}

.cusmex-lmf-editor-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
}

.cusmex-lmf-editor-status {
    font-size: 12px;
    font-weight: 600;
}

/* Manual hero values override automatic positioning. */
body.single-job_listing .cusmex-listify-hero-full {
    background-position: var(--cusmex-manual-hero-x, 50%) var(--cusmex-manual-hero-y, 50%) !important;
}

/* On small screens the editor becomes almost full width. */
@media (max-width: 640px) {
    .cusmex-lmf-edit-images-button {
        right: 12px;
        bottom: 12px;
    }

    .cusmex-lmf-manual-editor {
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
    }
}


/* ============================================================
 * v1.0.14 — EDITOR MANUAL AUTÓNOMO
 * ============================================================ */

.cusmex-manual-v2-open {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 999999;
    border: 0;
    border-radius: 999px;
    padding: 13px 18px;
    background: #2271b1;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 8px 28px rgba(0,0,0,.28);
    cursor: pointer;
}

.cusmex-manual-v2-panel {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 1000000;
    width: min(430px, calc(100vw - 24px));
    max-height: calc(100vh - 36px);
    overflow: auto;
    background: #fff;
    color: #1d2327;
    border-radius: 14px;
    box-shadow: 0 12px 55px rgba(0,0,0,.35);
}

.cusmex-manual-v2-panel[hidden] {
    display: none !important;
}

.cusmex-manual-v2-head {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid #e2e5e8;
}

#cusmex-manual-v2-close {
    border: 0;
    background: transparent;
    font-size: 28px;
    cursor: pointer;
}

.cusmex-manual-v2-body {
    padding: 14px 16px 18px;
}

.cusmex-manual-v2-section {
    padding: 10px 0 16px;
    border-bottom: 1px solid #e2e5e8;
}

.cusmex-manual-v2-section h4 {
    margin: 0 0 10px;
    font-size: 16px;
}

.cusmex-manual-v2-help,
.cusmex-lower-empty {
    font-size: 12px;
    opacity: .72;
}

.cusmex-manual-v2-section label {
    display: grid;
    grid-template-columns: 105px 1fr;
    gap: 10px;
    align-items: center;
    margin: 11px 0;
    font-size: 13px;
}

.cusmex-manual-v2-section select,
.cusmex-manual-v2-section input[type="range"] {
    width: 100%;
}

.cusmex-lower-picker {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 10px 0 14px;
}

.cusmex-manual-v2-thumb {
    position: relative;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 8px;
    background: #f3f4f5;
    overflow: hidden;
    cursor: pointer;
}

.cusmex-manual-v2-thumb.is-active {
    border-color: #2271b1;
}

.cusmex-manual-v2-thumb img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.cusmex-manual-v2-thumb span {
    position: absolute;
    left: 4px;
    right: 4px;
    bottom: 4px;
    padding: 3px 5px;
    border-radius: 4px;
    background: rgba(0,0,0,.64);
    color: white;
    font-size: 10px;
}

.cusmex-manual-v2-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
}

#cusmex-manual-v2-status {
    font-size: 12px;
    font-weight: 600;
}

/* Manual upper-image layer */
body.single-job_listing .cusmex-manual-v2-hero {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate !important;
}

body.single-job_listing .cusmex-manual-v2-hero-image {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    background-repeat: no-repeat !important;
}

body.single-job_listing .cusmex-manual-v2-hero-content {
    position: relative !important;
    z-index: 2 !important;
}

@media (max-width: 640px) {
    .cusmex-manual-v2-open {
        right: 12px;
        bottom: 12px;
    }

    .cusmex-manual-v2-panel {
        right: 12px;
        bottom: 12px;
        width: calc(100vw - 24px);
        max-height: calc(100vh - 24px);
    }
}