/* ==========================================================================
   Cab page sections
   ==========================================================================

   The blocks the three cab pages needed that bt.css did not already have.
   Loaded AFTER bt.css, from $page['stylesheets'], and scoped under .bt exactly
   as bt.css is - it reads its tokens (--bt-teal, --bt-clay, --bt-line,
   --bt-card-radius, --bt-shadow) and adds none of its own, so folding this
   file back into bt.css later is a copy and a deleted <link>.

   Deliberately short. Three of the four new sections needed no CSS at all:

     "Cab Services for Every Travel Need"  -> .bt-cats / .bt-cat, the block
        partials/hotel_types.php already uses. Same shape, same job: a grid of
        icon-title-line-link cards standing between a listing page and the
        things under it. Only the no-link variant below is new.

     "Popular Cab Routes from ..."         -> .bt-fare / .bt-fare-grid, the
        typographic route card bt.css already draws, extended below with one
        optional photograph band.

     "Things to Know Before Booking"       -> .bt-info / .bt-info__card and
        .bt-notice, unchanged from the property page. The section is the same
        section: read this before you book.

   Two are genuinely new - the trip option cards and the two column inclusion
   panel - and they are below.

   Mobile first throughout, matching bt.css: one column on a phone, two from
   576px up. Every image slot declares an aspect-ratio so it reserves its box
   before it loads and the page does not shift.
   ========================================================================== */


/* ------------------------------------------------------- service cards -- */

/*
 * A cab service with no link. .bt-cat is an <a> everywhere else, and a service
 * that has nowhere to send anyone renders as a <div> instead - "we run airport
 * transfers" is worth saying even when there is no page for it yet. This drops
 * the affordances that would promise a click: no lift, no pointer.
 */
.bt .bt-cat--static {
    cursor: default;
}

.bt .bt-cat--static:hover,
.bt .bt-cat--static:focus {
    transform: none;
    box-shadow: var(--bt-shadow);
    border-color: var(--bt-line);
}


/* ------------------------------------------------------------- routes -- */

/*
 * The optional photograph on a route card.
 *
 * Negative margins pull it out of .bt-fare's own padding rather than moving
 * that padding onto an inner wrapper, so the card's markup is unchanged and a
 * route with no picture is byte for byte the card bt.css already draws.
 *
 * Optional is the whole point. The eleven cab rows in `vehicle` all carry one
 * generic white hatchback uploaded eleven times over, which is why the route
 * card on /cabs is typographic in the first place. A real photograph of the
 * destination earns its place here; nothing forces a placeholder when there
 * is not one.
 */
.bt-fare__media {
    margin: -1.125rem -1.25rem .875rem;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--bt-card-radius) var(--bt-card-radius) 0 0;
    background-color: var(--bt-teal-tint);
}

.bt-fare__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.bt-fare--photo:hover .bt-fare__media img {
    transform: scale(1.04);
}


/* -------------------------------------------------------- trip options -- */

/*
 * "One Way and Round Trip Cabs".
 *
 * Two cards, usually, and the top border is what tells them apart at a
 * glance - the same device the mockup uses. The colourway comes from the
 * card's position, not from a stored field: the admin is entering trip
 * options, not choosing colours, and asking them to would be one more thing
 * to get wrong for no gain.
 */
.bt-trips {
    display: grid;
    grid-template-columns: 1fr;
    gap: .875rem;
}

.bt-trip {
    display: flex;
    flex-direction: column;
    padding: 1.5rem 1.375rem;
    border: 1px solid var(--bt-line);
    border-top-width: 4px;
    border-radius: var(--bt-card-radius);
    background-color: #fff;
}

.bt-trip--clay {
    border-top-color: var(--bt-clay);
}

.bt-trip--teal {
    border-top-color: var(--bt-teal);
}

/* Shares its shape with .bt-hl__icon so a cab card and a property card read as
   the same system. Not merged into that rule: it lives in the other file. */
.bt-trip__icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: .875rem;
    border-radius: 12px;
    background-color: var(--bt-teal-tint);
    color: var(--bt-teal);
    font-size: 1.25rem;
}

.bt-trip__label {
    display: block;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--bt-clay);
    margin-bottom: .3rem;
}

