.wdm-hbs {
    margin-bottom: 1.5rem;
}

/* All three banners are the same size and sit in a single row: the large one
   was previously 2/3 of the width and full height, with the two small ones
   stacked beside it. `display: contents` on the right-hand wrapper promotes its
   two cards to direct grid items, so the grid lays out three equal columns
   without needing to change the block markup. */
.wdm-hbs__desktop {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
}

.wdm-hbs__right {
    display: contents;
}

.wdm-hbs__mobile {
    display: none;
}

.wdm-hbs__slider {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.wdm-hbs__slides {
    position: relative;
}

.wdm-hbs__slide {
    display: none;
}

.wdm-hbs__slide.is-active {
    display: block;
}

.wdm-hbs__card {
    position: relative;
    min-height: 100%;
    border-radius: 8px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: right bottom;
    background-size: cover;
}

/* Reduced from 420px to match the small cards — the three banners now share one
   row, so the large one no longer sets the row height. */
.wdm-hbs__card--large {
    min-height: 202px;
    display: flex;
    align-items: center;
}

.wdm-hbs__card--small,
.wdm-hbs__card--mobile {
    min-height: 202px;
}

.wdm-hbs__card--mobile {
    min-height: 0;
}

.wdm-hbs__media,
.wdm-hbs__media img {
    display: block;
    width: 100%;
    height: 100%;
}

.wdm-hbs__media {
    position: absolute;
    inset: 0;
}

.wdm-hbs__media img {
    object-fit: cover;
}

.wdm-hbs__content {
    position: relative;
    z-index: 2;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.75rem;
}

/* The large card is the same width as the other two now, so it takes their
   typographic scale as well — at 36px the heading wrapped to four lines and
   pushed the whole row to ~371px tall, defeating the point of reducing it. */
.wdm-hbs__card--large .wdm-hbs__content {
    max-width: 100%;
    padding: 1.5rem;
}

.wdm-hbs .wdm-hbs__main {
    margin: 0;
    font-size: 36px;
    text-transform: uppercase !important;
    line-height: 1.2;
}

.wdm-hbs__card--large .wdm-hbs__main,
.wdm-hbs__card--small .wdm-hbs__main,
.wdm-hbs__card--mobile .wdm-hbs__main {
    font-size: 28px;
}

.wdm-hbs__card--large .wdm-hbs__main,
.wdm-hbs__card--small .wdm-hbs__main {
    max-width: 270px;
}

.wdm-hbs__sub {
    margin: 0;
    font-size: 20px;
}

.wdm-hbs__card--large .wdm-hbs__sub {
    font-size: 16px;
}

.wdm-hbs .wdm-hbs__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 181px;
    height: 48px;
    padding: 0;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase !important;
    transition: filter 0.2s ease;
}

.wdm-hbs .wdm-hbs__button:hover {
    filter: brightness(0.88);
}

.wdm-hbs .wdm-hbs__button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.wdm-hbs__card--large .wdm-hbs__button,
.wdm-hbs__card--small .wdm-hbs__button {
    width: 130px;
    height: 48px;
    padding: 0;
}

.wdm-hbs__controls {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    z-index: 3;
    display: flex;
    gap: 0.375rem;
}

.wdm-hbs__prev,
.wdm-hbs__next {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.92);
    color: #323232;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
}

.wdm-hbs__dots {
    position: absolute;
    left: 50%;
    bottom: 0.9rem;
    transform: translateX(-50%);
    display: flex;
    gap: 0.375rem;
    z-index: 3;
}

.wdm-hbs__dot {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
}

.wdm-hbs__dot.is-active {
    background: #ffffff;
}

@media (max-width: 781px) {
    .wdm-hbs__desktop {
        display: none;
    }

    .wdm-hbs__mobile {
        display: block;
    }

    /* All three slides are the same size on mobile too: previously each card
       grew to its own artwork's height, so the swiper jumped between slides.
       A fixed height with a cover-fitted image keeps them identical. */
    .wdm-hbs__card--mobile {
        min-height: 0;
        height: 300px;
        display: flex;
        align-items: center;
    }

    /* Sized so the busiest slide (3-line heading + 2-line subtitle + button)
       still fits inside the fixed height without clipping. */
    .wdm-hbs__card--mobile .wdm-hbs__main {
        font-size: 24px;
    }

    .wdm-hbs__card--mobile .wdm-hbs__sub {
        font-size: 15px;
        line-height: 1.35;
    }

    .wdm-hbs__card--mobile .wdm-hbs__media {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .wdm-hbs__card--mobile .wdm-hbs__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
    }

    .wdm-hbs__card--mobile .wdm-hbs__content {
        position: absolute;
        inset: 0;
        z-index: 2;
        max-width: none;
        padding: 1.25rem 1.25rem 2.75rem;
        justify-content: center;
        align-items: flex-start;
        text-align: left;
    }

    .wdm-hbs__card--mobile .wdm-hbs__main,
    .wdm-hbs__card--mobile .wdm-hbs__sub {
        text-align: left;
        max-width: 85%;
    }

    .wdm-hbs__card--mobile .wdm-hbs__main {
        font-size: 28px;
    }

    .wdm-hbs__card--mobile .wdm-hbs__sub {
        font-size: 16px;
    }

    .wdm-hbs__button {
        width: auto;
        min-width: 160px;
        height: 44px;
        padding: 0 1rem;
    }
}

/* ── Banner arrangements ────────────────────────────────────────────────────
   The desktop grid is three equal columns by default and .wdm-hbs__right is
   display:contents, so both side banners are direct grid children. Each
   arrangement only has to restate the tracks; PHP has already dropped the
   banners the arrangement does not use. */

.wdm-hbs--full .wdm-hbs__desktop {
    grid-template-columns: minmax(0, 1fr);
}

.wdm-hbs--2-equal .wdm-hbs__desktop {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.wdm-hbs--2-wide-left .wdm-hbs__desktop {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}

/* The slider is always the first grid child, so a wide right-hand banner is a
   matter of ordering rather than a different template. */
.wdm-hbs--2-wide-right .wdm-hbs__desktop {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.wdm-hbs--2-wide-right .wdm-hbs__left {
    order: 2;
}

.wdm-hbs--3-equal .wdm-hbs__desktop {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Large banner on the left, the other two stacked beside it. */
.wdm-hbs--1-plus-2 .wdm-hbs__desktop {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    grid-template-rows: 1fr 1fr;
}

.wdm-hbs--1-plus-2 .wdm-hbs__left {
    grid-row: 1 / span 2;
}

.wdm-hbs--1-plus-2 .wdm-hbs__card--small {
    min-height: 0;
    height: 100%;
}

/* The left banner spans both rows, so every wrapper down to the card has to
   stretch or it stops short of the lower side banner. */
.wdm-hbs--1-plus-2 .wdm-hbs__left,
.wdm-hbs--1-plus-2 .wdm-hbs__left .wdm-hbs__slider,
.wdm-hbs--1-plus-2 .wdm-hbs__left .wdm-hbs__slides,
.wdm-hbs--1-plus-2 .wdm-hbs__left .wdm-hbs__slide.is-active,
.wdm-hbs--1-plus-2 .wdm-hbs__left .wdm-hbs__card--large {
    height: 100%;
}