/**
 * BW Post / Video Card — the Related Videos and Related Case Studies grids.
 *
 * Scoped under .elementor-widget-bw-post-card so the rules outrank the
 * Elementor global kit, which targets headings as `.elementor-kit-N h3` and
 * would otherwise win against a single class. Weights are kept at parity with
 * the CSS Elementor generates from the controls, so controls win on source
 * order rather than being locked out.
 */

.elementor-widget-bw-post-card {
    --bw-blue: #005eb8;
    --bw-blue-dk: #00427f;
    --bw-blue-tint: #e8f0f9;
    --bw-orange: #f28120;
    --bw-ink: #101720;
    --bw-body: #5b6570;
    --bw-mute: #8a95a1;
    --bw-line: #e2e6ea;
    --bw-soft: #f7f9fb;
}

.elementor-widget-bw-post-card * {
    box-sizing: border-box;
}

.elementor-widget-bw-post-card .bw-pcard {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
    border: 1px solid var(--bw-line);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.elementor-widget-bw-post-card .bw-pcard:hover {
    border-color: #cfd8e3;
    box-shadow: 0 6px 18px rgba(16, 23, 32, .06);
}

/* ------------------------------------------------------------- media --- */
/* padding-bottom holds the aspect ratio, so the grid stays even before the
   images load — aspect-ratio alone still reflows on slow connections */
.elementor-widget-bw-post-card .bw-pcard-media {
    position: relative;
    display: block;
    width: 100%;
    height: 0;
    padding-bottom: 58%;
    background: var(--bw-soft);
    overflow: hidden;
    text-decoration: none;
}

.elementor-widget-bw-post-card .bw-pcard-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.elementor-widget-bw-post-card .bw-pcard-noimg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 9.5px/1 'Open Sans', Arial, sans-serif;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--bw-mute);
}

.elementor-widget-bw-post-card .bw-pcard-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--bw-blue);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 94, 184, .35);
    transition: transform .15s ease, background .15s ease;
}

.elementor-widget-bw-post-card .bw-pcard:hover .bw-pcard-play {
    background: var(--bw-blue-dk);
    transform: translate(-50%, -50%) scale(1.06);
}

/* the play triangle is optically off-centre inside a circle */
.elementor-widget-bw-post-card .bw-pcard-play svg {
    display: block;
    margin-left: 2px;
}

/* -------------------------------------------------------------- body --- */
.elementor-widget-bw-post-card .bw-pcard-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    gap: 8px;
    padding: 16px 18px 18px;
    min-width: 0;
}

.elementor-widget-bw-post-card .bw-pcard-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* Chip overlaid on the thumbnail. z-index clears the play button's shadow,
   and the solid white ground keeps it legible over any image — a tinted chip
   disappears against a pale product shot. */
.elementor-widget-bw-post-card .bw-pcard-chips.is-overlay {
    position: absolute;
    top: 10px;
    z-index: 2;
    max-width: calc(100% - 20px);
}

.elementor-widget-bw-post-card .bw-pcard-chips.is-tr {
    right: 10px;
    justify-content: flex-end;
}

.elementor-widget-bw-post-card .bw-pcard-chips.is-tl {
    left: 10px;
}

.elementor-widget-bw-post-card .bw-pcard-chips.is-overlay .bw-pcard-chip {
    background: rgba(255, 255, 255, .94);
    color: var(--bw-blue-dk);
    box-shadow: 0 1px 4px rgba(16, 23, 32, .14);
}

/* The Lightbox & Modal widget stays in the loop item as the click target, but
   its own button is redundant once the card is the affordance. Only the button
   is hidden — the widget wrapper must stay in flow, because Magnific pulls the
   popup content out of it by id. */
.bw-lb-trigger-hidden .bw-modal-popup-button {
    display: none !important;
}

/* whole card is the control in lightbox mode */
.elementor-widget-bw-post-card .bw-pcard.is-clickable {
    cursor: pointer;
}

.elementor-widget-bw-post-card .bw-pcard.is-clickable:focus-visible {
    outline: 2px solid var(--bw-orange);
    outline-offset: 2px;
}

/* the media and title are spans in that mode, so they need the pointer too */
.elementor-widget-bw-post-card .bw-pcard.is-clickable .bw-pcard-media,
.elementor-widget-bw-post-card .bw-pcard.is-clickable .bw-pcard-title span {
    cursor: pointer;
}

.elementor-widget-bw-post-card .bw-pcard-chip {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 5px;
    background: var(--bw-blue-tint);
    color: var(--bw-blue);
    font: 800 9.5px/1.4 'Open Sans', Arial, sans-serif;
    letter-spacing: 1.1px;
    text-transform: uppercase;
}

.elementor-widget-bw-post-card .bw-pcard-title {
    margin: 0;
    padding: 0;
    font: 700 14.5px/1.4 'Open Sans', Arial, sans-serif;
    color: var(--bw-ink);
}

.elementor-widget-bw-post-card .bw-pcard-title a {
    color: inherit;
    text-decoration: none;
}

.elementor-widget-bw-post-card .bw-pcard-excerpt {
    margin: 0;
    padding: 0;
    font: 400 12.5px/1.6 'Open Sans', Arial, sans-serif;
    color: var(--bw-body);
}

.elementor-widget-bw-post-card .bw-pcard-media:focus-visible,
.elementor-widget-bw-post-card .bw-pcard-title a:focus-visible {
    outline: 2px solid var(--bw-orange);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .elementor-widget-bw-post-card .bw-pcard-body {
        padding: 14px 15px 16px;
    }
}