/*
 * Section head — kicker, title between two stars, and the 100px hairline.
 * Loaded on every page (see functions.php enqueue()).
 *
 * Reference: prod's section headings — Montserrat 16/20 gold over Playfair
 * 40/48 uppercase, 16px apart, centred.
 *
 * The home page, the events archive and the event page still carry their own
 * copies of this block (`schedule__kicker`, `events__title`, …). They were
 * measured against prod one by one and are left alone until there is a reason
 * to touch them; new sections use this one.
 */

.section-head {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            16px;
    text-align:     center;
}

.section-head__kicker {
    margin:         0;
    font-family:    var(--font-body);
    font-weight:    400;
    font-size:      16px;
    line-height:    1.25;
    text-transform: uppercase;
    color:          var(--color-primary);
}

.section-head__title {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             16px;
    margin:          0;
    font-family:     var(--font-heading);
    font-weight:     400;
    font-size:       40px;
    line-height:     1.2;
    text-transform:  uppercase;
    color:           var(--color-text);
}

.section-head__deco {
    flex-shrink: 0;
    width:       22.92px;
    height:      24px;
}

.section-head__deco--left {
    transform: scaleX(-1);
}

.section-head__rule {
    width:      100px;
    height:     1px;
    background: linear-gradient(90deg,
                    rgba(157, 136, 82, 0) 0%,
                    #d0b46d 49.8%,
                    rgba(106, 92, 56, 0) 100%);
}

/* ── Tablet ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {

    .section-head__title {
        font-size: 32px;
    }
}

/* ── Phone ─────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {

    .section-head__title {
        gap:       10px;
        font-size: 24px;
    }

    .section-head__deco {
        width:  13.4px;
        height: 14px;
    }
}