/**
 * Bridge Hand Diagram Styles
 * BEM methodology with .bridge-hand namespace
 */

/* ---- Base Container ---- */

.bridge-hand {
    font-size: 16px;
    line-height: 1.4;
    margin: 1.5em auto;
    padding: 0.5em;
    max-width: 520px;
}

/* ---- 4-Position Layout (3×3 grid) ---- */

.bridge-hand--4pos {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 0.25em;
}

.bridge-hand--4pos .bridge-hand__info {
    grid-area: 1 / 1 / 2 / 2;
    align-self: start;
}

.bridge-hand--4pos .bridge-hand__north {
    grid-area: 1 / 2 / 2 / 3;
}

.bridge-hand--4pos .bridge-hand__west {
    grid-area: 2 / 1 / 3 / 2;
}

.bridge-hand--4pos .bridge-hand__east {
    grid-area: 2 / 3 / 3 / 4;
}

.bridge-hand--4pos .bridge-hand__south {
    grid-area: 3 / 2 / 4 / 3;
}

/* ---- 2-Position Layout (diagonal) ---- */

.bridge-hand--2pos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0.25em;
    max-width: 400px;
}

.bridge-hand--2pos .bridge-hand__north {
    grid-area: 1 / 1 / 2 / 2;
}

.bridge-hand--2pos .bridge-hand__south {
    grid-area: 2 / 2 / 3 / 3;
}

/* ---- NS Only Layout ---- */

.bridge-hand--ns-only {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0.25em;
}

.bridge-hand--ns-only .bridge-hand__info {
    grid-area: 1 / 1 / 2 / 2;
}

.bridge-hand--ns-only .bridge-hand__north {
    grid-area: 1 / 2 / 2 / 3;
}

.bridge-hand--ns-only .bridge-hand__south {
    grid-area: 2 / 2 / 3 / 3;
}

/* ---- EW Horizontal Layout ---- */

.bridge-hand--ew-horiz {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto;
    gap: 0.5em;
}

.bridge-hand--ew-horiz .bridge-hand__west {
    grid-area: 1 / 1 / 2 / 2;
}

.bridge-hand--ew-horiz .bridge-hand__info {
    grid-area: 1 / 2 / 2 / 3;
    align-self: center;
}

.bridge-hand--ew-horiz .bridge-hand__east {
    grid-area: 1 / 3 / 2 / 4;
}

/* ---- Partial Layout ---- */

.bridge-hand--partial {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 0.25em;
}

.bridge-hand--partial .bridge-hand__info {
    grid-area: 1 / 1 / 2 / 2;
}

.bridge-hand--partial .bridge-hand__north {
    grid-area: 1 / 2 / 2 / 3;
}

.bridge-hand--partial .bridge-hand__south {
    grid-area: 2 / 3 / 3 / 4;
}

/* ---- Single Hand Layout ---- */

.bridge-hand--single {
    max-width: 200px;
}

/* ---- Position Block ---- */

.bridge-hand__position {
    padding: 0.25em 0.5em;
    min-width: 160px;
    width: fit-content;
}

/* ---- Dealer / Vulnerability Info ---- */

.bridge-hand__info {
    padding: 0.25em 0.5em;
    font-weight: 600;
    font-size: 0.9em;
    color: #555;
}

.bridge-hand__dealer::after {
    content: '/';
    margin: 0 0.1em;
}

/* ---- Suit Lines ---- */

.bridge-hand__suit {
    display: flex;
    align-items: baseline;
    gap: 0.3em;
    white-space: nowrap;
    line-height: 1.5;
}

.bridge-hand__symbol {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2em;
    font-size: 1.1em;
}

.bridge-hand__symbol img.suit-icon {
    width: 1em;
    height: auto;
    vertical-align: middle;
}

.bridge-hand__cards {
    letter-spacing: 0.02em;
}

/* ---- Suit Colors ---- */

.bridge-hand__suit--spades .bridge-hand__symbol {
    color: #22455E;
}

.bridge-hand__suit--hearts .bridge-hand__symbol {
    color: #D9262A;
}

.bridge-hand__suit--diamonds .bridge-hand__symbol {
    color: #EB8D2D;
}

.bridge-hand__suit--clubs .bridge-hand__symbol {
    color: #3E9741;
}

/* ---- Label (dummy, jij) ---- */

.bridge-hand__label {
    display: block;
    font-size: 0.85em;
    font-style: italic;
    color: #777;
    margin-bottom: 0.2em;
}

/* ---- Inline Suit Icons (in body text) ---- */

p img.suit-icon {
    width: 0.9em;
    height: auto;
    vertical-align: baseline;
    position: relative;
    top: 0.1em;
}

/* ---- Generic Table ---- */

.bridge-generic-table {
    border-collapse: collapse;
    margin: 1em auto;
    font-size: 14px;
}

.bridge-generic-table td,
.bridge-generic-table th {
    border: 1px solid #ddd;
    padding: 0.4em 0.8em;
    text-align: left;
}

.bridge-generic-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

/* ---- Responsive ---- */

@media (max-width: 600px) {
    .bridge-hand {
        font-size: 13px;
        max-width: 100%;
    }

    .bridge-hand__position {
        min-width: 90px;
        padding: 0.2em 0.3em;
    }

    .bridge-hand__suit {
        white-space: pre-wrap;
    }
}