/* ======================================================
   MAIN GRID — BOTH SIDES SAME HEIGHT
   ====================================================== */

.results.loadout-grid {
    display: flex;
    gap: 20px;
    align-items: stretch; /* 🔑 equal column height */
    width: 100%;
}

/* LEFT COLUMN */
.loadout-left {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* RIGHT COLUMN */
.loadout-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0; /* 🔑 allow shrinking */
}

/* Centers page info that's below the title*/
.wip-disclaimer {
    text-align: center;
    width: 100%;
    max-width: 700px;
    margin: 0 auto 20px auto; /* centers and adds spacing below */
    color: var(--hd-yellow); /* optional – matches your theme */
    font-size: 0.95rem;
}

    /* ======================================================
   OUTER GROUP BOXES
   ====================================================== */

    .loadout-group,
    .loadout-right .slot-card {
        background: radial-gradient(circle at top left, var(--panel1), var(--panel2));
        border: 1px solid var(--border);
        border-radius: 14px;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 20px;
        flex: 1; /* 🔑 equal outer height */
        min-height: 0; /* 🔑 critical */
    }

    /* Group headers (Equipment / Stratagems-style) */
    .group-title {
        color: var(--yellow);
        text-transform: uppercase;
        letter-spacing: 0.08em;
        font-weight: 700;
        line-height: 1.15;
        margin-bottom: 12px;
    
    text-align: center;
    display: block;
    width: 100%;
}



/* ======================================================
   SLOT CARDS (LEFT)
   ====================================================== */

.slot-card {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    background: linear-gradient(145deg, #0f1520, #0b0f17);
}

    .slot-card > strong {
        display: block;
        margin-bottom: 12px;
        color: var(--yellow);
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

/* ======================================================
   ITEM ROWS
   ====================================================== */

.item-row {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Base icon */
.item-icon {
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: rgba(0,0,0,0.35);
    padding: 10px;
}

/* LEFT icons */
.item-icon-large {
    width: 110px;
    height: 110px;
}

/* ======================================================
   STRATAGEMS — FILL SPACE, NO OVERFLOW
   ====================================================== */

.stratagem-list {
    flex: 1; /* 🔑 fill remaining height */
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
    min-height: 0;
}

    .stratagem-list li {
        flex: 0 0 auto; /* allow cards to grow with content */
        display: flex;
        align-items: flex-start;
        gap: 16px;
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 12px;
        background: linear-gradient(145deg, #0f1520, #0b0f17);
        min-height: 0;
    }

    /* Stratagem icons — larger but constrained */
    .stratagem-list .item-icon {
        width: 96px;
        height: 96px;
        padding: 10px;
    }

    /* Text */
    .item-name,
    .stratagem-list span {
        font-weight: 400;
        white-space: normal;
        word-break: break-word;
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        font-size: 1.02rem;
        color: var(--yellow);
    }

/* ======================================================
   RESPONSIVE
   ====================================================== */

@media (max-width: 900px) {
    .item-icon-large {
        width: 88px;
        height: 88px;
    }

    .stratagem-list .item-icon {
        width: 80px;
        height: 80px;
    }
}

@media (max-width: 480px) {
    body {
        margin: 16px;
    }

    .item-icon-large {
        width: 72px;
        height: 72px;
    }

    .stratagem-list .item-icon {
        width: 64px;
        height: 64px;
    }
}


@media (min-width: 769px) {
    .stratagem-list li {
        align-items: center;
    }

    .stratagem-list .item-name {
        color: var(--yellow);
        font-weight: 500;
    }
}
/* ======================================================
   FIX — FORCE STRATAGEM ITEM TEXT TO MATCH EQUIPMENT
   ====================================================== */

@media (min-width: 769px) {

    /* Equipment item names (baseline reference) */
    .loadout-left .item-name {
        color: var(--yellow);
        font-weight: 400;
    }

    /* Stratagem item names — force yellow + same weight */
    .loadout-right .stratagem-list li,
    .loadout-right .stratagem-list li span,
    .loadout-right .stratagem-list li div {
        color: var(--yellow) !important;
        font-weight: 400 !important;
    }
}


/* Center Equipment / Stratagems headers on desktop */
.group-title{ text-align:center; }

/* Equipment only: make Primary / Secondary / Throwable white */
.loadout-left .slot-card > strong,
#equipmentColumn .slot-card > strong,
#equipment .slot-card > strong {
    color: #fff !important;
}

/* Center the STRATAGEMS header (right column) like EQUIPMENT */
.loadout-right .group-title,
.loadout-right > .group-title {
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important; /* helps if parent is flex */
}

/* Fallback if the header is a <strong> (some layouts use this) */
.loadout-right .slot-card > strong,
.loadout-right .loadout-group > strong {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    align-self: center !important;
}