.bt-trip__title {
    color: var(--bt-ink);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.bt-trip__copy {
    font-size: .875rem;
    line-height: 1.6;
    color: var(--bt-ink-soft);
    margin: .625rem 0 0;
}

.bt-trip__list {
    display: grid;
    gap: .5rem;
    list-style: none;
    padding: 0;
    margin: 1rem 0 0;
    font-size: .875rem;
    line-height: 1.5;
    color: var(--bt-ink-soft);
}

.bt-trip__list li {
    position: relative;
    padding-left: 1.375rem;
}

/* The tick is decoration on a list that already reads as a list, so it is
   drawn rather than written - a screen reader announcing "check mark" before
   every line would be noise. */
.bt-trip__list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    color: #5d9d69;
    font-weight: 700;
}

.bt-trip__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    /* auto pushes the fare to the bottom when a shorter card is stretched by a
       taller sibling; when it is not, it resolves to nothing and the padding
       below is the whole gap. Hence the padding rather than a margin: the rule
       needs air above it in both cases. */
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px solid var(--bt-line);
}

.bt-trip__price {
    font-size: 1.375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bt-ink);
}

.bt-trip__price small {
    display: block;
    font-size: .6875rem;
    font-weight: 400;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--bt-ink-soft);
}

@media (min-width: 576px) {
    .bt-trips {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
}


/* --------------------------------------------------------- inclusions -- */

/*
 * "What's Included in Your ... Cab Booking?"
 *
 * Two panels, and either can stand alone: a route that has said what it
 * includes but not what it excludes shows one full width panel rather than an
 * empty second one. An empty "Usually Not Included" heading would read as a
 * promise that nothing is excluded, which is a claim nobody made.
 *
 * Green and red here rather than the brand palette, for the same reason the
 * property page's information mark is amber: this is the one place on the page
 * where "yes" and "no" is the whole message, and the colours have to say it
 * before the words do. They are only ever paired with a tick or a cross and a
 * heading, never asked to carry the meaning alone.
 */
.bt-incl {
    display: grid;
    grid-template-columns: 1fr;
    gap: .875rem;
}

.bt-incl__card {
    padding: 1.5rem 1.375rem;
    border: 1px solid var(--bt-line);
    border-radius: var(--bt-card-radius);
    background-color: #fff;
}

.bt-incl__card--yes {
    border-color: #cfe3d9;
}

.bt-incl__card--no {
    border-color: #efd6d3;
}

.bt-incl__head {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding-bottom: .875rem;
    border-bottom: 1px solid var(--bt-line);
}

.bt-incl__mark {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1;
}

.bt-incl__card--yes .bt-incl__mark {
    background-color: #5d9d69;
}

.bt-incl__card--no .bt-incl__mark {
    background-color: #c2543f;
}

.bt-incl__title {
    color: var(--bt-ink);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.bt-incl__list {
    display: grid;
    gap: .625rem;
    list-style: none;
    padding: 0;
    margin: 1.125rem 0 0;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--bt-ink-soft);
}

.bt-incl__list li {
    position: relative;
    padding-left: 1.5rem;
}

.bt-incl__card--yes .bt-incl__list li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    top: 0;
    color: #5d9d69;
    font-weight: 700;
}

.bt-incl__card--no .bt-incl__list li::before {
    content: '\00d7';
    position: absolute;
    left: 0;
    top: -.05em;
    color: #c2543f;
    font-size: 1.0625rem;
    font-weight: 700;
}

@media (min-width: 768px) {
    .bt-incl {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }
}

/* ==========================================================================
   /cabs (.bt-stay.bt-cabs-page)
   ==========================================================================

   The cab listing wears the .bt-stay look from bt.css, the same as
   /accommodation, measured off its own reference design
   (play.tailwindcss.com/gfTn6uLSMW). The first block brings the shared
   components to that design's slightly different values; the rest are the
   blocks only this page has. All of it is scoped to .bt-cabs-page, so the
   other two pages that load this file are untouched.

   Small text is a size up and a shade darker than the reference's 10-11px
   greys, as on /accommodation, so it reads at 4.5:1. */

/* ---- The reference's values for the shared components ------------------ */

.bt-stay.bt-cabs-page .bt-section {
    padding: 90px 0;
}

.bt-stay.bt-cabs-page .bt-section__head {
    margin-bottom: 32px;
}

.bt-stay.bt-cabs-page .bt-section__eyebrow {
    margin-bottom: 11px;
    font-size: 10px;
    letter-spacing: 1.8px;
}

.bt-stay.bt-cabs-page .bt-section__lede {
    max-width: 610px;
    font-size: 14px;
}

.bt-stay.bt-cabs-page .bt-section--centred .bt-section__head {
    max-width: 660px;
    margin-bottom: 45px;
}

