/* KM-WEBSITE cooperation-like hero template (flex all except cooperation)
   Scope: only .km-coop-like-hero-flex sections inserted by this script.
   Template memory:
   - image slightly moves to the right;
   - text slightly moves to the left;
   - handle page-specific text and image situations flexibly via CSS vars.
*/

.km-coop-like-hero-flex,
.km-coop-like-hero-flex * {
    box-sizing: border-box;
}

.km-coop-like-hero-flex {
    --kmclh-center-left: 26%;
    --kmclh-center-right: 17%;
    --kmclh-copy-left: 28px;
    --kmclh-copy-width: 430px;
    --kmclh-title-size: clamp(46px, 4.2vw, 60px);
    --kmclh-desc-size: clamp(17px, 1.15vw, 20px);
    --kmclh-left-dim-width: 48%;
    position: relative;
    height: 560px;
    min-height: 520px;
    max-height: 640px;
    overflow: hidden;
    isolation: isolate;
    background: #111827;
}

.km-coop-like-hero-flex .kmclh-blur-bg,
.km-coop-like-hero-flex .kmclh-center-image,
.km-coop-like-hero-flex .kmclh-side-soft,
.km-coop-like-hero-flex .kmclh-global-dim,
.km-coop-like-hero-flex .kmclh-left-dim {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.km-coop-like-hero-flex .kmclh-blur-bg {
    z-index: 0;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(22px);
    transform: scale(1.12);
    opacity: 0.86;
}

.km-coop-like-hero-flex .kmclh-center-image {
    z-index: 1;
    left: var(--kmclh-center-left);
    right: var(--kmclh-center-right);
    width: auto;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.02);
}

.km-coop-like-hero-flex .kmclh-side-soft {
    z-index: 2;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: blur(14px);
    transform: scale(1.05);
    opacity: 0.52;
}

.km-coop-like-hero-flex .kmclh-side-soft-left {
    right: auto;
    width: 30%;
    clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%);
}

.km-coop-like-hero-flex .kmclh-side-soft-right {
    left: auto;
    width: 28%;
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0 100%);
}

.km-coop-like-hero-flex .kmclh-global-dim {
    z-index: 3;
    background:
        linear-gradient(90deg, rgba(6, 10, 19, 0.42) 0%, rgba(6, 10, 19, 0.26) 31%, rgba(6, 10, 19, 0.18) 63%, rgba(6, 10, 19, 0.32) 100%),
        linear-gradient(180deg, rgba(6, 10, 19, 0.16) 0%, rgba(6, 10, 19, 0.12) 50%, rgba(6, 10, 19, 0.22) 100%);
}

.km-coop-like-hero-flex .kmclh-left-dim {
    z-index: 4;
    width: var(--kmclh-left-dim-width);
    right: auto;
    background: linear-gradient(90deg, rgba(6, 10, 19, 0.38) 0%, rgba(6, 10, 19, 0.24) 58%, rgba(6, 10, 19, 0) 100%);
}

.km-coop-like-hero-flex .kmclh-container {
    position: relative;
    z-index: 5;
    height: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 32px;
}

.km-coop-like-hero-flex .kmclh-copy {
    position: absolute;
    left: var(--kmclh-copy-left);
    top: 42%;
    transform: translateY(-50%);
    width: min(var(--kmclh-copy-width), calc(100vw - 64px));
    color: #fff;
    text-align: left;
}

