/*
 * .media-lift — reusable "polished hover" effect for media tiles.
 *
 * Drop the class on any container wrapping an <img> (video poster,
 * card thumbnail, gallery tile…) and you get:
 *   - a soft drop-shadow fade-in on hover  (220 ms ease)
 *   - a subtle image zoom to scale(1.03)   (400 ms ease)
 *
 * The hover trigger works in three common structures so you rarely
 * have to add anything else:
 *
 *   1. Self-hover — the .media-lift itself is interactive.
 *        <button class="media-lift"><img ...></button>
 *
 *   2. Direct link/button wrapper — .media-lift is a direct child.
 *        <a href="…"><div class="media-lift"><img ...></div></a>
 *        <button><div class="media-lift"><img ...></div></button>
 *
 *   3. Inside an <a class="card"> — the canonical editorial pattern.
 *        <a class="card">
 *            <div class="card__media media-lift"><img ...></div>
 *            <div class="card__body">…</div>
 *        </a>
 *
 * Used on:
 *   - Video Gallery cards (what-is-mikvah)
 *   - "Learn More" intro video button (what-is-mikvah)
 *   - Featured Articles grid (home)
 *   - Related Articles grid (articles/show)
 *
 * Reuse for any new clickable media tile — video thumbnails, podcast
 * episode tiles, course hero cards, program posters, etc.
 */

.redesign .media-lift {
    position: relative;
    overflow: hidden;
    transition: box-shadow 220ms ease;
}

.redesign .media-lift > img,
.redesign .media-lift > picture > img {
    transition: transform 400ms ease;
}

/* Hover state — self OR an interactive ancestor (<a>, <button>, or the
 * .card wrapper pattern) being hovered. */
.redesign .media-lift:hover,
.redesign a:hover > .media-lift,
.redesign button:hover > .media-lift,
.redesign .card:hover .media-lift {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.redesign .media-lift:hover > img,
.redesign .media-lift:hover > picture > img,
.redesign a:hover > .media-lift > img,
.redesign a:hover > .media-lift > picture > img,
.redesign button:hover > .media-lift > img,
.redesign button:hover > .media-lift > picture > img,
.redesign .card:hover .media-lift > img,
.redesign .card:hover .media-lift > picture > img {
    transform: scale(1.03);
}