/* ============================================================
   Jacqueline May Art – Video Gallery Styles
   Prefix: jma-video-
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Gilda+Display&display=swap');

/* ── Gallery Grid ────────────────────────────────────────── */
.jma-video-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    padding: 40px 0;
    box-sizing: border-box;
}

/* ── Card ────────────────────────────────────────────────── */
.jma-video-card {
    background: #0a0a0a;
    border: 1px solid #CCB35F;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(204, 179, 95, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.jma-video-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(204, 179, 95, 0.20);
    border-color: #e8d08a;
}

/* ── Responsive iframe (16:9) ────────────────────────────── */
.jma-video-iframe-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
    background: #000;
}

.jma-video-iframe-wrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

/* ── Empty state ─────────────────────────────────────────── */
.jma-video-empty {
    font-family: 'Gilda Display', Georgia, serif;
    color: #CCB35F;
    text-align: center;
    padding: 40px 0;
    letter-spacing: 0.05em;
}

/* ── Responsive breakpoints ──────────────────────────────── */

/* Tablet – 2 columns */
@media (max-width: 1024px) {
    .jma-video-gallery {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

/* Mobile – 1 column */
@media (max-width: 640px) {
    .jma-video-gallery {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 24px 0;
    }
}