/* cms2 jumbotron */
.cms2-jumbo {
    position: relative;
    overflow: hidden;
    color: #fff;
    background: #14171b;
    display: flex;
}
.cms2-jumbo-full   { min-height: 100vh; }
.cms2-jumbo-large  { min-height: clamp(480px, 70vh, 700px); }
.cms2-jumbo-medium { min-height: clamp(340px, 48vh, 520px); }
.cms2-jumbo-small  { min-height: clamp(220px, 32vh, 360px); }

.cms2-jumbo-media { position: absolute; inset: 0; background-position: center; background-size: cover; }
.cms2-jumbo-shade { position: absolute; inset: 0; }
.cms2-jumbo-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: clamp(28px, 5vw, 64px);
    justify-content: center;
}
.cms2-jumbo-pos-top .cms2-jumbo-inner { justify-content: flex-start; }
.cms2-jumbo-pos-bottom .cms2-jumbo-inner { justify-content: flex-end; }
.cms2-jumbo-align-left .cms2-jumbo-inner { text-align: left; align-items: flex-start; }
.cms2-jumbo-align-center .cms2-jumbo-inner { text-align: center; align-items: center; }
.cms2-jumbo-align-right .cms2-jumbo-inner { text-align: right; align-items: flex-end; }

.cms2-jumbo-heading {
    margin: 0 0 12px;
    font-size: clamp(30px, 4.6vw, 60px);
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -.01em;
}
.cms2-jumbo-text { font-size: 16px; line-height: 1.6; max-width: 640px; color: rgba(255,255,255,.9); }
.cms2-jumbo-text p { margin: 0 0 10px; }
.cms2-jumbo-actions { margin: 22px 0 0; }
.cms2-btn-jumbo { background: #fff; color: #111; }
.cms2-btn-jumbo:hover { opacity: .85; }

/* layout B: inset rounded */
.cms2-jumbo-b-wrap { padding: clamp(22px, 4vw, 48px); }
.cms2-jumbo-b { border-radius: 18px; }

/* Photo for this section, and the mobile one when it has been supplied.
 *
 * cms2_bg_style() emits --cms2-bg (always) and --cms2-bg-m (only when the
 * "Image (mobile)" slot is filled), and nothing else — no inline
 * `background-image`, because an inline style would outrank the media query
 * below and the swap would silently never happen.
 *
 * The swap is CSS rather than PHP because one cached HTML file serves every
 * visitor: the server must not pick a photo per device. The fallback chain means
 * a section with no mobile image keeps the desktop one.
 */
.cms2-jumbo-media { background-image: var(--cms2-bg); }
@media (max-width: 760px) {
    .cms2-jumbo-media { background-image: var(--cms2-bg-m, var(--cms2-bg)); }
}