/* ORTHOPAEDIC CONTENT v8 — compact one-line horizontal row */
#ortho-related-content{width:100%;max-width:1200px;margin:34px auto;padding:0 10px;box-sizing:border-box}
#ortho-related-content .ortho-related-title{margin:0 0 12px;padding:0;font-size:22px;line-height:1.3;font-weight:700;color:#222}
#ortho-related-content .ortho-video-grid{display:flex!important;flex-wrap:nowrap!important;flex-direction:row!important;width:100%;margin:0;padding:2px 2px 8px;gap:10px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;touch-action:pan-x;box-sizing:border-box}
#ortho-related-content .ortho-video-card{flex:0 0 170px!important;width:170px!important;min-width:170px!important;max-width:170px!important;display:flex;flex-direction:column;margin:0;padding:0;overflow:hidden;background:#fff;border:1px solid #e5e5e5;border-radius:6px;box-sizing:border-box;white-space:normal}
#ortho-related-content .ortho-video-link{position:relative;display:block;width:100%;height:190px;flex:0 0 190px;margin:0;padding:0;overflow:hidden;background:#f3f3f3;line-height:0;text-decoration:none;box-sizing:border-box}
#ortho-related-content .ortho-video-thumbnail{display:block!important;width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;padding:0!important;border:0!important;object-fit:cover;box-sizing:border-box}
#ortho-related-content .ortho-video-play{position:absolute;left:50%;top:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transform:translate(-50%,-50%);border-radius:50%;background:rgba(0,0,0,.68);color:#fff;font-size:11px;line-height:1;padding-left:2px;box-sizing:border-box;pointer-events:none}
#ortho-related-content .ortho-video-content{width:100%;min-width:0;margin:0;padding:7px 8px 9px;box-sizing:border-box}
#ortho-related-content .ortho-video-title{display:-webkit-box;width:100%;max-width:100%;margin:0;padding:0;overflow:hidden;font-size:12px;line-height:1.3;font-weight:700;color:#222;overflow-wrap:break-word;-webkit-box-orient:vertical;-webkit-line-clamp:2}
#ortho-related-content .ortho-video-description{display:-webkit-box;width:100%;max-width:100%;margin:3px 0 0;padding:0;overflow:hidden;font-size:10px;line-height:1.3;font-weight:400;color:#666;overflow-wrap:break-word;-webkit-box-orient:vertical;-webkit-line-clamp:2;max-height:2.6em;box-sizing:border-box}
#ortho-related-content .ortho-related-debug{display:none!important}
#ortho-related-content .ortho-video-grid::-webkit-scrollbar{height:4px}
#ortho-related-content .ortho-video-grid::-webkit-scrollbar-track{background:#f1f1f1}
#ortho-related-content .ortho-video-grid::-webkit-scrollbar-thumb{background:#c8c8c8;border-radius:10px}
#ortho-related-content .ortho-video-grid{scrollbar-width:thin}
@media(max-width:700px){
#ortho-related-content{margin:28px auto;padding:0 8px}
#ortho-related-content .ortho-video-grid{gap:9px}
#ortho-related-content .ortho-video-card{flex-basis:155px!important;width:155px!important;min-width:155px!important;max-width:155px!important}
#ortho-related-content .ortho-video-link{height:175px;flex-basis:175px}
#ortho-related-content .ortho-related-title{font-size:20px}
}
@media(max-width:400px){
#ortho-related-content{padding:0 7px}
#ortho-related-content .ortho-video-card{flex-basis:145px!important;width:145px!important;min-width:145px!important;max-width:145px!important}
#ortho-related-content .ortho-video-link{height:163px;flex-basis:163px}
#ortho-related-content .ortho-video-content{padding:6px 7px 8px}
#ortho-related-content .ortho-video-title{font-size:11px}
#ortho-related-content .ortho-video-description{font-size:9.5px}
}


/* =========================================================
   VIDEO LIBRARY — CLASSY 6 COLUMN GRID
   /videos/
   ========================================================= */

.ortho-video-page {
    max-width: 1500px;
    margin: 0 auto;
    padding: 30px 24px 60px;
}

/* Controls */

.ortho-video-controls {
    display: grid;
    grid-template-columns: minmax(240px, 2fr) minmax(170px, 1fr) minmax(190px, 1fr);
    gap: 12px;
    max-width: 1100px;
    margin: 22px auto 12px;
}

.ortho-video-controls input,
.ortho-video-controls select {
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    border: 1px solid #dfe4ea;
    border-radius: 8px;
    background: #fff;
    color: #26313d;
    font-size: 14px;
    outline: none;
    box-sizing: border-box;
    transition: border-color .2s ease,
                box-shadow .2s ease;
}

.ortho-video-controls input:focus,
.ortho-video-controls select:focus {
    border-color: #8795a5;
    box-shadow: 0 0 0 3px rgba(40,55,70,.07);
}


/* Video count */

.ortho-video-count {
    max-width: 1500px;
    margin: 8px auto 16px;
    padding-left: 2px;
    color: #687482;
    font-size: 13px;
    font-weight: 500;
}


