/*
 * The stay card - Figma node 1:3062 (385 x 443) and the same card at 325 over
 * the map, node 1:3176.
 *
 * Its own file because it is not the listing's alone: Similar Properties on a
 * stay renders the same template, and that page does not load the listing's
 * stylesheet - which had those cards rendering as unstyled blue links.
 */

/*
 * Node 1:3062: a 385 x 443 card - photograph with the property type on it,
 * then the destination, the title in Lyon, a metric line and View Stay. The
 * whole card is the link target; the "View Stay" line is a label for it, which
 * is why it is aria-hidden in the markup rather than a second tab stop.
 */
/* The whole card is one link - see the stretched ::after on the title. */
.stay-card {
    position: relative;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    background: var(--color-white);
}

/*
 * Above the title link stretched over the card (z-index 5). Without this the
 * photograph never receives the pointer, so a drag opened the stay and only
 * the arrows - which paint above that link - could change the slide.
 *
 * A click that does not drag still opens the stay: each slide carries its own
 * link. The image itself must not be draggable, or the browser grabs the file
 * instead of letting Swiper move the slide.
 */
.stay-card-media {
    position: relative;
    z-index: 6;
    overflow: hidden;
    touch-action: pan-y;
}

.stay-card-media a,
.stay-card-media img {
    -webkit-user-drag: none;
    user-select: none;
}

.stay-card-media img {
    width: 100%;
    aspect-ratio: 385 / 256;
    object-fit: cover;
}

/*
 * Swiper gives `.swiper` `z-index: 1`, which makes a stacking context, so its
 * arrows and bullets - z-index 10, but 10 *inside* that context - sat under the
 * title's stretched link. Dropping the context lets those controls be read
 * against the card.
 */
.stay-card-media .swiper {
    z-index: auto;
}

.stay-card-type {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 6;
    padding: 6px 10px;
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-white);
    background: rgb(0 0 0 / 40%);
}

.stay-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 0 0;
}

.stay-card-location {
    padding: 6px 10px;
    font-family: var(--font-secondary);
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--color-black);
    background: var(--color-white-100);
}

.stay-card-title {
    margin: 0;
    font-family: var(--font-primary);
    font-size: 28px;
    font-weight: 400;
    line-height: 1.2;
}

.stay-card-title a {
    color: var(--color-black);
    text-decoration: none;
}

/* The card is one link: the title's anchor is stretched over all of it. */
.stay-card-title a::after {
    position: absolute;
    inset: 0;
    z-index: 5;
    content: "";
}

.stay-card-meta {
    margin: 0;
    font-family: var(--font-secondary);
    font-size: 18px;
    font-weight: 300;
    line-height: 1.5;
    color: var(--color-black);
}

.stay-card-link {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    font-family: var(--font-secondary);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-black);
}

.stay-card-link svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s ease;
}

.stay-card:hover .stay-card-link svg {
    transform: translateX(4px);
}