/**
 * Blog Hero Styles
 *
 * Full-width featured image hero for single blog posts.
 *
 * @package WPBlogsAndPages
 * @since 1.0.0
 */

/* @critical-start context: blog */
/* ==========================================================================
   Blog Hero
   ========================================================================== */

.blog-hero {
    margin-bottom: var(--spacing-8);
}

.blog-hero-image {
    max-height: var(--blog-hero-desktop-max-height);
    overflow: hidden;
    border-radius: var(--card-border-radius, var(--radius-xl));
}

/*
 * Die Höhe wird am <img> selbst begrenzt, nicht nur an der Box: Mit
 * `height: auto` folgt das Bild nach dem Laden seinem echten Seitenverhältnis.
 * Ein Hochformat wäre dann 1.700px hoch, die Box schnitte per overflow alles
 * unter 500px ab und zeigte nur das obere Drittel. So füllt das Bild die
 * Bande, object-fit/object-position wählen den Ausschnitt, Standard die Mitte.
 * Ein Kunde, der den Ausschnitt oben braucht (z. B. Personenfotos), setzt
 * `--bap-blog-hero-pos: 50% 0` an `.blog-hero`.
 */
.blog-hero-image img {
    width: 100%;
    height: auto;
    max-height: var(--blog-hero-desktop-max-height);
    object-fit: var(--blog-hero-desktop-object-fit);
    object-position: var(--bap-blog-hero-pos, 50% 50%);
}

@media (max-width: 767px) {
    .blog-hero {
        margin-bottom: var(--spacing-4);
    }

    .blog-hero-image {
        max-height: var(--blog-hero-mobile-max-height);
    }

    .blog-hero-image img {
        max-height: var(--blog-hero-mobile-max-height);
        object-fit: var(--blog-hero-mobile-object-fit);
    }
}
/* @critical-end */

/* ==========================================================================
   Hero neben der Sidebar

   single.php rendert den Hero außerhalb von .content-layout, er spannt also
   auch mit aktiver Sidebar über die volle Containerbreite und steht dann
   breiter als der Artikeltext darunter. Die Rechnung spiegelt das Grid aus
   site-sidebar.css (minmax(0, 1fr) + var(--sidebar-width), gap var(--spacing-10)),
   damit Hero und Inhaltsspalte exakt bündig sind. Unterhalb von 992px stapelt
   das Grid einspaltig — dort greift die Begrenzung bewusst nicht.

   Bewusst außerhalb des @critical-Blocks: die Regel greift nur bei aktiver
   Sidebar, und blog-hero.css lädt render-blocking im <head>. So bleibt das
   generierte critical-blog.css unverändert gültig.
   ========================================================================== */

@media (min-width: 992px) {
    .blog-hero--with-sidebar {
        max-width: calc(100% - var(--sidebar-width) - var(--spacing-10));
    }
}

/* ==========================================================================
   Merken-Herz auf dem Titelbild

   Basis-Styles des Buttons liegen in favorites.css; hier steht nur die
   Position — oben rechts im sichtbaren Ausschnitt, wie auf .blog-card.
   Der Bezugsrahmen ist .blog-hero-image, weil die Box per max-height
   beschneidet und das Herz im Sichtbaren bleiben muss, nicht am Bildrand.

   Bewusst außerhalb des @critical-Blocks: blog-hero.css ist auf Beiträgen
   ein Critical-Handle und lädt ohnehin render-blocking, das generierte
   critical-blog.css muss dafür nicht neu erzeugt werden.
   ========================================================================== */

.blog-hero-image {
    position: relative;
}

.blog-hero-image > .fb-favorite-btn {
    position: absolute;
    top: var(--spacing-4);
    right: var(--spacing-4);
    box-shadow: var(--shadow-default);
}

@media (max-width: 767px) {
    .blog-hero-image > .fb-favorite-btn {
        top: var(--spacing-3);
        right: var(--spacing-3);
    }
}