.bt-stay.bt-cabs-page .bt-section__more .bt-arrow {
    color: var(--bt-clay);
}

.bt-stay.bt-cabs-page .bt-trust__icon {
    width: 38px;
    height: 38px;
}

.bt-stay.bt-cabs-page .bt-cats {
    gap: 17px;
}

.bt-stay.bt-cabs-page .bt-cat {
    padding: 25px 19px;
    border-radius: 14px;
}

.bt-stay.bt-cabs-page .bt-cat__icon {
    width: 45px;
    height: 45px;
    margin-bottom: 17px;
    border-radius: 11px;
}

.bt-stay.bt-cabs-page .bt-cat__title {
    font-size: 19px;
}

.bt-stay.bt-cabs-page .bt-cat__text {
    min-height: 58px;
    margin: 8px 0 16px;
}

/* Why book: the reference's photograph is a little shorter, its sand block
   squarer. */
.bt-stay.bt-cabs-page .bt-showcase__inner {
    gap: 78px;
}

.bt-stay.bt-cabs-page .bt-showcase__media {
    padding-right: 24px;
    padding-bottom: 24px;
}

.bt-stay.bt-cabs-page .bt-showcase__media::after {
    width: 80%;
    height: 80%;
    background: #e3b874;
}

.bt-stay.bt-cabs-page .bt-showcase__media img {
    height: 495px;
}

.bt-stay.bt-cabs-page .bt-showcase__badge {
    right: 0;
    bottom: 40px;
    padding: 15px 17px;
}

.bt-stay.bt-cabs-page .bt-showcase__badge strong {
    font-size: 29px;
}

.bt-stay.bt-cabs-page .bt-showcase__body .bt-section__lede {
    max-width: none;
    margin: 17px 0 26px;
}

.bt-stay.bt-cabs-page .bt-ticks {
    gap: 19px;
    margin-bottom: 29px;
}

.bt-stay.bt-cabs-page .bt-ticks__item {
    gap: 12px;
}

/* Steps: four across with no joining rule, as the reference draws them.
   Aligned to the top so a step with a longer description does not sit its
   circle higher than its neighbours'. */
.bt-stay.bt-cabs-page .bt-steps {
    align-items: start;
    gap: 19px;
}

.bt-stay.bt-cabs-page .bt-steps__item::after {
    display: none;
}

.bt-stay.bt-cabs-page .bt-steps--icons .bt-steps__item::before {
    font-size: 65px;
}

.bt-stay.bt-cabs-page .bt-steps__icon {
    width: 61px;
    height: 61px;
    margin: 13px auto 21px;
}

.bt-stay.bt-cabs-page .bt-steps .bt-why__copy {
    max-width: 210px;
    margin-top: 8px;
}

.bt-stay.bt-cabs-page .bt-rail {
    gap: 19px;
}

.bt-stay.bt-cabs-page .bt-quote {
    padding: 28px;
}

.bt-stay.bt-cabs-page .bt-quote__text {
    min-height: 108px;
    margin: 19px 0 23px;
    font-size: 15px;
    line-height: 1.6;
}

.bt-stay.bt-cabs-page .bt-faqsplit {
    grid-template-columns: .75fr 1.25fr;
    gap: 95px;
}

.bt-stay.bt-cabs-page .bt-faqsplit .bt-section__lede {
    margin: 17px 0 23px;
}

.bt-stay.bt-cabs-page .bt-cta {
    padding: 73px 0;
}

.bt-stay.bt-cabs-page .bt-cta__copy {
    max-width: 620px;
}

@media (max-width: 800px) {
    .bt-stay.bt-cabs-page .bt-section {
        padding: 70px 0;
    }

    .bt-stay.bt-cabs-page .bt-showcase__inner,
    .bt-stay.bt-cabs-page .bt-faqsplit {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 520px) {
    .bt-stay.bt-cabs-page .bt-showcase__media img {
        height: 340px;
    }

    .bt-stay.bt-cabs-page .bt-showcase__badge {
        bottom: 32px;
    }

    .bt-stay.bt-cabs-page .bt-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px 15px;
    }

    .bt-stay.bt-cabs-page .bt-steps .bt-why__title {
        font-size: 17px;
    }
}

/* ---- Hero ---------------------------------------------------------------- */

/* The site header sits over the hero's top edge, so its height is added to
   the reference's 82px, as the accommodation hero does. */
.bt-stay .bt-hero--cab {
    min-height: calc(625px + var(--bt-head));
    padding: calc(82px + var(--bt-head)) 0 82px;
}

