.table-lahoda-1 {
    /*
     * Wrapper stays full-width/unconstrained on purpose — .table-lahoda-1__inner is what
     * carries max-width + centering. Same wrapper/inner split as footer-lahoda-1/
     * contact-lahoda-2 — keeps the door open for a future full-bleed background on this
     * element without touching the centered content.
     */
    width: 100%;
    container-type: inline-size;
}

.table-lahoda-1__inner {
    max-width: var(--content-max-width);
    margin: 0 auto;
    padding: var(--space-6) var(--container-gutter);
}

@container (min-width: 1080px) {
    .table-lahoda-1__inner {
        padding: var(--space-7) var(--container-gutter);
    }
}

.table-lahoda-1__heading {
    font-family: var(--font-display);
    color: var(--ink);
    font-size: clamp(24px, 3vw, 32px);
    margin: 0 0 var(--space-5);
}

.table-lahoda-1__scroll {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    -webkit-overflow-scrolling: touch;
}

.table-lahoda-1__table {
    /*
     * `table-layout: auto` + `width: 100%` + a server-computed inline
     * `min-width` (component.php, ~140px/column) — each <th> still carries its
     * equal-share `style="width: {100/columnCount}%"`, but as a suggestion auto
     * layout can grow past rather than a hard equal-fill. On a wide viewport the
     * table still fills its container edge-to-edge at those proportions; on a
     * narrow one, min-width keeps every column above a readable floor and pushes
     * the table wider than the viewport instead of squeezing cells with forced
     * word-breaks — which is what makes .table-lahoda-1__scroll's overflow-x
     * actually engage. `table-layout: fixed` previously made that impossible:
     * fixed + width:100% can never exceed the container, so the scroll wrapper
     * was dead code on mobile.
     */
    width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    font-family: var(--font-body);
    font-size: 14px;
}

.table-lahoda-1__table th,
.table-lahoda-1__table td {
    overflow-wrap: break-word;
}

.table-lahoda-1__table thead th {
    background: var(--ink);
    color: var(--bg-cream);
    text-align: left;
    padding: var(--space-3) var(--space-4);
    font-weight: 600;
}

.table-lahoda-1__table tbody td {
    padding: var(--space-3) var(--space-4);
    color: var(--ink);
    border-bottom: 1px solid var(--border);
}

.table-lahoda-1__table tbody tr {
    transition: background var(--transition-fast);
}

.table-lahoda-1__table tbody tr:hover {
    background: var(--brand-gold-tint);
}

.table-lahoda-1__table tbody tr:nth-child(even) {
    background: var(--bg-cream-deep);
}

.table-lahoda-1__table tbody tr:nth-child(odd) {
    background: var(--bg-cream);
}

.table-lahoda-1__table tbody tr:last-child td {
    border-bottom: none;
}

.table-lahoda-1__legend {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--ink-muted);
    margin: var(--space-3) 0 0;
}