/* Banner widgets. Colours and radii follow the active theme's tokens, with neutral fallbacks. */
.db-banner { position: relative; display: block; overflow: hidden; border-radius: var(--radius, 18px); background: var(--sand, #eadcc0); box-shadow: var(--shadow-soft, 0 10px 26px rgba(19, 48, 79, .12)); }
.db-banner img { display: block; width: 100%; height: auto; margin: 0; border-radius: 0; }
a.db-banner:focus-visible { outline: 3px solid var(--gold, #c9a24f); outline-offset: 3px; }
.db-banner-list { display: grid; gap: 20px; }

.db-carousel { position: relative; }
.db-carousel__track { display: grid; overflow: hidden; touch-action: pan-y; border-radius: var(--radius, 18px); }
/* Slides lie on top of each other and change by crossfade; the track takes the height of the tallest one. */
.db-carousel__slide { display: flex; grid-area: 1 / 1; align-items: center; min-width: 0; opacity: 0; visibility: hidden; transition: opacity .9s ease, visibility 0s linear .9s; }
.db-carousel__slide.is-active { opacity: 1; visibility: visible; transition: opacity .9s ease, visibility 0s; }
.db-carousel__slide .db-banner { width: 100%; box-shadow: none; }
.db-carousel__nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.db-carousel__dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.db-carousel__dot { display: grid; width: 22px; height: 22px; place-items: center; padding: 0; border: 0; background: none; cursor: pointer; }
.db-carousel__dot::before { width: 8px; height: 8px; border-radius: 50%; background: rgba(36, 59, 93, .3); content: ""; transition: width .3s ease, background-color .3s ease, transform .2s ease; }
.db-carousel__dot[aria-current="true"]::before { width: 22px; border-radius: 4px; background: #243b5d; }
.db-carousel__dot:hover::before, .db-carousel__dot:focus-visible::before { background: rgba(36, 59, 93, .75); transform: scale(1.15); }
.db-carousel__dot[aria-current="true"]:hover::before, .db-carousel__dot[aria-current="true"]:focus-visible::before { background: #243b5d; }
.db-carousel__arrow { display: grid; flex: none; width: 36px; height: 36px; place-items: center; padding: 0; border: 1px solid var(--line, #d9c9a8); border-radius: 50%; color: var(--navy, #13304f); background: var(--paper, #fffaf0); cursor: pointer; transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.db-carousel__arrow:hover, .db-carousel__arrow:focus-visible { color: var(--paper, #fffaf0); border-color: var(--navy, #13304f); background: var(--navy, #13304f); }
.db-carousel__arrow svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) {
    .db-carousel__slide, .db-carousel__slide.is-active { transition: none; }
    .db-banner img { transition: none; }
}
.db-carousel--captioned .db-carousel__slide { align-items: stretch; }
.db-banner--captioned { display: flex; flex-direction: column; }
.db-banner__image { display: block; overflow: hidden; }
.db-banner__caption { display: grid; gap: 4px; margin-top: auto; padding: 12px 0 0; }
.db-banner__title { font-weight: 700; line-height: 1.3; }
/* Carousel widget without a chosen group: a carousel per group, then banners without a group, one row each. */
.db-banner-stack { display: grid; gap: 20px; }
/* Corner rounding from the carousel widget setting: each carousel and each separate banner is rounded on its own. */
.db-banners .db-carousel__track, .db-banners .db-banner-stack > .db-banner { border-radius: var(--db-radius, 18px); }
.db-banners .db-carousel__slide .db-banner { border-radius: 0; }