/*
 * YouTube block: 1-3 responsive 16:9 video embeds, centered on the page.
 *
 * Plain CSS (matches gallery.css/documents.css) - no build step in this
 * project, Tailwind is loaded via the CDN Play script.
 */

.youtube-block__header {
    text-align: center;
}

.youtube-block__header p {
    margin-left: auto;
    margin-right: auto;
    max-width: 42rem;
}

.youtube-item {
    width: 100%;
}

.youtube-item__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 0.75rem;
    overflow: hidden;
    background: #000;
}

.youtube-item__frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.youtube-item__title {
    margin-top: 0.5rem;
    text-align: center;
    color: #374151;
    font-weight: 500;
}

/* Single video: centered, capped at 800px. */
.youtube-grid--1 {
    display: flex;
    justify-content: center;
}

.youtube-grid--1 .youtube-item {
    max-width: 800px;
}

/* 2-3 videos: centered responsive grid - 1 col on mobile, 2-3 on desktop. */
.youtube-grid--2,
.youtube-grid--3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    justify-items: center;
}

@media (min-width: 768px) {
    .youtube-grid--2,
    .youtube-grid--3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .youtube-grid--3 {
        grid-template-columns: repeat(3, 1fr);
    }
}