/* The front page is wider than the other pages (main.css), header and footer included. */
:root {
    --container-max-width: 1440px;
}

/* || SECTION HEADING (DISPLAY) */

.section-heading--display {
    margin-block-end: clamp(2rem, 4vw, 3rem);
}

.section-heading--display .section-heading__title {
    font-size: clamp(2.75rem, 1.5rem + 5vw, 4.5rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-primary);
}

.section-heading--display .section-heading__title span {
    display: block;
    margin-block-end: 0.4rem;
    font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
    letter-spacing: 0.06em;
    color: var(--color-ink);
}

.section-heading--display .section-heading__description {
    margin-block-start: 1.25rem;
    font-size: 1.0625rem;
}

/* || RENTALS */

.rentals {
    padding-block-end: var(--section-spacing);
}

.rentals__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem 2rem;
    margin-block-end: clamp(2rem, 4vw, 3rem);
}

.rentals__header .section-heading {
    margin: 0;
}

.rentals__controls {
    display: flex;
    gap: 0.5rem;
}

.rentals__control {
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    color: var(--color-ink);
    background-color: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: 50%;
    cursor: pointer;
    transition: border-color 200ms ease, color 200ms ease, opacity 200ms ease;
}

.rentals__control::before {
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    background-color: currentColor;
    mask: var(--icon-arrow) center / contain no-repeat;
}

.rentals__control--previous::before {
    rotate: 180deg;
}

.rentals__control:hover:not([aria-disabled='true']) {
    color: var(--color-primary);
    border-color: var(--color-primary-light);
}

.rentals__control[aria-disabled='true'] {
    opacity: 0.4;
    cursor: default;
}

/*
 * A plain scroll-snap list, so swiping and scrolling work without JavaScript. It bleeds into the page gutter,
 * letting cards slide in from the edge of the screen on mobile while the first card still lines up with the
 * heading. A fraction of the next card peeks in on smaller screens to show there is more.
 *
 * The scrolling track clips everything that sticks out of it, so its padding, cancelled out by the margin,
 * leaves room for the cards' hover lift and focus outline above them and their shadow below.
 */
.rentals__track {
    --rentals-gap: clamp(1rem, 2vw, 1.75rem);
    --rentals-visible: 1.15;

    display: grid;
    grid-auto-columns: calc((100% - (var(--rentals-visible) - 1) * var(--rentals-gap)) / var(--rentals-visible));
    grid-auto-flow: column;
    gap: var(--rentals-gap);
    margin: -0.75rem calc(-1 * var(--page-gutter)) -1.5rem;
    padding: 0.75rem var(--page-gutter) 2.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--page-gutter);
    scroll-snap-type: x mandatory;
    list-style: none;
}

@media (prefers-reduced-motion: no-preference) {
    .rentals__track {
        scroll-behavior: smooth;
    }
}

@media (min-width: 40em) {
    .rentals__track {
        --rentals-visible: 2.15;
    }
}

@media (min-width: 64em) {
    .rentals__track {
        --rentals-visible: 3;
    }
}

/* With the previous/next buttons available the scrollbar is only clutter. */
.rentals--js .rentals__track {
    scrollbar-width: none;
}

.rentals--js .rentals__track::-webkit-scrollbar {
    display: none;
}

/* The list item only snaps; the card inside is stretched to the height of the tallest one. */
.rentals__item {
    display: flex;
    scroll-snap-align: start;
}

.rentals__more {
    margin-block-start: 1.5rem;
}

.rentals__empty {
    max-width: 65ch;
    margin: 0;
    padding: clamp(1.5rem, 3vw, 2rem);
    background-color: var(--color-white);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-card);
}

.rentals__empty a {
    font-weight: 700;
}

/*
 * Positioned so the absolutely positioned .screen-reader-text inside stays clipped by the card. Otherwise it
 * escapes the scrolling track, and the labels of cards scrolled out of view stretch the whole page sideways.
 */
.rental-card {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    overflow: hidden;
    background-color: var(--color-white);
    border-radius: var(--radius-medium);
    box-shadow: var(--shadow-card);
    transition: translate 200ms ease;
}

.rental-card:hover {
    translate: 0 -4px;
}

.rental-card__header {
    padding: 1.25rem 1.5rem 1rem;
}

.rental-card__title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.rental-card__subtitle {
    margin-block: 0.25rem 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
}

.rental-card__media {
    position: relative;
    aspect-ratio: 4 / 3;
    background-color: var(--color-surface);
}

.rental-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rental-card__label {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    margin: 0;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-white);
    background-color: var(--color-primary);
    border-radius: 999px;
}

.rental-card__specs {
    margin: 0;
    padding: 0.75rem 1.5rem 0;
    font-size: 0.9375rem;
}

/* Pushed to the bottom, so the prices of cards with fewer specs still line up. */
.rental-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.5rem;
    margin: auto 1.5rem 0;
    padding-block: 1rem 1.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
}

.rental-card__specs + .rental-card__price {
    border-block-start: 1px solid var(--color-border);
}

.rental-card__price span,
.rental-card__price--request {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.rental-card__specs div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.5rem;
    border-block-end: 1px solid var(--color-border);
}

.rental-card__specs div:last-child {
    border-block-end: 0;
}

.rental-card__specs dt {
    color: var(--color-text-muted);
}

.rental-card__specs dd {
    margin: 0;
    font-weight: 700;
    text-align: end;
}

.rental-card__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.5rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-white);
    background-color: var(--color-primary);
    transition: background-color 200ms ease;
}

/*
 * Makes the whole card clickable: the link's ::before is stretched over the card (its nearest positioned
 * ancestor), so a click anywhere follows the link, and hovering anywhere gives the bar its hover state. It stays
 * a single link with the same name for keyboard and screen reader users.
 */
