/* bravo-offices — Elementor Widget
   Scope: .bravo-offices  /  prefix: .bop-*
   Breakpoints: < 768px mobile | 768–1199px tablet | ≥ 1200px desktop
*/

/* ── Elementor panel icon ───────────────────────────────────────── */
.bravo-icon-offices {
    display: inline-block;
    width: 1em;
    height: 1em;
    background: url('../img/bravo-mark-2.svg') no-repeat center / contain;
    vertical-align: middle;
}
.bravo-icon-offices::before { content: ''; }

/* ── Root ──────────────────────────────────────────────────────── */
.bravo-offices {
    --bop-gap: 6px;
    --bop-r:   8px;
    font-family: inherit;
    width: 100%;
}

/* ── Country tab nav ────────────────────────────────────────────── */
.bop-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.bop-nav__btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 2px solid transparent;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.bop-nav__flag {
    font-size: 24px;
    line-height: 1;
    display: block;
}
.bop-nav__code {
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.03em;
    display: block;
}

/* ── Panel (show/hide via CSS class only — no HTML hidden attr) ─── */
/* Scoped to .bravo-offices to beat any Elementor cascade at equal !important weight */
.bravo-offices .bop-panel { display: none !important; }
.bravo-offices .bop-panel.is-active { display: block !important; }

/* ── Grid content ───────────────────────────────────────────────── */
.bop-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bop-row {
    display: grid;
    grid-template-columns: var(--bop-cols, 1fr);
    /* height and gap set inline per-row; --bop-cols / --bop-cols-t set inline */
}

/* ── Column cell ────────────────────────────────────────────────── */
.bop-col {
    border-radius: var(--bop-r);
    overflow: hidden;
    position: relative;
    min-height: 0; /* base: grid row height controls size */
}

/* Desktop + Tablet: reset any Elementor-generated min-height from the
   "Altura mínima por Slide" slider — that control is for mobile only */
@media (min-width: 768px) {
    .bop-col { min-height: 0 !important; }
}

/* Image cell — flex-column so img grows to fill whatever height the grid/flex gives the cell */
.bop-col--image {
    background: #E5E7EB;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0;
}

.bop-img__el {
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    object-fit: cover;
    display: block;
}
.bop-img__placeholder {
    flex: 1 1 auto;
    min-height: 0;
    background: #E5E7EB;
}

/* Stat cell */
.bop-col--stat {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 28px;
    gap: 4px;
}

.bop-stat__number {
    display: block;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 700;
    color: #201d49;
    line-height: 1.1;
}
.bop-stat__label {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #201d49;
}
.bop-stat__caption {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: #4B5563;
}

/* Text / mission cell */
.bop-col--text {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 28px;
}
.bop-mission__text {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: #201d49;
    line-height: 1.55;
}

/* Empty cell */
.bop-col--empty { }

/* Gap between rows — visible on Desktop/Tablet */
.bop-row-gap { flex-shrink: 0; }

/* ── Tablet (768–1199px) ────────────────────────────────────────── */
@media (min-width: 768px) and (max-width: 1199px) {
    .bop-nav__btn  { width: 58px; height: 58px; }
    .bop-nav__flag { font-size: 20px; }
    .bop-stat__number { font-size: 28px; }
    .bop-mission__text { font-size: 13px; }
    .bop-dots { display: none !important; }
    .bop-row { grid-template-columns: var(--bop-cols-t, var(--bop-cols, 1fr)); }
}

/* ── Desktop ────────────────────────────────────────────────────── */
@media (min-width: 1200px) {
    .bop-dots { display: none !important; }
}

/* ── Mobile (< 768px) ───────────────────────────────────────────── */
@media (max-width: 767px) {

    /* Nav: 3-col flag-only grid */
    .bop-nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
        justify-content: unset !important;
    }
    .bop-nav__btn {
        width: 100%;
        height: 56px;
        border-radius: 14px;
    }
    .bop-nav__flag { font-size: 26px; }
    .bop-nav__code { display: none; }

    /* Scroll-snap carousel:
       Each column (.bop-col) is one slide.
       Order = Row1Col1, Row1Col2, Row1Col3, Row2Col1, Row2Col2, … */
    .bop-content {
        display: flex;
        flex-direction: row;
        overflow-x: scroll;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 0;
    }
    .bop-content::-webkit-scrollbar { display: none; }

    /* Rows become transparent wrappers — children flow into the scroll container */
    .bop-row { display: contents; }

    /* Hide row-gap spacers */
    .bop-row-gap { display: none; }

    /* Each column = one full-width slide */
    .bop-col {
        flex: 0 0 100%;
        scroll-snap-align: start;
        min-height: 200px; /* fallback; Elementor slide_height slider overrides this */
    }

    /* Re-apply layout for stat/text cells */
    .bop-col--stat {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 28px 24px;
    }
    .bop-col--text {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 28px 24px;
    }

    /* Dots */
    .bop-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 6px;
        margin-top: 12px;
        width: 100%;
        overflow: hidden;
        box-sizing: border-box;
    }
    .bop-dot {
        /* Hard-reset all inherited button/Elementor styles */
        all: unset;
        display: inline-block;
        box-sizing: border-box;
        width: 8px !important;
        height: 8px !important;
        min-width: 0 !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        border-radius: 50% !important;
        background: #D1D5DB !important;
        cursor: pointer;
        flex-shrink: 0;
        transition: background 0.2s;
    }
    .bop-dot.is-active {
        background: #201d49 !important;
    }
}