/* ================================================================
   GLOBAL — Image Carousel: smooth transition timing
   Applies to every elementor-image-carousel on every page.
   ================================================================ */
.elementor-image-carousel-wrapper .swiper-wrapper {
    transition-timing-function: ease-in-out !important;
}

/* ================================================================
   GLOBAL — Nested Carousel (e-n-carousel): mobile arrow fix
   ----------------------------------------------------------------
   Problem: the Elementor editor saves absolute pixel arrow positions
   for the 2-up desktop/tablet layout (e.g. top: 333 px, left: 620 px).
   Those values cascade into the ≤767 px breakpoint via the
   max-width:1024px rule, so on mobile the arrows are off-screen.
   Fix: reset every position variable to the standard left/right
   centred defaults whenever the carousel shows 1 slide.
   ================================================================ */
@media (max-width: 767px) {
    .elementor-12  .elementor-element.elementor-element-0827a6c,
    .elementor-17  .elementor-element.elementor-element-d17bfcf,
    .elementor-1269 .elementor-element.elementor-element-81ec97e,
    .elementor-2563 .elementor-element.elementor-element-f3b9026 {
        /* Prev — left edge, vertically centred */
        --e-n-carousel-arrow-prev-left-align:    0%;
        --e-n-carousel-arrow-prev-translate-x:   0px;
        --e-n-carousel-arrow-prev-left-position: 0px;
        --e-n-carousel-arrow-prev-top-align:     50%;
        --e-n-carousel-arrow-prev-translate-y:   -50%;
        --e-n-carousel-arrow-prev-top-position:  0px;

        /* Next — right edge, vertically centred */
        --e-n-carousel-arrow-next-right-align:    0%;
        --e-n-carousel-arrow-next-translate-x:    0%;
        --e-n-carousel-arrow-next-right-position: 0px;
        --e-n-carousel-arrow-next-top-align:      50%;
        --e-n-carousel-arrow-next-translate-y:    -50%;
        --e-n-carousel-arrow-next-top-position:   0px;
    }

    /* Give the buttons enough padding so they don't sit flush with the card */
    .elementor-12  .elementor-element.elementor-element-0827a6c  :is(.elementor-swiper-button-prev, .elementor-swiper-button-next),
    .elementor-17  .elementor-element.elementor-element-d17bfcf  :is(.elementor-swiper-button-prev, .elementor-swiper-button-next),
    .elementor-1269 .elementor-element.elementor-element-81ec97e :is(.elementor-swiper-button-prev, .elementor-swiper-button-next),
    .elementor-2563 .elementor-element.elementor-element-f3b9026 :is(.elementor-swiper-button-prev, .elementor-swiper-button-next) {
        padding: 10px;
        border-radius: 4px;
        /* Ensure the button is never hidden behind the slide */
        z-index: 10;
    }
}

/* ================================================================
   CASE STUDIES PAGE (post-19) — Nested Tabs: Mobile-First Design
   Element: .elementor-element-1a433fa
   ================================================================ */

/* ------ Mobile: 2-column grid layout for tab buttons ------ */
@media (max-width: 767px) {
    /* Switch from flex-wrap to a proper 2-column CSS grid */
    .elementor-19 .elementor-element-1a433fa .e-n-tabs-heading {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    /* Each button fills its grid cell fully */
    .elementor-19 .elementor-element-1a433fa .e-n-tab-title {
        width: 100%;
        box-sizing: border-box;
        min-height: 85px;
        /* Tighter padding for small screens */
        --n-tabs-title-padding-top:    14px;
        --n-tabs-title-padding-right:  8px;
        --n-tabs-title-padding-bottom: 14px;
        --n-tabs-title-padding-left:   8px;
    }

    /* Reduce icon size so it fits comfortably in the smaller button */
    .elementor-19 .elementor-element-1a433fa .e-n-tab-icon i {
        font-size: 30px !important;
    }
    .elementor-19 .elementor-element-1a433fa .e-n-tab-icon svg {
        height: 30px !important;
        width:  30px !important;
    }

    /* Slightly tighter icon-to-text gap */
    .elementor-19 .elementor-element-1a433fa .e-n-tab-title .e-n-tab-icon {
        gap: 6px;
    }

    /* Tab label: allow wrapping so long words don't overflow */
    .elementor-19 .elementor-element-1a433fa .e-n-tab-title-text {
        white-space: normal;
        word-break: break-word;
        line-height: 1.25;
        font-size: 0.8rem;
    }

    /* When there are an odd number of tabs, centre the last lone tab */
    .elementor-19 .elementor-element-1a433fa .e-n-tab-title:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        width: calc(50% - 5px);
        margin: 0 auto;
    }

    /* Active tab: subtle lift shadow to show selection clearly */
    .elementor-19 .elementor-element-1a433fa .e-n-tab-title[aria-selected="true"] {
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18);
    }

    /* Reduce gap between tab heading and tab content */
    .elementor-19 .elementor-element-1a433fa .e-n-tabs {
        --n-tabs-gap: 24px;
    }
}

/* ------ Tablet (768–1024 px): moderate adjustments ------ */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-19 .elementor-element-1a433fa .e-n-tab-title {
        /* Reduce the large 50 px horizontal padding Elementor sets */
        --n-tabs-title-padding-right: 22px;
        --n-tabs-title-padding-left:  22px;
    }

    .elementor-19 .elementor-element-1a433fa .e-n-tab-icon i {
        font-size: 40px !important;
    }
    .elementor-19 .elementor-element-1a433fa .e-n-tab-icon svg {
        height: 40px !important;
        width:  40px !important;
    }
}