/*
 * Vermietungen.
 * Loaded by slug (see Theme\enqueue_page_assets()).
 *
 * Reference: prod /vermietungen/ at 1920px.
 *
 * Geometry at 1920px:
 *   head 324 · rentals 785 · FAQ 605 · partners 667
 *
 * The FAQ is the global block (css/global/faq.css) and the section heading is
 * the global one (css/global/section-head.css); what is left here is the
 * rental card and the request dialog.
 */

/* ══════════════════════════════════════════════════════════════════════════
 * Ausrüstung verfügbar zur Miete
 * Reference: prod `elementor-element-3ad8e06`.
 * ══════════════════════════════════════════════════════════════════════════ */
.rentals {
    padding:          50px 20px;
    background-color: var(--color-bg-alt);
}

.rentals__inner {
    display:        flex;
    flex-direction: column;
    gap:            20px;
    width:          100%;
    max-width:      900px;
    margin:         0 auto;
}

/* Two columns, as on prod — a single item keeps the left one and leaves the
   right empty rather than stretching across the section. */
.rentals__list {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   24px;
    margin:                0;
    padding:               0;
    list-style:            none;
}

.rental {
    display:        flex;
    flex-direction: column;
    height:         100%;
}

.rental__image {
    display:    block;
    width:      100%;
    height:     325px;
    object-fit: cover;
}

.rental__body {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            10px;
    flex:           1;
    padding:        24px;
}

.rental__title {
    margin:      0;
    font-family: var(--font-heading);
    font-weight: 400;
    font-size:   24px;
    line-height: 1.167;
    color:       var(--color-text);
}

.rental__rule {
    width:         100px;
    height:        1px;
    margin-bottom: 6px;
    background:    linear-gradient(90deg,
                       rgba(157, 136, 82, 0) 0%,
                       #d0b46d 49.8%,
                       rgba(106, 92, 56, 0) 100%);
}

.rental__text {
    width:         100%;
    margin-bottom: 6px;
    font-family:   var(--font-body);
    font-weight:   400;
    font-size:     16px;
    line-height:   1.25;
    color:         rgba(255, 255, 255, .7);
}

.rental__text p {
    margin: 0 0 10px;
}

.rental__text p:last-child {
    margin-bottom: 0;
}

/* Pinned to the bottom so cards of different text length still line their
   buttons up. */
.rental__footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
    width:           100%;
    margin-top:      auto;
}

.rental__price {
    margin:      0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size:   14px;
    line-height: 1.143;
    color:       var(--color-primary);
}

.rental__btn {
    padding:          10px 36px;
    border:           0;
    border-radius:    50px;
    background-color: var(--color-primary);
    font-family:      var(--font-body);
    font-weight:      600;
    font-size:        16px;
    line-height:      1.25;
    text-transform:   uppercase;
    color:            var(--color-bg);
    white-space:      nowrap;
    cursor:           pointer;
    transition:       background-color var(--transition);
}

.rental__btn:hover,
.rental__btn:focus-visible {
    background-color: var(--color-accent);
}

/* The film of the candles stands where the photo would, in the first card. */
.rental__media--film {
    position: relative;
}

.rental__film {
    display:    block;
    width:      100%;
    height:     325px;
    object-fit: cover;
    background: #000;
}

/* One item, as now: the card is not left in half of an empty grid but runs the
   width of the section, the upright film on the left and the words beside it.
   The film is laid over its column, so the card is as tall as the words and the
   film's own shape never stretches it; the upright frame is cropped a little
   top and bottom to fit. */
.rentals__list--single {
    grid-template-columns: 1fr;
}

.rentals__list--single .rental {
    flex-direction: row;
    border:         1px solid rgba(208, 179, 107, .28);
    background:     var(--color-bg);
    box-shadow:     0 0 48px rgba(192, 156, 77, .1);
}

.rentals__list--single .rental__media {
    position:     relative;
    flex:         0 0 42%;
    aspect-ratio: 4 / 5;
}

.rentals__list--single .rental__film,
.rentals__list--single .rental__image {
    position: absolute;
    inset:    0;
    height:   100%;
}

.rentals__list--single .rental__body {
    justify-content: center;
    gap:             14px;
    padding:         40px 44px;
}

.rentals__list--single .rental__title {
    font-size: 32px;
}

.rentals__list--single .rental__text {
    font-size:   17px;
    line-height: 1.45;
}

/* Close under the words, not pinned to the foot of a tall card. */
.rentals__list--single .rental__footer {
    margin-top: 18px;
}

/* ══════════════════════════════════════════════════════════════════════════
 * Tablet
 * ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {

    .rentals {
        padding: 40px 20px;
    }

    .rentals__list--single .rental__body {
        padding: 28px 28px;
    }

    .rentals__list--single .rental__title {
        font-size: 26px;
    }

    .rentals__list--single .rental__text {
        font-size: 16px;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
 * Phone
 * ══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {

    .rentals {
        padding: 28px 16px;
    }

    .rentals__list {
        grid-template-columns: 1fr;
    }

    .rental__body {
        padding: 16px;
    }

    /* One under the other: the film on top in a 4:5 frame, the words below. */
    .rentals__list--single .rental {
        flex-direction: column;
    }

    .rentals__list--single .rental__media {
        flex:         none;
        width:        100%;
        aspect-ratio: 4 / 5;
    }

    .rentals__list--single .rental__body {
        padding: 22px 18px 20px;
    }

    .rentals__list--single .rental__title {
        font-size: 26px;
    }

    .rentals__list--single .rental__text {
        font-size: 16px;
    }

    /* The price and the button no longer share a line comfortably. */
    .rental__footer {
        flex-direction: column;
        align-items:    flex-start;
        gap:            12px;
    }

    .rental__btn {
        width:   100%;
        padding: 10px 20px;
    }
}


/* ══════════════════════════════════════════════════════════════════════════
 * Reduced motion
 * ══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {

    .rental__btn {
        transition: none;
    }
}