/*
 * Button — the gold pill the site sends visitors away with.
 * Loaded on every page (see functions.php enqueue()): the partners section
 * shows it everywhere, and the Privatkonzerte page three times over.
 *
 * Reference: prod's Elementor button global style — 42px tall, 100px radius,
 * 10px between the icon and the label, hover lifts the fill to Gold-Light.
 *
 * The event page keeps its own `.event-btn`: prod gives that template a wider,
 * less rounded button, and 1:1 wins over one button to rule them all.
 */

.btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              10px;
    padding:          10px 24px;
    border:           1px solid var(--color-primary);
    border-radius:    100px;
    background-color: var(--color-primary);
    font-family:      var(--font-body);
    font-weight:      600;
    font-size:        16px;
    line-height:      1.25;
    text-transform:   uppercase;
    color:            var(--color-bg);
    text-decoration:  none;
    white-space:      nowrap;
    cursor:           pointer;
    transition:       background-color var(--transition), border-color var(--transition);
}

.btn:hover,
.btn:focus-visible {
    border-color:     var(--color-accent);
    background-color: var(--color-accent);
}

.btn__icon {
    flex-shrink: 0;
}

/* ── Outline ───────────────────────────────────────────────────────────── */
/* The quieter pill: a gold outline round sentence-case text, for a link back
   rather than a call to action. Prod uses it at the foot of an article.
   Hover fills it the same way the solid one lightens. */
.btn--outline {
    background-color: transparent;
    font-weight:      400;
    text-transform:   none;
    color:            var(--color-primary);
}

.btn--outline:hover,
.btn--outline:focus-visible {
    color: var(--color-bg);
}

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

    /* A label this long has nowhere to go on a narrow screen but onto a
       second line, so the pill takes the width and lets it. */
    .btn {
        width:       100%;
        white-space: normal;
    }

    /* The outline pill labels a way back, not an offer — prod keeps it at its
       own width on a phone too, centred under the text. */
    .btn--outline {
        width: auto;
    }
}