/*
 * blok8 — "Step onto the set." (demo14 .h17-join): the closing banner under the same key light
 * rig as the hero, then the title and the Join action. On the home page it sits right above the
 * footer; its height is tunable:
 *   --h17-join-min-h      minimum height of the whole block (0px = the source look); extra height
 *                         goes to the banner picture, which then crops (object-fit: cover)
 *   --h17-join-rig-ratio  banner aspect ratio on desktop (source 1920 / 640)
 *   --h17-join-rig-ratio-phone  the same below 900px (source 4 / 5)
 *   --h17-join-pad-b      space under the text (source clamp(96px, 10vw, 160px))
 * js/blok8.js copies cfg.minHeight / rigRatio / rigRatioPhone / paddingBottom into them.
 */
.h17-join {
    --k-edge: clamp(16px, 3.4vw, 56px);
    --k-opsz: "opsz" 12;
    --k-ease: cubic-bezier(.2, .7, .15, 1);
    --h17-join-min-h: 0px;
    --h17-join-rig-ratio: 1920 / 640;
    --h17-join-rig-ratio-phone: 4 / 5;
    --h17-join-pad-b: clamp(96px, 10vw, 160px);
    color: var(--k-ink); font-family: var(--k-sans); font-variation-settings: var(--k-opsz);
}
.h17-join :where(*) { color: inherit; }
.h17-join ul { list-style: none; margin: 0; padding: 0; }
.h17-join .h17-wrap { width: 100%; max-width: 1720px; margin: 0 auto; padding: 0 var(--k-edge); }

/* ── actions ──────────────────────────────────────────────────────────────────────────── */
.h17-join .h17-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; }
.h17-join .h17-btn {
    display: inline-flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 32px;
    border-radius: 999px; background: var(--k-yellow); color: var(--k-dark);
    font: 700 16px/1 var(--k-sans); text-decoration: none;
    transition: background 220ms ease, transform 180ms var(--k-ease);
}
.h17-join .h17-btn:hover { background: #ffc83d; transform: translateY(-2px); }
.h17-join .h17-btn:active { transform: scale(0.97); }
.h17-join .h17-link {
    display: inline-flex; align-items: center; min-height: 44px; font: 700 16px/1.2 var(--k-sans);
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 7px;
    text-decoration-color: rgb(255 207 148 / 0.6); transition: color 200ms ease, text-decoration-color 200ms ease;
}
.h17-join .h17-link:hover { color: var(--k-warm); text-decoration-color: var(--k-warm); }
.h17-join a:focus-visible, .h17-join button:focus-visible { outline: 2px solid var(--k-warm); outline-offset: 3px; }

/* ── the key light rig ────────────────────────────────────────────────────────────────── */
/* A dim base picture, then two masked colour layers. Each layer moves to the light with a
   transform while its picture moves back by the same amount, so the picture stays in register. */
.h17-join .h17-rig {
    --kx: 52cqw; --ky: 30cqh; --d-soft: 92cqw; --d-hard: 54cqw;
    position: relative; margin: 0; overflow: hidden; container-type: size; background: #080b0a;
}
.h17-join .h17-rig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.h17-join .h17-rig__dim { position: absolute; inset: 0; filter: grayscale(0.9) brightness(0.22) contrast(1.1); }
.h17-join .h17-key {
    --d: var(--d-soft);
    position: absolute; left: calc(var(--d) / -2); top: calc(var(--d) / -2); width: var(--d); height: var(--d);
    transform: translate3d(var(--kx), var(--ky), 0); will-change: transform;
    -webkit-mask-image: radial-gradient(closest-side, #000 30%, rgb(0 0 0 / 0.8) 55%, rgb(0 0 0 / 0.25) 80%, transparent);
    mask-image: radial-gradient(closest-side, #000 30%, rgb(0 0 0 / 0.8) 55%, rgb(0 0 0 / 0.25) 80%, transparent);
    transition: opacity 700ms ease;
}
.h17-join .h17-key--hard {
    --d: var(--d-hard); opacity: 0;
    -webkit-mask-image: radial-gradient(closest-side, #000 84%, transparent 97%);
    mask-image: radial-gradient(closest-side, #000 84%, transparent 97%);
}
.h17-join .h17-key__in {
    position: absolute; left: calc(var(--d) / 2); top: calc(var(--d) / 2); width: 100cqw; height: 100cqh;
    transform: translate3d(calc(-1 * var(--kx)), calc(-1 * var(--ky)), 0); will-change: transform;
}
.h17-join .h17-key--soft img { filter: saturate(1.05) brightness(1.04); }
.h17-join .h17-key--hard img { filter: contrast(1.2) saturate(1.15) brightness(1.06); }
.h17-join .h17-key__tint {
    position: absolute; inset: 0; background-color: var(--tint); mix-blend-mode: soft-light; opacity: 0.6;
    transition: background-color 900ms ease;
}
.h17-join .h17-spill {
    position: absolute; left: 0; top: 0; z-index: -1; width: 1400px; height: 1400px; margin: -700px 0 0 -700px;
    pointer-events: none; color: var(--spill); opacity: 0.17;
    background: radial-gradient(closest-side, currentColor, transparent);
    transform: translate3d(var(--sx, 66vw), var(--sy, 36vh), 0); will-change: transform;
    transition: color 900ms ease, opacity 700ms ease;
}
.h17-join { --tint: #ffab5e; --spill: #ffc488; }
/* The block's light can be set cool / hard from cfg (js adds these classes). */
.h17-join.is-cool { --tint: #7fb6ff; --spill: #a9cfff; }
.h17-join.is-hard .h17-key--soft { opacity: 0; }
.h17-join.is-hard .h17-key--hard { opacity: 1; }

/* ── join ─────────────────────────────────────────────────────────────────────────────── */
.h17-join {
    position: relative; isolation: isolate; overflow: hidden; padding: 0 0 var(--h17-join-pad-b); background: var(--k-ground);
    display: flex; flex-direction: column; min-height: var(--h17-join-min-h);
}
.h17-join .h17-rig--join { --kx: 42cqw; --ky: 50cqh; --d-soft: 56cqw; --d-hard: 36cqw; flex: 1 0 auto; width: 100%; aspect-ratio: var(--h17-join-rig-ratio); }
.h17-join .h17-rig--join img { object-position: 42% 50%; }
.h17-join .h17-spill--join { opacity: 0.1; }
.h17-join.is-hard .h17-spill--join { opacity: 0.08; }
.h17-join__text { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: end; padding-top: clamp(56px, 6vw, 96px); }
.h17-join__title { grid-row: span 2; margin: 0; font: 500 clamp(56px, 7.6vw, 140px)/0.94 var(--k-serif); letter-spacing: -0.03em; }
.h17-join__text p { margin: 0; max-width: 36ch; font: 400 18px/1.55 var(--k-sans); color: var(--k-soft); }

/* ── tablet and phone ─────────────────────────────────────────────────────────────────── */
@media (max-width: 899px) {
    .h17-join__text { grid-template-columns: minmax(0, 1fr); }
    .h17-join__title { grid-row: auto; }
    .h17-join .h17-rig--join { aspect-ratio: var(--h17-join-rig-ratio-phone); --kx: 42cqw; --d-soft: 150cqw; --d-hard: 90cqw; }
}
@media (max-width: 575px) {
    .h17-join .h17-actions .h17-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .h17-join *, .h17-join *::before, .h17-join *::after { transition-duration: 1ms !important; transition-delay: 0ms !important; }
}