/**
 * Page Banner — Dance Quest inner-page banner (live About section 0).
 * Live values: 130px section padding + 33/55px row padding, 43% black
 * multiply overlay, inset 0 0 42px 36px rgba(0,0,0,.3) edge shadow, 50px
 * italic title, 3px #325cb2 rule at 25% width, 20px below the title.
 */
.pagebanner {
    padding: 163px var(--section-hr-padding, 64px) 185px;
    background-color: rgba(0, 0, 0, var(--pagebanner-overlay, 0.43));
    background-image: var(--pagebanner-bg, none);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: var(--pagebanner-pos, center bottom);
    box-shadow: inset 0 0 42px 36px rgba(0, 0, 0, 0.3);
    text-align: center;
}

.pagebanner--tall { padding-top: 183px; padding-bottom: 408px; } /* live Classes banner: 150+33 / 353+55 */

.pagebanner-title {
    margin: 0 0 20px;
    font-family: var(--font-heading, "Open Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif);
    font-style: italic;
    font-weight: 400;
    font-size: 50px;
    line-height: 1.2;
    color: var(--primary-foreground, #ffffff);
}

.pagebanner-rule {
    display: block;
    width: 25%;
    max-width: 200px;
    margin-inline: auto;
    border-top: 3px solid var(--primary, #325cb2);
}

@media (max-width: 767px) {
    .pagebanner { padding-block: 100px 110px; }
    .pagebanner--tall { padding-bottom: 200px; }
    .pagebanner-title { font-size: 36px; }
}