/**
 * Wspólny system przycisków Madlen.
 *
 * Ten plik definiuje wyłącznie komponent .button.
 * Konkretne sekcje mogą później rozszerzać jego zachowanie
 * własnymi klasami modyfikującymi.
 */


/* ============================================================
 * BAZOWY PRZYCISK
 * ============================================================ */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.625rem;

    min-height: 3.25rem;
    padding: 0.8125rem 1.25rem;

    border: 0.1rem solid transparent;
    border-radius: 0.75rem;

    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color var(--madlen-transition-fast),
        border-color var(--madlen-transition-fast),
        color var(--madlen-transition-fast),
        box-shadow var(--madlen-transition-fast),
        transform var(--madlen-transition-fast);
}


/* ============================================================
 * IKONA WEWNĄTRZ PRZYCISKU
 * ============================================================ */

.button__icon {
    flex: 0 0 auto;
}


/* ============================================================
 * PRIMARY
 *
 * Główne CTA:
 * - Booksy w headerze,
 * - Booksy w HERO,
 * - późniejsze główne CTA.
 * ============================================================ */

.button--primary {
    background: var(--madlen-color-brand);
    border-color: var(--madlen-color-brand);

    color: var(--madlen-color-white);

    box-shadow:
        0 0.25rem 0.875rem rgb(0 61 70 / 0.12);
}

.button--primary:hover {
    background: var(--madlen-color-brand-dark);
    border-color: var(--madlen-color-brand-dark);

    color: var(--madlen-color-white);

    transform: translateY(-1px);
}

.button--primary:active {
    transform: translateY(0);
}


/* ============================================================
 * OUTLINE
 *
 * Drugorzędne CTA, np. "Poznaj usługi".
 * ============================================================ */

.button--outline {
    background: transparent;
    border-color: var(--madlen-color-brand);

    color: var(--madlen-color-brand-dark);
}

.button--outline:hover {
    background: var(--madlen-color-surface);
    border-color: var(--madlen-color-brand-dark);

    color: var(--madlen-color-brand-dark);

    transform: translateY(-1px);
}

.button--outline:active {
    transform: translateY(0);
}


/* ============================================================
 * ACCESSIBILITY
 * ============================================================ */

.button:focus-visible {
    outline: 0.1875rem solid var(--madlen-color-accent);
    outline-offset: 0.1875rem;
}


/* ============================================================
 * REDUCED MOTION
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {
    .button {
        transition: none;
    }

    .button:hover,
    .button:active {
        transform: none;
    }
}