/*
 * YouTube video gallery — the grid on the Gallery page, and its lightbox.
 *
 * Rendered by includes/youtube-gallery.php. The section carries
 * `custom-layout dark`, so the black background, white headings and button
 * treatment come from services-custom.css; section padding and .content_div
 * come from style.css. Only the grid, the cards and the modal live here.
 *
 * Card treatment deliberately matches .oth_figures in oth-sections.css —
 * 15px radius, the same soft shadow — so the gallery reads as part of the
 * same system as the service pages.
 */

/* ---------- Grid ---------- */

.oth_videos {
    list-style: none;
    margin: 40px 0 0 0;
    padding: 0;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 25px;
    row-gap: 35px;
}

/* No top margin when the section has no intro block above the grid. */
.oth_video_gallery .content_div > .oth_videos:first-child {
    margin-top: 0px;
}

.oth_video {
    margin: 0;
    display: flex;
}

/* ---------- Card ---------- */

/* A <button>, so it's keyboard reachable and announced as a control — reset
   the UA styling back to a block of content. */
.oth_video_card {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    width: 100%;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

.oth_video_thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 15px;
    overflow: hidden;
    background-color: #000;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.319);
}

.oth_video_thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.oth_video_card:hover .oth_video_thumb img,
.oth_video_card:focus-visible .oth_video_thumb img {
    transform: scale(1.05);
}

/* ---------- Play badge ---------- */

.oth_video_play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 48px;
    pointer-events: none;
}

.oth_video_play svg {
    width: 100%;
    height: 100%;
    display: block;
}

.oth_video_play_bg {
    fill: rgba(25, 25, 25, 0.78);
    transition: fill 0.3s ease;
}

.oth_video_play_arrow {
    fill: var(--oth-white);
}

.oth_video_card:hover .oth_video_play_bg,
.oth_video_card:focus-visible .oth_video_play_bg {
    fill: var(--oth-green);
}

/* ---------- Caption ---------- */

/* Matches .oth_figures figcaption strong. */
.oth_video_title {
    display: block;
    margin-top: 15px;
    color: var(--oth-white);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
}

.oth_video_card:hover .oth_video_title,
.oth_video_card:focus-visible .oth_video_title {
    color: var(--oth-green);
    transition: color 0.3s ease;
}

/* The theme has no global focus style; without this the card is a silent
   target for keyboard users. */
.oth_video_card:focus-visible {
    outline: 2px solid var(--oth-green);
    outline-offset: 4px;
    border-radius: 15px;
}

/* ---------- Channel link ---------- */

/* .custom-layout .button already supplies the green outline treatment, the
   55px top margin and the 300px cap — only the centring is missing, because
   section/.content_div is a flex column. */
.oth_video_channel_link {
    align-self: center;
}

/* ---------- Lightbox ---------- */

.oth_video_modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
}

/* display:flex above would otherwise defeat the hidden attribute. */
.oth_video_modal[hidden] {
    display: none;
}

.oth_video_modal_backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
}

.oth_video_modal_inner {
    position: relative;
    width: 100%;
    max-width: 1100px;
}

.oth_video_modal_frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #000;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.319);
}

.oth_video_modal_frame iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.oth_video_modal_title {
    margin: 15px 0 0 0;
    color: var(--oth-white);
    font-size: 18px;
    text-align: center;
}

.oth_video_modal_close {
    position: absolute;
    top: -46px;
    right: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--oth-white);
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    transition: color 0.3s ease;
}

.oth_video_modal_close:hover,
.oth_video_modal_close:focus-visible {
    color: var(--oth-green);
}

.oth_video_modal_close:focus-visible {
    outline: 2px solid var(--oth-green);
    outline-offset: 2px;
}

/* Set on <body> while the lightbox is open so the page behind doesn't scroll. */
.oth_video_modal_open {
    overflow: hidden;
}

/* The theme defines no screen-reader utility class of its own. */
.oth_video_modal .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Page rhythm ---------- */

/*
 * template-gallery.php wraps the_content() in `<section class="content_section">
 * <div class="content_div">`, and this shortcode emits its own padded <section>
 * inside that. Two padded sections nest, so the global 55px stacks — the gap
 * from the intro copy to the first thumbnail measured 220px on desktop.
 *
 * Collapse the outer wrapper rather than shrinking the component, so the
 * gallery keeps the same internal rhythm as every other section on the site.
 */
.content_section:has(> .content_div > .oth_video_gallery) {
    padding-top: 0px;
    padding-bottom: 0px;
}

/* Nested .content_div applies the 30px side padding twice, insetting the grid
   further than every other section on the page. */
.content_div > .oth_video_gallery > .content_div {
    padding-left: 0px;
    padding-right: 0px;
}

/*
 * The standard header's subtext block is sized for service pages, where a CTA
 * button normally follows the paragraph. On the Gallery page that paragraph is
 * the last thing before the grid, so its 55px tail and the section's own 55px
 * bottom padding are both dead space.
 *
 * Scoped to the gallery page — .standard_subtext_section is shared with every
 * service page, and this sheet only loads where the shortcode is.
 */
.page-template-template-gallery .standard_subtext_section {
    padding-bottom: 25px;
}

.page-template-template-gallery .standard_subtext_section h1 {
    margin-bottom: 20px;
}

.page-template-template-gallery .standard_subtext_section p {
    margin-bottom: 0px;
}

.page-template-template-gallery .oth_video_gallery {
    padding-top: 35px;
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
    .oth_videos {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .oth_videos {
        grid-template-columns: 1fr;
        max-width: 520px;
        row-gap: 30px;
    }

    .oth_video_title {
        font-size: 18px;
    }

    /* No room above the frame on a phone — sit the close button over the
       top-right corner of the video instead. */
    .oth_video_modal {
        padding: 15px;
    }

    .oth_video_modal_close {
        top: -42px;
        right: -4px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .oth_video_thumb img,
    .oth_video_play_bg,
    .oth_video_title,
    .oth_video_modal_close {
        transition: none;
    }

    .oth_video_card:hover .oth_video_thumb img,
    .oth_video_card:focus-visible .oth_video_thumb img {
        transform: none;
    }
}