/* =========================================================
   SIX COLUMN GRID
   ========================================================= */

.ortho-grid {
    display: grid !important;
    grid-template-columns:
        repeat(6, minmax(0, 1fr)) !important;

    gap: 20px !important;

    width: 100%;
    margin: 0 auto;
    padding: 0;

    align-items: stretch;
}


/* =========================================================
   VIDEO CARD
   ========================================================= */

.ortho-grid .ortho-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    background: #fff;

    border: 1px solid #e5e9ee;
    border-radius: 10px;

    overflow: hidden;

    box-sizing: border-box;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;
}

.ortho-grid .ortho-card:hover {
    transform: translateY(-3px);

    border-color: #d5dbe2;

    box-shadow:
        0 8px 24px rgba(20,35,50,.10);
}


/* Entire card link */

.ortho-grid .ortho-library-card-link {
    display: flex;
    flex-direction: column;

    height: 100%;

    color: inherit;
    text-decoration: none;
}


/* =========================================================
   UNIFORM THUMBNAIL
   ========================================================= */

.ortho-library-thumbnail {
    position: relative;

    width: 100%;

    aspect-ratio: 4 / 3;

    overflow: hidden;

    background: #eef1f4;
}

.ortho-library-thumbnail img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform .3s ease;
}

.ortho-grid .ortho-card:hover
.ortho-library-thumbnail img {
    transform: scale(1.035);
}


/* Play button */

.ortho-library-play {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    width: 34px;
    height: 34px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: rgba(15,25,35,.82);

    color: #fff;

    font-size: 12px;

    padding-left: 1px;

    box-shadow:
        0 3px 10px rgba(0,0,0,.22);
}


/* Missing thumbnail */

.ortho-no-thumbnail {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #edf0f3;

    color: #687582;

    font-size: 20px;
}


/* =========================================================
   CARD CONTENT
   ========================================================= */

.ortho-grid .ortho-card-body {
    display: flex;
    flex-direction: column;

    flex: 1;

    padding: 12px 13px 13px;

    min-width: 0;
}


/* Category */

.ortho-grid .ortho-badge {
    display: inline-flex;
    align-self: flex-start;

    margin-bottom: 7px;

    padding: 3px 7px;

    border-radius: 4px;

    background: #f1f4f7;

    color: #596673;

    font-size: 10px;
    line-height: 1.3;
    font-weight: 600;

    letter-spacing: .2px;

    white-space: nowrap;
}


/* Title */

.ortho-grid .ortho-card h3 {
    margin: 0 0 7px;

    color: #202a34;

    font-size: 14px;
    line-height: 1.35;

    font-weight: 650;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;

    min-height: 38px;
}


/* Caption */

.ortho-grid .ortho-card p {
    margin: 0;

    color: #687582;

    font-size: 11.5px;
    line-height: 1.45;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;

    min-height: 33px;
}


/* View reel */

.ortho-grid .ortho-link {
    display: block;

    margin-top: auto;
    padding-top: 10px;

    color: #405466;

    font-size: 11.5px;
    font-weight: 600;

    letter-spacing: .1px;
}


/* =========================================================
   NO RESULTS
   ========================================================= */

.ortho-no-results {
    grid-column: 1 / -1;

    text-align: center;

    padding: 50px 20px;

    color: #687582;
}


/* =========================================================
   LARGE TABLET
   ========================================================= */

@media (max-width: 1200px) {

    .ortho-grid {
        grid-template-columns:
            repeat(5, minmax(0, 1fr)) !important;

        gap: 18px !important;
    }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .ortho-video-page {
        padding-left: 18px;
        padding-right: 18px;
    }

    .ortho-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr)) !important;

        gap: 16px !important;
    }

}


/* =========================================================
   SMALL TABLET / LARGE MOBILE
   ========================================================= */

@media (max-width: 720px) {

    .ortho-video-controls {
        grid-template-columns: 1fr;
    }

    .ortho-grid {
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap: 13px !important;
    }

    .ortho-grid .ortho-card-body {
        padding: 10px;
    }

    .ortho-grid .ortho-card h3 {
        font-size: 13px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 520px) {

    .ortho-video-page {
        padding: 22px 12px 45px;
    }

    .ortho-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 12px !important;
    }

    .ortho-library-thumbnail {
        aspect-ratio: 4 / 3;
    }

    .ortho-grid .ortho-card-body {
        padding: 9px;
    }

    .ortho-grid .ortho-card h3 {
        font-size: 12.5px;
        line-height: 1.35;

        min-height: 34px;
    }

    .ortho-grid .ortho-card p {
        font-size: 10.5px;
        line-height: 1.4;

        min-height: 29px;
    }

    .ortho-grid .ortho-badge {
        font-size: 9px;
        padding: 3px 6px;
    }

    .ortho-grid .ortho-link {
        font-size: 10.5px;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media (max-width: 360px) {

    .ortho-grid {
        grid-template-columns:
            1fr 1fr !important;

        gap: 9px !important;
    }

}