.bt-stay .bt-hero--cab::after {
    background: linear-gradient(90deg, rgba(7, 45, 52, .95) 0%, rgba(9, 61, 69, .76) 47%, rgba(9, 61, 69, .2) 100%);
}

.bt-stay .bt-hero--cab .bt-hero__kicker {
    margin-bottom: 11px;
    font-size: 10px;
    letter-spacing: 1.8px;
}

.bt-stay .bt-hero--cab .bt-hero__title {
    max-width: 650px;
    font-size: clamp(43px, 5vw, 66px);
    letter-spacing: -1.8px;
}

.bt-stay .bt-hero--cab .bt-hero__copy {
    max-width: 560px;
    margin-top: 18px;
    font-size: 16px;
    color: rgba(255, 255, 255, .9);
}

/* ---- Cab search ---------------------------------------------------------- */

.bt-cabfind {
    max-width: 1130px;
    margin-top: 42px;
    padding: 16px;
    border: 1px solid rgba(255, 255, 255, .42);
    border-radius: 13px;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 45px rgba(20, 61, 66, .1);
}

.bt-cabfind__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 15px;
}

.bt-cabfind__tabs label {
    position: relative;
    margin: 0;
    cursor: pointer;
}

/* Visually hidden, not display: none, so the tabs stay a keyboard radio
   group. */
.bt-cabfind__tabs input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.bt-cabfind__tabs span {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    color: #5f7073;
}

.bt-cabfind__tabs input:checked + span {
    background: #e5f0ee;
    color: var(--bt-teal);
}

.bt-cabfind__tabs input:focus-visible + span {
    outline: 2px solid var(--bt-teal);
    outline-offset: 2px;
}

.bt-cabfind__fields {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) 25px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .85fr) auto;
    align-items: end;
    gap: 10px;
}

.bt-cabfind__label {
    display: block;
    margin: 0 0 6px 5px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.6;
    color: #33474a;
}

.bt-cabfind__control {
    position: relative;
}

.bt-cabfind__control > .fa {
    position: absolute;
    top: 50%;
    left: 11px;
    z-index: 1;
    font-size: 15px;
    color: var(--bt-amber-dark);
    transform: translateY(-50%);
    pointer-events: none;
}

.bt-cabfind__dot {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 1;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translateY(-50%);
}

.bt-cabfind__dot--from {
    background: #5d9d69;
}

.bt-cabfind__dot--to {
    background: #d76e5f;
}

.bt .bt-cabfind__input {
    width: 100%;
    height: 44px;
    padding: 0 10px 0 32px;
    border: 1px solid var(--bt-line);
    border-radius: 7px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: var(--bt-ink);
}

.bt .bt-cabfind__input::placeholder {
    font-weight: 400;
    color: #66777a;
}

.bt .bt-cabfind__input:focus {
    outline: none;
    border-color: var(--bt-teal);
    box-shadow: 0 0 0 3px rgba(18, 78, 90, .12);
}

.bt .bt-cabfind__swap {
    display: grid;
    place-items: center;
    width: 25px;
    height: 25px;
    margin-bottom: 9px;
    padding: 0;
    border: 1px solid var(--bt-line);
    border-radius: 50%;
    background: #f8fbfa;
    font-size: 14px;
    line-height: 1;
    color: var(--bt-teal);
    cursor: pointer;
}

.bt .bt-cabfind__swap:hover,
.bt .bt-cabfind__swap:focus {
    border-color: var(--bt-teal);
}

.bt-stay .bt-cabfind__submit {
    min-height: 44px;
    padding: 0 16px;
    white-space: nowrap;
}

.bt-cabfind__ticks {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 24px;
    margin: 17px 0 0;
    padding: 0;
    list-style: none;
    font-size: 12px;
    color: rgba(255, 255, 255, .88);
}

/* Small laptops: the same line, the fields' text a size down so a date and
   a time still show in full. */
@media (max-width: 1150px) {
    .bt .bt-cabfind__input {
        padding-left: 30px;
        font-size: 13px;
    }
}

/* Tablet: pickup and drop either side of the swap, date and time under
   them, the button across the foot. */
