.ripro-heat-carousel {
    --rhc-card-default: 168px;
    --rhc-padding-default: 12px;
    --rhc-gap-default: 12px;
    --rhc-title-default: 18;
    container-type: inline-size;
    padding-block: 0;
    color: var(--ripro-text, var(--ri-body-color));
}
.ripro-home-content > .home-widget > .ripro-heat-carousel { width: 100%; max-width: none; }
.rhc-panel {
    box-sizing: border-box;
    width: 100%;
    padding: min(var(--ripro-heat-carousel-padding, var(--rhc-padding-default)), 25cqi);
    background-color: var(--ripro-heat-carousel-background, var(--ripro-surface, var(--ri-secondary-bg)));
}
.rhc-panel > p { margin: 0; }
.rhc-heading, .rhc-status {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rhc-heading {
    justify-content: space-between;
    flex-wrap: wrap;
    margin-block-end: 12px;
}
.rhc-heading h2 { font-size: 1.2em; margin: 0; color: inherit; }
.rhc-range {
    color: inherit;
    opacity: .8;
    font-size: var(--ripro-small-size, 12px);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.rhc-playback {
    min-width: 44px;
    min-height: 32px;
    border: 1px solid var(--ripro-border, var(--ri-border-color));
    border-radius: 0;
    background: var(--ripro-surface, var(--ri-body-bg));
    color: var(--ripro-text, var(--ri-body-color));
    font-size: var(--ripro-small-size, 12px);
}
.rhc-carousel { position: relative; inline-size: 100%; max-inline-size: 100%; }
.rhc-track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: min(var(--rhc-card-size, var(--ripro-heat-carousel-card-size, var(--rhc-card-default))), 100%);
    gap: var(--ripro-heat-carousel-gap, var(--rhc-gap-default));
    margin: 0;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
}
.rhc-track[data-enhanced] { scrollbar-width: none; }
.rhc-track[data-enhanced]::-webkit-scrollbar { display: none; }
.rhc-card { min-width: 0; scroll-snap-align: start; }
.rhc-cover {
    display: block;
    position: relative;
    overflow: hidden;
    aspect-ratio: 1;
    background: var(--ripro-surface, var(--ri-secondary-bg));
}
.rhc-cover img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.rhc-cover:focus-visible { outline-offset: -3px; }
.rhc-scrim {
    position: absolute;
    inset: auto 0 0;
    visibility: hidden;
    pointer-events: none;
    padding: 17px 8px 8px;
    background: linear-gradient(transparent, #26364a70 52%, #203047a8);
    color: #fff;
    text-shadow: 0 1px 3px #111a27b0;
    font-size: var(--ripro-font-size, 14px);
    font-weight: var(--ripro-heading-weight, 600);
    line-height: 1.35;
}
.rhc-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.rhc-cover:focus-visible .rhc-scrim,
.rhc-cover[data-revealed] .rhc-scrim { visibility: visible; }
.rhc-arrow:not([hidden]) {
    display: grid;
    place-items: center;
    position: absolute;
    z-index: 1;
    top: 50%;
    inset-inline-start: 6px;
    width: min(44px, calc((100% - 12px) / 2));
    height: min(44px, 100%);
    padding: 0;
    transform: translateY(-50%);
    border: 1px solid #ffffff52;
    border-radius: 0;
    background: #101625b5;
    color: #fff;
}
.rhc-arrow.rhc-next { inset-inline: auto 6px; }
.rhc-arrow:hover { background: #101625e6; }
.rhc-arrow::before {
    content: "";
    width: 10px;
    height: 10px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateX(2px) rotate(45deg);
}
.rhc-next::before { transform: translateX(-2px) rotate(225deg); }
.rhc-arrow:dir(rtl)::before { transform: translateX(-2px) rotate(225deg); }
.rhc-next:dir(rtl)::before { transform: translateX(2px) rotate(45deg); }

@media (hover: hover) and (pointer: fine) {
    .rhc-cover:hover .rhc-scrim { visibility: visible; }
    .rhc-carousel:not(:hover):not(:has(:focus-visible)) .rhc-arrow {
        opacity: 0;
        pointer-events: none;
    }
}
@media (pointer: coarse) {
    .rhc-playback { min-height: 44px; }
}
@media (max-width: 767px) {
    .ripro-heat-carousel {
        --rhc-card-default: 112px;
        --rhc-padding-default: 8px;
        --rhc-gap-default: 8px;
        --rhc-title-default: 12;
    }
}