/* =============================================================
   Jundo Single-Hero (Blog-Beitrag)
   Redaktionell steuerbarer Bildausschnitt über die Meta-Box
   "Hero: Bildausschnitt" – eigenständiges CSS statt core/cover-
   Klassen, weil das Markup per Shortcode kommt (nicht als echter
   Cover-Block im Content), analog zu css/hero-media.css.
   ============================================================= */

.jundo-single-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
    box-sizing: border-box;
    background-color: var(--wp--preset--color--contrast);
}

.jundo-single-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.jundo-single-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.jundo-single-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgba(0, 30, 46, .6);
}

.jundo-single-hero__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--wp--style--global--content-size, 800px);
    margin-inline: auto;
    padding-inline: var(--wp--preset--spacing--small);
}

.jundo-single-hero__title {
    color: var(--wp--preset--color--white);
    font-size: var(--wp--preset--font-size--xx-large);
    margin: 0;
}

.jundo-single-hero__date {
    color: var(--wp--preset--color--contrast-text);
    font-size: var(--wp--preset--font-size--small);
    margin: var(--wp--preset--spacing--x-small) 0 0;
}