/* ===========================================================================
   Video gallery (template-video.php)
   Root font-size is 9px -> 1rem = 9px, so this file works in px like
   css/safety-experiences.css and css/news.css, not in rem.
   Canonical breakpoints used here: 992/993 and 768. Never 991, never 480.
   Loaded after style.css, so equal specificity already wins - no !important.
   The --vg-* tokens it reads live in css/video-modal.css, which every consumer
   of the shared dialog enqueues; this file declares it as a dependency, so the
   tokens are always in the document before these rules read them.
   =========================================================================== */

/* --- Section frame -------------------------------------------------------- */

.vg-main { background: #fff; padding: 60px 0 40px; }

/* Own container instead of Bootstrap's .container, which carries fixed
   750/970/1170px widths and would have to be fought with ID specificity. */
.vg-container {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
}

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

.vg-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--vg-gap);
    align-items: stretch;
    margin: 0;
    padding-left: 0;
    list-style: none;
}
/* #pageWrapper ul { margin: 32px 0 } in style.css is (0,1,0,1) and beats a
   plain class rule. The ID scope here is the only way to win that. */
#pageWrapper .vg-grid { margin: 0; }

.vg-item { display: flex; }

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

/* A real <button>: Enter and Space work without a line of JS. Everything
   inside it must stay phrasing content - a <div> or an <h3> gets parsed out
   of the button, and a nested <button> ends it early. */
.vg-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0;
    padding: 0;
    font: inherit;
    text-align: left;
    color: inherit;
    background: #fff;
    border: 1px solid var(--vg-line);
    border-radius: var(--vg-radius);
    overflow: hidden;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: var(--vg-shadow);
    transition: transform var(--vg-dur-card) var(--vg-ease),
                box-shadow var(--vg-dur-card) var(--vg-ease);
}

.vg-card-media {
    position: relative;
    display: block;
    flex: 0 0 auto;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--vg-navy);
    overflow: hidden;
}

/* No featured image: a quiet navy tile with the play glyph on it, never a
   request to i.ytimg.com - that would report the visitor's IP to Google on
   page load. */
.vg-card-media--empty {
    background-image: radial-gradient(120% 120% at 70% 20%, var(--vg-navy-mid), var(--vg-navy));
}

.vg-card-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--vg-dur-media) var(--vg-ease);
}

/* Graphic only - the whole card is the button, so this never takes a click
   or a tab stop. */
.vg-card-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: transform var(--vg-dur-card) ease;
}
.vg-card-play svg { display: block; width: 100%; height: 100%; }

.vg-card-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    padding: 18px 20px 20px;
}

.vg-card-title {
    display: block;
    font-family: "Montserrat-SemiBold", sans-serif;
    font-size: 18px;
    line-height: 1.4;
    color: var(--vg-ink);
    text-wrap: pretty;
}

.vg-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;
}

.vg-empty {
    margin: 0;
    padding: 60px 0;
    text-align: center;
    font-size: 18px;
    color: var(--vg-slate);
}

.vg-privacy {
    max-width: 720px;
    margin: 32px auto 0;
    font-family: "Montserrat-Regular", sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: var(--vg-slate);
    text-align: center;
}

/* --- Focus --------------------------------------------------------------- */

/* outline:none exists only as the pair of the ring below it. */
.vg-card:focus { outline: none; }
.vg-card:focus-visible {
    outline: 3px solid var(--vg-focus);
    outline-offset: 4px;
}

/* --- Scroll reveal ------------------------------------------------------- */

/* The reveal owns transform on li.vg-item, the hover lift owns transform on
   button.vg-card. Putting both on one element makes the later rule win at
   equal specificity and silently kills the lift (measured on .exp-card). */
.vg-reveal-enabled .vg-item {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity var(--vg-dur-reveal) var(--vg-ease) var(--vg-reveal-delay, 0ms),
                transform var(--vg-dur-reveal) var(--vg-ease) var(--vg-reveal-delay, 0ms);
}
.vg-reveal-enabled .vg-item.is-visible {
    opacity: 1;
    transform: none;
}

/* --- Hover --------------------------------------------------------------- */

@media (hover: hover) {
    .vg-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--vg-shadow-hover);
    }
    .vg-card:hover .vg-card-img { transform: scale(1.03); }
    .vg-card:hover .vg-card-play { transform: translate(-50%, -50%) scale(1.1); }
}

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

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

@media (max-width: 768px) {
    .vg-grid { grid-template-columns: 1fr; }
    /* House rule: card body text is 18px on desktop, 16px from 768 down. */
    .vg-card-title { font-size: 16px; }
}

/* --- Reduced motion ------------------------------------------------------
   Last block in the file on purpose: a media query adds no specificity, so
   only source order lets these win over the hover block above. Brightness and
   colour changes stay - only movement is switched off. */

@media (prefers-reduced-motion: reduce) {
    .vg-item,
    .vg-card,
    .vg-card-img,
    .vg-card-play { transition: none; }

    .vg-reveal-enabled .vg-item,
    .vg-reveal-enabled .vg-item.is-visible {
        opacity: 1;
        transform: none;
    }

    .vg-card:hover { transform: none; }
    .vg-card:hover .vg-card-img { transform: none; }
    .vg-card:hover .vg-card-play { transform: translate(-50%, -50%); }
}