/*
 * Baipar advanced Elementor widgets.
 *
 * Kept separate from elementor-widgets.css so the existing homepage widgets
 * cannot regress. Everything here is namespaced under .baipar-pro (sections and
 * layouts) or .baipar-part (card fragments shared between widgets).
 *
 * Layout presets are classes rather than inline styles, so a preset's whole rule
 * set lives here and the panel only has to pick a name. Anything the panel can
 * change is a custom property, which is what lets the Elementor selectors write
 * one declaration and have it apply through the preset.
 */

:root {
    --bp-ink: #14223d;
    --bp-muted: #6d7890;
    --bp-primary: #e11b22;
    --bp-line: #e3e8f1;
    --bp-surface: #f4f7fb;
    --bp-white: #fff;
    --bp-radius: 12px;
    --bp-star-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
}

/* ============================================================
   Section shell
   ============================================================ */

.baipar-pro {
    position: relative;
    color: var(--bp-ink);
}

.baipar-pro *,
.baipar-pro *::before,
.baipar-pro *::after {
    box-sizing: border-box;
}

.baipar-pro__intro {
    margin: 0 0 clamp(16px, 2.4vw, 32px);
}

.baipar-pro__eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--bp-primary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.baipar-pro__heading {
    margin: 0 0 10px;
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.2;
}

.baipar-pro__intro-text {
    margin: 0;
    color: var(--bp-muted);
    line-height: 1.65;
}

/* The intro alignment control writes text-align; centre the constrained
   paragraph with it rather than leaving it pinned left. */
.baipar-pro__intro[style*="center"] .baipar-pro__intro-text {
    margin-inline: auto;
}

.baipar-pro__empty {
    margin: 0;
    padding: 28px;
    border: 1px dashed var(--bp-line);
    border-radius: var(--bp-radius);
    color: var(--bp-muted);
    text-align: center;
}

/* ============================================================
   Filter tabs
   ============================================================ */

.baipar-pro__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 22px;
}

.baipar-pro__tab {
    padding: 9px 16px;
    border: 1px solid var(--bp-line);
    border-radius: 999px;
    background: var(--bp-white);
    color: var(--bp-ink);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}

.baipar-pro__tab small {
    margin-inline-start: 6px;
    opacity: .6;
    font-weight: 500;
}

.baipar-pro__tab:hover {
    border-color: var(--bp-primary);
    color: var(--bp-primary);
}

.baipar-pro__tab[aria-selected="true"] {
    border-color: var(--bp-primary);
    background: var(--bp-primary);
    color: var(--bp-white);
}

/* ============================================================
   Grid and the layout presets
   ============================================================ */

.baipar-pro__grid {
    --bp-cols: 3;
    --bp-gap-x: 20px;
    --bp-gap-y: 20px;
    display: grid;
    grid-template-columns: repeat(var(--bp-cols), minmax(0, 1fr));
    column-gap: var(--bp-gap-x);
    row-gap: var(--bp-gap-y);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* A busy state during an AJAX filter change, so the swap is visible. */
.baipar-pro__grid[data-baipar-busy] {
    opacity: .45;
    pointer-events: none;
    transition: opacity .15s ease;
}

.baipar-pro__grid--list,
.baipar-pro__grid--compact,
.baipar-pro__grid--agenda,
.baipar-pro__grid--timeline,
.baipar-pro__grid--pills {
    grid-template-columns: minmax(0, 1fr);
}

.baipar-pro__grid--masonry {
    display: block;
    column-count: var(--bp-cols);
    column-gap: var(--bp-gap-x);
}

.baipar-pro__grid--masonry > .baipar-pro__item {
    break-inside: avoid;
    margin-bottom: var(--bp-gap-y);
}

.baipar-pro__grid--columns {
    grid-template-columns: repeat(var(--bp-cols), minmax(0, 1fr));
    align-items: start;
}

/* Bento: the first card takes a two-by-two block, the rest fill in around it. */
.baipar-pro__grid--bento {
    grid-auto-rows: 1fr;
}

.baipar-pro__grid--bento > .baipar-pro__item:first-child {
    grid-column: span 2;
    grid-row: span 2;
}

.baipar-pro__grid--mosaic > .baipar-pro__item:nth-child(4n + 1) {
    grid-column: span 2;
}

/* ------------------------------------------------------------
   Carousel: native scroll-snap, so touch, trackpad, keyboard and
   reduced-motion all behave without a slider library.
   ------------------------------------------------------------ */

.baipar-pro__grid--carousel,
.baipar-pro__grid--marquee {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* Room for a lifted card's shadow, pulled back so the row still aligns. */
    padding-bottom: 6px;
}

.baipar-pro__grid--carousel::-webkit-scrollbar,
.baipar-pro__grid--marquee::-webkit-scrollbar {
    display: none;
}

.baipar-scrollbar-yes .baipar-pro__grid--carousel {
    scrollbar-width: thin;
    padding-bottom: 14px;
}

.baipar-scrollbar-yes .baipar-pro__grid--carousel::-webkit-scrollbar {
    display: block;
    height: 6px;
}

.baipar-scrollbar-yes .baipar-pro__grid--carousel::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: var(--bp-line);
}

.baipar-pro__grid--carousel > .baipar-pro__item,
.baipar-pro__grid--marquee > .baipar-pro__item {
    flex: 0 0 calc((100% - (var(--bp-cols) - 1) * var(--bp-gap-x)) / var(--bp-cols));
    min-width: 0;
    scroll-snap-align: start;
}

.baipar-pro__grid--carousel:focus-visible {
    outline: 3px solid rgba(225, 27, 34, .3);
    outline-offset: 4px;
}

/* Marquee runs itself in CSS; the JS only clones the items to fill the loop. */
.baipar-pro__grid--marquee {
    overflow: hidden;
    scroll-snap-type: none;
}

.baipar-pro__grid--marquee > .baipar-pro__item {
    scroll-snap-align: none;
}

.baipar-pro__marquee-track {
    display: flex;
    gap: var(--bp-gap-x);
    animation: baipar-marquee var(--bp-marquee-speed, 30s) linear infinite;
    will-change: transform;
}

.baipar-pro__grid--marquee:hover .baipar-pro__marquee-track {
    animation-play-state: paused;
}

@keyframes baipar-marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ============================================================
   Card
   ============================================================ */

.baipar-pro__item {
    min-width: 0;
}

.baipar-pro__card {
    --bp-body-gap: 8px;
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--bp-line);
    border-radius: var(--bp-radius);
    background: var(--bp-white);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
}

.baipar-equal-yes .baipar-pro__item,
.baipar-equal-yes .baipar-pro__card {
    height: 100%;
}

.baipar-pro__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--bp-body-gap);
    padding: 16px;
}

/* Pushes the action row to the bottom so buttons line up across a row of cards. */
.baipar-pro__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: auto;
    padding-top: 4px;
}

.baipar-pro__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
}

.baipar-pro__title a {
    color: inherit;
    text-decoration: none;
}

.baipar-pro__excerpt {
    margin: 0;
    color: var(--bp-muted);
    font-size: 14px;
    line-height: 1.6;
}

.baipar-pro__metas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.baipar-pro__meta {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    margin: 0;
    color: var(--bp-muted);
    font-size: 13.5px;
    line-height: 1.5;
}

.baipar-pro__meta svg {
    flex: 0 0 auto;
    width: 15px;
    height: 15px;
    stroke-width: 2;
}

.baipar-pro__meta a {
    color: inherit;
    text-decoration: none;
}

.baipar-pro__meta a:hover {
    color: var(--bp-primary);
    text-decoration: underline;
}

/* Line clamping is opt-in: --bp-clamp is only set when the panel asks for it. */
.baipar-pro__title,
.baipar-pro__excerpt {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--bp-clamp, 999);
}

.baipar-pro__price {
    align-self: flex-start;
    font-size: 14px;
    font-weight: 700;
}

/* ------------------------------------------------------------
   Media
   ------------------------------------------------------------ */

.baipar-pro__media {
    position: relative;
    display: block;
    overflow: hidden;
    aspect-ratio: var(--bp-ratio, 3 / 2);
    background: var(--bp-surface);
}

.baipar-pro__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}

.baipar-pro__media::after {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0;
    transition: opacity .25s ease, background-color .25s ease;
    pointer-events: none;
}

.baipar-pro__media[style*="--bp-media-h"] {
    height: var(--bp-media-h);
}

.baipar-ratio-1-1 .baipar-pro__media { --bp-ratio: 1 / 1; }
.baipar-ratio-4-3 .baipar-pro__media { --bp-ratio: 4 / 3; }
.baipar-ratio-3-2 .baipar-pro__media { --bp-ratio: 3 / 2; }
.baipar-ratio-16-9 .baipar-pro__media { --bp-ratio: 16 / 9; }
.baipar-ratio-2-3 .baipar-pro__media { --bp-ratio: 2 / 3; }
.baipar-ratio-3-4 .baipar-pro__media { --bp-ratio: 3 / 4; }

