/* ============================================================
   xReviews — reviews.css
   ============================================================ */

/* BEGIN WRAPPER-OVERRIDE */
.wrapper { max-width: 1280px; }
/* END WRAPPER-OVERRIDE */

/* BEGIN SPOTLIGHT */
.reviews-spotlight-scroll {
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.reviews-spotlight-scroll::-webkit-scrollbar { display: none; }
.reviews-spotlight-scroll.is-dragging { cursor: grabbing; user-select: none; }

.reviews-spotlight {
    display: grid;
    grid-template-columns: 8fr 3fr 3fr;
    gap: var(--space-4);
    height: 381px; /* H×28/9 = 1184px → Favourite 8fr=677px exakt 16:9, Best/Worst 3fr=254px exakt 2:3 */
    min-width: 1216px; /* = Wrapper-Content bei max Viewport (1280px - 2×32px Padding) → kein Scroll bei ≥1280px, Scroll darunter */
}

.reviews-spot {
    border-radius: var(--radius-md);
    overflow: visible; /* Tooltips dürfen überlaufen */
    position: relative;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.reviews-spot:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-hover);
    z-index: 1;
}

.reviews-spot.is-empty {
    visibility: hidden;
    pointer-events: none;
}

.reviews-spot-bg {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md); /* clippt das Bild selbst */
    overflow: hidden;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}



.reviews-spot-overlay {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.3) 50%, transparent 100%);
}

.reviews-spot-type-badge {
    position: absolute;
    top: var(--space-4);
    left: var(--space-4);
    font-size: var(--text-2xs);
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 3px var(--space-2);
    border-radius: var(--radius-sm);
    background: rgba(242, 166, 158,0.85);
    color: var(--text-primary);
}

.reviews-spot-type-badge.is-best {
    background: rgba(76,175,130,0.85);
}

.reviews-spot-type-badge.is-worst {
    background: rgba(232,162,58,0.85);
}

.reviews-spot-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-5);
}

.reviews-spot-title {
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.reviews-spot-title-sm {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--space-1);
}

.reviews-spot-sub {
    font-size: var(--text-xs);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    margin-bottom: var(--space-3);
}

.reviews-spot-score {
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--accent);
    font-family: var(--font-mono);
    line-height: 1;
}

.reviews-spot-score-sm {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--accent);
    font-family: var(--font-mono);
}

.reviews-spot-cat {
    font-size:      var(--text-2xs);
    font-family:    var(--font-mono);
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color:          var(--accent);
    margin-bottom:  var(--space-1);
}

.reviews-spot-score-row {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    margin-top:  var(--space-1);
}

.reviews-spot-score-row .progress {
    flex:   1;
    height: 4px;
}

.reviews-spot-tags {
    flex-wrap:     nowrap;
    width:         100%;
    margin-bottom: var(--space-2);
}

.reviews-spot-dots {
    display: flex;
    gap: 5px;
    margin-bottom: var(--space-2);
}

.reviews-spot-dot {
    width: 5px;
    height: 5px;
    border-radius: var(--radius-full);
    background: rgba(255,255,255,0.3);
    transition: background var(--transition);
    cursor: pointer;
}

.reviews-spot-dot.is-active {
    background: var(--accent);
    width: 16px;
}
/* END SPOTLIGHT */

/* BEGIN FILTER-PANEL — Zeile 1 Suche + Sort / Zeile 2 Kategorien + Anzahl + View-Toggle */
.reviews-filter-panel {
    margin-bottom: var(--space-6);
    padding: var(--space-5) var(--space-6);
    position: relative;
    z-index: var(--z-dropdown);
}

.reviews-controls-row1 {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

/* Hoehe ident mit xGallery (.gallery-search / .gallery-sort-btn) */
.reviews-search.search-bar {
    flex: 1;
    height: 40px;
}

.reviews-sort-btn {
    height:    40px;
    min-width: 190px;
    padding:   0 var(--space-4);
    font-size: var(--text-ui);
}

.reviews-row2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
}

.reviews-tabs {
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
}

.reviews-row2-right {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-shrink: 0;
}

.reviews-view-toggle {
    display: flex;
    gap: var(--space-1);
    flex-shrink: 0;
}

