/*
 * 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);
}

.stay-card-media {
    position: relative;
    overflow: hidden;
}

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

/*
 * The gallery's own controls, above the link stretched over the card.
 *
 * Swiper gives `.swiper` `z-index: 1`, which makes it a stacking context, so
 * its arrows and bullets - z-index 10, but 10 *inside* that context - sat under
 * the title's stretched ::after at 5. Next and Previous were drawn, took the
 * hover, and opened the property instead of moving the photographs. Dropping
 * the context lets those 10s be read against the 5: the controls come out on
 * top and the slides, which have no z-index of their own, stay under it, so the
 * rest of the photograph is still the card's link.
 */
.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);
}