/* =============================================
   Traits Grid Block v2 — traits-grid.css
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,600;0,700;1,400&display=swap');

/* ── Grid container ─────────────────────────── */
.traits-grid {
    display: grid;
    gap: 0;
    width: 100%;
    font-family: 'Roboto Condensed', Arial Narrow, sans-serif;

    /* Gold border matching spell card */
    border: 1.584px solid #F6AA1C;
    border-radius: 9.504px;
    overflow: hidden;

    /* Same dark background as spell card */
    background: linear-gradient(160deg, #1a1a2e 0%, #12121f 60%, #0f0f1a 100%);
    box-shadow:
        0 0 0 1px rgba(246,170,28,0.08),
        0 4px 32px rgba(0,0,0,0.5),
        inset 0 1px 0 rgba(246,170,28,0.07);
}

.traits-grid--cols-1 { grid-template-columns: 1fr; }
.traits-grid--cols-2 { grid-template-columns: 1fr 1fr; }
.traits-grid--cols-3 { grid-template-columns: 1fr 1fr 1fr; }

/* ── Individual trait item ───────────────────── */
.traits-grid__item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 13px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(246,170,28,0.1);
    background: transparent;
    transition: background 0.15s;
}

.traits-grid__item:last-child {
    border-bottom: none;
}

/* For multi-column — last row items also lose bottom border */
.traits-grid--cols-2 .traits-grid__item:nth-last-child(-n+2):nth-child(odd),
.traits-grid--cols-2 .traits-grid__item:nth-last-child(1),
.traits-grid--cols-3 .traits-grid__item:nth-last-child(-n+3):nth-child(3n+1),
.traits-grid--cols-3 .traits-grid__item:nth-last-child(-n+2):nth-child(3n+2),
.traits-grid--cols-3 .traits-grid__item:nth-last-child(1) {
    border-bottom: none;
}

/* Vertical divider between columns */
.traits-grid--cols-2 .traits-grid__item,
.traits-grid--cols-3 .traits-grid__item {
    border-right: 1px solid rgba(246,170,28,0.1);
}

.traits-grid--cols-2 .traits-grid__item:nth-child(2n),
.traits-grid--cols-3 .traits-grid__item:nth-child(3n) {
    border-right: none;
}

/* ── Icon ────────────────────────────────────── */
.traits-grid__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.traits-grid__icon-img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}

.traits-grid__icon-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.4;
}

/* ── Text content ────────────────────────────── */
.traits-grid__content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.traits-grid__title {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #F6AA1C;
    margin: 0;
    line-height: 1.25;
    letter-spacing: 0.02em;
}

.traits-grid__desc {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 13px;
    font-weight: 400;
    color: #b8b0a0;
    margin: 0;
    line-height: 1.55;
}

/* Links in description — inherit colour, keep underline */
.traits-grid__desc a {
    color: inherit;
    text-decoration: underline;
    text-decoration-color: rgba(184,176,160,0.45);
    text-underline-offset: 2px;
    transition: color 0.15s, text-decoration-color 0.15s;
}

.traits-grid__desc a:hover {
    color: #F6AA1C;
    text-decoration-color: rgba(246,170,28,0.6);
}

/* Bold / italic passthrough */
.traits-grid__desc strong,
.traits-grid__desc b { font-weight: 700; color: #d4c9a8; }
.traits-grid__desc em,
.traits-grid__desc i  { font-style: italic; }

/* ── Editor: inline Add button (not shown on frontend) ── */
.traits-grid__add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    background: rgba(246,170,28,0.03);
    border-top: 1px dashed rgba(246,170,28,0.2);
    cursor: pointer;
    color: rgba(246,170,28,0.45);
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: all 0.15s;
    grid-column: 1 / -1;
}

.traits-grid__add-btn:hover {
    background: rgba(246,170,28,0.07);
    color: #F6AA1C;
}

/* ── Responsive ──────────────────────────────── */
@media ( max-width: 640px ) {
    .traits-grid--cols-2,
    .traits-grid--cols-3 {
        grid-template-columns: 1fr;
    }
    .traits-grid--cols-2 .traits-grid__item,
    .traits-grid--cols-3 .traits-grid__item {
        border-right: none;
    }
}

@media ( min-width: 641px ) and ( max-width: 900px ) {
    .traits-grid--cols-3 {
        grid-template-columns: 1fr 1fr;
    }
    .traits-grid--cols-3 .traits-grid__item:nth-child(3n) {
        border-right: 1px solid rgba(246,170,28,0.1);
    }
    .traits-grid--cols-3 .traits-grid__item:nth-child(2n) {
        border-right: none;
    }
}