/* ============================================================
   RED ROCK — THREE-COLUMN BOOK COVER FLOW
   ============================================================ */

.rr-cover-flow {
    --cover-gap: 12px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--cover-gap);
    width: 100%;
    height: 100%;
    min-height: 430px;
    padding: 12px;
    overflow: hidden;
    border-radius: inherit;
    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(220, 31, 43, 0.19),
            transparent 58%
        ),
        #111114;
    isolation: isolate;
}

/* Soft top and bottom shading */
.rr-cover-flow::before,
.rr-cover-flow::after {
    position: absolute;
    z-index: 5;
    right: 0;
    left: 0;
    height: 70px;
    content: "";
    pointer-events: none;
}

.rr-cover-flow::before {
    top: 0;
    background: linear-gradient(
        to bottom,
        #111114 0%,
        rgba(17, 17, 20, 0) 100%
    );
}

.rr-cover-flow::after {
    bottom: 0;
    background: linear-gradient(
        to top,
        #111114 0%,
        rgba(17, 17, 20, 0) 100%
    );
}

.rr-cover-flow__column {
    min-width: 0;
    height: 100%;
    overflow: hidden;
    transform: translateZ(0);
}

.rr-cover-flow__track {
    display: flex;
    flex-direction: column;
    width: 100%;
    will-change: transform;
    backface-visibility: hidden;
}

/*
Each set has bottom padding matching the image gap.
This makes the duplicated loop seamless.
*/
.rr-cover-flow__set {
    display: flex;
    flex: none;
    flex-direction: column;
    gap: var(--cover-gap);
    width: 100%;
    padding-bottom: var(--cover-gap);
}

.rr-cover-flow__item {
    position: relative;
    flex: none;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: 8px;
    background: #242428;
    box-shadow: 0 15px 25px rgba(0, 0, 0, 0.34);
}

.rr-cover-flow__item img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 2 / 3;
    object-fit: cover;
    object-position: center top;
    transform: scale(1.015);
}

/* First and third columns move upward */
.rr-cover-flow__column--up .rr-cover-flow__track {
    animation: rrCoverFlowUp var(--flow-duration, 28s) linear infinite;
}

/* Middle column moves downward */
.rr-cover-flow__column--down .rr-cover-flow__track {
    animation: rrCoverFlowDown var(--flow-duration, 31s) linear infinite;
}

/* Slightly stagger the third column */
.rr-cover-flow__column:nth-child(3) .rr-cover-flow__track {
    animation-duration: 34s;
}

@keyframes rrCoverFlowUp {
    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(0, -50%, 0);
    }
}

@keyframes rrCoverFlowDown {
    from {
        transform: translate3d(0, -50%, 0);
    }

    to {
        transform: translate3d(0, 0, 0);
    }
}

/* Pause while the visitor examines the covers */
.rr-cover-flow:hover .rr-cover-flow__track {
    animation-play-state: paused;
}

/* Marketing card placement */
/*.mk-bento-card--featured {*/
/*    grid-template-columns:*/
/*        minmax(0, 0.92fr)*/
/*        minmax(360px, 1.08fr);*/
/*}*/

/*.mk-bento-card--featured > .rr-cover-flow--card {*/
/*    align-self: stretch;*/
/*    min-width: 0;*/
/*    min-height: 430px;*/
/*    border-radius: 0;*/
/*}*/

/* ============================================================
   BOOK COVER DESIGN HERO — DIAGONAL COVER SLIDER
   ============================================================ */

.rr-cover-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Full hero visual layer */
.rr-cover-hero__visual {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(
            circle at 78% 45%,
            rgba(215, 31, 43, 0.2),
            transparent 48%
        ),
        #ffffff;
}

/*
Slider begins near the center-top and crosses
toward the bottom-right.
*/
.rr-cover-hero__visual > .rr-cover-flow--hero {
    position: absolute !important;
    top: -24% !important;
    right: -7% !important;
    bottom: auto !important;
    left: auto !important;

    width: 62% !important;
    height: 150% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 12px !important;

    border-radius: 0 !important;
    transform: rotate(-8deg);
    transform-origin: center;
}

/* Stop slider contents from changing hero height */
.rr-cover-hero__visual
.rr-cover-flow__column {
    position: relative;
    height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
    contain: layout paint;
}

/* Ensure global hero image rules cannot affect covers */
.rr-cover-hero__visual
.rr-cover-flow__item img {
    position: static !important;
    inset: auto !important;
    display: block !important;

    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;

    object-fit: cover !important;
    object-position: center top !important;
    transform: scale(1.015) !important;
}

/* Cream transition protecting the left-side content */
.rr-cover-hero__wash {
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        #f7f3ee 0%,
        #f7f3ee 34%,
        rgba(247, 243, 238, 0.98) 43%,
        rgba(247, 243, 238, 0.82) 51%,
        rgba(247, 243, 238, 0.3) 62%,
        transparent 75%
    );
}

/* Keep all existing hero content above the slider */
.rr-cover-hero__inner {
    position: relative;
    z-index: 3;
}

/* Keep content restricted to the readable left side */
.rr-cover-hero__content {
    position: relative;
    z-index: 4;
    width: min(54%, 850px);
}

