/**
 * Hero Slant — Dance Quest home hero (live Divi home, sections 0-1).
 * Live values: 150px vertical padding, 48% black multiply overlay, 80px white
 * slant on top, 55px blue slant at the bottom, uppercase 40px eyebrow with a
 * soft text shadow, 250px headline (80px on mobile).
 */
.heroslant {
    position: relative;
    padding: 150px var(--section-hr-padding, 64px) 150px;
    background-color: rgba(0, 0, 0, var(--heroslant-overlay, 0.48));
    background-image: var(--heroslant-bg, none);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
    color: var(--primary-foreground, #ffffff);
    overflow: hidden;
}

/* White wedge across the top, high on the left: the live 80px top divider. */
.heroslant::before,
.heroslant::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
}
.heroslant::before {
    top: 0;
    height: 80px;
    background: var(--background, #ffffff);
    clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* Blue wedge rising to the right along the bottom: the live 55px divider. */
.heroslant::after {
    bottom: 0;
    height: 55px;
    background: var(--primary, #325cb2);
    clip-path: polygon(100% 0, 100% 100%, 0 100%);
}

/* The solid blue band under the hero (live section 1, 15px + row padding). */
.heroslant--band {
    border-bottom: 30px solid var(--primary, #325cb2);
}

.heroslant-inner {
    position: relative;
    z-index: 1;
    max-width: 834px;
    margin-inline: auto;
}

.heroslant-eyebrow {
    margin: 0;
    font-family: var(--font-heading, "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
    font-size: 40px;
    line-height: 1.2;
    text-transform: uppercase;
    text-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.4);
}

.heroslant-headline {
    margin: 0;
    font-family: var(--font-heading, "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
    font-weight: 400;
    font-size: 250px;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.4);
    color: var(--primary-foreground, #ffffff);
}

@media (max-width: 980px) {
    .heroslant { padding-block: 100px; }
    .heroslant-eyebrow { font-size: 28px; }
    .heroslant-headline { font-size: 120px; }
}

@media (max-width: 767px) {
    .heroslant { padding-block: 130px; }
    .heroslant::before { height: 40px; }
    .heroslant::after { height: 30px; }
    .heroslant-eyebrow { font-size: 20px; }
    .heroslant-headline { font-size: 80px; }
}