/* KIJO Loop Tabs */

.kijo-loop-tabs {
    --kijo-loop-tabs-transition: 400ms;
    --kijo-loop-tabs-muted: #8a94a6;
    display: flex;
    flex-direction: var(--kijo-lt-direction, row);
    align-items: stretch;
    gap: 60px;
}

/* Layout vars are set by the Direction / Justify controls. */
.kijo-loop-tabs__nav {
    flex: 0 0 var(--kijo-lt-nav-basis, var(--kijo-lt-nav-width, 55%));
    width: var(--kijo-lt-nav-basis, var(--kijo-lt-nav-width, 55%));
    min-width: 0;
    display: flex;
    flex-direction: var(--kijo-lt-nav-direction, column);
    flex-wrap: var(--kijo-lt-nav-wrap, nowrap);
    justify-content: var(--kijo-lt-nav-justify, flex-start);
    gap: 16px;
}

/* Item */
.kijo-loop-tabs__item {
    flex: var(--kijo-lt-item-grow, 0) 1 auto;
    min-width: 0;
    border-block-end: 0 solid transparent;
    transition: background-color var(--kijo-loop-tabs-transition) ease;
}

.kijo-loop-tabs__title-wrap {
    margin: 0;
    padding: 0;
    font: inherit;
    line-height: 1;
}

/* Title button — reset theme / Elementor kit button styles (kit uses .elementor-kit-N button) */
.kijo-loop-tabs .kijo-loop-tabs__title,
.kijo-loop-tabs .kijo-loop-tabs__title:hover,
.kijo-loop-tabs .kijo-loop-tabs__title:focus {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: none;
    -webkit-appearance: none;
    appearance: none;
}

.kijo-loop-tabs .kijo-loop-tabs__title {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    column-gap: 8px;
    width: 100%;
    cursor: pointer;
    text-align: start;
}

.kijo-loop-tabs .kijo-loop-tabs__title:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.kijo-loop-tabs__number {
    flex-shrink: 0;
    font-size: 0.875rem;
    line-height: 1;
    color: var(--kijo-loop-tabs-muted);
    transition: color var(--kijo-loop-tabs-transition) ease;
}

/* Line after the number */
.kijo-loop-tabs__separator {
    flex-shrink: 0;
    width: 20px;
    height: 1px;
    background-color: var(--kijo-loop-tabs-muted);
    transition: background-color var(--kijo-loop-tabs-transition) ease;
}

.kijo-loop-tabs__item.is-active .kijo-loop-tabs__number {
    color: inherit;
}

.kijo-loop-tabs__heading {
    color: var(--kijo-loop-tabs-muted);
    line-height: 1.2;
    transition: color var(--kijo-loop-tabs-transition) ease;
}

.kijo-loop-tabs__item.is-active .kijo-loop-tabs__heading {
    color: inherit;
}

/* Expanding content (excerpt + button) */
.kijo-loop-tabs__content {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition:
        grid-template-rows var(--kijo-loop-tabs-transition) ease,
        opacity var(--kijo-loop-tabs-transition) ease;
}

.kijo-loop-tabs__item.is-active .kijo-loop-tabs__content {
    grid-template-rows: 1fr;
    opacity: 1;
}

.kijo-loop-tabs__content-inner {
    overflow: hidden;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding-block-start: 16px;
}

/* Collapsed rows still apply the padding; remove it so closed items stay tight. */
.kijo-loop-tabs__item:not(.is-active) .kijo-loop-tabs__content-inner {
    padding-block-start: 0 !important;
}

.kijo-loop-tabs__excerpt > :last-child {
    margin-bottom: 0;
}

/* Button — markup matches the Elementor Button widget so theme .elementor-button styles apply */
.kijo-loop-tabs__button .elementor-button {
    text-decoration: none;
}

/* Media (featured images) */
.kijo-loop-tabs__media {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 500px;
    overflow: hidden;
}

.kijo-loop-tabs__image {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition:
        opacity var(--kijo-loop-tabs-transition) ease,
        visibility 0s linear var(--kijo-loop-tabs-transition);
}

.kijo-loop-tabs__image.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--kijo-loop-tabs-transition) ease, visibility 0s;
}

.kijo-loop-tabs__image img,
.kijo-loop-tabs__mobile-image img {
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: center center;
}

.kijo-loop-tabs__mobile-image {
    display: none;
    overflow: hidden;
}

/* Nothing found */
.kijo-loop-tabs__nothing-found--editor {
    padding: 20px;
    text-align: center;
    border: 1px dashed #d5d8dc;
    color: #69727d;
}

/* Accordion layout: the breakpoint media query is printed per widget (see
   print_accordion_breakpoint_css); these are the parts that don't depend on it. */
.kijo-loop-tabs__mobile-image {
    width: 100%;
    aspect-ratio: 4 / 3;
}

@media (prefers-reduced-motion: reduce) {
    .kijo-loop-tabs,
    .kijo-loop-tabs * {
        --kijo-loop-tabs-transition: 0ms !important;
    }
}

/* Entrance animations (Motion Effects). "active" ones replay each time their
   tab opens; "load" ones play once on page load. */
.kijo-anim--load,
.kijo-loop-tabs__item.is-active .kijo-anim--active,
.kijo-loop-tabs__image.is-active.kijo-anim--active {
    animation: var(--kijo-anim-name) var(--kijo-anim-duration, 2s) ease var(--kijo-anim-delay, 0ms) both;
}

.kijo-anim--fadeIn { --kijo-anim-name: kijo-fadeIn; }
.kijo-anim--fadeInUp { --kijo-anim-name: kijo-fadeInUp; }
.kijo-anim--fadeInDown { --kijo-anim-name: kijo-fadeInDown; }
.kijo-anim--fadeInLeft { --kijo-anim-name: kijo-fadeInLeft; }
.kijo-anim--fadeInRight { --kijo-anim-name: kijo-fadeInRight; }
.kijo-anim--zoomIn { --kijo-anim-name: kijo-zoomIn; }

@keyframes kijo-fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes kijo-fadeInUp { from { opacity: 0; transform: translate3d(0, 40px, 0); } to { opacity: 1; transform: none; } }
@keyframes kijo-fadeInDown { from { opacity: 0; transform: translate3d(0, -40px, 0); } to { opacity: 1; transform: none; } }
@keyframes kijo-fadeInLeft { from { opacity: 0; transform: translate3d(-40px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes kijo-fadeInRight { from { opacity: 0; transform: translate3d(40px, 0, 0); } to { opacity: 1; transform: none; } }
@keyframes kijo-zoomIn { from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .kijo-anim--load,
    .kijo-loop-tabs__item.is-active .kijo-anim--active,
    .kijo-loop-tabs__image.is-active.kijo-anim--active { animation: none; }
}