.table-grid-visual-hint {
    display: none;
}

.row:has(.table-grid-wrapper) {
    position: relative;
}

.table-grid-wrapper {
    margin-block-start: 5rem;
            overflow: auto;
            overflow-x: auto;
            overflow-y: auto;
    border: 1px solid #ddd;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    scroll-padding-left: var(--table-feature-col-width, 250px);
}

.table-grid {
    display: grid;
    grid-template-columns: 250px 1fr 1fr 1fr;
    width: 100%;
    min-width: 950px;
}

.choice-badge {
    width: 100%;
    max-width: 13rem;
    height: auto;
    position: absolute;
    top: 80px;
    left: 50%;
    z-index: 100;
}

.tr {
    display: contents;
}

.th {
    position: sticky;
    top: 0;
    background-color: #122f52;
    color: #fff;
    font-size: 22px;
    font-weight: bold;
    padding: 12px 8px;
    border-bottom: 2px solid rgba(255,255,255,0.3);
    border-right: 1px solid rgba(255,255,255,0.3);
    z-index: 10;
}

.th:last-child, .td:last-child {
    border-right: none;
}

.td {
    padding: 10px 30px;
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    background-color: #fff;
}

.td:first-child {
    color: #000;
}
.td:nth-child(2),
.td:nth-child(3),
.td:nth-child(4) {
    color: white;
}

/* Keep the Feature column pinned during horizontal scroll
    - Header: first columnheader in the row (skips the image badge)
    - Body rows: first cell in each row
*/
.table-grid .tr [role="columnheader"]:first-of-type,
.table-grid .tr .td:first-child {
    position: sticky;
    left: 0;
    z-index: 5;
}

/* Ensure the top-left header stays above all cells */
.table-grid .tr [role="columnheader"]:first-of-type {
    z-index: 20;
    box-shadow: 6px 0 10px -8px rgba(0, 0, 0, 0.35);
}

/* Subtle divider shadow for the sticky Feature cells down the table */
.table-grid .tr .td:first-child {
    box-shadow: 4px 0 8px -8px rgba(0, 0, 0, 0.3);
}

/* Snap to each data column when swiping horizontally */
.table-grid .tr:first-child [role="columnheader"]:nth-of-type(2),
.table-grid .tr:first-child [role="columnheader"]:nth-of-type(3),
.table-grid .tr:first-child [role="columnheader"]:nth-of-type(4) {
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .choice-badge {
        width: 100%;
        max-width: 9rem;
        height: auto;
        position: absolute;
        top: 112px;
        left: 51%;
        z-index: 100;
    }

        
    .table-grid {
        grid-template-columns: 215px 1fr 1fr 1fr;
    }
}
    

@media (max-width: 991px) {
    .table-grid-wrapper {
        --table-feature-col-width: 120px;
        --table-peek: 22px;
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scroll-padding-left: var(--table-feature-col-width);
        box-shadow:
            inset var(--table-peek) 0 18px -18px rgba(255, 255, 255, 0.95),
            inset calc(-1 * var(--table-peek)) 0 18px -18px rgba(255, 255, 255, 0.95);
        margin-block-start: 0;
    }

    .td {
        padding: 10px 10px;
    }

    .table-grid-visual-hint {
        display: block;
    }
    
    .table-grid {
        min-width: 0;
        width: calc(300% - var(--table-feature-col-width) - (2 * var(--table-peek)));
        grid-template-columns: var(--table-feature-col-width) 1fr 1fr 1fr;
    }

    /* Snap between the three data columns using header cells as snap points */
    .table-grid .tr:first-child [role="columnheader"]:nth-of-type(2),
    .table-grid .tr:first-child [role="columnheader"]:nth-of-type(3),
    .table-grid .tr:first-child [role="columnheader"]:nth-of-type(4) {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }

}