.baipar-pro__placeholder {
    display: grid;
    width: 100%;
    height: 100%;
    color: #b3bdd0;
    font-size: 28px;
    place-items: center;
}

.baipar-pro__logo {
    --bp-logo-size: 56px;
    position: absolute;
    z-index: 2;
    right: 12px;
    bottom: -14px;
    overflow: hidden;
    width: var(--bp-logo-size);
    height: var(--bp-logo-size);
    border: 2px solid var(--bp-white);
    border-radius: 12px;
    background: var(--bp-white);
    box-shadow: 0 6px 18px rgba(20, 31, 70, .14);
}

.baipar-pro__logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.baipar-pro__logo--body {
    position: static;
    right: auto;
    bottom: auto;
    flex: 0 0 auto;
}

.baipar-pro__media-badges {
    position: absolute;
    z-index: 2;
    top: 10px;
    left: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    max-width: calc(100% - 20px);
}

.baipar-pro__media-date {
    position: absolute;
    z-index: 2;
    top: 10px;
    right: 10px;
}

/* ------------------------------------------------------------
   Hover effects
   ------------------------------------------------------------ */

/* --bp-lift lets a widget set its own travel without a new rule; the default
   is the distance every card lifted before it existed. */
.baipar-hover-lift .baipar-pro__card:hover,
.baipar-hover-both .baipar-pro__card:hover {
    transform: translateY(var(--bp-lift, -4px));
    box-shadow: 0 16px 34px rgba(20, 31, 70, .14);
}

.baipar-hover-zoom .baipar-pro__card:hover .baipar-pro__media img,
.baipar-hover-both .baipar-pro__card:hover .baipar-pro__media img {
    transform: scale(1.07);
}

.baipar-hover-glow .baipar-pro__card:hover {
    border-color: var(--bp-primary);
    box-shadow: 0 0 0 3px rgba(225, 27, 34, .14);
}

/* ============================================================
   Layout-specific card shapes
   ============================================================ */

/* List and compact rows put the image beside the text. */
.baipar-pro__grid--list .baipar-pro__card,
.baipar-pro__grid--compact .baipar-pro__card,
.baipar-pro__grid--agenda .baipar-pro__card {
    flex-direction: row;
    align-items: stretch;
}

.baipar-pro__grid--list .baipar-pro__media {
    flex: 0 0 clamp(140px, 26%, 280px);
    aspect-ratio: auto;
}

.baipar-pro__grid--compact .baipar-pro__media,
.baipar-pro__grid--agenda .baipar-pro__media {
    flex: 0 0 92px;
    aspect-ratio: 1 / 1;
}

.baipar-pro__grid--compact .baipar-pro__body,
.baipar-pro__grid--agenda .baipar-pro__body {
    padding: 12px 14px;
}

.baipar-pro__grid--compact .baipar-pro__card {
    border-radius: 10px;
}

/* Overlay and poster cards lay the text over a full-bleed image. */
.baipar-pro__grid--overlay .baipar-pro__card,
.baipar-pro__grid--poster .baipar-pro__card {
    position: relative;
    min-height: 260px;
    border: 0;
}

.baipar-pro__grid--overlay .baipar-pro__media,
.baipar-pro__grid--poster .baipar-pro__media {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
    height: 100%;
}

.baipar-pro__grid--overlay .baipar-pro__media::after,
.baipar-pro__grid--poster .baipar-pro__media::after {
    /* A gradient scrim, so light photos still take white text. */
    background: linear-gradient(to top, rgba(9, 16, 34, .88) 0%, rgba(9, 16, 34, .45) 45%, rgba(9, 16, 34, 0) 100%);
    opacity: 1;
}

.baipar-pro__grid--overlay .baipar-pro__body,
.baipar-pro__grid--poster .baipar-pro__body {
    position: relative;
    z-index: 2;
    justify-content: flex-end;
    padding: 20px;
    color: #fff;
}

.baipar-pro__grid--overlay .baipar-pro__title,
.baipar-pro__grid--poster .baipar-pro__title,
.baipar-pro__grid--overlay .baipar-pro__title a,
.baipar-pro__grid--poster .baipar-pro__title a {
    color: #fff;
}

.baipar-pro__grid--overlay .baipar-pro__meta,
.baipar-pro__grid--poster .baipar-pro__meta,
.baipar-pro__grid--overlay .baipar-pro__excerpt,
.baipar-pro__grid--poster .baipar-pro__excerpt {
    color: rgba(255, 255, 255, .82);
}

.baipar-pro__grid--poster .baipar-pro__card {
    min-height: 380px;
}

.baipar-pro__grid--bento > .baipar-pro__item:first-child .baipar-pro__card {
    min-height: 100%;
}

/* Pills: a single dense row of label-only links. */
.baipar-pro__grid--pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bp-gap-y) var(--bp-gap-x);
}

.baipar-pro__grid--pills > .baipar-pro__item {
    flex: 0 0 auto;
}

.baipar-pro__grid--pills .baipar-pro__card {
    flex-direction: row;
    gap: 8px;
    align-items: center;
    padding: 9px 16px;
    border-radius: 999px;
}

.baipar-pro__grid--pills .baipar-pro__body {
    padding: 0;
}

/* Icon tiles: a compact square with an icon above the label. */
.baipar-pro__grid--tiles .baipar-pro__card {
    align-items: center;
    padding: 18px 12px;
    text-align: center;
}

.baipar-pro__grid--tiles .baipar-pro__body {
    align-items: center;
    padding: 0;
}

.baipar-pro__icon {
    display: grid;
    width: var(--bp-icon-size, 44px);
    height: var(--bp-icon-size, 44px);
    margin-bottom: 10px;
    border-radius: 12px;
    background: var(--bp-term-tint, rgba(225, 27, 34, .08));
    color: var(--bp-term-color, var(--bp-primary));
    place-items: center;
}

.baipar-pro__icon img,
.baipar-pro__icon svg {
    width: 60%;
    height: 60%;
    object-fit: contain;
}

.baipar-pro__count {
    color: var(--bp-muted);
    font-size: 12.5px;
    font-weight: 600;
}

/* Timeline: one connected vertical spine. */
.baipar-pro__grid--timeline {
    position: relative;
    padding-inline-start: 34px;
}

.baipar-pro__grid--timeline::before {
    position: absolute;
    top: 6px;
    bottom: 6px;
    left: 11px;
    width: 2px;
    background: var(--bp-line);
    content: "";
}

.baipar-pro__grid--timeline > .baipar-pro__item {
    position: relative;
}

.baipar-pro__grid--timeline > .baipar-pro__item::before {
    position: absolute;
    top: 18px;
    left: -29px;
    width: 12px;
    height: 12px;
    border: 2px solid var(--bp-white);
    border-radius: 50%;
    background: var(--bp-primary);
    box-shadow: 0 0 0 2px var(--bp-line);
    content: "";
}

/* Agenda: a sticky day heading above each group of events. */
.baipar-pro__day {
    position: relative;
    z-index: 3;
    margin: 0 0 10px;
    padding: 8px 0;
    background: linear-gradient(var(--bp-surface), var(--bp-surface));
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.baipar-pro__day-group {
    margin-bottom: 26px;
}

.baipar-pro__day-group:last-child {
    margin-bottom: 0;
}

.baipar-pro__day-items {
    display: grid;
    gap: 10px;
}

/* ============================================================
   Shared card fragments (.baipar-part)
   ============================================================ */

.baipar-part__badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.baipar-part__badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: rgba(20, 34, 61, .08);
    color: var(--bp-ink);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    line-height: 1.5;
    text-transform: uppercase;
    white-space: nowrap;
}

