/* ==========================================================================
   Tabs nav: a row of buttons (icon + text + link).
   Generic component: works on any page (Gutenberg block "Tabs Nav", PHP templates).
   The club page adds the extra class "club-tabs" on top of "tabs-nav".

   The space between the buttons comes from the utility class "gap-8" printed
   on the wrapper. The fallback below only applies when the wrapper has no
   "gap-*" class at all.
   ========================================================================== */
.tabs-nav {
    --tabs-nav-icon-size: 20px;
    display: flex;
    align-items: stretch;
    gap: 8px;

}

@media (min-width: 992px) {
    .tabs-nav {
    position: sticky;
    top: 0;
    z-index: 20;
    width: 100vw;
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    box-sizing: border-box;
    min-height: 70px;
    align-items: center;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.02) 100%), rgba(242, 244, 240, 0.80);
    backdrop-filter: blur(17px);
    -webkit-backdrop-filter: blur(17px);
    z-index: 5;
    top: 56px;
}}

.tabs-nav:not([class*="gap-"]) {
    gap: 8px;
}

.tabs-nav__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding:10px 16px;
    border-radius: 10px;
    border: 1px solid var(--Mapping-Borders-Structural-Borders-border-on-dark-10, rgba(255, 255, 255, 0.10));
    background: var(--mapping-surfaces-system-layout-surfaces-surface-neutral-lowest, #FFF);
    color: var(--Mapping-Text-Heading-text-heading-secondary, #19421F);
    font-size: 14px;
    line-height: 20px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .2s, background-color .2s;
    height: 48px;
}



/* The icon is an <img> (png / webp / svg uploaded in the media library),
   or an inline <svg> for the default tabs defined in code. */
.tabs-nav__icon {
    flex: 0 0 auto;
    width: var(--tabs-nav-icon-size);
    height: var(--tabs-nav-icon-size);
    object-fit: contain;
    color: #177D43;
}

/* Empty state, printed only inside the block editor. */
.tabs-nav--empty {
    padding: 16px;
    border: 1px dashed #B8BDB9;
    border-radius: 12px;
    color: #5A615C;
    font-size: 14px;
    justify-content: center;
}

/* Tablet and mobile: the buttons keep their size and scroll sideways. */
@media (max-width: 992px) {
    .tabs-nav {
        position: sticky;
        top: 54px;
        left: 0;
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory;
        -ms-overflow-style: none;
        gap: 24px;
        justify-content: flex-start !important;
        -webkit-overflow-scrolling: touch;
        padding: 10px 20px;
        align-items: flex-end;
        width: 100%;
        z-index: 20;
    }

    .tabs-nav::-webkit-scrollbar {
        display: none;
    }

    .tabs-nav__item {

        padding: 8px 12px;
        scroll-snap-align: start;
        flex: 1 !important;
        min-width: 133px ;
        height: 48px;
    }
}