@media (max-width: 991px) {
    .bt-cabfind__fields {
        grid-template-columns: minmax(0, 1fr) 25px minmax(0, 1fr);
    }

    .bt-cabfind__field--date {
        grid-column: 1;
    }

    .bt-cabfind__field--time {
        grid-column: 3;
    }

    .bt-stay .bt-cabfind__submit {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 800px) {
    .bt-stay .bt-hero--cab {
        min-height: 0;
        padding: calc(70px + var(--bt-head)) 0 70px;
    }
}

@media (max-width: 520px) {
    .bt-stay .bt-hero--cab .bt-hero__title {
        font-size: 41px;
        letter-spacing: -1px;
    }

    .bt-stay .bt-hero--cab .bt-hero__copy {
        font-size: 14px;
    }

    .bt-cabfind {
        padding: 12px;
    }

    .bt-cabfind__tabs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .bt-cabfind__tabs span {
        justify-content: center;
        width: 100%;
    }

    .bt-cabfind__fields {
        grid-template-columns: 1fr;
    }

    .bt .bt-cabfind__swap {
        display: none;
    }

    .bt-cabfind__field--date,
    .bt-cabfind__field--time {
        grid-column: auto;
    }

    .bt-cabfind__ticks {
        display: grid;
        gap: 7px;
    }
}

/* ---- Popular routes: a scrolling row ------------------------------------ */

.bt-cabroutes {
    display: flex;
    gap: 17px;
    overflow-x: auto;
    padding: 4px 3px 16px;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    scrollbar-color: #b8cfcb #e7efed;
    scrollbar-width: thin;
}

.bt-cabroutes::-webkit-scrollbar {
    height: 5px;
}

.bt-cabroutes::-webkit-scrollbar-track {
    border-radius: 20px;
    background: #e7efed;
}

.bt-cabroutes::-webkit-scrollbar-thumb {
    border-radius: 20px;
    background: #b8cfcb;
}

.bt-cabroute {
    display: flex;
    flex: 0 0 275px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--bt-line);
    border-radius: 14px;
    background: #fff;
    color: inherit;
    scroll-snap-align: start;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.bt-cabroute[hidden] {
    display: none;
}

.bt-cabroute:hover,
.bt-cabroute:focus {
    border-color: #e4b46b;
    box-shadow: 0 18px 45px rgba(20, 61, 66, .1);
    color: inherit;
    text-decoration: none;
    transform: translateY(-4px);
}

/* Where the reference has a photograph: see vehicle_list.php. */
.bt-cabroute__band {
    position: relative;
    display: block;
    height: 148px;
    overflow: hidden;
    background:
        radial-gradient(circle at 85% 20%, rgba(244, 163, 64, .22), transparent 45%),
        linear-gradient(135deg, #1d6878, #0d3c45);
}

.bt-cabroute__band .fa {
    position: absolute;
    bottom: -22px;
    left: 16px;
    font-size: 118px;
    color: rgba(255, 255, 255, .09);
}

.bt-cabroute__km,
.bt-cabroute__tag {
    position: absolute;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--bt-teal);
}

.bt-cabroute__km {
    right: 11px;
    bottom: 11px;
    background: rgba(255, 255, 255, .94);
}

.bt-cabroute__tag {
    top: 11px;
    left: 11px;
    background: #f7ce8f;
}

.bt-cabroute__body {
    display: block;
    padding: 16px;
}

.bt-cabroute__points {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    font-size: 14px;
    line-height: 1.4;
    color: var(--bt-teal);
}

.bt-cabroute__points strong {
    font-weight: 700;
}

.bt-cabroute__arrow {
    font-size: 17px;
    line-height: 1;
    color: var(--bt-amber-dark);
}

.bt-cabroute__meta {
    display: block;
    margin-top: 5px;
    font-size: 11px;
    line-height: 1.6;
    color: var(--bt-ink-soft);
}

.bt-cabroute__price {
    display: flex;
    align-items: baseline;
    gap: 5px;
    margin-top: 13px;
    padding-top: 11px;
    border-top: 1px solid var(--bt-line);
}

.bt-cabroute__price small {
    font-size: 10px;
    color: var(--bt-ink-soft);
}

.bt-cabroute__price strong {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--bt-teal);
}

@media (max-width: 520px) {
    .bt-cabroute {
        flex-basis: 260px;
    }
}

/* ---- Sightseeing trips, as the reference's ride cards ------------------- */

