/**
 * Feature Panel — Dance Quest home section 3. Live values: 182px top / 150px
 * bottom padding, 59% black multiply overlay, 100px white slant on top, box
 * with 14% white fill and 40px padding, 42px Times New Roman heading, 24px
 * white text at 1.3 line height.
 */
.featurepanel {
    position: relative;
    padding: 182px var(--section-hr-padding, 64px) 150px;
    background-color: rgba(0, 0, 0, var(--featurepanel-overlay, 0.59));
    background-image: var(--featurepanel-bg, none);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center top;
    overflow: hidden;
}

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

.featurepanel-box {
    position: relative;
    z-index: 1;
    width: 80%; /* Divi's 80% column */
    max-width: none;
    margin-inline: auto;
    padding: 40px;
    background: rgba(255, 255, 255, 0.14);
    text-align: center;
    color: var(--primary-foreground, #ffffff);
}

.featurepanel-heading {
    margin: 0 0 12px;
    font-family: var(--font-display, "Times New Roman", Georgia, Times, serif);
    font-weight: var(--font-display-weight, 400);
    font-size: 42px;
    line-height: 1.1;
    color: var(--primary-foreground, #ffffff);
}

.featurepanel-text {
    margin: 0 0 24px;
    font-family: var(--font-paragraph, "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
    font-size: 24px;
    line-height: 1.3;
}

@media (max-width: 767px) {
    .featurepanel { padding-block: 120px 80px; }
    .featurepanel::before { height: 50px; }
    .featurepanel-box { width: 80%; padding: 24px; }
    .featurepanel-heading { font-size: 30px; }
    .featurepanel-text { font-size: 18px; }
}

/* DANCEQUEST column — the box sets its own 80% width, so no side padding. */
.featurepanel { padding-inline: 0; }