/**
 * JT Image Accordion module styles.
 * Bootstrap 5 provides buttons, modal skin and shadows; this file does not style buttons.
 */

.jt-accordion {
    --jt-accordion-max-width: 1240px;
    --jt-accordion-height: 460px;
    --jt-accordion-radius: 1.25rem;
    --jt-accordion-gap: 0px;
    --jt-accordion-hover-grow: 3;
    width: 100%;
    max-width: var(--jt-accordion-max-width);
    margin-inline: auto;
}

.jt-accordion__track {
    display: flex;
    gap: var(--jt-accordion-gap);
    min-height: var(--jt-accordion-height);
    overflow: hidden;
    border-radius: var(--jt-accordion-radius);
    isolation: isolate;
    background: rgba(0, 0, 0, .08);
}

.jt-accordion-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #39424e 0%, #111827 100%);
    transition: flex-grow .52s cubic-bezier(.22, 1, .36, 1), filter .35s ease;
}

.jt-accordion-card:hover,
.jt-accordion-card:focus-within {
    flex-grow: var(--jt-accordion-hover-grow);
    z-index: 2;
}

.jt-accordion--first-active:not(:hover):not(:focus-within) .jt-accordion-card:first-child {
    flex-grow: var(--jt-accordion-hover-grow);
}

.jt-accordion-card__media,
.jt-accordion-card__media img,
.jt-accordion-card__placeholder,
.jt-accordion-card__shade {
    position: absolute;
    inset: 0;
}

.jt-accordion-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform .65s cubic-bezier(.22, 1, .36, 1), filter .45s ease, opacity .35s ease;
}

.jt-accordion--grayscale .jt-accordion-card__media img {
    filter: grayscale(100%) contrast(1.08);
}

.jt-accordion--grayscale .jt-accordion-card:hover .jt-accordion-card__media img,
.jt-accordion--grayscale .jt-accordion-card:focus-within .jt-accordion-card__media img,
.jt-accordion--grayscale.jt-accordion--first-active:not(:hover):not(:focus-within) .jt-accordion-card:first-child .jt-accordion-card__media img {
    filter: grayscale(0) contrast(1.02) saturate(1.08);
}

.jt-accordion-card:hover .jt-accordion-card__media img,
.jt-accordion-card:focus-within .jt-accordion-card__media img,
.jt-accordion--first-active:not(:hover):not(:focus-within) .jt-accordion-card:first-child .jt-accordion-card__media img {
    transform: scale(1.11);
}

.jt-accordion-card__placeholder {
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .24), transparent 28%),
        linear-gradient(135deg, #64748b 0%, #0f172a 100%);
}

.jt-accordion-card:nth-child(2n) .jt-accordion-card__placeholder {
    background:
        radial-gradient(circle at 75% 15%, rgba(255, 255, 255, .2), transparent 24%),
        linear-gradient(135deg, #334155 0%, #020617 100%);
}

.jt-accordion-card:nth-child(3n) .jt-accordion-card__placeholder {
    background:
        radial-gradient(circle at 35% 65%, rgba(255, 255, 255, .22), transparent 26%),
        linear-gradient(135deg, #475569 0%, #111827 100%);
}

.jt-accordion-card__shade {
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .08), rgba(0, 0, 0, .5)),
        linear-gradient(90deg, rgba(0, 0, 0, .15), transparent 42%, rgba(0, 0, 0, .12));
    opacity: .92;
    transition: opacity .35s ease;
}

.jt-accordion-card:hover .jt-accordion-card__shade,
.jt-accordion-card:focus-within .jt-accordion-card__shade,
.jt-accordion--first-active:not(:hover):not(:focus-within) .jt-accordion-card:first-child .jt-accordion-card__shade {
    opacity: .62;
}

.jt-accordion-card__center {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-items: center;
    padding: 1rem;
    pointer-events: none;
}


.jt-accordion-card__summary {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    z-index: 3;
    margin: 0;
    padding: 1.15rem 1.35rem;
    font-size: clamp(.92rem, 1vw, 1.05rem);
    line-height: 1.45;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
    transform: translateY(105%);
    opacity: 0;
    transition: transform .36s ease, opacity .36s ease;
}

.jt-accordion-card:hover .jt-accordion-card__summary,
.jt-accordion-card:focus-within .jt-accordion-card__summary,
.jt-accordion--first-active:not(:hover):not(:focus-within) .jt-accordion-card:first-child .jt-accordion-card__summary {
    transform: translateY(0);
    opacity: 1;
}

.jt-accordion-modal--diagonal.fade .modal-dialog {
    opacity: 0;
    transform: translate3d(-4rem, -3rem, 0) scale(.94) rotate(-1.2deg);
    transition: transform .36s cubic-bezier(.22, 1, .36, 1), opacity .28s ease;
}

.jt-accordion-modal--diagonal.show .modal-dialog {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}

.jt-accordion-modal__content {
    overflow: hidden;
}

.jt-accordion-modal__figure img {
    display: block;
    width: 100%;
    max-height: 48vh;
    object-fit: cover;
}

.jt-accordion-modal__text > :last-child {
    margin-bottom: 0;
}

@media (max-width: 767.98px) {
    .jt-accordion__track {
        flex-direction: column;
        min-height: auto;
    }

    .jt-accordion-card,
    .jt-accordion-card:hover,
    .jt-accordion-card:focus-within,
    .jt-accordion--first-active:not(:hover):not(:focus-within) .jt-accordion-card:first-child {
        flex: 0 0 clamp(13rem, 44vw, 19rem);
    }

    .jt-accordion-card__summary {
        transform: translateY(0);
        opacity: 1;
        padding-block-end: 1rem;
    }

    .jt-accordion-card__center {
        place-items: center;
        padding-block-end: 4.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .jt-accordion-card,
    .jt-accordion-card__media img,
    .jt-accordion-card__shade,
    .jt-accordion-card__summary,
    .jt-accordion-modal--diagonal.fade .modal-dialog {
        transition: none;
    }
}