/* Interior Hero — component-scoped styles
 *
 * The semi-transparent white overlay cannot be expressed as a single Tailwind
 * utility, so it lives here. All other styles use Tailwind utilities in the
 * block PHP template.
 */

.interior-hero__overlay {
    background: rgba(255, 255, 255, 0.7);
}

/* Headline sizing: the responsive ramp lives on the .ms-dual-heading wrapper in
   the block template (Tailwind text-2xl sm:text-3xl md:text-4xl lg:text-[6rem]),
   which also drives the block-editor preview (the editor loads dist/main.css,
   not this file). Below the desktop breakpoint we pin BOTH lines to 3.75rem on
   the front end to match the careers-page banner; desktop (>=1024px) keeps the
   larger wrapper-driven size. The two-class selector outranks the component's
   `.ms-dual-heading > *` rule, and this file is enqueued unlayered so it also
   beats the Tailwind utilities.

   min(3.75rem, 12vw): a true 3.75rem at ~500px and up (tablets + normal
   phones), scaling down on the narrowest phones so long single-word headlines
   (e.g. "DISTRIBUTORS") don't overflow and clip — the section hides overflow. */
@media (max-width: 1023px) {
    .interior-hero .ms-dual-heading__cursive,
    .interior-hero .ms-dual-heading__sans {
        font-size: min(3.75rem, 12vw);
    }
}