/*
 * Hero block background/layout variants.
 *
 * Kept as plain CSS (not Tailwind utilities) because the breakout width and
 * the fullscreen height both need calc()/CSS-variable math that utility
 * classes can't express cleanly. The rest of the block's look (buttons,
 * spacing, grid) stays as Tailwind classes in hero_block.html.
 */

.hero--default {
    border-radius: 1rem;
    padding: 3rem 1.5rem;
}

@media (min-width: 768px) {
    .hero--default {
        padding: 4rem 1.5rem;
    }
}

/* full_width and fullscreen both need to escape the <main class="max-w-6xl
   mx-auto"> wrapper they're rendered inside, so they can span the full
   viewport width instead of stopping at the content column's edges. */
.hero--fullwidth,
.hero--fullscreen {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    border-radius: 0;
}

.hero--fullwidth {
    padding: 3rem 1.5rem;
}

@media (min-width: 768px) {
    .hero--fullwidth {
        padding: 4rem 1.5rem;
    }
}

.hero--fullscreen {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2rem 1.5rem;
    /* 100vh is the fallback for browsers without dvh support. The line
       below overrides it where dvh is supported, subtracting the sticky
       header's real measured height (--site-header-height, set from
       base.html) so the hero fills exactly the viewport space below the
       header instead of pushing a sliver of itself past the fold - which
       is what causes the "extra scroll" / overflow feeling on mobile. Using
       min-height rather than a fixed height means long text still grows
       the section instead of getting clipped. */
    min-height: 100vh;
    min-height: calc(100dvh - var(--site-header-height, 0px));
}

.hero--fullscreen .hero__inner {
    width: 100%;
}

@media (max-width: 640px) {
    .hero--fullscreen {
        padding: 1.5rem 1rem;
    }
}

.hero__bg,
.hero__image {
    object-fit: cover;
}

/* .hero-layout--split's <div class="grid md:grid-cols-2"> is a single
   implicit column until the md breakpoint, so text/image already stack
   vertically (text first, image below) on mobile with no extra rules
   needed here. */