.reviews-view-btn.is-active {
    background:   var(--accent-soft);
    color:        var(--accent);
    border-color: rgba(242, 166, 158, 0.35);
}

/* Ident mit xGallery .gallery-count */
.reviews-count {
    font-size: var(--text-sm);
    color:     var(--text-muted);
}
/* END FILTER-PANEL */

/* BEGIN COVER-GRID */
.reviews-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-5);
}

.reviews-card {
    border-radius: var(--radius-md);
    overflow: visible; /* Tooltips dürfen überlaufen */
    animation: cardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
    position: relative;
    aspect-ratio: 2/3;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}

.reviews-card:hover {
    transform: translateY(-4px) scale(1.01);
    box-shadow: var(--shadow-lg);
    border-color: var(--border-hover);
    z-index: 1; /* Stacking Context über Geschwisterkarten → Tooltip nicht verdeckt */
}

.reviews-card-bg {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md); /* clippt das Bild selbst */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-subtle);
    font-size: var(--text-xs);
}

.reviews-card-overlay {
    position: absolute;
    inset: 0;
    border-radius: var(--radius-md);
    background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 45%, rgba(0,0,0,0.1) 100%);
}

.reviews-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-4);
}

.reviews-card-cat {
    font-size: var(--text-2xs);
    font-family: var(--font-mono);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--accent);
    margin-bottom: var(--space-1);
}

.reviews-card-title {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    margin-bottom: var(--space-2);
}

.reviews-card-sub {
    font-size:    var(--text-xs);
    color:        var(--text-muted);
    font-family:  var(--font-mono);
    margin-bottom: var(--space-2);
}

.reviews-card-tags {
    margin-bottom: var(--space-3);
    flex-wrap: nowrap;
}

.reviews-card-score-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.reviews-card-score-num {
    font-size: var(--text-md);
    font-weight: 700;
    color: var(--accent);
    font-family: var(--font-mono);
    flex-shrink: 0;
}

.reviews-card-score-row .progress {
    flex: 1;
    height: 4px;
}
/* END COVER-GRID */

/* BEGIN LIST-VIEW — Spaltenbreiten + Thumb-Groesse sind Page-Delta, Rest kommt aus shared .list-row */
.reviews-list.panel-solid {
    padding:                   0;
    overflow-x:                auto;
    overflow-y:                hidden;
    -webkit-overflow-scrolling: touch;
}

.reviews-list-head,
.reviews-list-row {
    grid-template-columns: 44px 1fr 200px 110px 180px 110px;
}

.reviews-list-row { cursor: pointer; animation: cardIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; }

.reviews-list-thumb {
    width:  44px;
    height: 60px;
}

.reviews-list-score-cell {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
}

.reviews-list-score-num {
    font-size:   var(--text-sm);
    font-weight: 700;
    font-family: var(--font-mono);
    color:       var(--accent);
    width:       30px;
    flex-shrink: 0;
}

.reviews-list-score-cell .progress { flex: 1; height: 5px; }
/* END LIST-VIEW */


/* BEGIN DRAG-SCROLL */
.reviews-list             { cursor: grab; scrollbar-width: none; -ms-overflow-style: none; }
.reviews-list.is-dragging { cursor: grabbing; user-select: none; }
.reviews-list::-webkit-scrollbar { display: none; }
/* END DRAG-SCROLL */

