/* ============================================================
   BSX CASSANDRA SINGLE
   Requires: bsx-design.css, bsx-base.css
   ============================================================ */

.cassandra-container {
    max-width:   1320px;
    margin:      0 auto;
    background:  var(--bsx-bg-dark);
    box-shadow:  var(--bsx-shadow-lg);
    padding:     10px;
    max-height:  230px;
}

.cassandra-header {
    display:         flex;
    height:          25px;
    justify-content: space-between;
    align-items:     center;
    padding:         2px 5px;
    border-bottom:   1px solid rgba(255,255,255,0.1);
}

.cassandra-name { font-weight: 700; font-size: var(--bsx-text-2xl); color: var(--bsx-accent); }

.cassandra-main {
    display:        flex;
    flex-direction: row;
    gap:            10px;
    padding:        10px;
    max-height:     180px;
}

.cassandra-left  { flex: 0 0 220px; display: flex; align-items: center; justify-content: start; }
.cassandra-right { flex: 1; display: flex; flex-direction: row; gap: 8px; }
.cassandra-infoblock { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.cassandra-container p:empty { display: none; }
.cassandra-img   { width: 80%; height: 120px; object-fit: contain; }

.cassandra-metric {
    display:          flex;
    justify-content:  space-between;
    align-items:      center;
    padding:          5px 16px;
    background:       rgba(255,255,255,0.02);
    border-radius:    var(--bsx-radius-md);
    transition:       background var(--bsx-transition);
}

.cassandra-metric:hover { background: rgba(255,255,255,0.05); }
.metric-label           { font-size: var(--bsx-text-base); color: #e0e0e0; }
.metric-value           { font-size: var(--bsx-text-lg); font-weight: 600; color: #f0f0f0; }

.star-rating {
    align-self:  center;
    font-size:   2rem;
    font-weight: 300;
    color:       var(--bsx-accent);
}

.desc-content-wrapper {
    overflow:   hidden;
    max-height: 0;
    transition: max-height 0.4s ease;
}

.desc-content-wrapper.open {
    max-height:   500px;
    border-top:   1px solid rgba(100,150,255,0.3);
}

.desc-content {
    padding:          20px 24px;
    font-size:        var(--bsx-text-xl);
    line-height:      2rem;
    color:            #e0e0e0;
    font-weight:      400;
    max-height:       450px;
    overflow-y:       auto;
    background:       rgba(20,20,20,0.6);
}

.desc-content::-webkit-scrollbar       { width: 8px; }
.desc-content::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); border-radius: var(--bsx-radius-md); }
.desc-content::-webkit-scrollbar-thumb { background: rgba(100,150,255,0.5); border-radius: var(--bsx-radius-md); }
.desc-content::-webkit-scrollbar-thumb:hover { background: rgba(100,150,255,0.7); }

@media (max-width: 768px) {
    .cassandra-container { max-height: 630px; }
    .cassandra-main      { flex-direction: column; max-height: 350px; }
    .cassandra-left      { flex: 0 0 auto; }
    .cassandra-header    { flex-direction: column; align-items: flex-start; gap: 10px; }
}