.km-coop-like-hero-flex .kmclh-breadcrumb {
    margin-bottom: 16px;
    font-size: 14px;
    line-height: 1.5;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

.km-coop-like-hero-flex .kmclh-copy h1 {
    margin: 0 0 20px 0;
    color: #fff;
    font-size: var(--kmclh-title-size);
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: 0.01em;
    text-shadow: 0 5px 18px rgba(0, 0, 0, 0.28);
}

.km-coop-like-hero-flex .kmclh-copy p {
    margin: 0;
    max-width: var(--kmclh-copy-width);
    color: rgba(255, 255, 255, 0.96);
    font-size: var(--kmclh-desc-size);
    line-height: 1.88;
    font-weight: 560;
    letter-spacing: 0.01em;
    text-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
}

@media (max-width: 1199px) {
    .km-coop-like-hero-flex .kmclh-copy {
        width: min(var(--kmclh-copy-width), calc(100vw - 64px));
    }
}

@media (max-width: 991px) {
    .km-coop-like-hero-flex {
        height: 500px;
        min-height: 460px;
    }

    .km-coop-like-hero-flex .kmclh-center-image {
        left: 15%;
        right: 8%;
    }

    .km-coop-like-hero-flex .kmclh-copy {
        left: 22px;
        width: min(420px, calc(100vw - 44px));
    }

    .km-coop-like-hero-flex .kmclh-copy h1 {
        font-size: clamp(38px, 7vw, 50px);
    }

    .km-coop-like-hero-flex .kmclh-copy p {
        font-size: 16px;
        line-height: 1.74;
    }
}

@media (max-width: 767px) {
    .km-coop-like-hero-flex {
        height: 440px;
        min-height: 420px;
    }

    .km-coop-like-hero-flex .kmclh-center-image {
        left: 0;
        right: 0;
    }

    .km-coop-like-hero-flex .kmclh-left-dim {
        width: 100%;
        background: linear-gradient(90deg, rgba(6, 10, 19, 0.48) 0%, rgba(6, 10, 19, 0.34) 70%, rgba(6, 10, 19, 0.14) 100%);
    }

    .km-coop-like-hero-flex .kmclh-copy {
        left: 18px;
        top: 46%;
        width: calc(100vw - 36px);
    }

    .km-coop-like-hero-flex .kmclh-copy h1 {
        margin-bottom: 16px;
        font-size: clamp(32px, 9vw, 40px);
    }

    .km-coop-like-hero-flex .kmclh-copy p {
        font-size: 15px;
        line-height: 1.68;
    }
}

/* ==========================================================================
   KM RESPONSIVE FIX: cooperation-like hero template
   Purpose:
   - Keep desktop visual effect largely unchanged;
   - Tablet: reduce type pressure and preserve readable safe zone;
   - Mobile: stop absolute-position clipping by switching copy block to flow-safe layout.
   ========================================================================== */

.km-coop-like-hero-flex {
    overflow: hidden;
}

/* Desktop fine-tune: preserve accepted look, with slightly safer text area */
@media (min-width: 1200px) {
    .km-coop-like-hero-flex .kmclh-copy {
        left: max(18px, var(--kmclh-copy-left));
    }
}

/* Tablet / narrow desktop */
@media (max-width: 1100px) {
    .km-coop-like-hero-flex {
        height: auto;
        min-height: 540px;
    }

    .km-coop-like-hero-flex .kmclh-container {
        min-height: 540px;
    }

    .km-coop-like-hero-flex .kmclh-copy {
        top: 48%;
        width: min(440px, calc(100vw - 52px));
    }

    .km-coop-like-hero-flex .kmclh-copy h1 {
        font-size: clamp(34px, 5.4vw, 48px);
        line-height: 1.16;
        margin-bottom: 16px;
    }

    .km-coop-like-hero-flex .kmclh-copy p {
        font-size: 16px;
        line-height: 1.72;
        max-width: min(440px, calc(100vw - 52px));
    }
}

/* Tablet portrait */
@media (max-width: 991px) {
    .km-coop-like-hero-flex {
        height: auto;
        min-height: 520px;
    }

    .km-coop-like-hero-flex .kmclh-container {
        min-height: 520px;
        padding-left: 24px;
        padding-right: 24px;
    }

    .km-coop-like-hero-flex .kmclh-center-image {
        left: 14%;
        right: 6%;
        background-position: center center;
    }

    .km-coop-like-hero-flex .kmclh-left-dim {
        width: 68%;
        background: linear-gradient(90deg, rgba(6, 10, 19, 0.46) 0%, rgba(6, 10, 19, 0.30) 62%, rgba(6, 10, 19, 0) 100%);
    }

    .km-coop-like-hero-flex .kmclh-copy {
        left: 22px;
        top: 50%;
        width: min(420px, calc(100vw - 48px));
    }

    .km-coop-like-hero-flex .kmclh-breadcrumb {
        margin-bottom: 12px;
        font-size: 13px;
    }

    .km-coop-like-hero-flex .kmclh-copy h1 {
        font-size: clamp(32px, 6vw, 44px);
        line-height: 1.16;
        margin-bottom: 14px;
    }

    .km-coop-like-hero-flex .kmclh-copy p {
        font-size: 15.5px;
        line-height: 1.70;
        max-width: min(420px, calc(100vw - 48px));
    }
}

/* Mobile: content-safe mode.
   The copy block no longer uses absolute positioning, so long text can expand safely. */
@media (max-width: 767px) {
    .km-coop-like-hero-flex {
        height: auto;
        min-height: 0;
        padding: 92px 0 68px;
        overflow: hidden;
    }

    .km-coop-like-hero-flex .kmclh-container {
        height: auto;
        min-height: 0;
        padding-left: 18px;
        padding-right: 18px;
    }

    .km-coop-like-hero-flex .kmclh-center-image {
        left: 0;
        right: 0;
        background-position: center center;
        background-size: cover;
    }

    .km-coop-like-hero-flex .kmclh-side-soft-left,
    .km-coop-like-hero-flex .kmclh-side-soft-right {
        width: 0;
        opacity: 0;
    }

    .km-coop-like-hero-flex .kmclh-blur-bg {
        filter: blur(16px);
        transform: scale(1.08);
        opacity: 0.72;
    }

    .km-coop-like-hero-flex .kmclh-global-dim {
        background:
            linear-gradient(90deg, rgba(6, 10, 19, 0.58) 0%, rgba(6, 10, 19, 0.38) 64%, rgba(6, 10, 19, 0.24) 100%),
            linear-gradient(180deg, rgba(6, 10, 19, 0.22) 0%, rgba(6, 10, 19, 0.20) 48%, rgba(6, 10, 19, 0.30) 100%);
    }

    .km-coop-like-hero-flex .kmclh-left-dim {
        width: 100%;
        background: linear-gradient(90deg, rgba(6, 10, 19, 0.48) 0%, rgba(6, 10, 19, 0.34) 72%, rgba(6, 10, 19, 0.18) 100%);
    }

    .km-coop-like-hero-flex .kmclh-copy {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0;
    }

    .km-coop-like-hero-flex .kmclh-breadcrumb {
        margin-bottom: 10px;
        font-size: 12.5px;
        line-height: 1.5;
    }

    .km-coop-like-hero-flex .kmclh-copy h1 {
        font-size: clamp(28px, 8vw, 36px);
        line-height: 1.18;
        margin-bottom: 14px;
        word-break: keep-all;
        overflow-wrap: break-word;
    }

    .km-coop-like-hero-flex .kmclh-copy p {
        font-size: 15px;
        line-height: 1.68;
        max-width: 100%;
        word-break: normal;
        overflow-wrap: break-word;
    }
}

/* Very small phones */
@media (max-width: 430px) {
    .km-coop-like-hero-flex {
        padding-top: 84px;
        padding-bottom: 60px;
    }

    .km-coop-like-hero-flex .kmclh-copy h1 {
        font-size: clamp(26px, 7.6vw, 32px);
        line-height: 1.20;
    }

    .km-coop-like-hero-flex .kmclh-copy p {
        font-size: 14.5px;
        line-height: 1.64;
    }
}

@media (max-width: 360px) {
    .km-coop-like-hero-flex {
        padding-top: 76px;
        padding-bottom: 54px;
    }

    .km-coop-like-hero-flex .kmclh-copy h1 {
        font-size: 25px;
    }

    .km-coop-like-hero-flex .kmclh-copy p {
        font-size: 14px;
        line-height: 1.58;
    }
}