/* ─────────────────────────────────────────────────────────────────────
   bdc_post_hero — featured-image banner for single articles.

   Wider than the 800px reading column so widescreen monitors don't
   feel empty at the top of the page, but still boxed at 1360px so a
   1920px viewport doesn't render an image that dwarfs the text below.

   Reading-column width stays at 800px inside .e-con-inner; the hero
   opts into a wider frame via its own max-width setting.
   ───────────────────────────────────────────────────────────────────── */

.bdc-post-hero {
    /* Layer 1: full-bleed wrapper that escapes the parent's boxed
       column.

       Uses `position: relative; left: calc(50% - 50vw)` instead of
       the more common `margin-left: calc(50% - 50vw)` idiom because
       something in the theme (or Elementor Pro's widget-container
       reset) zeros out negative margins on nested widgets. Position
       offsets aren't touched by those resets, so `left` gets us
       the same visual result reliably.

       50% resolves against the containing block (parent = 800px
       reading column), 50vw against the viewport. `50% - 50vw` is
       therefore the distance from the parent's left edge to the
       viewport's left edge, expressed as a negative offset — exactly
       what we need to align the widget's left with the viewport's
       left. */
    position: relative;
    left: calc(50% - 50vw);
    width: 100vw;
    max-width: 100vw;
    margin: 0 0 32px;
    padding: 0;
}

.bdc-post-hero__frame {
    /* Layer 2: the visual box — capped at 1360px and centered inside
       the viewport-wide wrapper. This is what carries the border,
       shadow, and image. */
    position: relative;
    width: min(1360px, calc(100vw - 40px));
    margin: 0 auto;
    overflow: hidden;
    border-radius: 20px;
    background: var(--bdc-ink-7, #f6f6f4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Aspect ratios — using padding-top hack for maximum browser
   support (aspect-ratio would also work but breaks on very old
   Safari; the padding-top form is universally safe and no more
   verbose in practice). */
.bdc-post-hero--aspect-21-9 .bdc-post-hero__frame { aspect-ratio: 21 / 9; }
.bdc-post-hero--aspect-16-9 .bdc-post-hero__frame { aspect-ratio: 16 / 9; }
.bdc-post-hero--aspect-3-2  .bdc-post-hero__frame { aspect-ratio: 3 / 2;  }

.bdc-post-hero__image,
.bdc-post-hero__placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ─── Category chip overlay ─── */
.bdc-post-hero__category {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 2;
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: var(--bdc-sage, #3d5844);
    font: 600 12px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* ─── Caption ─── */
.bdc-post-hero__caption {
    margin: 12px auto 0;
    max-width: 800px;
    padding: 0 20px;
    font: 400 13px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--bdc-ink-3, #6b6b68);
    text-align: center;
    font-style: italic;
}

/* ─── Responsive ─── */
@media (max-width: 767px) {
    .bdc-post-hero {
        width: 100%;
        margin-bottom: 24px;
    }
    .bdc-post-hero__frame {
        border-radius: 12px;
    }
    .bdc-post-hero__category {
        top: 12px;
        left: 12px;
        padding: 4px 10px;
        font-size: 11px;
    }
    /* On phones the cinematic aspect leaves the image too short;
       give it a more balanced 16:9 regardless of setting. */
    .bdc-post-hero--aspect-21-9 .bdc-post-hero__frame {
        aspect-ratio: 16 / 9;
    }
}