/* Ordinary grid layout. Everything stays in the page's normal flow. */
.ssrg {
    --ssrg-visible-columns: var(--ssrg-columns, 4);
    --ssrg-gap: var(--ssrg-column-gap, 70px);
    width: 100%;
    max-width: 1310px;
    margin: 0 auto;
}
.ssrg, .ssrg * { box-sizing: border-box; }
.ssrg .ssrg-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--ssrg-row-gap, 40px) var(--ssrg-gap);
    max-width: calc(var(--ssrg-visible-columns) * 275px + (var(--ssrg-visible-columns) - 1) * var(--ssrg-gap));
    margin: 0 auto;
}
.ssrg .ssrg-card { flex: 0 0 275px; width: 275px; max-width: 100%; min-width: 0; }
.ssrg .ssrg-player { height: 500px; }
.ssrg .ssrg-launch {
    display: grid;
    width: 100%;
    height: 500px;
    overflow: hidden;
    color: #fff;
    background: #111;
    text-decoration: none;
}
/* Shared grid cells replace absolute positioning and z-index. */
.ssrg .ssrg-thumbnail,
.ssrg .ssrg-caption,
.ssrg .ssrg-play-icon { grid-area: 1 / 1; }
.ssrg .ssrg-thumbnail {
    display: block;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    margin: 0;
    object-fit: cover;
}
.ssrg .ssrg-thumbnail[hidden] { display: none; }
.ssrg .ssrg-caption {
    align-self: start;
    min-width: 0;
    padding: 15px 14px 40px;
    color: #fff;
    background: linear-gradient(to bottom, rgb(0 0 0 / 75%), transparent);
    font-family: Arial, sans-serif;
    text-align: left;
}
.ssrg .ssrg-video-title,
.ssrg .ssrg-channel {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.ssrg .ssrg-video-title { font-size: 16px; font-weight: 700; }
.ssrg .ssrg-channel { margin-top: 3px; font-size: 12px; }
.ssrg .ssrg-play-icon {
    align-self: center;
    justify-self: center;
    width: 64px;
    height: 82px;
    color: #ff0033;
    pointer-events: none;
}
.ssrg .ssrg-play-icon svg { display: block; width: 100%; height: 100%; }
.ssrg .ssrg-player iframe {
    display: block;
    width: 100%;
    height: 500px;
    margin: 0;
    border: 0;
    background: #111;
}
.ssrg .ssrg-more-controls { margin-top: 32px; text-align: center; }
.ssrg .ssrg-more-controls[hidden],
.ssrg .ssrg-more-button[hidden],
.ssrg .ssrg-carousel-controls[hidden] { display: none; }
.ssrg .ssrg-more-button,
.ssrg .ssrg-more-button:hover {
    padding: 12px 28px;
    border: 1px solid #2d66df;
    border-radius: 4px;
    color: #fff;
    background: #2d66df;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: none;
    transform: none;
    box-shadow: none;
    filter: none;
    opacity: 1;
}
.ssrg .ssrg-launch:focus-visible,
.ssrg .ssrg-more-button:focus-visible { outline: 3px solid #2d66df; outline-offset: 3px; }
.ssrg.ssrg-carousel {
    min-width: 0;
    max-width: none;
    --ssrg-gap: max(10px, calc((100% - var(--ssrg-visible-columns) * 275px) / max(1, var(--ssrg-visible-columns) - 1)));
}
.ssrg.ssrg-carousel .ssrg-grid {
    width: 100%;
    max-width: none;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.ssrg.ssrg-carousel .ssrg-grid::-webkit-scrollbar { display: none; }
.ssrg-carousel .ssrg-card { scroll-snap-align: start; }
.ssrg .ssrg-carousel-controls { display: flex; justify-content: center; gap: 8px; margin-top: 14px; }
.ssrg .ssrg-carousel-dot {
    flex: 0 0 7px;
    width: 7px;
    height: 7px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #2E69D5;
    opacity: .28;
    cursor: pointer;
}
.ssrg .ssrg-carousel-dot.is-active,
.ssrg .ssrg-carousel-dot[aria-current="true"] { opacity: 1; }
.ssrg .ssrg-carousel-dot:focus-visible { outline: 2px solid #2E69D5; outline-offset: 3px; }
.ssrg .ssrg-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
@media (max-width: 1200px) {
    .ssrg { --ssrg-visible-columns: var(--ssrg-laptop, 3); }
}
@media (max-width: 1024px) {
    .ssrg { --ssrg-visible-columns: var(--ssrg-tablet, 2); --ssrg-gap: 24px; }
}
@media (max-width: 767px) {
    .ssrg { --ssrg-visible-columns: 1; }
    .ssrg.ssrg-carousel { --ssrg-gap: 10px; }
    .ssrg.ssrg-carousel .ssrg-grid { max-width: 275px; }
}