/*
 * Service/marketing landing-page heroes.
 *
 * These CMS heroes carry min-h-[calc(100vh-88px)], and the compiled Hyvä
 * stylesheet turns that into min-height: calc(100vh - 88px). That pins the
 * section to the viewport and leaves a large empty band under the copy and
 * lead form, with the wave divider sitting at the bottom of the viewport.
 *
 * Size those heroes to their content. The attribute selector matches only
 * heroes that carry the viewport min-height, so content-sized heroes
 * (homepage, /magento-2-development-services, /web-design) stay as they are.
 * Specificity outranks the Tailwind utility, so no !important is needed.
 */

.tm-hero[class*="min-h-[calc(100vh"] {
    min-height: 0;
    padding-top: 4rem;
    /* Clears the absolutely positioned wave divider at the foot of the hero. */
    padding-bottom: 6rem;
}

/* Below 900px the hero grid collapses to one column and already exceeds the
   viewport height, so only the padding needs trimming. */
@media (max-width: 900px) {
    .tm-hero[class*="min-h-[calc(100vh"] {
        padding-top: 2.5rem;
        padding-bottom: 4rem;
    }
}