/**
 * reviewsRatingsCard.css
 * Styles for the generic inline Reviews & Ratings card.
 * Reuses classes .reviews-section, .reviews-chip*, .reviews-summary-chips,
 * .reviews-count-badge, .reviews-see-all-btn from titleDetail.css where they
 * already exist — just adds a couple of generic-card-specific classes.
 */

/* Chip row variants (again label is entity-specific — read/play/see/listen) */
.reviews-chip-again i {
    color: #0dcaf0;
}

/* Preview strip — horizontal scrolling row of short review cards */
.reviews-preview-strip {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
}
.reviews-preview-strip::-webkit-scrollbar {
    height: 6px;
}
.reviews-preview-strip::-webkit-scrollbar-thumb {
    background: var(--mv-border-color, #adb5bd);
    border-radius: 3px;
}

.rrc-preview-card {
    flex: 0 0 260px;
    background: var(--mv-bg-surface, #f8f9fa);
    border: 1px solid var(--mv-border-color, #adb5bd);
    border-radius: 0.5rem;
    padding: 0.6rem 0.75rem;
    min-height: 100px;
}
.rrc-preview-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.rrc-preview-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bs-primary, #0d6efd);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
    flex-shrink: 0;
}
.rrc-preview-name {
    font-size: 0.85rem;
    font-weight: 600;
    flex-grow: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.rrc-preview-date {
    white-space: nowrap;
}
.rrc-preview-headline {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
    line-height: 1.3;
}
.rrc-preview-excerpt {
    font-size: 0.85rem;
    color: var(--mv-text-secondary, #495057);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Empty state */
.rrc-empty {
    color: var(--mv-text-muted, #6c757d);
}
.rrc-empty-wrap {
    padding: 0.5rem 0;
}

/* "Write a Review" tile — modeled on .el-create-card from entityList.css.
   Two sizes:
     - Default: matches a review preview card (260×100) so it slots in at the
       end of .reviews-preview-strip.
     - .rrc-add-review-card-large: the only thing shown in the empty state. */
.rrc-add-review-card {
    flex: 0 0 260px;
    min-height: 100px;
    background: var(--mv-bg-surface, #f8f9fa);
    border: 2px dashed var(--mv-border-color, #adb5bd);
    border-radius: 0.5rem;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    color: var(--mv-text-secondary, #6c757d);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    text-align: center;
}
.rrc-add-review-card:hover,
.rrc-add-review-card:focus {
    border-color: var(--bs-primary, #0d6efd);
    background: var(--mv-bg-hover, #f0f0f0);
    color: var(--bs-primary, #0d6efd);
    outline: none;
}
.rrc-add-review-icon {
    font-size: 1.5rem;
    line-height: 1;
}
.rrc-add-review-label {
    font-weight: 600;
    font-size: 0.95rem;
}
.rrc-add-review-hint {
    font-size: 0.78rem;
    opacity: 0.8;
}

/* Empty-state size — bigger, centered, with more breathing room. */
.rrc-add-review-card-large {
    flex: 0 0 auto;
    width: 100%;
    max-width: 360px;
    min-height: 130px;
    margin: 0 auto;
    gap: 6px;
}
.rrc-add-review-card-large .rrc-add-review-icon {
    font-size: 2.25rem;
}
.rrc-add-review-card-large .rrc-add-review-label {
    font-size: 1.05rem;
}
.rrc-add-review-card-large .rrc-add-review-hint {
    font-size: 0.85rem;
}

/* Dark mode — match .el-create-card from entityList.css */
[data-bs-theme="dark"] .rrc-add-review-card {
    background: var(--mv-bg-card, #1e293b);
    border-color: var(--mv-border-color, #334155);
}
[data-bs-theme="dark"] .rrc-add-review-card:hover,
[data-bs-theme="dark"] .rrc-add-review-card:focus {
    border-color: var(--bs-primary, #6ea8fe);
    background: var(--mv-bg-hover, #283447);
    color: var(--bs-primary, #6ea8fe);
}

/* Dark mode overrides */
[data-bs-theme="dark"] .rrc-preview-card {
    background: var(--mv-bg-card, #1e293b);
    border-color: var(--mv-border-color, #334155);
}

/* Light mode: the card header has a blue background, and Bootstrap's btn-link
   default color is also blue — so the "See N Reviews" button becomes invisible.
   Force white text in light mode for readability. Dark mode keeps default. */
html:not([data-bs-theme="dark"]) .reviews-section .card-header .rrc-see-all-btn,
html:not([data-bs-theme="dark"]) .reviews-section .card-header .reviews-see-all-btn {
    color: #fff;
}
html:not([data-bs-theme="dark"]) .reviews-section .card-header .rrc-see-all-btn:hover,
html:not([data-bs-theme="dark"]) .reviews-section .card-header .reviews-see-all-btn:hover {
    color: rgba(255, 255, 255, 0.85);
}