.baipar-part__badge--featured { background: #fff2d6; color: #8a5a00; }
.baipar-part__badge--verified { background: #e2f4e8; color: #1f6b3a; }
.baipar-part__badge--claimed { background: #e6eefc; color: #26468f; }
.baipar-part__badge--popular { background: #fde7e8; color: #a4161b; }
.baipar-part__badge--trending { background: #ede4fb; color: #5b34b0; }
.baipar-part__badge--status { background: #fde7e8; color: #a4161b; }
.baipar-part__badge--online { background: #e2f0fb; color: #1a5e8a; }

.baipar-part__open {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
}

.baipar-part__open i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--bp-dot, currentColor);
}

.baipar-part__open--yes { --bp-dot: #1f9d55; color: #1f6b3a; }
.baipar-part__open--no { --bp-dot: #b6bccb; color: var(--bp-muted); }

.baipar-part__chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.baipar-part__chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border: 1px solid var(--bp-line);
    border-radius: 999px;
    background: var(--bp-white);
    color: var(--bp-muted);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

a.baipar-part__chip:hover {
    border-color: var(--bp-primary);
    color: var(--bp-primary);
}

/* Rating: one masked strip, with the score painted over the empty colour. */
.baipar-part__rating {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    font-size: 13px;
}

.baipar-part__stars {
    --bp-star: #f5a623;
    --bp-star-empty: #d8dee9;
    --bp-star-size: 14px;
    position: relative;
    display: inline-block;
    width: calc(var(--bp-star-size) * 5);
    height: var(--bp-star-size);
    background: var(--bp-star-empty);
    -webkit-mask: var(--bp-star-mask) repeat-x left center / var(--bp-star-size) var(--bp-star-size);
    mask: var(--bp-star-mask) repeat-x left center / var(--bp-star-size) var(--bp-star-size);
}

.baipar-part__stars-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: var(--bp-star);
}

.baipar-part__rating-value { font-weight: 700; }
.baipar-part__rating-count { color: var(--bp-muted); }

.baipar-part__socials {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.baipar-part__social {
    display: grid;
    width: 30px;
    height: 30px;
    border: 1px solid var(--bp-line);
    border-radius: 50%;
    color: var(--bp-muted);
    place-items: center;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.baipar-part__social:hover {
    border-color: var(--bp-primary);
    color: var(--bp-primary);
}

.baipar-part__social svg { width: 15px; height: 15px; }

.baipar-part__button {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding: 9px 16px;
    border: 1px solid var(--bp-line);
    border-radius: 8px;
    background: var(--bp-white);
    color: var(--bp-ink);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.baipar-part__button:hover {
    border-color: var(--bp-primary);
    color: var(--bp-primary);
}

.baipar-part__button--primary {
    border-color: var(--bp-primary);
    background: var(--bp-primary);
    color: var(--bp-white);
}

.baipar-part__button--primary:hover {
    background: #c4161c;
    color: var(--bp-white);
}

.baipar-part__button--ghost {
    padding-inline: 0;
    border-color: transparent;
    background: none;
    color: var(--bp-primary);
}

.baipar-part__button-icon {
    display: inline-flex;
    align-items: center;
}

.baipar-part__button-icon svg { width: 16px; height: 16px; }

/* Event date badge */
.baipar-part__date {
    --bp-date-size: 58px;
    display: inline-flex;
    flex: 0 0 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: var(--bp-date-size);
    min-width: var(--bp-date-size);
    padding: 6px 4px;
    border-radius: 10px;
    background: var(--bp-white);
    box-shadow: 0 4px 14px rgba(20, 31, 70, .12);
    line-height: 1.1;
    text-align: center;
}

.baipar-part__date-month {
    color: var(--bp-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.baipar-part__date-day {
    font-size: 21px;
    font-weight: 800;
}

.baipar-part__date-weekday {
    color: var(--bp-muted);
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
}

.baipar-part__date--boxed {
    border: 1px solid var(--bp-line);
    box-shadow: none;
}

.baipar-part__date--ribbon {
    border-radius: 0 0 10px 10px;
    background: var(--bp-primary);
    color: #fff;
}

.baipar-part__date--ribbon .baipar-part__date-month,
.baipar-part__date--ribbon .baipar-part__date-weekday { color: rgba(255, 255, 255, .85); }

.baipar-part__date--inline {
    width: auto;
    min-width: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
}

.baipar-part__date-inline {
    color: var(--bp-muted);
    font-size: 13.5px;
    font-weight: 600;
}

/* Capacity and countdown */
.baipar-pro__capacity {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.baipar-pro__capacity-bar {
    overflow: hidden;
    height: 6px;
    border-radius: 999px;
    background: var(--bp-line);
}

.baipar-pro__capacity-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--bp-primary);
    transition: width .3s ease;
}

.baipar-pro__capacity-text {
    color: var(--bp-muted);
    font-size: 12.5px;
    font-weight: 600;
}

.baipar-pro__countdown {
    display: inline-flex;
    gap: 8px;
    align-items: flex-start;
}

.baipar-pro__countdown-unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 44px;
    padding: 6px 8px;
    border: 1px solid var(--bp-line);
    border-radius: 8px;
    background: var(--bp-white);
    line-height: 1.15;
}

.baipar-pro__countdown-value {
    font-size: 18px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.baipar-pro__countdown-label {
    color: var(--bp-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.baipar-pro__countdown--live {
    color: var(--bp-primary);
    font-weight: 800;
}

/* Coupon code */
.baipar-pro__code {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 7px 12px;
    border: 1px dashed var(--bp-primary);
    border-radius: 8px;
    background: rgba(225, 27, 34, .05);
    color: var(--bp-ink);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    cursor: pointer;
}

.baipar-pro__code[data-copied] {
    border-style: solid;
    border-color: #1f9d55;
    color: #1f6b3a;
}

/* ============================================================
   Carousel controls and Load More
   ============================================================ */

.baipar-pro__arrows {
    display: flex;
    gap: 8px;
}

.baipar-pro__arrow {
    --bp-arrow-size: 40px;
    display: grid;
    width: var(--bp-arrow-size);
    height: var(--bp-arrow-size);
    border: 1px solid var(--bp-line);
    border-radius: 50%;
    background: var(--bp-white);
    color: var(--bp-ink);
    cursor: pointer;
    place-items: center;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease, opacity .18s ease;
}

.baipar-pro__arrow svg { width: 18px; height: 18px; }

.baipar-pro__arrow:hover {
    border-color: var(--bp-primary);
    color: var(--bp-primary);
}

.baipar-pro__arrow[disabled] {
    opacity: .35;
    cursor: default;
}

.baipar-arrows-top .baipar-pro__arrows {
    position: absolute;
    top: 0;
    right: 0;
}

/* The top-right arrows sit in the intro's own row, so reserve space for them. */
.baipar-arrows-top .baipar-pro__intro {
    padding-inline-end: 100px;
}

.baipar-arrows-bottom .baipar-pro__arrows {
    justify-content: center;
    margin-top: 18px;
}

.baipar-arrows-inside .baipar-pro__arrows,
.baipar-arrows-outside .baipar-pro__arrows {
    position: absolute;
    top: 50%;
    right: 0;
    left: 0;
    justify-content: space-between;
    transform: translateY(-50%);
    pointer-events: none;
}

.baipar-arrows-inside .baipar-pro__arrow,
.baipar-arrows-outside .baipar-pro__arrow {
    pointer-events: auto;
}

.baipar-arrows-inside .baipar-pro__arrows { padding: 0 10px; }
.baipar-arrows-outside .baipar-pro__arrows { margin: 0 -22px; }

.baipar-pro__dots {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    margin-top: 18px;
}

.baipar-pro__dot {
    --bp-dot-size: 8px;
    width: var(--bp-dot-size);
    height: var(--bp-dot-size);
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--bp-line);
    cursor: pointer;
    transition: width .2s ease, background-color .2s ease;
}

.baipar-pro__dot[aria-current="true"] {
    width: calc(var(--bp-dot-size) * 3);
    background: var(--bp-primary);
}

.baipar-pro__more {
    display: flex;
    justify-content: center;
    margin-top: 26px;
}

.baipar-pro__more-button {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    padding: 11px 26px;
    border: 1px solid var(--bp-line);
    border-radius: 999px;
    background: var(--bp-white);
    color: var(--bp-ink);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: color .18s ease, background-color .18s ease, border-color .18s ease;
}

.baipar-pro__more-button:hover:not([disabled]) {
    border-color: var(--bp-primary);
    background: var(--bp-primary);
    color: var(--bp-white);
}

.baipar-pro__more-button[disabled] { opacity: .6; cursor: default; }

.baipar-pro__more-done {
    color: var(--bp-muted);
    font-size: 14px;
}

/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1024px) {
    .baipar-pro__grid--bento > .baipar-pro__item:first-child {
        grid-column: span 2;
        grid-row: span 1;
    }
}

@media (max-width: 767px) {
    .baipar-pro__grid--list .baipar-pro__card,
    .baipar-pro__grid--list .baipar-pro__card {
        flex-direction: column;
    }

    .baipar-pro__grid--list .baipar-pro__media {
        flex-basis: auto;
        aspect-ratio: var(--bp-ratio, 3 / 2);
    }

    .baipar-pro__grid--bento > .baipar-pro__item:first-child {
        grid-column: span 1;
    }

    .baipar-pro__grid--mosaic > .baipar-pro__item:nth-child(4n + 1) {
        grid-column: span 1;
    }

    .baipar-arrows-top .baipar-pro__intro { padding-inline-end: 0; }

    .baipar-arrows-top .baipar-pro__arrows {
        position: static;
        justify-content: flex-end;
        margin-bottom: 14px;
    }

    .baipar-arrows-outside .baipar-pro__arrows { margin: 0 4px; }
}

/* Honour a visitor's motion preference: no autoscroll, no smooth jumps, no
   marquee. The carousel stays fully usable as a plain scroller. */
@media (prefers-reduced-motion: reduce) {
    .baipar-pro__grid--carousel { scroll-behavior: auto; }

    .baipar-pro__marquee-track { animation: none; }

    .baipar-pro__card,
    .baipar-pro__media img,
    .baipar-pro__capacity-fill {
        transition: none;
    }

    .baipar-hover-lift .baipar-pro__card:hover,
    .baipar-hover-both .baipar-pro__card:hover {
        transform: none;
    }

    .baipar-hover-zoom .baipar-pro__card:hover .baipar-pro__media img,
    .baipar-hover-both .baipar-pro__card:hover .baipar-pro__media img {
        transform: none;
    }
}

/* ============================================================
   Lightbox

   Appended to <body> by the script, so it sits outside .baipar-pro
   and needs its own top-level rules.
   ============================================================ */

.baipar-pro__lightbox {
    position: fixed;
    z-index: 100000;
    inset: 0;
    display: none;
    gap: 12px;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(6, 11, 24, .92);
}

.baipar-pro__lightbox.is-open {
    display: flex;
}

.baipar-pro__lightbox img {
    max-width: min(1200px, 100%);
    max-height: 90vh;
    border-radius: 8px;
    object-fit: contain;
}

.baipar-pro__lightbox-close {
    position: absolute;
    top: 16px;
    right: 20px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}

.baipar-pro__lightbox-nav {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font-size: 30px;
    line-height: 1;
    cursor: pointer;
}

.baipar-pro__lightbox-close:hover,
.baipar-pro__lightbox-nav:hover {
    background: rgba(255, 255, 255, .26);
}

.baipar-pro__lightbox-close:focus-visible,
.baipar-pro__lightbox-nav:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .6);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .baipar-pro__lightbox {
        padding: 12px;
    }

    .baipar-pro__lightbox-nav {
        position: absolute;
        bottom: 18px;
    }

    .baipar-pro__lightbox-nav--prev { left: 22%; }
    .baipar-pro__lightbox-nav--next { right: 22%; }
}

/* ============================================================
   Listing Spotlight
   ============================================================ */

.baipar-pro__hero {
    --bp-hero-media: 52%;
    display: grid;
    gap: clamp(18px, 2.4vw, 32px);
}

/* Hero + side list: the feature takes the width the panel gives its image,
   and the runners-up fill the rest. */
.baipar-pro__hero--hero {
    grid-template-columns: minmax(0, calc(var(--bp-hero-media) * 1.35)) minmax(0, 1fr);
}

.baipar-pro__hero-card {
    display: grid;
    overflow: hidden;
    gap: 0;
}

.baipar-pro__hero--split .baipar-pro__hero-card,
.baipar-pro__hero--hero .baipar-pro__hero-card {
    grid-template-columns: minmax(0, var(--bp-hero-media)) minmax(0, 1fr);
    align-items: stretch;
}

.baipar-pro__hero--stack .baipar-pro__hero-card {
    grid-template-columns: minmax(0, 1fr);
}

/* The image-side control flips the two columns without touching the markup. */
.baipar-media-right .baipar-pro__hero-media { order: 2; }
.baipar-media-right .baipar-pro__hero-card > .baipar-pro__body { order: 1; }

.baipar-pro__hero-media {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.baipar-pro__hero-media .baipar-pro__media {
    flex: 1 1 auto;
    aspect-ratio: var(--bp-ratio, 4 / 3);
}

.baipar-pro__hero-card .baipar-pro__body {
    gap: 12px;
    padding: clamp(18px, 2vw, 30px);
}

.baipar-pro__hero-card .baipar-pro__title {
    font-size: clamp(20px, 2.2vw, 28px);
}

.baipar-pro__gallery {
    --bp-gallery-thumb: 74px;
    display: grid;
    grid-auto-columns: var(--bp-gallery-thumb);
    grid-auto-flow: column;
    gap: 8px;
    overflow-x: auto;
    padding: 8px;
    scrollbar-width: thin;
}

.baipar-pro__gallery a {
    display: block;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 1 / 1;
}

.baipar-pro__gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .25s ease;
}

.baipar-pro__gallery a:hover img {
    transform: scale(1.08);
}

.baipar-pro__side {
    min-width: 0;
}

.baipar-pro__side-title {
    margin: 0 0 14px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.baipar-pro__side-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.baipar-pro__side-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--bp-line);
}

.baipar-pro__side-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.baipar-pro__side-media {
    --bp-side-thumb: 68px;
    display: block;
    overflow: hidden;
    flex: 0 0 var(--bp-side-thumb);
    width: var(--bp-side-thumb);
    height: var(--bp-side-thumb);
    border-radius: 10px;
    background: var(--bp-surface);
}

.baipar-pro__side-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.baipar-pro__side-body {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.baipar-pro__side-body .baipar-pro__title {
    font-size: 15px;
}

/* ============================================================
   Top Providers
   ============================================================ */

.baipar-pro--owners-showcase .baipar-pro__card {
    align-items: center;
    padding: 22px 18px;
    text-align: center;
}

.baipar-pro--owners-showcase .baipar-pro__body {
    align-items: center;
    padding: 14px 0 0;
}

.baipar-pro__card-link {
    display: block;
    text-decoration: none;
}

.baipar-pro__avatar {
    --bp-avatar-size: 88px;
    display: block;
    overflow: hidden;
    width: var(--bp-avatar-size);
    height: var(--bp-avatar-size);
    border-radius: 50%;
    background: var(--bp-surface);
}

.baipar-pro__avatar img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* Initials stand in for a missing photo, sized off the avatar itself so the
   two are interchangeable. */
.baipar-pro__initials {
    display: grid;
    width: 100%;
    height: 100%;
    background: var(--bp-primary);
    color: #fff;
    font-size: calc(var(--bp-avatar-size) * 0.36);
    font-weight: 800;
    letter-spacing: .02em;
    place-items: center;
}

.baipar-pro__role {
    font-weight: 600;
}

.baipar-pro--owners-showcase .baipar-pro__count {
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--bp-surface);
}

/* Rows: avatar beside the text instead of above it. */
.baipar-pro__grid--rows {
    grid-template-columns: minmax(0, 1fr);
}

.baipar-pro__grid--rows .baipar-pro__card {
    flex-direction: row;
    gap: 16px;
    align-items: center;
    padding: 14px 16px;
    text-align: start;
}

.baipar-pro__grid--rows .baipar-pro__body {
    align-items: flex-start;
    padding: 0;
    text-align: start;
}

.baipar-pro__grid--rows .baipar-pro__actions {
    margin-inline-start: auto;
}

/* Avatar strip: overlapping circles, name on hover only. */
.baipar-pro__grid--avatars {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
}

.baipar-pro__grid--avatars > .baipar-pro__item {
    margin-inline-start: -14px;
    transition: transform .18s ease;
}

.baipar-pro__grid--avatars > .baipar-pro__item:first-child {
    margin-inline-start: 0;
}

.baipar-pro__grid--avatars > .baipar-pro__item:hover {
    z-index: 2;
    transform: translateY(-4px);
}

.baipar-pro__grid--avatars .baipar-pro__card {
    padding: 0;
    border: 0;
    background: none;
}

.baipar-pro__grid--avatars .baipar-pro__avatar {
    border: 3px solid var(--bp-white);
    box-shadow: 0 4px 12px rgba(20, 31, 70, .16);
}

.baipar-pro__grid--avatars .baipar-pro__body {
    display: none;
}

/* ============================================================
   Listings Map
   ============================================================ */

.baipar-pro__map-wrap {
    display: grid;
    gap: 18px;
}

.baipar-maplayout-map_split .baipar-pro__map-wrap {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: start;
}

.baipar-pro__map {
    width: 100%;
    height: 460px;
    background: var(--bp-surface);
}

/* Keep the paired list from growing past the map it belongs to. */
.baipar-maplayout-map_split .baipar-pro__map-list {
    max-height: 460px;
    overflow-y: auto;
    padding-inline-end: 6px;
}

.baipar-pro__map-list .baipar-pro__card {
    cursor: pointer;
}

.baipar-pro__map-list .baipar-pro__media {
    flex: 0 0 84px;
    aspect-ratio: 1 / 1;
}

/* Google renders the info window's own chrome, so only the contents are ours. */
.baipar-pro__popup {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    max-width: 260px;
    padding: 2px;
}

.baipar-pro__popup-media {
    display: block;
    overflow: hidden;
    flex: 0 0 64px;
    width: 64px;
    height: 64px;
    border-radius: 8px;
}

.baipar-pro__popup-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.baipar-pro__popup-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.baipar-pro__popup-title {
    color: var(--bp-ink);
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.35;
    text-decoration: none;
}

.baipar-pro__popup-meta {
    color: var(--bp-muted);
    font-size: 12.5px;
}

.baipar-pro__popup-cta {
    margin-top: 4px;
    color: var(--bp-primary);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 1024px) {
    .baipar-pro__hero--hero {
        grid-template-columns: minmax(0, 1fr);
    }

    .baipar-maplayout-map_split .baipar-pro__map-wrap {
        grid-template-columns: minmax(0, 1fr);
    }

    .baipar-maplayout-map_split .baipar-pro__map-list {
        max-height: none;
    }
}

@media (max-width: 767px) {
    .baipar-pro__hero--split .baipar-pro__hero-card,
    .baipar-pro__hero--hero .baipar-pro__hero-card {
        grid-template-columns: minmax(0, 1fr);
    }

    /* On one column the image always leads, whatever side was chosen. */
    .baipar-media-right .baipar-pro__hero-media { order: 0; }
    .baipar-media-right .baipar-pro__hero-card > .baipar-pro__body { order: 1; }

    .baipar-pro__grid--rows .baipar-pro__card {
        flex-wrap: wrap;
    }

    .baipar-pro__grid--rows .baipar-pro__actions {
        margin-inline-start: 0;
    }
}

/* ============================================================
   Events
   ============================================================ */

/* A finished event is dimmed rather than hidden, so a "past events" section
   still reads as deliberately archival. */
.baipar-pro__event--past .baipar-pro__media img {
    filter: grayscale(35%);
    opacity: .85;
}

/* "Left of the text" date badge: its own column beside the body. */
.baipar-pro__lead {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    padding: 16px 0 16px 16px;
}

.baipar-pro__card:has(> .baipar-pro__lead) {
    flex-direction: row;
    align-items: stretch;
}

.baipar-pro__grid--timeline .baipar-pro__card,
.baipar-pro__grid--agenda .baipar-pro__day-items .baipar-pro__card {
    border-radius: 10px;
}

/* Sticky day headings are opt-in from the panel. */
.baipar-agenda-sticky-yes .baipar-pro__day {
    position: sticky;
    top: 0;
}

.baipar-pro__grid--poster .baipar-pro__media-date,
.baipar-pro__grid--overlay .baipar-pro__media-date {
    top: auto;
    bottom: 12px;
    right: 12px;
}

/* ============================================================
   Event Countdown
   ============================================================ */

.baipar-pro__cd {
    --bp-cd-media: 44%;
    position: relative;
    display: grid;
    overflow: hidden;
    border-radius: var(--bp-radius);
}

.baipar-pro__cd-body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: clamp(20px, 3vw, 44px);
}

.baipar-pro__cd-media {
    position: relative;
    overflow: hidden;
}

.baipar-pro__cd-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.baipar-pro__cd-media::after {
    position: absolute;
    inset: 0;
    content: "";
    opacity: 0;
}

/* Banner: the image is the background and the copy sits on top of it, so the
   text colours default to light. */
.baipar-pro__cd--banner .baipar-pro__cd-media {
    position: absolute;
    inset: 0;
}

.baipar-pro__cd--banner {
    min-height: 300px;
    background: var(--bp-secondary, #0d1b34);
}

.baipar-pro__cd--banner .baipar-pro__cd-body,
.baipar-pro__cd--banner .baipar-pro__title,
.baipar-pro__cd--banner .baipar-pro__title a {
    color: #fff;
}

.baipar-pro__cd--banner .baipar-pro__meta,
.baipar-pro__cd--banner .baipar-pro__excerpt {
    color: rgba(255, 255, 255, .82);
}

.baipar-pro__cd--banner .baipar-pro__countdown-unit {
    border-color: rgba(255, 255, 255, .28);
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.baipar-pro__cd--banner .baipar-pro__countdown-label {
    color: rgba(255, 255, 255, .72);
}

.baipar-pro__cd--split {
    grid-template-columns: minmax(0, var(--bp-cd-media)) minmax(0, 1fr);
    align-items: stretch;
    border: 1px solid var(--bp-line);
    background: var(--bp-white);
}

.baipar-pro__cd--split .baipar-pro__cd-media {
    min-height: 260px;
}

.baipar-pro__cd--boxed {
    border: 1px solid var(--bp-line);
    background: var(--bp-white);
    box-shadow: 0 12px 30px rgba(20, 31, 70, .08);
}

.baipar-pro__cd--boxed .baipar-pro__cd-media {
    aspect-ratio: 16 / 6;
}

/* Inline: one row, for dropping a countdown into a header strip. */
.baipar-pro__cd--inline .baipar-pro__cd-body {
    flex-flow: row wrap;
    gap: 10px 22px;
    align-items: center;
    padding: 14px 18px;
}

.baipar-pro__cd--inline .baipar-pro__cd-media {
    display: none;
}

.baipar-pro__cd--inline .baipar-pro__title {
    margin: 0;
    font-size: 18px;
}

.baipar-pro__cd--inline .baipar-pro__actions {
    margin: 0 0 0 auto;
    padding: 0;
}

.baipar-pro__cd .baipar-pro__title {
    margin: 0;
    font-size: clamp(22px, 2.6vw, 34px);
    line-height: 1.2;
}

.baipar-pro__cd .baipar-pro__title a {
    color: inherit;
    text-decoration: none;
}

.baipar-pro__cd .baipar-pro__actions {
    margin-top: 4px;
    padding: 0;
}

/* ============================================================
   Event Calendar
   ============================================================ */

.baipar-cal {
    --bp-cal-line: var(--bp-line);
}

.baipar-cal__head {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.baipar-cal__month {
    margin: 0;
    min-width: 11ch;
    font-size: clamp(17px, 2vw, 22px);
    font-weight: 700;
    text-align: center;
}

.baipar-cal__nav {
    display: grid;
    width: 38px;
    height: 38px;
    border: 1px solid var(--bp-cal-line);
    border-radius: 50%;
    background: var(--bp-white);
    color: var(--bp-ink);
    place-items: center;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.baipar-cal__nav svg { width: 18px; height: 18px; }

.baipar-cal__nav:hover {
    border-color: var(--bp-primary);
    color: var(--bp-primary);
}

.baipar-cal__nav--off {
    opacity: .3;
    pointer-events: none;
}

.baipar-cal__weekdays,
.baipar-cal__days {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.baipar-cal__weekday {
    padding: 8px 4px;
    color: var(--bp-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-align: center;
    text-transform: uppercase;
}

/* One shared border drawn by the cells themselves, so the grid has no double
   lines and needs no collapse trickery. */
.baipar-cal__days {
    overflow: hidden;
    border: 1px solid var(--bp-cal-line);
    border-radius: var(--bp-radius);
    background: var(--bp-cal-line);
    gap: 1px;
}

.baipar-cal__day {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-height: 92px;
    padding: 7px 8px;
    background: var(--bp-white);
    transition: background-color .18s ease;
}

.baipar-cal__day--blank {
    background: var(--bp-surface);
}

.baipar-cal__day--outside {
    background: var(--bp-surface);
    opacity: .55;
}

.baipar-cal__day--today {
    background: rgba(225, 27, 34, .05);
}

.baipar-cal__number {
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.baipar-cal__day--today .baipar-cal__number {
    color: var(--bp-primary);
}

.baipar-cal__dot {
    width: 7px;
    height: 7px;
    margin: 2px auto 0;
    border-radius: 50%;
    background: var(--bp-primary);
}

.baipar-cal__count {
    align-self: flex-start;
    padding: 1px 7px;
    border-radius: 999px;
    background: rgba(225, 27, 34, .1);
    color: var(--bp-primary);
    font-size: 11.5px;
    font-weight: 700;
}

.baipar-cal__events {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.baipar-cal__event {
    overflow: hidden;
    padding: 3px 6px;
    border-radius: 5px;
    background: rgba(225, 27, 34, .08);
    color: var(--bp-ink);
    font-size: 11.5px;
    line-height: 1.35;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: background-color .18s ease, color .18s ease;
}

.baipar-cal__event b {
    font-variant-numeric: tabular-nums;
}

.baipar-cal__event:hover {
    background: var(--bp-primary);
    color: #fff;
}

.baipar-cal__more {
    color: var(--bp-muted);
    font-size: 11px;
    font-weight: 700;
}

.baipar-cal__empty {
    margin: 18px 0 0;
    color: var(--bp-muted);
    text-align: center;
}

.baipar-cal__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 22px;
}

.baipar-cal__list-item {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    align-items: baseline;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--bp-cal-line);
}

.baipar-cal__list-item:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.baipar-cal__list-title {
    color: var(--bp-ink);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}

.baipar-cal__list-title:hover {
    color: var(--bp-primary);
}

.baipar-cal__list-meta {
    color: var(--bp-muted);
    font-size: 13px;
}

@media (max-width: 767px) {
    .baipar-pro__cd--split {
        grid-template-columns: minmax(0, 1fr);
    }

    .baipar-pro__cd--inline .baipar-pro__actions {
        margin-inline-start: 0;
    }

    .baipar-pro__card:has(> .baipar-pro__lead) {
        flex-direction: column;
    }

    .baipar-pro__lead {
        padding: 14px 16px 0;
    }

    /* A seven-column month is unreadable on a phone, so the cells shrink to
       date-plus-dot and the list underneath carries the detail. */
    .baipar-cal__day {
        min-height: 54px;
        padding: 5px 4px;
        align-items: center;
    }

    .baipar-cal__events,
    .baipar-cal__count {
        display: none;
    }

    .baipar-cal__day--has::after {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--bp-primary);
        content: "";
    }

    .baipar-cal__weekday {
        font-size: 10.5px;
        letter-spacing: 0;
    }
}

/* ============================================================
   Deals & Coupons
   ============================================================ */

.baipar-pro__deal .baipar-pro__body {
    gap: 10px;
}

.baipar-pro__deal--expired {
    opacity: .62;
}

.baipar-pro__deal-head {
    display: flex;
    gap: 10px;
    align-items: center;
}

.baipar-pro__discount {
    display: inline-flex;
    gap: 6px;
    align-self: flex-start;
    align-items: baseline;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(225, 27, 34, .1);
}

.baipar-pro__discount-value {
    color: var(--bp-primary);
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.01em;
    line-height: 1;
}

.baipar-pro__discount-affix {
    color: var(--bp-primary);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}

.baipar-pro__code-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.baipar-pro__code-label {
    color: var(--bp-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.baipar-pro__meta--expired {
    color: #a4161b;
    font-weight: 700;
}

.baipar-pro__terms {
    margin: 0;
    color: var(--bp-muted);
    font-size: 12px;
    line-height: 1.5;
}

/* A compact countdown for inline use, e.g. a coupon's remaining time. */
.baipar-pro__countdown--compact .baipar-pro__countdown-unit {
    min-width: 36px;
    padding: 3px 6px;
}

.baipar-pro__countdown--compact .baipar-pro__countdown-value {
    font-size: 14px;
}

.baipar-pro__countdown--compact .baipar-pro__countdown-label {
    font-size: 8.5px;
}

/* Ticket stub: a notched edge, cut with two radial gradients rather than
   extra elements. */
.baipar-pro__grid--stub .baipar-pro__card {
    position: relative;
    border-style: dashed;
    border-radius: 14px;
}

.baipar-pro__grid--stub .baipar-pro__card::before,
.baipar-pro__grid--stub .baipar-pro__card::after {
    position: absolute;
    z-index: 2;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--bp-surface);
    content: "";
    transform: translateY(-50%);
}

.baipar-pro__grid--stub .baipar-pro__card::before { left: -10px; }
.baipar-pro__grid--stub .baipar-pro__card::after { right: -10px; }

/* ============================================================
   Taxonomy Showcase
   ============================================================ */

.baipar-pro--taxonomy-showcase .baipar-pro__card {
    color: inherit;
    text-decoration: none;
}

.baipar-pro--taxonomy-showcase .baipar-pro__title {
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.3;
}

/* Icon tiles */
.baipar-pro__grid--tiles .baipar-pro__card {
    flex-direction: column;
    gap: 0;
    justify-content: center;
}

.baipar-pro__grid--tiles .baipar-pro__body {
    gap: 3px;
}

.baipar-pro__icon-media {
    display: block;
    width: 60%;
    height: 60%;
    object-fit: contain;
}

/* Image cards: photo on top, label under it. */
.baipar-pro__grid--cards .baipar-pro__card {
    gap: 0;
}

.baipar-pro__grid--cards .baipar-pro__media {
    aspect-ratio: var(--bp-ratio, 4 / 3);
}

.baipar-pro__grid--cards .baipar-pro__body {
    gap: 3px;
    padding: 12px 14px;
}

.baipar-pro__media--icon {
    display: grid;
    background: var(--bp-term-tint, rgba(225, 27, 34, .08));
    color: var(--bp-term-color, var(--bp-primary));
    place-items: center;
}

.baipar-pro__media--icon svg,
.baipar-pro__media--icon img {
    width: 38%;
    height: 38%;
    object-fit: contain;
}

/* Photo overlay: label sits on the image. */
.baipar-pro__grid--overlay.baipar-pro__grid .baipar-pro__card {
    min-height: 150px;
}

.baipar-pro--taxonomy-showcase .baipar-pro__grid--overlay .baipar-pro__media {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
}

.baipar-pro--taxonomy-showcase .baipar-pro__grid--overlay .baipar-pro__media::after {
    background: linear-gradient(to top, rgba(9, 16, 34, .82), rgba(9, 16, 34, .15));
    opacity: 1;
}

.baipar-pro--taxonomy-showcase .baipar-pro__grid--overlay .baipar-pro__body {
    position: relative;
    z-index: 2;
    justify-content: flex-end;
    color: #fff;
}

.baipar-pro--taxonomy-showcase .baipar-pro__grid--overlay .baipar-pro__title {
    color: #fff;
    font-size: 16px;
}

.baipar-pro--taxonomy-showcase .baipar-pro__grid--overlay .baipar-pro__count {
    background: rgba(255, 255, 255, .2);
    color: #fff;
}

/* Pills: one dense wrap of labels. */
.baipar-pro--taxonomy-showcase .baipar-pro__grid--pills .baipar-pro__card {
    gap: 8px;
}

.baipar-pro--taxonomy-showcase .baipar-pro__grid--pills .baipar-pro__icon {
    width: 22px;
    height: 22px;
    margin: 0;
    border-radius: 6px;
}

.baipar-pro--taxonomy-showcase .baipar-pro__grid--pills .baipar-pro__body {
    flex-direction: row;
    gap: 7px;
    align-items: center;
}

.baipar-pro--taxonomy-showcase .baipar-pro__grid--pills .baipar-pro__card:hover {
    border-color: var(--bp-primary);
    color: var(--bp-primary);
}

/* Column list: text rows in columns, no card chrome. */
.baipar-pro--taxonomy-showcase .baipar-pro__grid--columns .baipar-pro__card {
    flex-direction: row;
    gap: 10px;
    align-items: center;
    padding: 7px 0;
    border: 0;
    border-radius: 0;
    background: none;
}

.baipar-pro--taxonomy-showcase .baipar-pro__grid--columns .baipar-pro__icon {
    width: 26px;
    height: 26px;
    margin: 0;
    border-radius: 7px;
}

.baipar-pro--taxonomy-showcase .baipar-pro__grid--columns .baipar-pro__body {
    flex-direction: row;
    gap: 8px;
    align-items: baseline;
}

.baipar-pro--taxonomy-showcase .baipar-pro__grid--columns .baipar-pro__card:hover .baipar-pro__title {
    color: var(--bp-primary);
}

/* Marquee tiles keep their own width rather than stretching to a column. */
.baipar-pro--taxonomy-showcase .baipar-pro__grid--marquee > .baipar-pro__item,
.baipar-pro--taxonomy-showcase .baipar-pro__marquee-track > .baipar-pro__item {
    flex: 0 0 auto;
    width: auto;
}

.baipar-pro--taxonomy-showcase .baipar-pro__grid--marquee .baipar-pro__card {
    flex-direction: row;
    gap: 10px;
    align-items: center;
    padding: 10px 18px;
    border-radius: 999px;
    white-space: nowrap;
}

.baipar-pro--taxonomy-showcase .baipar-pro__grid--marquee .baipar-pro__icon {
    width: 26px;
    height: 26px;
    margin: 0;
    border-radius: 7px;
}

.baipar-pro--taxonomy-showcase .baipar-pro__grid--marquee .baipar-pro__body {
    flex-direction: row;
    gap: 8px;
    align-items: baseline;
}

@media (max-width: 767px) {
    .baipar-pro__discount-value {
        font-size: 22px;
    }

    .baipar-pro__grid--stub .baipar-pro__card::before,
    .baipar-pro__grid--stub .baipar-pro__card::after {
        display: none;
    }
}

/* ============================================================
   Reveal on scroll

   Shared by any widget that marks its items .baipar-pro__reveal. The hidden
   state is gated behind is-reveal-on, which the script adds once it has an
   observer to bring the items back: with JavaScript off, or with reduced
   motion, nothing is ever hidden in the first place.
   ============================================================ */

.baipar-pro.is-reveal-on .baipar-pro__reveal {
    opacity: 0;
    transform: translateY(var(--bp-reveal-y, 22px));
}

.baipar-pro.is-reveal-on .baipar-pro__reveal.is-in {
    opacity: 1;
    transform: none;
    transition:
        opacity var(--bp-reveal-time, 700ms) cubic-bezier(.2, .7, .3, 1),
        transform var(--bp-reveal-time, 700ms) cubic-bezier(.2, .7, .3, 1);
}

/* ============================================================
   Cards Grid

   An icon, a title and a line of text. The gradient hairline and the corner
   glow are the card's own pseudo elements, so the markup stays a card, a body
   and an icon, and each accent can be switched off from the panel.
   ============================================================ */

.baipar-pro--cards-grid .baipar-pro__card {
    --bp-cg-from: #0e8a9b;
    --bp-cg-to: #1f6feb;
    --bp-cg-bar: 3px;
    --bp-cg-glow: rgba(18, 174, 190, .13);
    --bp-cg-glow-size: 180px;
    --bp-cgi-gap: 11px;
    --bp-body-gap: 9px;
    --bp-lift: -6px;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(11, 27, 43, .05), 0 4px 14px rgba(11, 27, 43, .05);
    color: inherit;
    text-decoration: none;
    transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease, border-color .3s ease, background-color .3s ease;
}

.baipar-pro--cards-grid .baipar-pro__card:hover {
    border-color: #d5e4ee;
}

.baipar-pro--cards-grid .baipar-pro__body {
    position: relative;
    z-index: 1;
    gap: 0;
    padding: clamp(22px, 4vw, 30px) clamp(20px, 3.4vw, 28px) clamp(24px, 4.2vw, 32px);
}

.baipar-pro--cards-grid .baipar-pro__cg-text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--bp-body-gap, 9px);
    min-width: 0;
}

.baipar-pro--cards-grid .baipar-pro__title {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.025em;
    line-height: 1.14;
}

.baipar-pro--cards-grid .baipar-pro__excerpt {
    font-size: 15px;
    line-height: 1.65;
}

.baipar-pro--cards-grid .baipar-pro__actions {
    padding-top: 6px;
}

/* The hairline. Drawn from the inline start so it reads as the card filling
   up rather than a bar appearing. */
.baipar-pro--cards-grid .baipar-pro__card::before {
    position: absolute;
    z-index: 2;
    inset: 0 0 auto 0;
    height: var(--bp-cg-bar, 3px);
    background: linear-gradient(135deg, var(--bp-cg-from) 0%, var(--bp-cg-to) 100%);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}

.baipar-cg-bar-always .baipar-pro__card::before,
.baipar-cg-bar-hover .baipar-pro__card:hover::before {
    transform: scaleX(1);
}

.baipar-cg-bar-none .baipar-pro__card::before {
    display: none;
}

/* The glow, clipped by the card's own overflow. */
.baipar-pro--cards-grid .baipar-pro__card::after {
    position: absolute;
    top: calc(var(--bp-cg-glow-size, 180px) / -2.6);
    inset-inline-end: calc(var(--bp-cg-glow-size, 180px) / -2.6);
    width: var(--bp-cg-glow-size, 180px);
    height: var(--bp-cg-glow-size, 180px);
    border-radius: 50%;
    background: radial-gradient(circle, var(--bp-cg-glow), transparent 70%);
    content: "";
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}

.baipar-cg-glow-yes .baipar-pro__card:hover::after {
    opacity: 1;
}

.baipar-pro--cards-grid .baipar-pro__cg-icon {
    --bp-cgi-size: 52px;
    --bp-cgi-color: #0a6b7a;
    position: relative;
    z-index: 1;
    display: grid;
    flex: 0 0 auto;
    width: var(--bp-cgi-size);
    height: var(--bp-cgi-size);
    margin-bottom: var(--bp-cgi-gap, 11px);
    border-radius: 15px;
    background: var(--bp-cgi-bg, linear-gradient(145deg, #e9f8fa, #dcebff));
    box-shadow: inset 0 0 0 1px rgba(18, 174, 190, .16);
    color: var(--bp-cgi-color);
    font-size: 26px;
    line-height: 1;
    place-items: center;
    transition: transform .35s cubic-bezier(.2, .7, .3, 1), background-color .3s ease, color .3s ease;
}

.baipar-pro--cards-grid .baipar-pro__cg-icon svg {
    width: 26px;
    height: 26px;
}

.baipar-pro--cards-grid .baipar-pro__cg-icon--image img {
    width: 62%;
    height: 62%;
    object-fit: contain;
}

.baipar-cg-ico-tilt .baipar-pro__card:hover .baipar-pro__cg-icon {
    transform: rotate(-6deg) scale(1.06);
}

.baipar-cg-ico-grow .baipar-pro__card:hover .baipar-pro__cg-icon {
    transform: scale(1.1);
}

.baipar-cg-ico-shift .baipar-pro__card:hover .baipar-pro__cg-icon {
    transform: translateY(-4px);
}

/* Icon beside the text rather than above it. */
.baipar-cg-ipos-left .baipar-pro__body {
    flex-direction: row;
    align-items: flex-start;
}

.baipar-cg-ipos-left .baipar-pro__cg-icon {
    margin-bottom: 0;
    margin-inline-end: var(--bp-cgi-gap, 11px);
}

.baipar-pro--cards-grid .baipar-pro__cg-badge {
    position: absolute;
    z-index: 2;
    top: 14px;
    inset-inline-end: 14px;
    padding: 4px 10px;
    border-radius: 999px;
    background-color: #eef6ff;
    color: #1f6feb;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

/* Skins. Kept at the same weight as the panel's own card selectors, so a
   colour picked in the editor still wins over the preset it started from. */
.baipar-cg-skin-raised .baipar-pro__card {
    border-color: transparent;
    box-shadow: 0 10px 30px rgba(11, 27, 43, .08);
}

.baipar-cg-skin-tinted .baipar-pro__card {
    border-color: transparent;
    background: #f3f8fc;
    box-shadow: none;
}

.baipar-cg-skin-plain .baipar-pro__card {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.baipar-cg-skin-glass .baipar-pro__card {
    border-color: rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .62);
    box-shadow: 0 10px 30px rgba(11, 27, 43, .08);
    backdrop-filter: blur(10px);
}

/* In a list the icon sits beside the text whatever the icon position is,
   because a full-width row with the icon stacked on top reads as a header. */
.baipar-pro--cards-grid .baipar-pro__grid--list .baipar-pro__body {
    flex-direction: row;
    align-items: flex-start;
}

.baipar-pro--cards-grid .baipar-pro__grid--list .baipar-pro__cg-icon {
    margin-bottom: 0;
    margin-inline-end: var(--bp-cgi-gap, 11px);
}

/* ============================================================
   Marquee Strip

   A bordered band of small icon-and-label pairs. The band itself is the
   section, so the Section style controls are what restyle it.
   ============================================================ */

.baipar-pro--marquee-strip {
    overflow: hidden;
    border-block: 1px solid var(--bp-line);
    padding-block: 20px;
    background: var(--bp-white);
}

.baipar-mq-bleed-yes .baipar-pro--marquee-strip {
    width: 100vw;
    max-width: 100vw;
    margin-inline: calc(50% - 50vw);
}

/* Labels keep their own width instead of being stretched into columns. */
.baipar-pro--marquee-strip .baipar-pro__item {
    position: relative;
    flex: 0 0 auto;
    width: auto;
}

.baipar-pro--marquee-strip .baipar-pro__grid--marquee {
    --bp-mq-fade: 0px;
    /* No card shadows to leave room for here, unlike a carousel of cards. */
    padding-bottom: 0;
    mask-image: linear-gradient(90deg, transparent 0, #000 var(--bp-mq-fade), #000 calc(100% - var(--bp-mq-fade)), transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--bp-mq-fade), #000 calc(100% - var(--bp-mq-fade)), transparent 100%);
}

/* The static alternative: the same items as a wrapping row. */
.baipar-pro__grid--inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    grid-template-columns: none;
    gap: var(--bp-gap-y, 20px) var(--bp-gap-x, 20px);
}

.baipar-pro__mq-item {
    display: inline-flex;
    gap: 11px;
    align-items: center;
    color: #64798f;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
    transition: color .2s ease, background-color .2s ease;
}

.baipar-pro__mq-icon {
    --bp-mq-icon: #0e8a9b;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    color: var(--bp-mq-icon);
    font-size: 17px;
    line-height: 1;
}

.baipar-pro__mq-icon svg {
    width: 17px;
    height: 17px;
}

/* Separators sit in the middle of the gap rather than against an item, so the
   rhythm stays even however wide the gap is. A zero-width box is used as the
   anchor point: whatever it holds overflows equally on both sides, which is
   what keeps it centred in a right-to-left layout too. */
.baipar-mq-sep-dot .baipar-pro__item::after,
.baipar-mq-sep-line .baipar-pro__item::after,
.baipar-mq-sep-dash .baipar-pro__item::after {
    --bp-mq-sep: var(--bp-line);
    position: absolute;
    top: 50%;
    inset-inline-end: calc(var(--bp-gap-x, 52px) / -2);
    color: var(--bp-mq-sep);
    content: "";
    pointer-events: none;
}

.baipar-mq-sep-dot .baipar-pro__item::after {
    --bp-mq-sep-size: 14px;
    display: flex;
    width: 0;
    height: 0;
    align-items: center;
    justify-content: center;
    content: "\2022";
    font-size: var(--bp-mq-sep-size);
    line-height: 0;
}

.baipar-mq-sep-line .baipar-pro__item::after {
    --bp-mq-sep-size: 14px;
    width: 0;
    height: var(--bp-mq-sep-size);
    margin-top: calc(var(--bp-mq-sep-size) / -2);
    border-inline-start: 1px solid var(--bp-mq-sep);
}

.baipar-mq-sep-dash .baipar-pro__item::after {
    --bp-mq-sep-size: 14px;
    width: var(--bp-mq-sep-size);
    height: 0;
    margin-inline-end: calc(var(--bp-mq-sep-size) / -2);
    border-top: 1px solid var(--bp-mq-sep);
}

/* A wrapping row has a real last item, so it gets no trailing separator. The
   marquee keeps its own: the item after it is the start of the next run. */
.baipar-pro__grid--inline .baipar-pro__item:last-child::after {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .baipar-pro .baipar-pro__reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .baipar-pro--cards-grid .baipar-pro__card,
    .baipar-pro--cards-grid .baipar-pro__cg-icon,
    .baipar-pro--cards-grid .baipar-pro__card::before,
    .baipar-pro--cards-grid .baipar-pro__card::after {
        transition: none;
    }

    .baipar-cg-ico-tilt .baipar-pro__card:hover .baipar-pro__cg-icon,
    .baipar-cg-ico-grow .baipar-pro__card:hover .baipar-pro__cg-icon,
    .baipar-cg-ico-shift .baipar-pro__card:hover .baipar-pro__cg-icon {
        transform: none;
    }
}

/* ============================================================
   CTA banner
   ============================================================

   Everything the panel can change is a custom property declared on
   .baipar-cta, so a layout preset only has to redeclare the handful it wants to
   differ on and the Elementor selectors — which write to the same element at a
   higher specificity — always win over the preset. The two alignment axes are
   kept apart: --bp-cta-align positions the copy, --bp-cta-side-align the button
   column, which is what lets "text left, buttons right" be a preset rather than
   two controls the editor has to remember to set together. */

.baipar-pro--cta-banner .baipar-cta {
    --bp-cta-align: center;
    --bp-cta-side-align: center;
    --bp-cta-vjustify: center;
    --bp-cta-gap: clamp(18px, 2.4vw, 28px);
    --bp-cta-body-gap: 10px;
    --bp-cta-btn-gap: 12px;
    --bp-cta-btn-flex: 0 1 auto;
    --bp-cta-pad: clamp(26px, 4vw, 56px);
    --bp-cta-overlay: rgba(9, 16, 34, .72);
    position: relative;
    display: flex;
    overflow: hidden;
    border-radius: var(--bp-radius);
    background-color: var(--bp-surface);
    color: var(--bp-ink);
}

/* The photo is a real <img> rather than a CSS background so it can be lazy
   loaded and srcset-sized; the overlay rides on the same element. */
.baipar-pro--cta-banner .baipar-cta__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    border-radius: inherit;
}

.baipar-pro--cta-banner .baipar-cta__bg img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.baipar-pro--cta-banner .baipar-cta__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bp-cta-overlay);
}

.baipar-pro--cta-banner .baipar-cta__inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--bp-cta-gap);
    align-items: var(--bp-cta-align);
    justify-content: var(--bp-cta-vjustify);
    min-width: 0;
    padding: var(--bp-cta-pad);
    text-align: var(--bp-cta-align);
}

.baipar-pro--cta-banner .baipar-cta__body {
    display: flex;
    flex-direction: column;
    gap: var(--bp-cta-body-gap);
    align-items: var(--bp-cta-align);
    min-width: 0;
}

/* The column gaps own the vertical rhythm, so the shared intro margins would
   only double it up. */
.baipar-pro--cta-banner .baipar-cta .baipar-pro__eyebrow,
.baipar-pro--cta-banner .baipar-cta .baipar-pro__heading,
.baipar-pro--cta-banner .baipar-cta__text,
.baipar-pro--cta-banner .baipar-cta__note {
    margin: 0;
}

.baipar-pro--cta-banner .baipar-cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    line-height: 1;
}

.baipar-pro--cta-banner .baipar-cta__icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.baipar-pro--cta-banner .baipar-cta__text {
    color: var(--bp-muted);
    font-size: clamp(15px, 1.15vw, 17px);
    line-height: 1.7;
}

.baipar-pro--cta-banner .baipar-cta__side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: var(--bp-cta-side-align);
    width: 100%;
    min-width: 0;
    text-align: var(--bp-cta-side-align);
}

.baipar-pro--cta-banner .baipar-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bp-cta-btn-gap);
    align-items: center;
    justify-content: var(--bp-cta-btn-justify, var(--bp-cta-side-align));
    width: 100%;
}

.baipar-pro--cta-banner .baipar-cta__actions > .baipar-part__button {
    flex: var(--bp-cta-btn-flex);
}

.baipar-pro--cta-banner .baipar-cta__note {
    color: var(--bp-muted);
    font-size: 13px;
    line-height: 1.6;
}

/* ------------------------------------------------------------
   Layout presets
   ------------------------------------------------------------ */

/* Split and full-bleed put the copy beside the buttons. The row wraps rather
   than squeezing, so a long heading drops the buttons underneath instead of
   shrinking them to a sliver. */
.baipar-cta-split .baipar-cta,
.baipar-cta-banner .baipar-cta {
    --bp-cta-align: start;
    --bp-cta-side-align: end;
    --bp-cta-gap: clamp(20px, 3vw, 48px);
}

.baipar-cta-split .baipar-cta__inner,
.baipar-cta-banner .baipar-cta__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: var(--bp-cta-vjustify);
    justify-content: space-between;
}

.baipar-cta-split .baipar-cta__body,
.baipar-cta-banner .baipar-cta__body {
    flex: 1 1 min(100%, 340px);
}

.baipar-cta-split .baipar-cta__side,
.baipar-cta-banner .baipar-cta__side {
    flex: 0 1 auto;
    width: auto;
}

/* Boxed: the copy sits in an inset panel over the background, so a photo still
   reads around the edges. */
.baipar-cta-boxed .baipar-cta {
    --bp-cta-pad: clamp(24px, 3.4vw, 46px);
}

.baipar-cta-boxed .baipar-cta__inner {
    margin: clamp(14px, 2.2vw, 28px);
    border: 1px solid rgba(20, 34, 61, .12);
    border-radius: calc(var(--bp-radius) + 2px);
    background: rgba(255, 255, 255, .72);
}

.baipar-cta-banner .baipar-cta {
    --bp-cta-pad: clamp(30px, 5vw, 84px);
    --bp-cta-vjustify: flex-end;
    min-height: clamp(260px, 30vw, 420px);
}

/* ------------------------------------------------------------
   Light type, for a dark background or a photo
   ------------------------------------------------------------ */

.baipar-cta-light-yes .baipar-cta {
    background-color: #14223d;
    color: var(--bp-white);
}

.baipar-cta-light-yes .baipar-cta .baipar-pro__eyebrow {
    color: rgba(255, 255, 255, .74);
}

.baipar-cta-light-yes .baipar-cta__text {
    color: rgba(255, 255, 255, .86);
}

.baipar-cta-light-yes .baipar-cta__note {
    color: rgba(255, 255, 255, .66);
}

.baipar-cta-light-yes.baipar-cta-boxed .baipar-cta__inner {
    border-color: rgba(255, 255, 255, .22);
    background: rgba(12, 20, 38, .42);
    backdrop-filter: blur(8px);
}

/* A white pill on a dark banner shouts louder than the primary button it sits
   next to, so the secondary turns outline instead. */
.baipar-cta-light-yes .baipar-cta__secondary {
    border-color: rgba(255, 255, 255, .38);
    background: rgba(255, 255, 255, .08);
    color: var(--bp-white);
}

.baipar-cta-light-yes .baipar-cta__secondary:hover,
.baipar-cta-light-yes .baipar-cta__secondary:focus-visible {
    border-color: var(--bp-white);
    background: rgba(255, 255, 255, .18);
    color: var(--bp-white);
}

@media (max-width: 767px) {
    /* Stacked, the button column is no longer opposite the copy, so it follows
       the copy's alignment rather than staying pinned to the end. */
    .baipar-cta-split .baipar-cta,
    .baipar-cta-banner .baipar-cta {
        --bp-cta-side-align: var(--bp-cta-align);
    }

    .baipar-cta-split .baipar-cta__inner,
    .baipar-cta-banner .baipar-cta__inner {
        flex-direction: column;
        align-items: var(--bp-cta-align);
        justify-content: var(--bp-cta-vjustify);
    }

    .baipar-cta-split .baipar-cta__side,
    .baipar-cta-banner .baipar-cta__side {
        width: 100%;
    }

    .baipar-cta-banner .baipar-cta {
        min-height: 0;
    }
}