/**
 * RiylSuggestionsRow Component Styles
 * Horizontal scroll row for title recommendations
 *
 * See: /docs/Components/RiylSuggestionsRow.md
 */

/* Header */
.riyl-suggestions-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 600;
    color: #212529;
}

.riyl-suggestions-header .text-purple {
    color: #6f42c1;
}

/* Loading state */
.riyl-suggestions-loading {
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Scroll row container */
.riyl-suggestions-scroll.similar-scroll-row {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding-top: 0;
    margin-top: 0;
    padding-bottom: 10px;
    overflow-x: auto;
    overflow-y: visible;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Card wrapper sizing - matches system-wide standard (TitleCard.css variables).
   The flex chain below forces every card to stretch to the row's tallest card
   so the score pills (.scores has margin-top: auto in TitleCard.css) line up
   at the bottom across all cards. */
.riyl-suggestions-scroll .similar-card-wrapper {
    flex: 0 0 var(--title-card-width-md);
    width: var(--title-card-width-md);
    display: flex;
    flex-direction: column;
    align-self: stretch;
}

.riyl-suggestions-scroll .similar-card-wrapper .title-card-wrapper {
    margin: 0;
    width: var(--title-card-width-md);
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    height: 100%;
}

.riyl-suggestions-scroll .title-card {
    width: var(--title-card-width-md);
    height: 100% !important;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.riyl-suggestions-scroll .title-card .card-body {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.riyl-suggestions-scroll .title-card .scores {
    margin-top: auto !important;
}

/* Vote badge positioning on poster */
.riyl-suggestions-scroll .riyl-vote-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 10;
}

/* ========================================
   MOBILE TUNING
   Slightly bigger posters, tighter gap between cards, and let the score
   pills wrap to two rows instead of three so each card stays compact.
   Scoped to .riyl-suggestions-scroll so it does not affect other pages.
   ======================================== */
@media (max-width: 576px) {
    .riyl-suggestions-scroll {
        --title-card-width-md: 124px;
    }

    .riyl-suggestions-scroll.similar-scroll-row {
        gap: 8px;
    }

    .riyl-suggestions-scroll .title-card .scores {
        display: flex;
        flex-wrap: wrap;
        gap: 2px;
        row-gap: 2px;
    }

    .riyl-suggestions-scroll .title-card .score-badge {
        font-size: 0.5rem;
        padding: 1px 3px;
        margin-right: 0;
    }
}

/* ========================================
   DARK MODE OVERRIDES
   ======================================== */

[data-bs-theme="dark"] .riyl-suggestions-header {
    color: var(--mv-text-primary);
}