/*
 * Shared responsive typography safeguards.
 * These rules preserve all copy while preventing large type from being
 * cropped by tight line boxes, narrow grid columns or small viewports.
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: clip;
}

main :where(section, article, div, header, footer, nav),
main :where(h1, h2, h3, h4, h5, h6, p, a, button, span, li) {
    min-inline-size: 0;
}

:where(h1, h2, h3, h4, h5, h6, .contact-kicker) {
    max-inline-size: 100%;
    overflow: visible !important;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    -webkit-hyphens: auto;
    text-wrap: balance;
    padding-block: 0.08em 0.16em;
}

:where(p, li, label, button, a) {
    max-inline-size: 100%;
    overflow-wrap: break-word;
}

.hero-title,
.liquid-glass-title,
.cases-hero-gradient,
.workflow-title,
.contact-title,
.contact-kicker,
.about-story-copy h1,
.about-manifest h2,
.ai-copy h2,
.services-section-title {
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.hero-title {
    line-height: 1.04 !important;
    padding-block: 0.12em 0.28em !important;
}

.liquid-glass-title::before {
    transform: translate3d(0, 0.04em, 0) !important;
}

.frame-scroll-copy {
    overflow: visible !important;
    padding-block: 0.08em 0.2em;
}

.cta-button,
.about-contact-button,
.contact-action {
    max-inline-size: 100%;
}

/* German labels are naturally longer; keep the signature display type
 * intact while fitting the same responsive columns. */
html[lang="de"] .hero-title {
    font-size: clamp(3.6rem, 7.6vw, 8rem) !important;
}

html[lang="de"] .cases-hero-title {
    font-size: clamp(3.25rem, 6.2vw, 5.8rem);
    line-height: 0.96;
    overflow-wrap: normal;
}

html[lang="de"] .cases-hero-gradient {
    font-size: clamp(3rem, 4.7vw, 4.9rem) !important;
}

/* Wide screens still use bounded content columns, so cap the type to those
 * columns instead of letting it keep growing with the monitor width. */
@media (min-width: 768px) {
    .about-story-copy h1.cases-hero-gradient {
        font-size: clamp(3.15rem, 5vw, 5.15rem);
        line-height: 1.04;
    }

    .about-manifest h2 {
        font-size: clamp(3.4rem, 5.6vw, 6rem);
        line-height: 0.98;
    }

    .liquid-glass-title {
        font-size: clamp(3.35rem, 4.7vw, 5.05rem) !important;
        line-height: 1.02 !important;
        padding-block: 0.12em 0.28em;
    }

    .workflow-title {
        line-height: 0.98;
    }
}

@media (max-width: 767px) {
    .footer-safe-bottom {
        padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)) !important;
    }

    .hero-title {
        font-size: clamp(2rem, 10.4vw, 4.25rem) !important;
        line-height: 1.04 !important;
        letter-spacing: -0.045em !important;
    }

    .diensten-page-title {
        font-size: clamp(3.25rem, 17vw, 5.8rem) !important;
        line-height: 0.96 !important;
    }

    .diensten-hero h1,
    .liquid-glass-title {
        font-size: clamp(2.2rem, 10.2vw, 4.1rem) !important;
        line-height: 1.06 !important;
    }

    .about-story-copy h1,
    .about-manifest h2,
    .ai-copy h2,
    .contact-title,
    .services-section-title {
        line-height: 1.04 !important;
    }

    .workflow-title {
        font-size: clamp(2rem, 11.25vw, 3.4rem) !important;
        line-height: 1 !important;
    }

    .contact-kicker {
        line-height: 0.98 !important;
    }

    html[lang="de"] .hero-title {
        font-size: clamp(1.8rem, 8.2vw, 3.4rem) !important;
    }

    html[lang="de"] .cases-hero-title {
        font-size: clamp(2.5rem, 10.7vw, 3.8rem);
    }

    html[lang="de"] .cases-hero-gradient {
        font-size: clamp(2.15rem, 11.25vw, 3.7rem) !important;
    }

    html[lang="de"] .liquid-glass-title {
        font-size: clamp(2.05rem, 9.3vw, 3.8rem) !important;
    }

    html[lang="de"] .service-detail-copy h2 {
        font-size: clamp(2.1rem, 9.4vw, 3rem) !important;
    }

    html[lang="de"] footer .grid.grid-cols-2.md\:grid-cols-5 > div:nth-child(3) {
        grid-column: 1 / -1;
    }

    .cta-button,
    .about-contact-button,
    .contact-action {
        min-block-size: 3.5rem;
        block-size: auto;
        white-space: normal;
        text-align: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 390px) {
    .about-story-copy h1,
    .about-manifest h2,
    .ai-copy h2,
    .contact-title {
        font-size: clamp(2.5rem, 13.5vw, 3.35rem) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    :where(h1, h2, h3, h4, h5, h6) {
        scroll-behavior: auto;
    }
}