/**
 * Content Accordion Styles
 *
 * Horizontal accordion with expandable items.
 * Desktop: items side-by-side, flex-based expand/collapse.
 * Mobile: stacked vertically with same expand behavior.
 * CSS custom properties (--ca-*) set by PHP module for dynamic theming.
 *
 * @package SmytecBuilder
 * @since 1.0.0
 */

/* ==========================================================
   Container
   ========================================================== */

.content-accordion {
    position: relative;
    width: 100%;
}

/* ==========================================================
   Items Wrapper — Horizontal Flex Layout
   ========================================================== */

.content-accordion__items {
    display: flex;
    gap: var(--ca-gap, 20px);
    width: 100%;
}

/* ==========================================================
   Individual Accordion Item
   ========================================================== */

/* Mặc định chia đều */
.content-accordion__item {
    position: relative;
    flex: 1 1 0;
    min-height: var(--ca-min-h, 548px);
    border-radius: var(--ca-radius, 16px);
    overflow: hidden;
    cursor: pointer;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: flex;
}



/* Active/expanded state: fill remaining space */
.content-accordion__item--active {
    flex: 1 1 auto;
    cursor: default;
}

/* ==========================================================
   Dark Overlay
   ========================================================== */

.content-accordion__overlay {
    position: absolute;
    inset: 0;
    transition: 0.4s ease;
    z-index: 1;
    background: var(--ca-overlay-color, rgba(0, 0, 0, 0.4));
    opacity: var(--ca-overlay-enable, 1);
}

.content-accordion__item--active .content-accordion__overlay {
    background: linear-gradient(360deg, var(--ca-active-overlay-color, #000000) -20.33%, rgba(0, 0, 0, 0) 120.33%),
        linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
    opacity: var(--ca-overlay-enable, 1);

}

/* ==========================================================
   Inner Content Layout
   ========================================================== */

.content-accordion__item-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
    padding: 48px;
    color: #fff;
}

/* ==========================================================
   Title
   ========================================================== */

.content-accordion__title {
    font-size: 32px;
    font-weight: 300;
    color: #fff;
    line-height: 1.3;
    margin: 0;
    padding-bottom: 0;
    transition: all 0.4s ease;
    word-break: break-word;
}

/* Collapsed item: title at bottom */
.content-accordion__item:not(.content-accordion__item--active) .content-accordion__title {
    writing-mode: initial;
}

/* ==========================================================
   Expandable Content Area
   ========================================================== */

.content-accordion__content {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.4s ease 0.1s,
        margin-top 0.4s ease;
    margin-top: 0;
    max-width: 364px;
}

/* Active: content revealed */
.content-accordion__item--active .content-accordion__content {
    max-height: 600px;
    opacity: 1;
    margin-top: 24px;
}

/* ==========================================================
   Content Text
   ========================================================== */

.content-accordion__text {
    font-size: 16px;
    line-height: 1.5;
    color: rgba(255, 255, 255);
    font-weight: 400;
}

.content-accordion__text p:last-child {
    margin-bottom: 0;
}

/* ==========================================================
   Hover State (collapsed items only)
   ========================================================== */

.content-accordion__item:not(.content-accordion__item--active):hover .content-accordion__overlay {
    background: rgba(0, 0, 0, 0.65);
}

@media (min-width: 981px) and (max-width: 1024px) {
    .content-accordion__item-inner {
        padding: 24px;
    }
}

/* ==========================================================
   Responsive — Tablet (max-width: 980px)
   ========================================================== */

@media (max-width: 980px) {
    .content-accordion__items {
        flex-direction: column;
    }

    .content-accordion__item {
        min-height: 127px;
        flex: 0 0 auto !important;
        margin-bottom: 0 !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }

    .content-accordion__item--active {
        min-height: var(--ca-min-h, 548px);
    }
}

/* ==========================================================
   Responsive — Mobile (max-width: 767px)
   ========================================================== */

@media (max-width: 767px) {
    .content-accordion__title {
        font-size: 24px;
    }
}

/* ==========================================================
   Pure CSS Hover Effect (Desktop Only)
   ========================================================== */
@media (min-width: 981px) {
    .content-accordion__items:hover .content-accordion__item {
        flex: 0 0 clamp(160px, 20vw, 332px);
    }

    .content-accordion__items:hover .content-accordion__item:hover {
        flex: 1 1 clamp(160px, 20vw, 332px);
        cursor: default;
    }

    .content-accordion__items:hover .content-accordion__item:hover .content-accordion__content {
        max-height: 600px;
        opacity: 1;
        margin-top: 24px;
    }

    .content-accordion__items:hover .content-accordion__item:hover .content-accordion__overlay {
        background: linear-gradient(360deg, var(--ca-active-overlay-color, #000000) -20.33%, rgba(0, 0, 0, 0) 120.33%),
            linear-gradient(0deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4));
        opacity: var(--ca-overlay-enable, 1);
    }
}