/* Listado de remates (próximos y anteriores) */

.rvn-listado {
    .rvn-remate-body {
        padding-top: 48px;
        padding-bottom: 72px;
    }

    .rvn-listado-seccion + .rvn-listado-seccion {
        margin-top: 72px;
    }

    .rvn-listado-head {
        margin-bottom: 32px;
    }

    .rvn-listado-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
        gap: 28px;
    }

    .rvn-remate-card {
        display: flex;
        flex-direction: column;
        overflow: hidden;
        background: #fff;
        border-top: 4px solid var(--rvn-gold);
        border-radius: 2px;
        box-shadow: 0 0 30px rgba(0, 0, 0, 0.08);
        transition:
            transform 0.2s ease,
            box-shadow 0.2s ease;

        &:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 36px rgba(0, 0, 0, 0.14);
        }
    }

    .rvn-remate-card-media {
        position: relative;
        display: block;
        height: 230px;
        background: var(--rvn-dark) var(--rvn-logo) center / 45% no-repeat;

        img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            background: var(--rvn-dark);
        }
    }

    .rvn-remate-card-fecha {
        position: absolute;
        top: 14px;
        left: 14px;
        z-index: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 58px;
        padding: 8px 10px;
        background: var(--rvn-gold);
        color: var(--rvn-dark);
        border-radius: 3px;
        font-family: var(--rvn-font-heading);
        line-height: 1;

        .rvn-remate-card-dia {
            font-size: 26px;
            font-weight: 700;
        }

        .rvn-remate-card-mes {
            margin-top: 4px;
            font-size: 12px;
            font-weight: 600;
            letter-spacing: 1.5px;
        }
    }

    .rvn-remate-card-vivo {
        position: absolute;
        right: 14px;
        bottom: 14px;
        z-index: 1;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 12px;
        background: rgba(22, 36, 29, 0.85);
        color: var(--rvn-gold);
        border: 1px solid rgba(201, 162, 74, 0.6);
        border-radius: 20px;
        font-family: var(--rvn-font-heading);
        font-size: 12px;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .rvn-remate-card-body {
        display: flex;
        flex: 1;
        flex-direction: column;
        padding: 22px 24px 24px;
    }

    .rvn-remate-card-titulo {
        margin: 0 0 14px;
        font-family: var(--rvn-font-heading);
        font-size: 21px;
        font-weight: 600;
        line-height: 1.2;

        a {
            color: var(--rvn-dark);

            &:hover {
                color: var(--rvn-brown-dark);
            }
        }
    }

    .rvn-remate-card-datos {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin: 0 0 22px;
        padding: 0;
        list-style: none;
        font-size: 14px;
        color: var(--rvn-ink);

        li {
            display: flex;
            gap: 10px;
            align-items: flex-start;
        }

        i {
            margin-top: 2px;
            font-size: 17px;
            color: var(--rvn-brown);
        }
    }

    .rvn-remate-card-acciones {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px 18px;
        margin-top: auto;

        .rvn-btn-gold {
            padding: 11px 22px;
        }

        .rvn-remate-card-link {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 600;
            color: var(--rvn-brown-dark);

            &:hover {
                color: var(--rvn-gold);
            }
        }
    }

    /* anteriores: más compactas y con fecha en verde */
    .rvn-listado-anteriores {
        .rvn-listado-grid {
            grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
            gap: 22px;
        }

        .rvn-remate-card-media {
            height: 170px;
        }

        .rvn-remate-card-fecha {
            background: var(--rvn-dark);
            color: var(--rvn-cream);
        }

        .rvn-remate-card-titulo {
            font-size: 18px;
        }

        .rvn-remate-card-body {
            padding: 18px 20px 20px;
        }
    }
}