.rental-card__cta::before {
    content: '';
    position: absolute;
    inset: 0;
}

.rental-card__cta::after {
    content: '';
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    background-color: currentColor;
    mask: var(--icon-arrow) center / contain no-repeat;
    transition: translate 200ms ease;
}

.rental-card__cta:hover {
    background-color: var(--color-primary-dark);
}

.rental-card__cta:hover::after {
    translate: 0.25rem 0;
}

/*
 * The keyboard focus ring goes around the whole card, as the whole card is the link. In browsers without :has(),
 * it stays on the bar, drawn inside it as the card clips anything outside it.
 */
.rental-card__cta:focus-visible {
    outline-offset: -6px;
}

@supports selector(:has(*)) {
    .rental-card:has(.rental-card__cta:focus-visible) {
        outline: 3px solid var(--color-primary-light);
        outline-offset: 2px;
    }

    .rental-card__cta:focus-visible {
        outline: none;
    }
}

/* || TRAVEL INFO */

.travel-info {
    padding-block: var(--section-spacing);
    background-color: var(--color-white);
}

.travel-info__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
    margin: 0;
    padding: 0;
    list-style: none;
}

.info-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: clamp(1.5rem, 3vw, 2rem);
    background-color: var(--color-surface);
    border-radius: var(--radius-medium);
    transition: background-color 200ms ease, box-shadow 200ms ease;
}

.info-card:hover {
    background-color: var(--color-white);
    box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-border);
}

.info-card:has(a:focus-visible) {
    outline: 3px solid var(--color-primary-light);
    outline-offset: 2px;
}

.info-card__icon {
    width: 3rem;
    height: 3rem;
    padding: 0.75rem;
    background-color: var(--color-white);
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px var(--color-border);
}

.info-card__title {
    margin-block: 0.5rem 0;
    font-size: 1.25rem;
    font-weight: 700;
}

.info-card__title a {
    color: inherit;
    text-decoration: none;
}

.info-card__title a:focus-visible {
    outline: none;
}

/* Makes the whole card clickable. */
.info-card__title a::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.info-card__text {
    margin: 0;
    color: var(--color-text-muted);
}

.info-card__more {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-block-start: auto;
    padding-block-start: 0.5rem;
    font-weight: 700;
    color: var(--color-primary);
}

.info-card__more::after {
    content: '';
    width: 1.25rem;
    height: 1.25rem;
    background-color: currentColor;
    mask: var(--icon-arrow) center / contain no-repeat;
    transition: translate 200ms ease;
}

.info-card:hover .info-card__more::after {
    translate: 0.25rem 0;
}

/* || CONTACT CTA */

.contact-cta {
    padding-block: var(--section-spacing);
}

.contact-cta__inner {
    display: grid;
}

.contact-cta__image {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: var(--radius-large);
}

.contact-cta__card {
    container-type: inline-size;
    position: relative;
    margin: -4rem clamp(0.5rem, 3vw, 2rem) 0;
    padding: clamp(1.5rem, 4vw, 3rem);
    background-color: var(--color-white);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-card);
}

.contact-cta__title {
    margin-block: 0 0.75rem;
    font-size: clamp(1.375rem, 1rem + 1.2vw, 1.75rem);
    font-weight: 600;
    line-height: 1.3;
}

.contact-cta__title span {
    display: block;
    color: var(--color-primary);
}

.contact-cta__text {
    margin-block: 0 1.5rem;
    color: var(--color-text-muted);
}

@media (min-width: 64em) {
    .contact-cta__inner {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        align-items: start;
    }

    .contact-cta__image {
        grid-area: 1 / 1 / 2 / 9;
        aspect-ratio: 4 / 3;
    }

    .contact-cta__card {
        grid-area: 1 / 7 / 2 / 13;
        margin: 6rem 0 0;
    }
}

/* Contact Form 7 */

.contact-cta .wpcf7-form {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
}

.contact-cta .wpcf7-form > * {
    flex: 1 1 100%;
    margin: 0;
}

.contact-cta .wpcf7-form > p:has(input:is([type="text"], [type="email"], [type="tel"])) {
    flex-basis: 13rem;
}

.contact-cta .wpcf7-form label {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
}

.contact-cta .wpcf7-form-control-wrap {
    display: block;
    margin-block-start: 0.375rem;
}

.contact-cta .wpcf7-form :is(input:not([type="submit"]), textarea, select) {
    width: 100%;
    padding: 0.75rem 1rem;
    color: var(--color-ink);
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-small);
    transition: border-color 200ms ease, background-color 200ms ease;
}

.contact-cta .wpcf7-form textarea {
    height: 8rem;
    resize: vertical;
}

.contact-cta .wpcf7-form :is(input:not([type="submit"]), textarea, select):focus {
    background-color: var(--color-white);
    border-color: var(--color-primary);
    outline: 3px solid rgb(124 192 245 / 0.45);
    outline-offset: 0;
}

.contact-cta .wpcf7-submit {
    padding: 0.875rem 3.5rem 0.875rem 1.25rem;
    font-weight: 700;
    color: var(--color-white);
    background: var(--color-primary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16M14 6l6 6-6 6'/%3E%3C/svg%3E") no-repeat right 1rem center / 1.5rem;
    border: 0;
    border-radius: var(--radius-small);
    cursor: pointer;
    transition: background-color 200ms ease;
}

.contact-cta .wpcf7-submit:hover {
    background-color: var(--color-primary-dark);
}

.contact-cta .wpcf7-not-valid-tip {
    margin-block-start: 0.25rem;
    font-size: 0.875rem;
}

.contact-cta .wpcf7 form .wpcf7-response-output {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-small);
}