.bt-rides {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.bt-ride {
    display: block;
    overflow: hidden;
    border: 1px solid var(--bt-line);
    border-radius: 15px;
    background: #fff;
    color: inherit;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}

.bt-ride:hover,
.bt-ride:focus {
    border-color: #e2b166;
    box-shadow: 0 18px 45px rgba(20, 61, 66, .1);
    color: inherit;
    text-decoration: none;
    transform: translateY(-4px);
}

/* The teal ground shows when the photograph is missing or will not load. */
.bt-ride__img,
.bt-guide__img {
    position: relative;
    display: block;
    overflow: hidden;
    background: linear-gradient(135deg, #1d6878, #0d3c45);
}

.bt-ride__img {
    height: 205px;
}

.bt-ride__img img,
.bt-guide__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.bt-ride:hover .bt-ride__img img {
    transform: scale(1.06);
}

.bt-ride__badge {
    position: absolute;
    top: 13px;
    left: 13px;
    padding: 5px 9px;
    border-radius: 4px;
    background: #f7ce8f;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--bt-teal);
}

.bt-ride__body {
    display: block;
    padding: 19px;
}

.bt-ride__title {
    display: block;
    font-family: var(--bt-serif);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bt-teal);
}

.bt-ride__text {
    display: block;
    margin-top: 7px;
    font-size: 12px;
    color: var(--bt-ink-soft);
}

.bt-ride__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin-top: 19px;
    padding-top: 14px;
    border-top: 1px solid var(--bt-line);
}

.bt-ride__foot small {
    display: block;
    font-size: 10px;
    color: var(--bt-ink-soft);
}

.bt-ride__foot strong {
    display: block;
    font-family: var(--bt-serif);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bt-teal);
}

.bt-ride__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--bt-clay);
}

.bt-stay.bt-cabs-page .bt-elsewhere {
    margin: 24px 0 0;
    font-size: 13px;
    color: var(--bt-ink-soft);
}

/* ---- The fleet ----------------------------------------------------------- */

.bt-fleetcards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 17px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bt-fleetcard {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 19px;
    border: 1px solid var(--bt-line);
    border-radius: 14px;
    background: #fff;
}

.bt-fleetcard__icon {
    display: grid;
    flex: 0 0 45px;
    place-items: center;
    width: 45px;
    height: 45px;
    border-radius: 11px;
    background: #e4efed;
    font-size: 19px;
    color: var(--bt-teal);
}

.bt-fleetcard__name {
    display: block;
    font-family: var(--bt-serif);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bt-teal);
}

.bt-fleetcard__text {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--bt-ink-soft);
}

/* ---- A better way to travel --------------------------------------------- */

.bt-benefits {
    display: grid;
    grid-template-columns: .7fr 1.3fr;
    align-items: center;
    gap: 75px;
}

.bt-stay.bt-cabs-page .bt-benefits__intro .bt-section__lede {
    max-width: 370px;
    margin-top: 17px;
}

.bt-benefits__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bt-benefit {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 21px 17px;
    border: 1px solid var(--bt-line);
    border-radius: 13px;
    background: #fff;
}

.bt-benefit__icon {
    display: grid;
    flex: 0 0 37px;
    place-items: center;
    width: 37px;
    height: 37px;
    border-radius: 10px;
    background: #e5f0ee;
    font-size: 17px;
    color: var(--bt-teal);
}

.bt-benefit__title {
    display: block;
    font-family: var(--bt-serif);
    font-size: 17px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bt-teal);
}

.bt-benefit__text {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--bt-ink-soft);
}

/* ---- Travel guides ------------------------------------------------------- */

.bt-guides {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 19px;
}

.bt-guide {
    display: block;
    overflow: hidden;
    border: 1px solid var(--bt-line);
    border-radius: 14px;
    background: #fff;
    color: inherit;
}

.bt-guide:hover,
.bt-guide:focus {
    color: inherit;
    text-decoration: none;
}

.bt-guide__img {
    height: 190px;
}

.bt-guide:hover .bt-guide__img img {
    transform: scale(1.05);
}

.bt-guide__body {
    display: block;
    padding: 19px;
}

.bt-guide__label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: var(--bt-clay);
}

.bt-guide__title {
    display: block;
    margin-top: 6px;
    font-family: var(--bt-serif);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--bt-teal);
}

.bt-guide__text {
    display: block;
    min-height: 42px;
    margin: 8px 0 16px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--bt-ink-soft);
}

.bt-guide__cta {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 700;
    color: var(--bt-clay);
}

/* ---- Breakpoints for the blocks above ------------------------------------ */

@media (max-width: 800px) {
    .bt-rides,
    .bt-fleetcards,
    .bt-guides {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .bt-benefits {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

@media (max-width: 520px) {
    .bt-rides,
    .bt-fleetcards,
    .bt-guides,
    .bt-benefits__grid {
        grid-template-columns: 1fr;
    }

    .bt-ride__img {
        height: 190px;
    }
}