/* ============================================================================
   RichMallorca — Hover de las fichas de propiedad
   ----------------------------------------------------------------------------
   Se carga DESPUES de staycreative_20200826.css, asi que sobreescribe
   el hover antiguo (.rm-item:hover .rmi-img{opacity:.7}) que aclaraba la foto.

   Efecto: la foto hace un zoom lento, gana color, y cae un velo oscuro
   degradado desde abajo. La tarjeta se eleva un poco y aparece una linea
   de acento sobre el texto.
   ============================================================================ */

/* --- Base -------------------------------------------------------------- */

/* .rm-item es un <a> y por defecto es inline: sin display:block los
   transforms no se aplican. */
.rm-item {
    display: block;
    position: relative;
    transition: transform .5s cubic-bezier(.16, 1, .3, 1),
                box-shadow .5s cubic-bezier(.16, 1, .3, 1);
}

/* La caja de la foto recorta el zoom para que no se salga. */
.rm-item .rmi-img {
    position: relative;
    overflow: hidden;
}

/* La foto en si. Va en su propia capa para poder escalarla sin
   arrastrar la etiqueta de "destacado". */
.rm-item .rmi-photo {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    filter: grayscale(12%);
    transform: scale(1);
    transition: transform .9s cubic-bezier(.16, 1, .3, 1),
                filter .9s cubic-bezier(.16, 1, .3, 1);
    z-index: 1;
}

/* El velo oscuro. Degradado desde abajo, no un gris plano:
   asi la foto no se apaga entera, solo gana profundidad. */
.rm-item .rmi-img::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(to top,
                rgba(28, 28, 28, .58) 0%,
                rgba(28, 28, 28, .14) 45%,
                rgba(28, 28, 28, 0) 75%);
    opacity: 0;
    transition: opacity .55s ease;
    pointer-events: none;
    z-index: 2;
}

/* La etiqueta de destacado siempre por encima del velo. */
.rm-item .dest-text {
    z-index: 3;
}

/* Anula el fundido a blanco antiguo (tambien en tactil). */
.rm-item:hover .rmi-img {
    opacity: 1;
}

/* Linea de acento que crece sobre el bloque de texto. */
.rm-item .rm-item-text::before {
    content: "";
    position: absolute;
    top: 0;
    left: 10px;
    height: 2px;
    width: 0;
    background: #aea89c;
    transition: width .6s cubic-bezier(.16, 1, .3, 1);
}

.rm-item .rmi-title {
    transition: color .35s ease;
}

/* --- Hover (solo raton, no en tactil) ---------------------------------- */

@media (hover: hover) and (pointer: fine) {

    .rm-item:hover .rmi-photo {
        transform: scale(1.06);
        filter: grayscale(0%);
    }

    .rm-item:hover .rmi-img::after {
        opacity: 1;
    }

    .rm-item:hover {
        transform: translateY(-4px);
        box-shadow: 0 18px 34px -18px rgba(34, 34, 34, .38);
    }

    .rm-item:hover .rm-item-text::before {
        width: calc(100% - 20px);
    }

    .rm-item:hover .rmi-title {
        color: #aea89c;
    }
}

/* --- Accesibilidad ----------------------------------------------------- */

/* Mismo efecto al navegar con teclado. */
.rm-item:focus-visible .rmi-photo {
    transform: scale(1.06);
    filter: grayscale(0%);
}

.rm-item:focus-visible .rmi-img::after {
    opacity: 1;
}

.rm-item:focus-visible .rm-item-text::before {
    width: calc(100% - 20px);
}

/* Respeta a quien pide menos animacion en su sistema. */
@media (prefers-reduced-motion: reduce) {

    .rm-item,
    .rm-item .rmi-photo,
    .rm-item .rmi-img::after,
    .rm-item .rm-item-text::before,
    .rm-item .rmi-title {
        transition: none;
    }

    .rm-item:hover {
        transform: none;
    }

    .rm-item:hover .rmi-photo {
        transform: none;
    }
}