/* CWA Media Gallery v3.0.0 — conceptionsweb.ca */

/* ── Variables & wrapper ──────────────────────────── */
.cwa-gallery-wrap {
    --cwag-cols: 3;
    --cwag-gap: 12px;
    --cwag-radius: 6px;
    --cwag-accent: #2563eb;
    --cwag-transition: .22s ease;

    /* Masonry CSS natif — de haut en bas par colonne */
    column-count: var(--cwag-cols);
    column-gap: var(--cwag-gap);
    width: 100%;
}

@media (max-width: 768px) {
    .cwa-gallery-wrap { column-count: 2; }
}
@media (max-width: 480px) {
    .cwa-gallery-wrap { column-count: 1; }
}

/* ── Item ─────────────────────────────────────────── */
.cwag-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    display: block;
    margin: 0 0 var(--cwag-gap) 0;
    position: relative;
    overflow: hidden;
    border-radius: var(--cwag-radius);
    background: #111;
    cursor: pointer;
}

.cwag-item img,
.cwag-video-thumb,
.cwag-video-thumb video {
    display: block;
    width: 100%;
    height: auto;
}

.cwag-item img,
.cwag-video-thumb video {
    transition: transform var(--cwag-transition), filter var(--cwag-transition);
}

.cwag-item:hover img,
.cwag-item:hover .cwag-video-thumb video {
    transform: scale(1.04);
    filter: brightness(.82);
}

/* ── Bouton zoom (images) ─────────────────────────── */
.cwag-btn-zoom {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.55);
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    opacity: 0;
    padding: 0;
    transition: opacity var(--cwag-transition), background var(--cwag-transition);
}
.cwag-btn-zoom svg { width: 15px; height: 15px; }
.cwag-item:hover .cwag-btn-zoom { opacity: 1; }
.cwag-btn-zoom:hover { background: var(--cwag-accent); }

/* ── Vidéo thumbnail + play ───────────────────────── */
.cwag-video-thumb {
    position: relative;
    overflow: hidden;
}

.cwag-btn-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.42);
    border: none;
    color: #fff;
    cursor: pointer;
    transition: background var(--cwag-transition);
    padding: 0;
}
.cwag-btn-play svg {
    width: 46px;
    height: 46px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
    transition: transform var(--cwag-transition);
}
.cwag-item:hover .cwag-btn-play { background: rgba(0,0,0,.18); }
.cwag-item:hover .cwag-btn-play svg { transform: scale(1.1); }

/* ── Lightbox ─────────────────────────────────────── */
.cwag-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    background: rgba(0,0,0,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: cwagFadeIn .18s ease;
}
.cwag-lightbox[hidden] { display: none; }

@keyframes cwagFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.cwag-lb-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 92vw;
    max-height: 92vh;
}

.cwag-lb-media img {
    display: block;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 4px;
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
}

.cwag-lb-media video {
    display: block;
    max-width: 90vw;
    max-height: 90vh;
    border-radius: 4px;
    outline: none;
}

/* ── Boutons lightbox ─────────────────────────────── */
.cwag-lb-close,
.cwag-lb-prev,
.cwag-lb-next {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    padding: 0;
    transition: background var(--cwag-transition);
}
.cwag-lb-close:hover,
.cwag-lb-prev:hover,
.cwag-lb-next:hover {
    background: var(--cwag-accent);
    border-color: var(--cwag-accent);
}

.cwag-lb-close { top: 18px; right: 18px; width: 42px; height: 42px; }
.cwag-lb-close svg { width: 18px; height: 18px; }

.cwag-lb-prev,
.cwag-lb-next {
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
}
.cwag-lb-prev svg,
.cwag-lb-next svg { width: 20px; height: 20px; }

.cwag-lb-prev { left: 14px; }
.cwag-lb-next { right: 14px; }

.cwag-lb-prev[disabled],
.cwag-lb-next[disabled] { opacity: .25; pointer-events: none; }

/* ── Spinner ──────────────────────────────────────── */
.cwag-spinner {
    width: 38px;
    height: 38px;
    border: 3px solid rgba(255,255,255,.15);
    border-top-color: #fff;
    border-radius: 50%;
    animation: cwagSpin .65s linear infinite;
}
@keyframes cwagSpin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
    .cwag-lb-prev { left: 6px; }
    .cwag-lb-next { right: 6px; }
    .cwag-lb-prev, .cwag-lb-next { width: 36px; height: 36px; }
}