/* ==========================================================================
   Hype Review Carousel — Styles
   ========================================================================== */

:root {
    --hrc-card-radius: 30px;
    --hrc-card-bg: #fff;
    --hrc-card-gap: 14px;
    --hrc-card-height: 140px;
    --hrc-image-ratio: 30%;
    --hrc-nav-size: 48px;
    --hrc-speed: 0.45s;
    --hrc-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --hrc-scale-1: 0.78;
    --hrc-scale-2: 0.58;
}

/* ---------- Wrapper ---------- */
.hrc-wrapper {
    width: 100%;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.hrc-wrapper *,
.hrc-wrapper *::before,
.hrc-wrapper *::after {
    box-sizing: inherit;
}

/* ---------- Carousel container ---------- */
.hrc-carousel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* ---------- Cards container ---------- */
.hrc-cards {
    position: relative;
    width: 100%;
    height: calc(
        var(--hrc-card-height)
        + var(--hrc-card-gap)
        + var(--hrc-card-height) * var(--hrc-scale-1)
        + var(--hrc-card-gap)
        + var(--hrc-card-height) * var(--hrc-scale-2)
    );
    overflow: hidden;
}

/* ---------- Card base ---------- */
.hrc-card {
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--hrc-card-height);
    display: flex;
    background: var(--hrc-card-bg);
    border-radius: var(--hrc-card-radius);
    overflow: hidden;
    transition:
        top var(--hrc-speed) var(--hrc-easing),
        transform var(--hrc-speed) var(--hrc-easing),
        opacity var(--hrc-speed) var(--hrc-easing);
}

/* ---------- Position classes ---------- */

/* Front card: full size */
.hrc-card--p0 {
    top: 0;
    transform: translateX(0%) scale(1);
    transform-origin: top left;
    opacity: 1;
}

/* Middle card: scaled down, pushed right via translateX */
.hrc-card--p1 {
    top: calc(var(--hrc-card-height) + var(--hrc-card-gap));
    transform: translateX(calc((1 - var(--hrc-scale-1)) * 100%)) scale(var(--hrc-scale-1));
    transform-origin: top left;
    opacity: 1;
}

/* Back card: scaled down more, pushed right via translateX */
.hrc-card--p2 {
    top: calc(
        var(--hrc-card-height) + var(--hrc-card-gap)
        + var(--hrc-card-height) * var(--hrc-scale-1) + var(--hrc-card-gap)
    );
    transform: translateX(calc((1 - var(--hrc-scale-2)) * 100%)) scale(var(--hrc-scale-2));
    transform-origin: top left;
    opacity: 1;
}

/* Exit up: slides out above viewport */
.hrc-card--exit-up {
    top: calc(-1 * var(--hrc-card-height) - var(--hrc-card-gap));
    transform: translateX(0%) scale(1);
    transform-origin: top left;
    opacity: 0;
}

/* Enter below: staged below viewport before sliding in */
.hrc-card--enter-below {
    top: calc(
        var(--hrc-card-height) + var(--hrc-card-gap)
        + var(--hrc-card-height) * var(--hrc-scale-1) + var(--hrc-card-gap)
        + var(--hrc-card-height) * var(--hrc-scale-2) + var(--hrc-card-gap)
    );
    transform: translateX(calc((1 - var(--hrc-scale-2)) * 100%)) scale(var(--hrc-scale-2));
    transform-origin: top left;
    opacity: 0;
}

/* Exit down: slides out below viewport */
.hrc-card--exit-down {
    top: calc(
        var(--hrc-card-height) + var(--hrc-card-gap)
        + var(--hrc-card-height) * var(--hrc-scale-1) + var(--hrc-card-gap)
        + var(--hrc-card-height) * var(--hrc-scale-2) + var(--hrc-card-gap)
    );
    transform: translateX(calc((1 - var(--hrc-scale-2)) * 100%)) scale(var(--hrc-scale-2));
    transform-origin: top left;
    opacity: 0;
}

/* Enter above: staged above viewport before sliding in */
.hrc-card--enter-above {
    top: calc(-1 * var(--hrc-card-height) - var(--hrc-card-gap));
    transform: translateX(0%) scale(1);
    transform-origin: top left;
    opacity: 0;
}

/* Staging: hidden, no transitions */
.hrc-card--staging {
    top: calc(
        var(--hrc-card-height) + var(--hrc-card-gap)
        + var(--hrc-card-height) * var(--hrc-scale-1) + var(--hrc-card-gap)
        + var(--hrc-card-height) * var(--hrc-scale-2) + var(--hrc-card-gap)
    );
    transform: translateX(calc((1 - var(--hrc-scale-2)) * 100%)) scale(var(--hrc-scale-2));
    transform-origin: top left;
    opacity: 0;
    pointer-events: none;
}

/* Disable transition when repositioning the staging card */
.hrc-card--no-transition {
    transition: none !important;
}

/* ---------- Card image (left 30%) ---------- */
.hrc-card__image {
    width: var(--hrc-image-ratio);
    min-width: var(--hrc-image-ratio);
    border-radius: 15px;
    height: 100%;
    overflow: hidden;
}

.hrc-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---------- Card content (right 70%) ---------- */
.hrc-card__content {
    flex: 1;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.hrc-card__name {
    margin: 0 0 6px !important;
    font-size: 16px;
    font-weight: 700;
    color: #111 !important;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hrc-card__message {
    margin: 0 0 2px !important;
    font-size: 13px;
    font-weight: 400;
    color: #555;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hrc-card__logo {
    width: 60px;
    height: auto;
    object-fit: contain;
    margin-top: auto;
}

/* ---------- Navigation arrows ---------- */
.hrc-nav {
    width: var(--hrc-nav-size);
    height: var(--hrc-nav-size);
    border: none;
    border-radius: 50%;
    padding: 0;
    cursor: pointer;
    flex-shrink: 0;
    z-index: 2;
}

.hrc-nav img {
    width: 100%;
    height: 100%;
    display: block;
}

.hrc-nav:active {
    transform: scale(0.93);
}

.hrc-nav--up {
    margin-bottom: 17px;
}

.hrc-nav--down {
    position: absolute;
    left: 0;
    top: 55%;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    :root {
        --hrc-card-height: 120px;
        --hrc-card-radius: 20px;
    }

    .hrc-card__name {
        font-size: 14px;
    }

    .hrc-card__message {
        font-size: 12px;
        -webkit-line-clamp: 2;
    }
}