.table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Keep fixed layout everywhere */
.table-fixed {
    table-layout: fixed;
    width: 100%;
}

.table-fixed th:nth-child(1),
/* Name */
.table-fixed td:nth-child(1) {
    width: 15%;
}

.table-fixed th:nth-child(2),
/* Set */
.table-fixed td:nth-child(2) {
    width: 24%;
}

.table-fixed th:nth-child(3),
/* Level/Challenge */
.table-fixed td:nth-child(3) {
    width: 14%;
}

.table-fixed th:nth-child(4),
/* #CPs */
.table-fixed td:nth-child(4) {
    width: 8%;
    text-align: center;
}

.table-fixed th:nth-child(5),
/* Distance */
.table-fixed td:nth-child(5) {
    width: 11%;
    text-align: center;
}

.table-fixed th:nth-child(6),
/* Duration */
.table-fixed td:nth-child(6) {
    width: 11%;
    text-align: center;
}

.table-fixed th:nth-child(7),
/* Links */
.table-fixed td:nth-child(7) {
    width: 17%;
}

/* Ensure text wrapping for long content */
.table-fixed td {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (max-width: 600px) {

    /* Auto layout/widths on phones */
    .table-fixed {
        table-layout: auto;
    }

    .table-fixed th,
    .table-fixed td {
        width: auto !important;
    }

    .table-fixed thead th {
        white-space: nowrap;
    }

    /* keep headers on one line */
    .download-links a {
        word-break: keep-all;
    }
}

/* Download links styling */
.download-links {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.download-links li {
    margin-bottom: 2px;
}

/* More dropdown styling */
.more-toggle {
    cursor: pointer;
    color: #337ab7;
    text-decoration: none !important;
    font-size: inherit;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    outline: none;
}

.more-toggle:hover,
.more-toggle:focus,
.more-toggle:active,
.more-toggle:visited {
    color: #23527c;
    text-decoration: none !important;
    outline: none;
}

.more-arrow {
    transition: transform 0.2s ease;
    font-size: 10px;
}

.more-arrow.expanded {
    transform: rotate(180deg);
}

.more-content {
    display: none;
    margin-top: 4px;
    padding-left: 0;
    border-left: 2px solid #ddd;
    padding-left: 8px;
}

.more-content.show {
    display: block;
}

/* Name toggle styling */
/* Sequence name link: same behavior as .more-toggle */
.seq-toggle,
.seq-toggle:link,
.seq-toggle:visited {
    cursor: pointer;
    color: #337ab7;
    text-decoration: none !important;
    outline: none;
}

.seq-toggle:hover,
.seq-toggle:focus,
.seq-toggle:active {
    color: #23527c;
    text-decoration: none !important;
    outline: none;
}


/* Preview cell: never show a scrollbar from its content */
.table-fixed tbody tr.preview-row {
    display: none;
}

.table-fixed tbody tr.preview-row.open {
    display: table-row;
}

.preview-cell {
    padding: 10px 12px;
    overflow: hidden;
}

/* Responsive grid that wraps; no horizontal scrolling */
.video-grid {
    display: grid;
    /* Each card scales between ~180px and ~420px wide, otherwise fills the row */
    grid-template-columns: repeat(auto-fit, minmax(clamp(180px, 32vw, 420px), 1fr));
    gap: 12px;
    align-items: start;
}

/* Cards fill their grid tracks */
.video-card {
    width: 100%;
    display: block;
}

/* Videos scale by container width, keep aspect, never overflow */
.video-card video {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    /* consistent shape across all screens */
    object-fit: contain;
    /* no cropping; change to 'cover' if you prefer a filled frame */
    border-radius: 6px;
    background: transparent;
}