/* BEGIN PLACEHOLDER-BG — bis echte Cover-Bilder da sind */
.bg-game-1  { background: linear-gradient(145deg, #1a0a2e 0%, #3d1a6e 100%); }
.bg-anime-1 { background: linear-gradient(145deg, #0a1a2e 0%, #0d3d6e 100%); }
.bg-film-1  { background: linear-gradient(145deg, #1a2e0a 0%, #2e6e1a 100%); }
.bg-serie-1 { background: linear-gradient(145deg, #2e1a0a 0%, #6e3d1a 100%); }
.bg-game-2  { background: linear-gradient(145deg, #0a2e1a 0%, #1a6e3d 100%); }
.bg-anime-2 { background: linear-gradient(145deg, #2e0a1a 0%, #6e1a3d 100%); }
.bg-film-2  { background: linear-gradient(145deg, #2e2e0a 0%, #5e5e1a 100%); }
.bg-serie-2 { background: linear-gradient(145deg, #0a2e2e 0%, #1a5e5e 100%); }
/* END PLACEHOLDER-BG */

/* BEGIN DETAIL-MODAL — analog Gallery is-portrait Layout.
   Body ist bewusst breit (flex + min-width) und eigenstaendig scrollbar,
   damit selbst eine mehrere hundert Woerter lange, selbst geschriebene
   Rezension bequem lesbar bleibt, waehrend das Cover stehen bleibt. */
#modal-review .modal {
    width:      auto;
    max-width:  min(96vw, 1160px);
    height:     auto;
    max-height: 88vh;
    padding:    0;
    overflow:   hidden;
    display:    flex;
}
#modal-review .modal::before { display: none; }

.reviews-modal-detail {
    position:   relative;
    display:    flex;
    width:      100%;
    height:     100%;
    overflow:   hidden;
}

.reviews-modal-close {
    position:        absolute;
    top:             var(--space-4);
    right:           var(--space-4);
    width:           34px;
    height:          34px;
    border-radius:   var(--radius-full);
    background:      rgba(10, 6, 20, 0.78);
    border:          1px solid var(--border);
    color:           rgba(255, 255, 255, 0.90);
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    box-shadow:      0 2px 8px rgba(0,0,0,0.6);
    transition:      background var(--transition-fast);
    z-index:         2;
}

.reviews-modal-close:hover {
    background: rgba(10, 6, 20, 0.92);
}

.reviews-modal-cover-wrap {
    flex-shrink: 0;
    width:       400px;
}

.reviews-modal-cover {
    width:        100%;
    aspect-ratio: 2 / 3;   /* 400 × 600 px — passt exakt zum 800×1200-Template */
    display:      flex;
    align-items:  center;
    justify-content: center;
    color:        var(--text-subtle);
}

.reviews-modal-body {
    flex:            1;
    min-width:       420px;
    max-width:       640px;
    display:         flex;
    flex-direction:  column;
    gap:             var(--space-4);
    padding:         var(--space-4) var(--space-6) var(--space-6);
    border-left:     1px solid var(--border);
    overflow-y:      auto;
    max-height:      calc(400px * 3 / 2); /* = 600px, ident mit Cover-Höhe */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.reviews-modal-body > * {
    flex-shrink: 0;
}
.reviews-modal-body::-webkit-scrollbar { display: none; }

.reviews-modal-title-row {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             var(--space-3);
    min-height:      34px; /* matches close-button height */
    padding-right:   calc(34px + var(--space-4)); /* close-button width + right offset */
}

.reviews-modal-title {
    font-size:   var(--text-lg);
    font-weight: 700;
    color:       var(--text-primary);
    margin:      0;
}

.reviews-modal-year {
    font-size:   var(--text-sm);
    color:       var(--text-muted);
    font-family: var(--font-mono);
    flex-shrink: 0;
}

.reviews-modal-footer {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
    padding-top:    var(--space-2);
}

.reviews-modal-footer .btn {
    width:            100%;
    justify-content:  center;
}

.reviews-modal-desc {
    font-size: var(--text-base);
    color: var(--text-secondary);
    line-height: 1.7;
    margin: 0;
    white-space: pre-line;
}

.reviews-section-label {
    font-size:      var(--text-2xs);
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color:          var(--text-muted);
    font-family:    var(--font-mono);
    padding-bottom: var(--space-2);
    border-bottom:  1px solid var(--border);
    margin-top:     var(--space-5);
}

.reviews-modal-scores {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
}

.reviews-score-row .progress { height: 6px; }

.reviews-modal-overall {
    padding-top: var(--space-3);
    border-top: 1px solid var(--border);
}

.reviews-modal-overall .progress-label-text {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}

.reviews-modal-overall .progress-label-value {
    font-size: var(--text-lg);
    color: var(--accent);
}

.reviews-modal-overall .progress { height: 10px; }

.reviews-modal-date {
    font-size:  var(--text-xs);
    color:      var(--text-subtle);
    font-family: var(--font-mono);
    text-align: right;
}
/* END DETAIL-MODAL */

/* BEGIN MODAL-GALLERY */
.reviews-modal-gallery {
    overflow-x:      auto;
    scrollbar-width: thin;
    scrollbar-color: var(--accent) var(--glass);
    padding-bottom:  var(--space-2);
    margin-top:      var(--space-1);
}

.reviews-modal-gallery::-webkit-scrollbar       { height: 4px; }
.reviews-modal-gallery::-webkit-scrollbar-track { background: var(--glass); }
.reviews-modal-gallery::-webkit-scrollbar-thumb { background: var(--accent); border-radius: var(--radius-full); }

.reviews-modal-gallery-track {
    display: flex;
    gap:     var(--space-3);
    width:   max-content;
}

.reviews-gallery-img {
    height:        120px;
    width:         auto;
    border-radius: var(--radius);
    border:        1px solid var(--border);
    cursor:        pointer;
    object-fit:    cover;
    flex-shrink:   0;
    transition:    border-color var(--transition-fast), transform var(--transition-fast);
}

.reviews-gallery-img:hover {
    border-color: var(--accent);
    transform:    scale(1.03);
}
/* END MODAL-GALLERY */


/* BEGIN LIGHTBOX */
.reviews-lightbox {
    position:        fixed;
    inset:           0;
    z-index:         500;
    background:      rgba(0, 0, 0, 0.92);
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          zoom-out;
}

.reviews-lightbox.is-hidden { display: none; }

.reviews-lightbox-frame {
    position: relative;
    display:  flex;
}

.reviews-lightbox-img {
    max-width:     90vw;
    max-height:    90vh;
    object-fit:    contain;
    border-radius: var(--radius);
    box-shadow:    0 8px 40px rgba(0, 0, 0, 0.8);
    cursor:        default;
    display:       block;
}

.reviews-lightbox-close {
    position:        absolute;
    top:             var(--space-3);
    right:           var(--space-3);
    width:           34px;
    height:          34px;
    background:      rgba(10, 6, 20, 0.78);
    border:          1px solid var(--border);
    border-radius:   var(--radius-full);
    color:           rgba(255, 255, 255, 0.9);
    font-size:       18px;
    line-height:     1;
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background var(--transition-fast);
    z-index:         1;
}

.reviews-lightbox-close:hover { background: rgba(10, 6, 20, 0.96); }
/* END LIGHTBOX */


/* BEGIN RESPONSIVE */
@media (max-width: 900px) {
    .reviews-modal-detail { flex-direction: column; }
    .reviews-modal-cover-wrap { width: 100%; aspect-ratio: 16 / 9; height: auto; overflow: hidden; }
    .reviews-modal-cover { aspect-ratio: unset; height: 100%; }
    .reviews-modal-body { max-height: 60vh; }
    .reviews-modal-body { width: 100%; min-width: 0; max-width: none; border-left: none; border-top: 1px solid var(--border); }
    .reviews-modal-title-row { padding-right: 0; }

    .reviews-spotlight-scroll { overflow-x: visible; }
    .reviews-spotlight { grid-template-columns: 1fr; height: auto; min-width: 0; }
    .reviews-spot { aspect-ratio: 16 / 9; height: auto; }

    .reviews-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
    .reviews-grid { grid-template-columns: repeat(2, 1fr); }

    .reviews-controls-row1 { flex-wrap: wrap; }
    .reviews-search.search-bar { width: 100%; flex: 1 1 100%; }
    .reviews-controls-row1 .dropdown { width: 100%; }
    .reviews-sort-btn { width: 100%; min-width: 0; }
    .reviews-controls-row1 .dropdown-menu { width: 100%; }

    .reviews-row2 { flex-wrap: wrap; }
    .reviews-row2-right { width: 100%; justify-content: space-between; }
    .reviews-view-toggle { flex-direction: row; }

    /* Spalten nicht ausblenden — Header und Zeilen bleiben durch gemeinsame min-width synchron */
    .reviews-list-head,
    .reviews-list-row {
        min-width: 880px;
    }
}
/* END RESPONSIVE */