/* ============================================================
   Property Magazine Carousel
   File: your-theme/components/property-carousel.css
   ============================================================ */

:root {
    --pc-gap:    20px;
    --pc-accent: #B42D33;
}

/* ── Stage ── */
.prop-stage {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    user-select: none;
}

/* ── Desktop grid: 2 columns, 2 rows ── */
.prop-grid {
    display: grid;
    grid-template-columns: 3fr 2fr;
    grid-template-rows: 1fr 1fr;
    gap: var(--pc-gap);
    aspect-ratio: 80 / 27;
}

.prop-slot {
    position: relative;
    overflow: hidden;
    background: #e8e4df;
}

.prop-feature {
    grid-column: 1;
    grid-row: 1 / 3;
}

.prop-top {
    grid-column: 2;
    grid-row: 1;
}

.prop-bottom {
    grid-column: 2;
    grid-row: 2;
}

/* ── Card ── */
.prop-card {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.prop-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 7s ease;
}

.prop-card:hover img {
    transform: scale(1.04);
}

/* ── Animations ── */
.prop-card.enter-feature {
    animation: pcEnterFeature 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.prop-card.enter-top {
    animation: pcEnterTop 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.prop-card.enter-bottom {
    animation: pcEnterBottom 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.prop-card.exit {
    animation: pcExit 0.45s ease-in forwards;
}

@keyframes pcEnterFeature {
    from { opacity: 0; transform: translateX(-24px) scale(0.98); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes pcEnterTop {
    from { opacity: 0; transform: translateY(-18px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pcEnterBottom {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes pcExit {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0; transform: scale(0.96); }
}

/* ── Progress bar ── */
.prop-progress {
    margin-top: 10px;
    height: 2px;
    background: #DDE6E9;
    overflow: hidden;
}

.prop-fill {
    height: 100%;
    width: 0%;
    background: var(--pc-accent);
    transition: width linear;
}

/* ============================================================
   TABLET — 601px to 1024px
   Single column, feature image only at 3/2.
   Top and bottom slots hidden — JS queue runs behind the scenes.
   ============================================================ */
@media (min-width: 601px) and (max-width: 1024px) {

    .prop-grid {
        display: block;
        aspect-ratio: unset;
        width: 100%;
    }

    .prop-slot.prop-feature {
        display: block;
        position: relative;
        width: 100%;
        aspect-ratio: 3 / 2;
        overflow: hidden;
    }

    .prop-slot.prop-feature .prop-card {
        position: relative;
        inset: unset;
        width: 100%;
        height: 100%;
    }

    .prop-slot.prop-feature .prop-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .prop-slot.prop-top,
    .prop-slot.prop-bottom {
        display: none;
    }

}


/* ============================================================
   MOBILE — 600px and below
   Single column, feature image only at 9/8.
   Top and bottom slots hidden — JS queue runs behind the scenes.
   ============================================================ */
@media (max-width: 600px) {

    .prop-grid {
        display: block;
        aspect-ratio: unset;
        width: 100%;
    }

    .prop-slot.prop-feature {
        display: block;
        position: relative;
        width: 100%;
        aspect-ratio: 9 / 8;
        overflow: hidden;
    }

    .prop-slot.prop-feature .prop-card {
        position: relative;
        inset: unset;
        width: 100%;
        height: 100%;
    }

    .prop-slot.prop-feature .prop-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .prop-slot.prop-top,
    .prop-slot.prop-bottom {
        display: none;
    }

}