/* Listing pages — smooth card & filter hover (food, tour, cafe, homestay, destination, rental) */

:root {
    --listing-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --listing-duration: 0.45s;
}

.food-result-card,
.tour-result-card,
.cafe-result-card,
.homestay-result-card,
.destination-result-card,
.rental-result-card__inner {
    isolation: isolate;
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition:
        transform var(--listing-duration) var(--listing-ease),
        box-shadow var(--listing-duration) var(--listing-ease),
        border-color 0.35s ease;
}

@media (hover: hover) and (pointer: fine) {
    .food-result-card:hover,
    .tour-result-card:hover,
    .cafe-result-card:hover,
    .homestay-result-card:hover,
    .destination-result-card:hover,
    .rental-result-card__inner:hover {
        transform: translateY(-6px) translateZ(0);
        border-color: rgba(0, 210, 51, 0.28);
        box-shadow:
            0 20px 40px -12px rgba(15, 23, 42, 0.14),
            0 8px 20px -8px rgba(0, 210, 51, 0.12);
    }

    .dark .food-result-card:hover,
    .dark .tour-result-card:hover,
    .dark .cafe-result-card:hover,
    .dark .homestay-result-card:hover,
    .dark .destination-result-card:hover,
    .dark .rental-result-card__inner:hover {
        border-color: rgba(0, 210, 51, 0.35);
        box-shadow:
            0 20px 40px -12px rgba(0, 0, 0, 0.45),
            0 8px 20px -8px rgba(0, 210, 51, 0.15);
    }
}

/* List layout: no lift — only subtle shadow */
#food-cards-root.food-results--list .food-result-card:hover,
#tour-cards-root.tour-results--list .tour-result-card:hover,
#cafe-cards-root.cafe-results--list .cafe-result-card:hover,
#homestay-cards-root.homestay-results--list .homestay-result-card:hover,
#destination-cards-root.destination-results--list .destination-result-card:hover,
#rental-cards-root.rental-results--list .rental-result-card__inner:hover {
    transform: none;
    box-shadow:
        0 12px 28px -10px rgba(15, 23, 42, 0.12),
        0 4px 12px -4px rgba(0, 210, 51, 0.08);
}

.food-result-card__media img,
.tour-result-card__media img,
.cafe-result-card__media img,
.homestay-result-card__media img,
.destination-result-card__media img,
.rental-result-card__media img {
    transform: translateZ(0) scale(1);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform 0.65s var(--listing-ease);
}

@media (hover: hover) and (pointer: fine) {
    .food-result-card:hover .food-result-card__media img,
    .tour-result-card:hover .tour-result-card__media img,
    .cafe-result-card:hover .cafe-result-card__media img,
    .homestay-result-card:hover .homestay-result-card__media img,
    .destination-result-card:hover .destination-result-card__media img,
    .rental-result-card:hover .rental-result-card__media img {
        transform: translateZ(0) scale(1.05);
    }
}

.food-result-card__media .bg-gradient-to-t,
.tour-result-card__media .bg-gradient-to-t,
.cafe-result-card__media .bg-gradient-to-t,
.homestay-result-card__media .bg-gradient-to-t,
.destination-result-card__media .bg-gradient-to-t,
.rental-result-card__media .bg-gradient-to-t {
    transition: opacity 0.4s var(--listing-ease);
}

@media (hover: hover) and (pointer: fine) {
    .food-result-card:hover .food-result-card__media .bg-gradient-to-t,
    .tour-result-card:hover .tour-result-card__media .bg-gradient-to-t,
    .cafe-result-card:hover .cafe-result-card__media .bg-gradient-to-t,
    .homestay-result-card:hover .homestay-result-card__media .bg-gradient-to-t,
    .destination-result-card:hover .destination-result-card__media .bg-gradient-to-t,
    .rental-result-card:hover .rental-result-card__media .bg-gradient-to-t {
        opacity: 1;
    }
}

.food-result-card h2 a,
.tour-result-card h2 a,
.cafe-result-card h2 a,
.homestay-result-card h2 a,
.destination-result-card h2 a,
.rental-result-card h2 a {
    transition: color 0.3s var(--listing-ease);
}

.food-result-card__cta-row a,
.tour-result-card__cta-row a,
.cafe-result-card__cta-row a,
.homestay-result-card__cta-row a,
.destination-result-card__cta-row a,
.rental-result-card__cta-row a {
    transition:
        background-color 0.3s var(--listing-ease),
        border-color 0.3s var(--listing-ease),
        color 0.3s var(--listing-ease),
        transform 0.3s var(--listing-ease),
        box-shadow 0.3s var(--listing-ease);
}

@media (hover: hover) and (pointer: fine) {
    .food-result-card:hover .food-result-card__cta-row a,
    .tour-result-card:hover .tour-result-card__cta-row a,
    .cafe-result-card:hover .cafe-result-card__cta-row a,
    .homestay-result-card:hover .homestay-result-card__cta-row a,
    .destination-result-card:hover .destination-result-card__cta-row a,
    .rental-result-card:hover .rental-result-card__cta-row a {
        transform: translateY(-1px);
        box-shadow: 0 6px 16px -6px rgba(0, 210, 51, 0.45);
    }
}

.food-result-card__cta-row a .material-symbols-outlined,
.tour-result-card__cta-row a .material-symbols-outlined,
.cafe-result-card__cta-row a .material-symbols-outlined,
.homestay-result-card__cta-row a .material-symbols-outlined,
.destination-result-card__cta-row a .material-symbols-outlined,
.rental-result-card__cta-row a .material-symbols-outlined {
    transition: transform 0.35s var(--listing-ease);
}

@media (hover: hover) and (pointer: fine) {
    .food-result-card:hover .food-result-card__cta-row a .material-symbols-outlined,
    .tour-result-card:hover .tour-result-card__cta-row a .material-symbols-outlined,
    .cafe-result-card:hover .cafe-result-card__cta-row a .material-symbols-outlined,
    .homestay-result-card:hover .homestay-result-card__cta-row a .material-symbols-outlined,
    .destination-result-card:hover .destination-result-card__cta-row a .material-symbols-outlined,
    .rental-result-card:hover .rental-result-card__cta-row a .material-symbols-outlined {
        transform: translateX(3px);
    }
}

/* Sidebar filter options (loại hình, khu vực, …) */
main[class*='-list-page'] .filter-content > label {
    transition:
        background-color 0.28s var(--listing-ease),
        color 0.22s ease,
        transform 0.28s var(--listing-ease);
}

@media (hover: hover) and (pointer: fine) {
    main[class*='-list-page'] .filter-content > label:hover {
        transform: translateX(4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .food-result-card,
    .tour-result-card,
    .cafe-result-card,
    .homestay-result-card,
    .destination-result-card,
    .rental-result-card__inner,
    .food-result-card__media img,
    .tour-result-card__media img,
    .cafe-result-card__media img,
    .homestay-result-card__media img,
    .destination-result-card__media img,
    .rental-result-card__media img,
    main[class*='-list-page'] .filter-content > label {
        transition: none;
    }

    .food-result-card:hover,
    .tour-result-card:hover,
    .cafe-result-card:hover,
    .homestay-result-card:hover,
    .destination-result-card:hover,
    .rental-result-card__inner:hover {
        transform: none;
    }
}