@media (max-width: 1100px) {
    .rr-cover-hero__visual > .rr-cover-flow--hero {
        top: -18% !important;
        right: -12% !important;
        width: 67% !important;
        height: 140% !important;
        transform: rotate(-7deg);
    }

    .rr-cover-hero__wash {
        background: linear-gradient(
            90deg,
            #f7f3ee 0%,
            #f7f3ee 38%,
            rgba(247, 243, 238, 0.94) 49%,
            rgba(247, 243, 238, 0.56) 62%,
            transparent 80%
        );
    }

    .rr-cover-hero__content {
        width: 58%;
    }
}

@media (max-width: 800px) {
    .rr-cover-hero__visual > .rr-cover-flow--hero {
        top: -5% !important;
        right: -42% !important;
        width: 105% !important;
        height: 110% !important;
        transform: rotate(-5deg);
        opacity: 0.52;
    }

    .rr-cover-hero__wash {
        background: linear-gradient(
            90deg,
            #f7f3ee 0%,
            rgba(247, 243, 238, 0.98) 48%,
            rgba(247, 243, 238, 0.8) 67%,
            rgba(247, 243, 238, 0.25) 100%
        );
    }

    .rr-cover-hero__content {
        width: 82%;
    }
}

@media (max-width: 520px) {
    .rr-cover-hero__visual > .rr-cover-flow--hero {
        right: -58% !important;
        width: 125% !important;
        opacity: 0.4;
    }

    .rr-cover-hero__content {
        width: 100%;
    }

    .rr-cover-hero__wash {
        background: linear-gradient(
            90deg,
            #f7f3ee 0%,
            rgba(247, 243, 238, 0.97) 65%,
            rgba(247, 243, 238, 0.62) 100%
        );
    }
}



/* ============================================================
   MARKETING CARD — DIAGONAL COVER FLOW
   ============================================================ */

/* Keep the slider strictly inside this card */
.rr-marketing-landing .mk-bento-card--featured {
    position: relative !important;
    display: block !important;
    height: 350px !important;
    min-height: 350px !important;
    padding: 0 !important;
    overflow: hidden !important;
    isolation: isolate;
}

/* Keep the text in the left portion */
.rr-marketing-landing
.mk-bento-card--featured
.mk-bento-card__content {
    position: relative;
    z-index: 4;
    width: 57%;
    height: 100%;
    padding: clamp(35px, 4vw, 58px) !important;
}

/*
Slider begins near the top-center and travels diagonally
towards the bottom-right.
*/
.rr-marketing-landing
.mk-bento-card--featured
> .rr-cover-flow--card {
    position: absolute !important;
    z-index: 2;
    top: -22% !important;
    right: -7% !important;
    bottom: auto !important;
    left: auto !important;

    width: 50% !important;
    height: 135% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 9px !important;

    border-radius: 0 !important;
    transform: rotate(-9deg);
    transform-origin: center;
}

/* Add separation between text and moving covers */
.rr-marketing-landing
.mk-bento-card--featured::after {
    position: absolute;
    z-index: 3;
    top: 0;
    bottom: 0;
    left: 43%;
    width: 25%;
    content: "";
    pointer-events: none;
    background: linear-gradient(
        90deg,
        #1b1b20 0%,
        rgba(27, 27, 32, 0.92) 28%,
        rgba(27, 27, 32, 0.35) 70%,
        transparent 100%
    );
}

/* Ensure slider tracks cannot increase the card height */
.rr-marketing-landing
.rr-cover-flow--card
.rr-cover-flow__column {
    position: relative;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    contain: layout paint;
}

/* Smaller gaps work better inside this card */
.rr-marketing-landing .rr-cover-flow--card {
    --cover-gap: 9px;
    gap: 9px;
}

/* Make covers feel slightly more cinematic */
.rr-marketing-landing
.rr-cover-flow--card
.rr-cover-flow__item {
    border-radius: 9px;
    box-shadow: 0 14px 24px rgba(0, 0, 0, 0.42);
}

/* Prevent any global card-image CSS from interfering */
.rr-marketing-landing
.mk-bento-card--featured
.rr-cover-flow--card img {
    position: static !important;
    inset: auto !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2 / 3 !important;
    object-fit: cover !important;
    object-position: center top !important;
    transform: scale(1.015) !important;
}

@media (max-width: 1100px) {
    .rr-marketing-landing .mk-bento-card--featured {
        height: 330px !important;
        min-height: 330px !important;
    }

    .rr-marketing-landing
    .mk-bento-card--featured
    .mk-bento-card__content {
        width: 59%;
        padding: 38px 32px !important;
    }

    .rr-marketing-landing
    .mk-bento-card--featured
    > .rr-cover-flow--card {
        top: -15% !important;
        right: -10% !important;
        width: 52% !important;
        height: 130% !important;
        transform: rotate(-7deg);
    }

    .rr-marketing-landing
    .mk-bento-card--featured::after {
        left: 44%;
    }
}

@media (max-width: 850px) {
    .rr-marketing-landing .mk-bento-card--featured {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .rr-marketing-landing
    .mk-bento-card--featured
    .mk-bento-card__content {
        width: 100%;
        height: auto;
        padding: 30px 24px !important;
    }

    .rr-marketing-landing
    .mk-bento-card--featured
    > .rr-cover-flow--card {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        width: 100% !important;
        height: 400px !important;
        min-height: 400px !important;

        border-radius: 0 0 16px 16px !important;
        transform: none !important;
    }

    .rr-marketing-landing
    .mk-bento-card--featured::after {
        display: none;
    }
}

@media (max-width: 520px) {
    .rr-marketing-landing
    .mk-bento-card--featured
    > .rr-cover-flow--card {
        height: 350px !important;
        min-height: 350px !important;
    }
}