/* ============================================================
   CUSTOM RESPONSIVE — Constructora Rivera
   Cargado después de crivera.css para completar y corregir
   el comportamiento responsive de imágenes y contenedores.
   ============================================================ */

/* ── 1. Fallback global ──────────────────────────────────────
   Ninguna imagen sobresale de su contenedor, nunca.          */
img {
    max-width: 100%;
    height: auto;
}

/* ── 2. Project cards (grid isotope) ─────────────────────────
   La imagen llena la card con aspect-ratio fijo,
   sin importar el tamaño original del archivo subido.        */
.project-one__card {
    overflow: hidden;
    position: relative;
}
.project-one__card > img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.45s ease;
}
.project-one__card:hover > img {
    transform: scale(1.06);
}

/* Destacado (col-lg-8): imagen más alta para mejor presencia  */
.col-lg-8 .project-one__card > img {
    height: 360px;
}

/* ── 3. Project detail — imagen de cabecera ──────────────────*/
.project-details__image {
    overflow: hidden;
    border-radius: 12px;
}
.project-details__image > img {
    width: 100%;
    height: auto;
    max-height: 560px;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── 4. Project detail — imagen de características ───────────*/
.project-details__feature__thumb {
    overflow: hidden;
    border-radius: 12px;
}
.project-details__feature__thumb img {
    width: 100%;
    height: 100%;
    min-height: 320px;
    max-height: 480px;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── 5. Nosotros — imágenes apiladas ─────────────────────────*/
.about-one__image__item__inner,
.about-one__image__item-two {
    overflow: hidden;
}
.about-one__image__one {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── 6. Footer — logo responsive ─────────────────────────────
   El atributo width="337" fue eliminado del HTML;
   aquí se controla con CSS para no romper en móvil.          */
.footer-widget__logo img {
    max-width: 220px;
    width: 100%;
    height: auto;
    display: block;
}

/* ── 7. Footer — miniaturas de proyectos recientes ───────────*/
.footer-widget--post__img {
    flex-shrink: 0;
    overflow: hidden;
}
.footer-widget--post__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── 8. Contact — iframe del mapa ────────────────────────────
   El iframe no tiene width/height nativo;
   el contenedor del template lo envuelve pero
   necesitamos reforzar el 100%.                              */
.contact-four__maps__inner iframe {
    width: 100% !important;
    height: 100%;
    min-height: 340px;
    display: block;
    border: 0;
}

/* Logo dentro del mapa de contacto */
.contact-four__maps__logo img {
    max-width: 177px;
    width: 100%;
    height: auto;
    display: block;
}

/* ── 9. Servicios — imágenes de cards ────────────────────────*/
.service-card__image img,
.service-one__card__image img,
.service-two__card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── 10. Videos — thumbnail ──────────────────────────────────
   El thumbnail usa padding-top:56.25% (16:9),
   la imagen absoluta ya tiene object-fit;
   esto refuerza por si se aplica fuera del template.        */
.video-thumb__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── 11. Admin — miniaturas en tablas ────────────────────────*/
.admin-table td img {
    object-fit: cover;
    display: block;
}

/* ── 12. Media queries ───────────────────────────────────────*/
@media (max-width: 991px) {
    .project-one__card > img {
        height: 240px;
    }
    .col-lg-8 .project-one__card > img {
        height: 280px;
    }
    .project-details__feature__thumb img {
        min-height: 260px;
        max-height: 360px;
    }
}

@media (max-width: 767px) {
    .project-one__card > img,
    .col-lg-8 .project-one__card > img {
        height: 220px;
    }
    .project-details__image > img {
        max-height: 280px;
    }
    .project-details__feature__thumb img {
        min-height: 200px;
        max-height: 260px;
    }
    .about-one__image {
        margin-bottom: 30px;
    }
    .contact-four__maps__inner iframe {
        min-height: 260px;
    }
}

@media (max-width: 480px) {
    .project-one__card > img,
    .col-lg-8 .project-one__card > img {
        height: 180px;
    }
    .footer-widget__logo img {
        max-width: 160px;
    }
}