/* ========================================================================== */
/* EVERKLIN mobile responsive system                                          */
/* Compact, image-led mobile chapters while preserving every page template.   */
/* ========================================================================== */

@media (max-width: 900px) {
    html {
        overflow-x: clip;
        scroll-padding-top: 84px;
    }

    body.everklin-transformed {
        width: 100%;
        overflow-x: clip;
    }

    body.everklin-transformed main,
    body.everklin-transformed main :where(section, article, div, header, footer, nav, form, fieldset) {
        min-width: 0;
    }

    body.everklin-transformed :where(img, picture, video, canvas, svg) {
        max-width: 100%;
    }

    body.everklin-transformed :where(h1, h2, h3, h4, p, li, a, button, label, th, td) {
        overflow-wrap: anywhere;
    }

    body.everklin-transformed :where(.container, .corp-shell, .enterprise-container) {
        width: 100%;
        max-width: 100%;
        padding-right: 20px;
        padding-left: 20px;
    }

    /* Image-led inner heroes: one clear image, one readable content panel. */
    body.everklin-transformed :is(
        .iic-hub-hero,
        .sfh-hero,
        .fpp-hero,
        .fsv2-hero,
        .sp-hero,
        .anchor-hero,
        .contact-hero,
        .industry-page-hero,
        .solutions-hero,
        .industries-hub__hero,
        .iic-hero,
        .wsp-hero,
        .sn-hero,
        .wt-hero,
        .brewery-hero,
        .wip-hero
    ) {
        min-height: 660px !important;
    }

    body.everklin-transformed :is(
        .iic-hub-hero__grid,
        .sfh-hero__grid,
        .fpp-hero__grid,
        .fsv2-hero__inner,
        .sp-hero__grid,
        .anchor-hero-grid,
        .contact-hero__scene,
        .industry-page-hero-grid
    ) {
        min-height: 660px !important;
        padding: 138px 18px 20px !important;
    }

    body.everklin-transformed main:not(.corp-home) .iic-hero {
        min-height: 660px !important;
        padding: 138px 18px 20px !important;
    }

    body.everklin-transformed :is(
        .solutions-hero__copy,
        .industries-hub__hero-inner > div:first-child,
        .iic-hub-hero__copy,
        .sfh-hero__copy,
        .fpp-hero__copy,
        .fsv2-hero__copy,
        .sp-hero__copy,
        .anchor-hero-copy,
        .sn-hero__copy,
        .contact-hero__copy,
        .industry-page-hero-copy,
        .brewery-hero__copy,
        .wip-hero__copy,
        .iic-hero__content
    ) {
        width: 100% !important;
        max-width: none !important;
        min-height: 0 !important;
        padding: 25px 23px !important;
        border-radius: 7px !important;
    }

    body.everklin-transformed :is(
        .solutions-hero__copy,
        .industries-hub__hero-inner > div:first-child,
        .iic-hub-hero__copy,
        .sfh-hero__copy,
        .fpp-hero__copy,
        .fsv2-hero__copy,
        .sp-hero__copy,
        .anchor-hero-copy,
        .sn-hero__copy,
        .contact-hero__copy,
        .industry-page-hero-copy,
        .brewery-hero__copy,
        .wip-hero__copy,
        .iic-hero__content
    ) :where(h1, .hero-title) {
        max-width: 100% !important;
        font-size: clamp(2.45rem, 8.4vw, 3.4rem) !important;
        line-height: 1.01 !important;
    }

    body.everklin-transformed :is(
        .solutions-hero__copy,
        .industries-hub__hero-inner > div:first-child,
        .iic-hub-hero__copy,
        .sfh-hero__copy,
        .fpp-hero__copy,
        .fsv2-hero__copy,
        .sp-hero__copy,
        .anchor-hero-copy,
        .sn-hero__copy,
        .contact-hero__copy,
        .industry-page-hero-copy,
        .brewery-hero__copy,
        .wip-hero__copy,
        .iic-hero__content
    ) :where(p, .iic-lead) {
        font-size: .94rem !important;
        line-height: 1.55 !important;
    }

    /* The shared company/resources hero keeps the same composition with less dead space. */
    body.everklin-transformed .ek-inner-home-hero {
        min-height: 0 !important;
        background-size: auto 292px !important;
    }

    body.everklin-transformed .ek-inner-home-hero::before {
        background: linear-gradient(180deg, rgba(247, 248, 239, .03) 0, rgba(247, 248, 239, .05) 215px, rgba(247, 248, 239, .82) 292px, rgba(247, 248, 239, 1) 100%) !important;
    }

    body.everklin-transformed .ek-inner-home-hero__inner {
        min-height: 0 !important;
        padding: 218px 18px 20px !important;
    }

    body.everklin-transformed .ek-inner-home-hero__panel {
        padding: 26px 24px !important;
    }

    body.everklin-transformed .ek-inner-home-hero__panel h1 {
        max-width: 100%;
        font-size: clamp(2.4rem, 8.2vw, 3.25rem) !important;
        line-height: 1.02 !important;
    }

    /* Stable touch controls and horizontally scrollable tab/table surfaces. */
    body.everklin-transformed :where(
        .product-sticky-nav,
        .product-tabs,
        .fph-category-tabs,
        .fph-technical-tabs,
        .sample-tabs__list,
        [role="tablist"]
    ) {
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
    }

    body.everklin-transformed :where(
        .product-sticky-nav,
        .product-tabs,
        .fph-category-tabs,
        .fph-technical-tabs,
        .sample-tabs__list,
        [role="tablist"]
    )::-webkit-scrollbar {
        display: none;
    }

    body.everklin-transformed :where([role="tablist"] > button, .product-tabs a, .product-tabs button) {
        flex: 0 0 auto;
        scroll-snap-align: start;
    }

    body.everklin-transformed :where(
        .responsive-table,
        .sample-table-wrap,
        .fph-table-wrap,
        .table-wrap,
        [class*="table-wrap"]
    ) {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    body.everklin-transformed :where(
        .responsive-table table,
        .sample-table-wrap table,
        .fph-table-wrap table,
        [class*="table-wrap"] table
    ) {
        min-width: 680px;
    }

    body.everklin-transformed :where(
        [class*="diagram"],
        [class*="process-visual"],
        [class*="process-stage"],
        [class*="living-process"]
    ) {
        max-width: 100%;
    }

    body.everklin-transformed :where(
        [class*="diagram"],
        [class*="process-visual"],
        [class*="living-process"]
    ) :where(img, svg, canvas) {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    /* Forms, buttons and cards stay within the viewport. */
    body.everklin-transformed :where(input, select, textarea, button) {
        max-width: 100%;
    }

    body.everklin-transformed :where(.page-actions, .corp-actions, .hero-actions, [class*="hero__actions"]) {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }

    body.everklin-transformed :where(.request-form__grid, .contact-details-grid, .contact-callback__grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    body.everklin-transformed :where(
        .anchor-card,
        .industry-challenge-card,
        .industry-solution-card,
        .contact-document-card
    ) {
        min-width: 0;
    }
}

@media (max-width: 720px) {
    /* Homepage carousel: preserve the cinematic image while reducing panel height. */
    body.everklin-transformed .corp-home .corp-hero,
    body.everklin-transformed .corp-home .corp-hero__inner {
        height: 830px !important;
        min-height: 830px !important;
    }

    body.everklin-transformed .corp-home .corp-hero__inner {
        padding: 210px 0 18px !important;
    }

    body.everklin-transformed .corp-home .corp-hero__content {
        height: 594px !important;
        min-height: 594px !important;
        padding: 23px 21px 19px !important;
    }

    body.everklin-transformed .corp-home .corp-hero h1 {
        font-size: clamp(2.35rem, 10vw, 2.85rem) !important;
        line-height: .99 !important;
    }

    body.everklin-transformed .corp-home .corp-hero__slide[data-corp-slide-key="building"] > .corp-hero__background {
        object-position: 84% center !important;
    }

    body.everklin-transformed .corp-home .corp-hero__panel-footer {
        gap: 13px;
        padding-top: 14px;
    }

    body.everklin-transformed .corp-home .corp-hero__search {
        min-height: 50px;
    }

    body.everklin-transformed .corp-home .corp-hero__search input {
        min-width: 0;
        padding-left: 15px;
    }

    body.everklin-transformed .corp-home .corp-hero__search button {
        min-width: 88px;
    }

    /* Consistent section rhythm: enough air, without full-screen gaps. */
    body.everklin-transformed :where(
        .corp-businesses,
        .corp-purpose,
        .corp-innovation,
        .corp-commitment,
        .corp-impact,
        .corp-trust,
        .corp-updates,
        .anchor-section,
        .industry-section,
        .contact-section,
        .solutions-section,
        .sn-section,
        .wsp-section,
        .fpp-section,
        .sfh-section,
        .iic-section
    ) {
        min-height: 0 !important;
        padding-top: 52px !important;
        padding-bottom: 52px !important;
    }

    body.everklin-transformed :where(
        .corp-section-head,
        .industry-section-heading,
        .contact-section-head,
        .fpp-section-heading,
        .anchor-section-head
    ) {
        gap: 14px !important;
        margin-bottom: 26px !important;
    }

    body.everklin-transformed :where(
        .corp-section-head,
        .industry-section-heading,
        .contact-section-head,
        .fpp-section-heading,
        .anchor-section-head
    ) h2 {
        font-size: clamp(2rem, 8.8vw, 2.7rem) !important;
        line-height: 1.03 !important;
    }

    body.everklin-transformed :where(
        .anchor-card-grid,
        .industry-challenge-grid,
        .industry-solution-grid,
        .industry-benefit-grid,
        .industry-related-grid,
        .contact-document-grid,
        .sample-benefit-grid,
        .sample-selection__grid,
        .sample-related__grid,
        .fph-benefit-grid
    ) {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 14px !important;
    }

    body.everklin-transformed :where(.anchor-card, .industry-challenge-card, .industry-solution-card) {
        padding: 22px 20px !important;
    }
}

@media (max-width: 620px) {
    body.everklin-transformed :where(.container, .corp-shell, .enterprise-container) {
        padding-right: 16px;
        padding-left: 16px;
    }

    body.everklin-transformed :is(
        .iic-hub-hero,
        .sfh-hero,
        .fpp-hero,
        .fsv2-hero,
        .sp-hero,
        .anchor-hero,
        .contact-hero,
        .industry-page-hero,
        .solutions-hero,
        .industries-hub__hero,
        .iic-hero,
        .wsp-hero,
        .sn-hero,
        .wt-hero,
        .brewery-hero,
        .wip-hero
    ) {
        min-height: 620px !important;
    }

    body.everklin-transformed :is(
        .iic-hub-hero__grid,
        .sfh-hero__grid,
        .fpp-hero__grid,
        .fsv2-hero__inner,
        .sp-hero__grid,
        .anchor-hero-grid,
        .contact-hero__scene,
        .industry-page-hero-grid
    ) {
        min-height: 620px !important;
        padding: 116px 14px 16px !important;
    }

    body.everklin-transformed main:not(.corp-home) .iic-hero {
        min-height: 620px !important;
        padding: 116px 14px 16px !important;
    }

    body.everklin-transformed :is(
        .solutions-hero__copy,
        .industries-hub__hero-inner > div:first-child,
        .iic-hub-hero__copy,
        .sfh-hero__copy,
        .fpp-hero__copy,
        .fsv2-hero__copy,
        .sp-hero__copy,
        .anchor-hero-copy,
        .sn-hero__copy,
        .contact-hero__copy,
        .industry-page-hero-copy,
        .brewery-hero__copy,
        .wip-hero__copy,
        .iic-hero__content
    ) {
        padding: 22px 20px !important;
    }

    body.everklin-transformed :is(
        .solutions-hero__copy,
        .industries-hub__hero-inner > div:first-child,
        .iic-hub-hero__copy,
        .sfh-hero__copy,
        .fpp-hero__copy,
        .fsv2-hero__copy,
        .sp-hero__copy,
        .anchor-hero-copy,
        .sn-hero__copy,
        .contact-hero__copy,
        .industry-page-hero-copy,
        .brewery-hero__copy,
        .wip-hero__copy,
        .iic-hero__content
    ) :where(h1, .hero-title) {
        font-size: clamp(2.15rem, 10vw, 2.75rem) !important;
    }

    body.everklin-transformed .ek-inner-home-hero {
        background-size: auto 250px !important;
    }

    body.everklin-transformed .ek-inner-home-hero__inner {
        padding: 184px 14px 16px !important;
    }

    body.everklin-transformed .ek-inner-home-hero__panel {
        padding: 23px 20px !important;
    }

    body.everklin-transformed .ek-inner-home-hero__panel h1 {
        font-size: clamp(2.15rem, 10vw, 2.7rem) !important;
    }

    body.everklin-transformed :where(.page-actions, .corp-actions, .hero-actions, [class*="hero__actions"]) > :where(a, button) {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 390px) {
    body.everklin-transformed .corp-home .corp-hero,
    body.everklin-transformed .corp-home .corp-hero__inner {
        height: 850px !important;
        min-height: 850px !important;
    }

    body.everklin-transformed .corp-home .corp-hero__inner {
        padding-top: 204px !important;
    }

    body.everklin-transformed .corp-home .corp-hero__content {
        height: 620px !important;
        min-height: 620px !important;
        padding-right: 18px !important;
        padding-left: 18px !important;
    }

    body.everklin-transformed .corp-home .corp-hero h1 {
        font-size: clamp(2.22rem, 10.2vw, 2.55rem) !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.everklin-transformed *,
    body.everklin-transformed *::before,
    body.everklin-transformed *::after {
        scroll-behavior: auto !important;
    }
}