/* ========================================
   RANK_CARD Component

   Structure:
   .rank-card
     .rank-card__frame        ← visual frame (image area)
       .rank-card__bg          ← background layer
       .rank-card__picture     ← [slot] person photo
       .rank-card__farm        ← [slot] decorative overlay (gems)
     .rank-card__info          ← info bar (bottom)
       .rank-card__logo        ← [slot] rank logo (red circle)
       .rank-card__details
         .rank-card__name      ← [slot] name + surname
         .rank-card__company   ← [slot] company name

   Sizes per rank (base 1920px):
     Rank 1-2: 300x300
     Rank 3:   250x250
     Rank 4:   200x200
     Rank 5-6: 150x150
   ======================================== */

/* --- Base Card --- */
.rank-card {
    --rc-scale: 1;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: clamp(
        calc(90px * var(--rc-scale)),
        calc(15.625vw * var(--rc-scale)),
        calc(300px * var(--rc-scale))
    );
    border-radius: 4%; /* % of card's actual width — auto-scales on mobile */
    overflow: hidden;
    background: transparent;
}

/* Mobile: at 100% scale, 3 cards fit per row (≈ viewport / 3 minus gap+padding) */
@media (max-width: 768px) {
    .rank-card {
        width: calc((100vw - 40px) / 3 * var(--rc-scale));
    }
}

/* --- Frame (image area, square) --- */
.rank-card__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 7.3%; /* matches old 22px on a 300px card */
}

/* BG: base background layer */
.rank-card__bg {
    position: absolute;
    inset: 0;
    background: #3a3a44;
    z-index: 1;
}

/* PICTURE: [slot] person photo */
.rank-card__picture {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.rank-card__picture img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

/* FARM: [slot] decorative overlay (gems/effects) */
.rank-card__farm {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}

.rank-card__farm img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: bottom center;
}

/* --- Info Bar (bottom) --- */
.rank-card__info {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 2cqi;
    padding: 4.2cqi 0 2.6cqi 27cqi;
    background: var(--color-white, #FFFFFF);
    min-height: 27cqi;
}

/* RANK_LOGO: [slot] red circle logo */
.rank-card__logo {
    position: absolute;
    left: 0;
    top: 0;
    margin-top: -3.3cqi;
    z-index: 2;
    width: 27cqi;
    height: 27cqi;
    border-radius: 0.2em;
    background: transparent;
    flex-shrink: 0;
    overflow: hidden;
}

.rank-card__logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Details: name + company */
.rank-card__details {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    width: 100%;
    min-width: 0;
    gap: 0.3cqi;
    margin-bottom: 0;
    padding: 0 3cqi 0 5cqi;
    box-sizing: border-box;
}

/* NAME: [slot] */
.rank-card__name {
    font-family: var(--font-primary, sans-serif);
    font-size: 7cqi;
    font-weight: 700;
    color: #333;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* COMPANY: [slot] */
.rank-card__company {
    font-family: var(--font-primary, sans-serif);
    font-size: 5.7cqi;
    font-weight: 400;
    color: #888;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Card width is now driven by --rc-scale (set inline by createRankCard) — see .rank-card above.
   Legacy size variants (.rank-card--300/250/200/150) are kept for backward selectors but
   no longer set width on their own. */