/* APD 169.0.0 — CARD SIZE + FAVORITE HEART PARITY
   One visual card system for Todo / Alojamientos / Experiencias / Servicios. */

/* -------------------------------------------------------------------------
   1. Shared card geometry. The Todo rail is the source of truth.
   ------------------------------------------------------------------------- */
html body.apd169-card-parity :is(
    .apd5-stay-card,
    .apd5-experience-card,
    .apd5-service-card
) {
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:0 0 2px !important;
    align-self:start !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
}

html body.apd169-card-parity :is(
    .apd5-stay-card,
    .apd5-experience-card,
    .apd5-service-card
) .apd5-card-media {
    position:relative !important;
    width:100% !important;
    height:auto !important;
    aspect-ratio:1.04 / 1 !important;
    margin:0 0 8px !important;
    overflow:hidden !important;
    border-radius:14px !important;
    background:#eeeeee !important;
    box-shadow:none !important;
}

html body.apd169-card-parity :is(
    .apd5-stay-card,
    .apd5-experience-card,
    .apd5-service-card
) .apd5-card-media > a,
html body.apd169-card-parity :is(
    .apd5-stay-card,
    .apd5-experience-card,
    .apd5-service-card
) .apd5-card-media img {
    width:100% !important;
    height:100% !important;
    display:block !important;
}

html body.apd169-card-parity :is(
    .apd5-stay-card,
    .apd5-experience-card,
    .apd5-service-card
) .apd5-card-media img {
    object-fit:cover !important;
}

html body.apd169-card-parity :is(
    .apd5-stay-card,
    .apd5-experience-card,
    .apd5-service-card
) .apd5-card-body {
    width:100% !important;
    padding:0 2px !important;
    box-sizing:border-box !important;
}

/* Desktop: exact same seven-card width used by Todo. */
@media (min-width:1180px) {
    html body.apd169-card-parity .apd31-catalog-grid,
    html body.apd169-card-parity .apd31-catalog-grid.is-services {
        width:100% !important;
        max-width:none !important;
        display:grid !important;
        grid-template-columns:repeat(7,minmax(0,1fr)) !important;
        gap:32px 12px !important;
        align-items:start !important;
    }
}

/* Tablet: Todo displays five cards, so every full catalogue does too. */
@media (min-width:768px) and (max-width:1179px) {
    html body.apd169-card-parity .apd31-catalog-grid,
    html body.apd169-card-parity .apd31-catalog-grid.is-services {
        width:100% !important;
        max-width:none !important;
        display:grid !important;
        grid-template-columns:repeat(5,minmax(0,1fr)) !important;
        gap:28px 12px !important;
        align-items:start !important;
    }
}

/* Mobile: preserve the same visual card width as Todo instead of shrinking
   Experiences/Services into mini cards. */
@media (max-width:767px) {
    html body.apd169-card-parity .apd31-catalog-grid,
    html body.apd169-card-parity .apd31-catalog-grid.is-services {
        width:100% !important;
        max-width:none !important;
        display:grid !important;
        grid-template-columns:minmax(0,72vw) !important;
        justify-content:start !important;
        gap:26px 12px !important;
        align-items:start !important;
    }

    html body.apd169-card-parity :is(
        .apd5-stay-card,
        .apd5-experience-card,
        .apd5-service-card
    ) .apd5-card-media {
        aspect-ratio:1.18 / 1 !important;
    }
}

@media (max-width:479px) {
    html body.apd169-card-parity .apd31-catalog-grid,
    html body.apd169-card-parity .apd31-catalog-grid.is-services {
        grid-template-columns:minmax(0,82vw) !important;
    }
}

/* -------------------------------------------------------------------------
   2. Favorite heart — match reference capture 4.
   Remove the oversized circular treatment; keep a 32px hit area and a
   25px heart, white outline with a subtle dark translucent center.
   ------------------------------------------------------------------------- */
html body.apd169-card-parity .apd5-card .apd5-favorite,
html body.apd169-card-parity .apd53-result-card > .apd5-favorite {
    position:absolute !important;
    top:9px !important;
    right:9px !important;
    z-index:8 !important;
    width:32px !important;
    min-width:32px !important;
    max-width:32px !important;
    height:32px !important;
    min-height:32px !important;
    max-height:32px !important;
    margin:0 !important;
    padding:0 !important;
    display:grid !important;
    place-items:center !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#fff !important;
    box-shadow:none !important;
    filter:drop-shadow(0 1px 2px rgba(0,0,0,.58)) !important;
    transform:none !important;
    opacity:1 !important;
    cursor:pointer !important;
}

html body.apd169-card-parity .apd5-card .apd5-favorite::before,
html body.apd169-card-parity .apd5-card .apd5-favorite::after,
html body.apd169-card-parity .apd53-result-card > .apd5-favorite::before,
html body.apd169-card-parity .apd53-result-card > .apd5-favorite::after {
    display:none !important;
    content:none !important;
}

html body.apd169-card-parity .apd5-card .apd5-favorite .apd5-icon,
html body.apd169-card-parity .apd53-result-card > .apd5-favorite .apd5-icon {
    width:25px !important;
    min-width:25px !important;
    height:25px !important;
    min-height:25px !important;
    display:block !important;
    color:#fff !important;
    fill:rgba(0,0,0,.30) !important;
    stroke:currentColor !important;
    stroke-width:2.25 !important;
    filter:none !important;
    transform:none !important;
    pointer-events:none !important;
}

html body.apd169-card-parity .apd5-card .apd5-favorite:hover,
html body.apd169-card-parity .apd53-result-card > .apd5-favorite:hover {
    background:transparent !important;
    transform:scale(1.04) !important;
}

html body.apd169-card-parity .apd5-card .apd5-favorite:active,
html body.apd169-card-parity .apd53-result-card > .apd5-favorite:active {
    transform:scale(.96) !important;
}

/* Keep selected-state feedback without changing the geometry. */
html body.apd169-card-parity .apd5-card .apd5-favorite.is-favorite .apd5-icon,
html body.apd169-card-parity .apd53-result-card > .apd5-favorite.is-favorite .apd5-icon {
    fill:#0f6fe8 !important;
    color:#fff !important;
}

/* Legacy Homey favorite button that may survive inside marketplace cards. */
html body.apd169-card-parity .apd5-card .add_fav:not(.apd5-favorite),
html body.apd169-card-parity .apd5-card .remove_fav:not(.apd5-favorite) {
    position:absolute !important;
    top:9px !important;
    right:9px !important;
    width:32px !important;
    height:32px !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}