/* ============================================================
   Widget: Tabs with Cards
   BEM root: .gtea-tabs-with-cards
   ============================================================ */

/* ── Root container ──────────────────────────────────────────── */
.gtea-tabs-with-cards {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
}

/* ── Tabs Navigation ─────────────────────────────────────────── */
.gtea-tabs-with-cards__tabs-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    box-sizing: border-box;
}

/* Individual tab button */
.gtea-tabs-with-cards__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    line-height: 1.4;
    box-sizing: border-box;
    transition: all 300ms ease-in-out;
    position: relative;
    -webkit-appearance: none;
    appearance: none;
}

.gtea-tabs-with-cards__tab:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.gtea-tabs-with-cards__tab-label {
    display: inline-block;
    order: 0; /* badge order driven by Elementor responsive control */
}

/* Badge — order property controlled by Elementor responsive selector */
.gtea-tabs-with-cards__tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.125rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75em;
    line-height: 1.2;
    box-sizing: border-box;
    white-space: nowrap;
    transition: all 300ms ease-in-out;
    order: 1; /* default: right of label */
}

/* ── Panels ──────────────────────────────────────────────────── */
.gtea-tabs-with-cards__panels {
    box-sizing: border-box;
    width: 100%;
}

.gtea-tabs-with-cards__panel {
    display: none;
    box-sizing: border-box;
}

.gtea-tabs-with-cards__panel--active {
    display: block;
}

.gtea-tabs-with-cards__panel-empty {
    padding: 1rem;
    color: #999;
    font-style: italic;
    font-size: 0.875rem;
}

/* ── Cards Grid ──────────────────────────────────────────────── */
/*
 * Column count is set via CSS variable --gtea-twc-cols (default 3) driven by
 * the responsive Elementor control.
 * Gap is set via --gtea-twc-gap (default 24px) and the 'gap' property.
 * Both vars are set on the grid element and inherited by card children.
 */
.gtea-tabs-with-cards__cards-grid {
    display: flex;
    flex-wrap: wrap; /* wrap when cards exceed available width */
    gap: 24px;       /* overridden by Elementor gap control */
    box-sizing: border-box;
    width: 100%;
    --gtea-twc-cols: 3;
    --gtea-twc-gap: 24px;
}

/* ── Individual Card ─────────────────────────────────────────── */
.gtea-tabs-with-cards__card {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    box-sizing: border-box;
    transition: all 300ms ease-in-out;
    /*
     * Width accounts for gaps between columns:
     * ( 100% - (cols - 1) * gap ) / cols
     */
    flex: 0 0 calc(
        (100% - (var(--gtea-twc-cols, 3) - 1) * var(--gtea-twc-gap, 24px)) /
        var(--gtea-twc-cols, 3)
    );
    max-width: calc(
        (100% - (var(--gtea-twc-cols, 3) - 1) * var(--gtea-twc-gap, 24px)) /
        var(--gtea-twc-cols, 3)
    );
}

/* ── Card Image Wrap (holds image + title side by side) ──────── */
.gtea-tabs-with-cards__card-image-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-sizing: border-box;
    width: 100%;
}

.gtea-tabs-with-cards__card-image-wrap--img-left {
    flex-direction: row;
}

.gtea-tabs-with-cards__card-image-wrap--img-right {
    flex-direction: row-reverse;
}

/* Card image */
.gtea-tabs-with-cards__card-image {
    display: block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center center;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Card title */
.gtea-tabs-with-cards__card-title {
    margin: 0;
    box-sizing: border-box;
    transition: all 300ms ease-in-out;
}

/* Card description */
.gtea-tabs-with-cards__card-description {
    box-sizing: border-box;
    width: 100%;
    transition: all 300ms ease-in-out;
}

.gtea-tabs-with-cards__card-description > *:first-child {
    margin-top: 0;
}

.gtea-tabs-with-cards__card-description > *:last-child {
    margin-bottom: 0;
}

/* Card footer text */
.gtea-tabs-with-cards__card-footer {
    box-sizing: border-box;
    width: 100%;
    transition: all 300ms ease-in-out;
    margin-top: auto; /* push to bottom of card when card has a fixed height */
}

/* Card CTA wrapper (GteaHelperCta renders inside this) */
.gtea-tabs-with-cards__card-cta {
    box-sizing: border-box;
}

/* ── Absolute image ─────────────────────────────────────────────────── */
.gtea-tabs-with-cards__card--has-abs-image {
    position: relative;
}

.gtea-tabs-with-cards__card-image--absolute {
    position: absolute;
}

/* Add to Cart CTA */
.gtea-tabs-with-cards__cta-atc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box;
    transition: all 300ms ease-in-out;
}

.gtea-tabs-with-cards__cta-atc:hover {
    text-decoration: none;
}