/* ============================================================
   Rankbeta — About Us Widget
   Structure & layout only. Colors/typography via Elementor.
   ============================================================ */

/* ── Kill any inherited border / outline (security + clean look) ── */
.rb-au-section,
.elementor-widget-rankbeta_about_us,
.elementor-widget-rankbeta_about_us .elementor-widget-container {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* ── Section wrapper ── */
.rb-au-section {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* ── Background overlay ── */
.rb-au-overlay {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* ── Inner width container ── */
.rb-au-inner {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    width: 100%;
}

/* ============================================================
   TOP ROW: Content col + Media col
   ============================================================ */
.rb-au-top-row {
    display: flex;
    align-items: flex-start;
    gap: 60px;
}

/* ── Left: content column ── */
.rb-au-content-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ── Quote / icon block ── */
.rb-au-icon-wrap {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.rb-au-icon-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 4px;
}

.rb-au-icon-badge i,
.rb-au-icon-badge svg {
    display: block;
}

/* ── Heading ── */
.rb-au-heading {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 700;
    line-height: 1.25;
}

/* ── Text ── */
.rb-au-text {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    line-height: 1.75;
}

/* ── Progress bars ── */
.rb-au-bars {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rb-au-bar-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rb-au-bar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rb-au-bar-label {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
}

.rb-au-bar-pct {
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 13px;
}

.rb-au-bar-track {
    width: 100%;
    border-radius: 999px;
    overflow: hidden;
}

.rb-au-bar-fill {
    height: 100%;
    border-radius: 999px;
    width: 0;                       /* JS animates this to data-width % */
    transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: width;
}

/* ── Button ── */
.rb-au-btn {
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    align-self: flex-start;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: background-color 0.25s ease, color 0.25s ease,
                border-color 0.25s ease, transform 0.25s ease;
}

/* ============================================================
   BUTTON HOVER ANIMATIONS  (Elementor prefix_class: rb-btn-anim-)
   ============================================================ */
.rb-btn-anim-grow   .rb-au-btn:hover { transform: scale(1.06); }
.rb-btn-anim-shrink .rb-au-btn:hover { transform: scale(0.94); }
.rb-btn-anim-float  .rb-au-btn:hover { transform: translateY(-5px); }
.rb-btn-anim-pulse  .rb-au-btn:hover { animation: rb-btn-pulse 0.4s ease; }
.rb-btn-anim-bounce .rb-au-btn:hover { animation: rb-btn-bounce 0.5s ease; }

@keyframes rb-btn-pulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.07); }
}
@keyframes rb-btn-bounce {
    0%, 100% { transform: translateY(0); }
    40%      { transform: translateY(-8px); }
    70%      { transform: translateY(-4px); }
}

/* ── Right: media column ── */
.rb-au-media-col {
    flex-shrink: 0;
    display: flex;
    gap: 12px;
    align-items: stretch;
}

.rb-au-main-img {
    flex: 0 0 auto;
    position: relative;
    overflow: hidden;
    height: 480px;            /* default — overridden by Elementor Height slider */
    /* flex container — enables Alignment (justify-content) control */
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
}

/* ── Direct child: img or <a> wrapping img ── */
.rb-au-main-img > img,
.rb-au-main-img > a {
    width: 100%;              /* overridden by Elementor Width slider */
    height: 100%;
    flex-shrink: 0;
    display: block;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* ── When a link wraps the image ── */
.rb-au-main-img > a > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* ── Overlay pseudo-element (main image) ── */
.rb-au-main-img::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
    z-index: 1;
    transition: background 0.4s ease;
}

.rb-au-side-imgs {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;                  /* take remaining width after main image */
    min-width: 0;
}

/* ── Side image wrapper ── */
.rb-au-img-wrap {
    position: relative;
    overflow: hidden;
    height: 232px;            /* default — overridden by Elementor Height slider per-image */
    flex-shrink: 0;
    /* flex container — enables Alignment (justify-content) control */
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
}

/* ── Direct child inside side image wrapper ── */
.rb-au-img-wrap > img,
.rb-au-img-wrap > a {
    width: 100%;              /* overridden by Elementor Width slider */
    height: 100%;
    flex-shrink: 0;
    display: block;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* ── When a link wraps the side image ── */
.rb-au-img-wrap > a > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    transition: transform 0.4s ease, filter 0.4s ease;
}

/* ── Overlay pseudo-element (side image wrappers) ── */
.rb-au-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: transparent;
    pointer-events: none;
    z-index: 1;
    transition: background 0.4s ease;
}

/* ============================================================
   TIMELINE
   ============================================================ */
.rb-au-timeline {
    display: flex;
    gap: 0;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}

.rb-au-tl-item {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-right: 24px;
}

/* Year badge */
.rb-au-tl-year {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
    align-self: flex-start;
}

/* Horizontal line after year badge */
.rb-au-tl-year-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rb-au-tl-line {
    flex: 1;
    height: 1px;
}

.rb-au-tl-title {
    margin: 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 700;
}

.rb-au-tl-desc {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    line-height: 1.6;
}

/* ============================================================
   ENTRANCE ANIMATIONS — IntersectionObserver adds --visible
   ============================================================ */
.rb-au-anim {
    opacity: 0;
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

/* Initial transforms — only apply BEFORE element is visible */
.rb-au-anim:not(.rb-au-anim--visible).rb-au-anim-up    { transform: translateY(40px); }
.rb-au-anim:not(.rb-au-anim--visible).rb-au-anim-right { transform: translateX(52px); }

/* Visible — opacity snaps to 1; transform returns to default via transition */
.rb-au-anim.rb-au-anim--visible { opacity: 1; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
    .rb-au-top-row { gap: 36px; }
}

@media (max-width: 767px) {
    .rb-au-top-row {
        flex-direction: column;
        gap: 36px;
    }

    /*
     * CRITICAL: the Elementor `media_col_width` add_responsive_control outputs
     * an inline `flex: 0 0 45%; width: 45%` that overrides plain CSS.
     * !important forces the images column to full width on mobile regardless
     * of what value the Elementor slider is set to on desktop.
     */
    .rb-au-media-col {
        flex: none !important;
        width: 100% !important;
        /* Keep the 3-image collage: main image left + 2 stacked side images right */
        flex-direction: row;
        gap: 10px;           /* visible gap between main image and side stack */
    }

    /* Main image: left column, slightly wider */
    .rb-au-main-img {
        flex: 0 0 55%;
        height: 300px !important;   /* reset Elementor height slider for mobile */
    }

    /* Side image stack: fills remaining width */
    .rb-au-side-imgs {
        flex: 1;
        min-width: 0;
        gap: 10px;           /* gap between top and bottom side images */
    }

    /* Each side image: half the height to fit 2 in the stack */
    .rb-au-img-wrap {
        height: 144px !important;   /* (300px - 10px gap) / 2 = 145px ≈ 144px */
    }

    .rb-au-timeline {
        flex-direction: column;
        gap: 32px;
    }

    .rb-au-tl-item {
        padding-right: 0;
    }

    .rb-au-tl-line { display: none; }

    .rb-au-btn { align-self: flex-start; }
}