/* Component: box buttons (BEM)
   Styles the container and its button-like links inside the categories modal/topbar.
   Uses CSS variables with sensible fallbacks to blend with the existing palette. */

/* Pull from topbar palette when available */
.box__buttons {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .75rem; /* row gap / column gap */
    align-items: center;
    /* Subtle spacing around the group */
    margin-block: .25rem .5rem;
}

    /* Make links inside look like modern chips */
    .box__buttons .box__button-style,
    .box__buttons .app-topbar__button--category {
        display: inline-flex;
        align-items: center;
        gap: .35rem;
        padding: .5rem .85rem;
        border-radius: 999px; /* pill */
        background: var(--chip-bg, var(--app-topbar-btn-bg, #f3f7fa));
        color: var(--chip-fg, var(--app-topbar-accent, #0b6a86));
        border: 1px solid var(--chip-border, rgba(0,0,0,.06));
        text-decoration: none;
        line-height: 1;
        font-weight: 500;
        white-space: nowrap; /* keep labels in one line */
        box-shadow: 0 1px 1px rgba(0,0,0,.02);
        transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .05s ease;
    }

        .box__buttons .box__button-style:hover,
        .box__buttons .app-topbar__button--category:hover {
            background: var(--chip-bg-hover, var(--app-topbar-btn-bg-hover, rgba(0,0,0,.06)));
            color: var(--chip-fg-hover, var(--app-topbar-accent-hover, #0f819f));
            box-shadow: 0 2px 4px rgba(0,0,0,.08);
        }

        .box__buttons .box__button-style:active,
        .box__buttons .app-topbar__button--category:active {
            transform: translateY(1px);
            box-shadow: 0 1px 2px rgba(0,0,0,.08);
        }

        .box__buttons .box__button-style:focus-visible,
        .box__buttons .app-topbar__button--category:focus-visible {
            outline: 3px solid color-mix(in srgb, var(--chip-fg, var(--app-topbar-accent, #0b6a86)) 35%, transparent);
            outline-offset: 2px;
        }

/* Optional modifiers */
.box__buttons--compact {
    gap: .35rem .5rem;
}

.box__button-style--active,
.app-topbar__button--category--active {
    background: color-mix(in srgb, var(--chip-bg, #f3f7fa) 70%, var(--chip-fg, #0b6a86));
    color: #fff;
    border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .box__buttons .box__button-style,
    .box__buttons .app-topbar__button--category {
        transition: none;
    }
}

/* Program buttons grid (BEM) */
.programs {
    padding: 6.5rem 1rem 8.1rem
}
.programs__title {
    font-size: clamp(1.4rem, 3vw, 2.2rem);
    font-weight: 800;
    margin: 0;
    color: #0f2f36;
}

.programs__subtitle {
    font-size: .95rem;
    opacity: .75;
    margin: .5rem 0 0;
}

.programs__grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, 1fr);
    align-items: stretch;
}

.programs__item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.4rem 1rem;
    text-decoration: none;
    background: linear-gradient(135deg, #f5fafc, #e9f2f6 55%, #e3eef2);
    border: 1px solid #d5e3ea;
    border-radius: 18px;
    box-shadow: 0 4px 12px -3px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
    color: #0f2f36;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: .3px;
    overflow: hidden;
    isolation: isolate;
    transition: box-shadow .2s ease, transform .15s ease, background-color .25s ease;
}

    .programs__item::before {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 30% 20%, rgba(11,106,134,.35), transparent 70%);
        opacity: 0;
        transition: opacity .3s ease;
        z-index: -1;
    }

    .programs__item:hover::before {
        opacity: 1;
    }

    .programs__item:hover {
        box-shadow: 0 6px 18px -4px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08);
        transform: translateY(-3px);
    }

    .programs__item:active {
        transform: translateY(-1px);
    }

    .programs__item:focus-visible {
        outline: 3px solid rgba(11,106,134,.4);
        outline-offset: 3px;
    }

.programs__item-label {
    pointer-events: none;
}

@media (max-width: 640px) {
    .programs__grid {
        gap: .75rem;
        grid-template-columns: repeat(1, 1fr);
    }

    .programs__item {
        padding: 1.1rem .9rem;
        font-size: .92rem;
        border-radius: 16px;
    }
}