/* /blog/ page hero — circular portrait floats right, post content wraps. */

.jaredgolf-hero {
    /* Establish a block formatting context so the floated image is fully
       contained within the hero (text below the image flows back to full
       width inside the hero, not past its bottom). */
    display: flow-root;
}

.jaredgolf-hero-image {
    float: right;
    width: auto;
    max-width: 580px;
    /* Margin on the LEFT side (the side the text wraps on) — gives breathing
       room between the circular portrait and the H1/post content. Bottom
       margin keeps text below the image from sitting flush against it. */
    margin: 0 0 var(--wp--preset--spacing--medium) var(--wp--preset--spacing--large);
    /* Intentionally NO shape-outside: at xx-large H1 sizes the circle wrap
       shape causes visual overlap between glyphs and the image edge. Plain
       rectangular wrap reads as deliberate breathing room around the portrait. */
}

.jaredgolf-hero-image img {
    width: 100%;
    height: auto;
    display: block;
}

/* Ensure the post-content stream and post-title stay in the same block flow
   as the floated image (don't establish their own BFC, which would clear). */
.jaredgolf-hero .wp-block-query,
.jaredgolf-hero .wp-block-post-template,
.jaredgolf-hero .wp-block-post-template > li,
.jaredgolf-hero .wp-block-post {
    display: block;
}

/* WordPress core ships `.wp-block-post-content { display: flow-root }` from
   wp-includes/blocks/post-content/style.min.css. flow-root establishes a new
   block formatting context, which prevents the inner text from wrapping
   around an external float (the portrait sits beside .wp-block-post-content,
   not inside it). Override that on the hero so the post-content participates
   in the float's BFC and its text wraps to the image's right.

   Same applies if WP block layout decides to attach a dynamic
   wp-container-core-post-content-* class with its own flow-root rule. */
.jaredgolf-hero .wp-block-post-content,
.jaredgolf-hero [class*="wp-container-core-post-content"] {
    display: block;
}

/* Belt-and-braces: nothing inside the hero should clear the float. WP themes
   sometimes ship `h1, h2 { clear: both }` to keep headings off floats; the
   hero h1 is supposed to sit beside the portrait, so cancel any such clear. */
.jaredgolf-hero .wp-block-post-title,
.jaredgolf-hero .wp-block-post-content,
.jaredgolf-hero .wp-block-post-content > *,
.jaredgolf-hero h1,
.jaredgolf-hero h2,
.jaredgolf-hero h3,
.jaredgolf-hero h4,
.jaredgolf-hero p {
    clear: none;
}

/* WordPress core ships `.wp-block-post-title :where(a) { display: inline-block }`
   from wp-includes/blocks/post-title/style.min.css. An inline-block IS atomic —
   it cannot break across the strip of space the float reserves on the line.
   When the title text is wider than the available width beside the portrait
   (post-title at xx-large is ~110px so even 4–5 words exceed the ~650px gap),
   the inline-block CANNOT fit beside the float and the entire `<a>` is pushed
   DOWN past the bottom of the float. Visually that looks like "the image is
   above the text" — because the H1 box stretches to contain the wrapped-down
   anchor, then the post-content sits below the H1 (and therefore below the
   image too).

   Forcing the anchor to plain `inline` lets the title text break naturally
   across line boxes that flow around the float, so the H1 wraps along the
   portrait's left edge and the post-content paragraphs follow immediately
   underneath, also wrapping. */
.jaredgolf-hero .wp-block-post-title a {
    display: inline;
}

/* Mobile: drop the float — image stacks above the text at full natural size. */
@media (max-width: 781px) {
    .jaredgolf-hero-image {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 0 0 var(--wp--preset--spacing--medium) 0;
    }
}