/* ==========================================================================
   FlyingGroup Art Carousel
   ========================================================================== */

/* Wrapper */
.fac-carousel {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    position: relative;
    width: 100%;
    /*max-width: 580px;*/
    margin: 0 auto; /* center within the column */
    user-select: none;
    --fac-height: 100vh;
    height: var(--fac-height);
    /* Spacing between queued cards. Overridden by the Elementor control. */
    --fac-gap: 14%;
    --footer-height: 140px;
    --footer-margin-top: 80px;
    --footer-margin-bottom: 20px;
    --header-height: 80px;
}

/* --------------------------------------------------------------------------
   Stage – contains stacked cards
   -------------------------------------------------------------------------- */

.fac-carousel__stage-wrap {
    max-width: 580px;
    margin: 0 auto;
    position: relative;
    overflow: visible;
    height: calc(
        var(--fac-height) - var(--footer-height) - var(--footer-margin-top) -
            var(--footer-margin-bottom) - var(--header-height)
    );
    display: flex;
    flex-direction: column;
    justify-content: end;
}

.fac-carousel__stage {
    display: grid;
}

/* --------------------------------------------------------------------------
   Cards – all stacked in cell [1/1]
   -------------------------------------------------------------------------- */

.fac-carousel__card {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
    padding: 0;

    /* Default (hidden) state – parked just beyond the last visible queue slot */
    transform: translateX(calc(var(--fac-gap) * 5))
        translateY(calc(var(--fac-gap) * -3.35)) scale(0.54);
    opacity: 0;
    z-index: 1;
    pointer-events: none;

    transition:
        transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 0.55s ease,
        z-index 0s linear;
}

/* Active card – front and center */
.fac-carousel__card.fac-card--active {
    transform: translateX(0) translateY(0) scale(1);
    opacity: 1;
    z-index: 10;
    pointer-events: auto;
}

/*
 * Queued cards: shifted right AND upward so they peek out from the
 * upper-right of the active card, matching the fan-of-frames look.
 * Each step goes further right, further up, and slightly smaller.
 */

/* First queued card */
.fac-carousel__card.fac-card--next-1 {
    transform: translateX(calc(var(--fac-gap) * 1))
        translateY(calc(var(--fac-gap) * -0.67)) scale(0.88);
    opacity: 1;
    z-index: 9;
    pointer-events: none;
}

/* Second queued card */
.fac-carousel__card.fac-card--next-2 {
    transform: translateX(calc(var(--fac-gap) * 2))
        translateY(calc(var(--fac-gap) * -1.34)) scale(0.78);
    opacity: 1;
    z-index: 8;
    pointer-events: none;
}

/* Third queued card */
.fac-carousel__card.fac-card--next-3 {
    transform: translateX(calc(var(--fac-gap) * 3))
        translateY(calc(var(--fac-gap) * -2.01)) scale(0.7);
    opacity: 1;
    z-index: 7;
    pointer-events: none;
}

/* Fourth queued card */
.fac-carousel__card.fac-card--next-4 {
    transform: translateX(calc(var(--fac-gap) * 4))
        translateY(calc(var(--fac-gap) * -2.68)) scale(0.62);
    opacity: 1;
    z-index: 6;
    pointer-events: none;
}

/* Exit animation – swipes to the left */
.fac-carousel__card.fac-card--exit {
    transform: translateX(-200%) translateY(40%) scale(0.88);
    opacity: 1;
    z-index: 11;
    pointer-events: none;
    transition: transform 0.5s cubic-bezier(0.55, 0, 1, 0.45);
}

/* --------------------------------------------------------------------------
   Card inner – the white-mat frame look
   -------------------------------------------------------------------------- */

/* The whole card is a link to the detail page; only the active card on top
   is clickable (queued cards inherit pointer-events: none). */
.fac-carousel__card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    outline: none;
}

.fac-card--active .fac-carousel__card-link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
}

.fac-carousel__card img {
    display: block;
    width: 100%;
    height: auto;
    /* Prevent the image from being taller than the viewport */
    max-height: 52vh;
    object-fit: contain;
    transform: skew(0, 10deg);
}

.fac-carousel__card .fac-card__no-image {
    width: 100%;
    padding-top: 75%;
    background: #d0d0d0;
}

/* --------------------------------------------------------------------------
   Footer – info text
   -------------------------------------------------------------------------- */

.fac-carousel__footer {
    margin-top: var(--footer-margin-top);
    margin-bottom: var(--footer-margin-bottom);
    height: var(--footer-height);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 12;
}

/* Nav buttons – absolutely positioned within .fac-carousel */
.fac-carousel__nav {
    position: absolute;
    /* Mobile default: vertically centred in the footer row */
    bottom: calc(var(--footer-margin-bottom) + var(--footer-height) / 2);
    transform: translateY(50%);
    z-index: 13;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    padding: 0;
    transition: opacity 0.2s;
}

.fac-carousel__prev {
    left: 0;
}
.fac-carousel__next {
    right: 0;
}

.fac-carousel__nav,
.fac-carousel__nav:hover,
.fac-carousel__nav:focus {
    background-color: white;
    color: rgb(51, 51, 51);
}

.fac-carousel__nav:focus-visible {
    outline: 2px solid currentColor;
}

/* Desktop: buttons centred vertically on the full carousel height */
@media (min-width: 768px) {
    .fac-carousel__nav {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }
}

@media (max-width: 768px) {
    .fac-carousel__nav,
    .fac-carousel__nav:hover,
    .fac-carousel__nav:focus {
        background-color: transparent;
    }
}

/* Info block */
.fac-carousel__info {
    text-align: center;
    min-width: 0;
}

.fac-info__title {
    margin: 0 0 4px;
    font-size: 1.1rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.fac-info__description {
    margin: 0 0 10px;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #555;
}

/* --------------------------------------------------------------------------
   Empty state
   -------------------------------------------------------------------------- */

.fac-empty {
    padding: 24px;
    text-align: center;
    color: #888;
    font-style: italic;
}