/* ============================================================
   CDF GALLERY – Carousel, Sitrep, Lightbox inline
============================================================ */

.cdf-home-carousel, .cdf-carousel-frame {
    position: relative; width: 100%; border-radius: 16px; padding: 16px 18px 12px;
    background: linear-gradient(180deg, rgba(10,15,10,.78), rgba(10,15,10,.92)), url('/css/camo.jpg') center/cover no-repeat;
    background-blend-mode: overlay;
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 45px rgba(0,0,0,.65), inset 0 0 0 2px rgba(0,0,0,.35);
    overflow: hidden;
}
.cdf-home-carousel::before, .cdf-carousel-frame::before { content: ""; position: absolute; inset: 10px; border-radius: 12px; border: 2px dashed rgba(255,255,255,.10); pointer-events: none; }
.cdf-home-carousel::after, .cdf-carousel-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 18px 18px, rgba(200,200,200,.35) 0 6px, rgba(0,0,0,0) 7px), radial-gradient(circle at calc(100% - 18px) 18px, rgba(200,200,200,.35) 0 6px, rgba(0,0,0,0) 7px), radial-gradient(circle at 18px calc(100% - 18px), rgba(200,200,200,.35) 0 6px, rgba(0,0,0,0) 7px), radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), rgba(200,200,200,.35) 0 6px, rgba(0,0,0,0) 7px); opacity: .85; }

.cdf-grid-3 { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.cdf-shot, .home-patch.patch-image { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 14px 28px rgba(0,0,0,.55), inset 0 0 0 2px rgba(0,0,0,.45); transform: translateY(0); transition: transform .18s ease, filter .18s ease; }
.cdf-shot::before, .home-patch.patch-image::before { content: ""; position: absolute; inset: 8px; border-radius: 10px; border: 2px dashed rgba(255,255,255,.14); pointer-events: none; }
.cdf-shot::after, .home-patch.patch-image::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 45%, rgba(0,0,0,.10), rgba(0,0,0,.55)), linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.35)); mix-blend-mode: multiply; opacity: .95; }
.cdf-shot img, .home-patch.patch-image img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; filter: contrast(1.05) saturate(1.02); transform: scale(1.01); }
.cdf-shot:hover, .home-patch.patch-image:hover { transform: translateY(-4px); filter: drop-shadow(0 0 12px rgba(143,191,90,.22)); }

.cdf-tag { position: absolute; left: 10px; top: 10px; z-index: 2; font-family: monospace; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 10px; border-radius: 10px; background: rgba(10,15,10,.70); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 22px rgba(0,0,0,.35); color: rgba(212,249,149,.95); }
.patch-empty { display: grid; place-items: center; background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.15); }
.patch-empty span { font-family: monospace; letter-spacing: 2px; opacity: .7; }
.skeleton { background: rgba(255,255,255,.06); border: 2px dashed rgba(255,255,255,.12); animation: pulse 1.2s infinite ease-in-out; }

/* Syncfusion carousel */
.cdf-home-carousel .e-carousel-items { padding: 0 !important; }
.cdf-home-carousel .e-carousel-item { max-width: 100% !important; width: 100% !important; display: flex !important; justify-content: center !important; padding: 10px 0 6px !important; box-sizing: border-box; }
.cdf-home-carousel .e-carousel-navigators .e-previous, .cdf-home-carousel .e-carousel-navigators .e-next { width: 44px !important; height: 44px !important; border-radius: 14px !important; background: rgba(15,25,15,.70) !important; border: 1px solid rgba(255,255,255,.14) !important; box-shadow: 0 10px 22px rgba(0,0,0,.45) !important; backdrop-filter: blur(2px); transition: transform .15s ease, filter .15s ease; }
.cdf-home-carousel .e-carousel-navigators .e-previous:hover, .cdf-home-carousel .e-carousel-navigators .e-next:hover { transform: translateY(-2px); filter: brightness(1.15); }
.cdf-home-carousel .e-carousel-navigators .e-btn-icon { color: rgba(212,249,149,.95) !important; filter: drop-shadow(0 0 6px rgba(0,0,0,.65)); }

@media (max-width: 992px) { .cdf-grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) { .cdf-grid-3 { grid-template-columns: 1fr; } }

/* ===== SITREP OVERLAY ===== */
.cdf-overlay { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: linear-gradient(180deg, rgba(10,15,10,.55), rgba(10,15,10,.82)); border: 1px solid rgba(255,255,255,.14); box-shadow: 0 10px 22px rgba(0,0,0,.45); backdrop-filter: blur(2px); }
.cdf-overlay-left { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.cdf-sitrep { font-family: monospace; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; padding: 6px 10px; border-radius: 999px; background: rgba(143,191,90,.16); border: 1px solid rgba(212,249,149,.28); color: rgba(212,249,149,.95); box-shadow: 0 0 14px rgba(143,191,90,.18); }
.cdf-case, .cdf-date { font-family: monospace; font-size: 11px; letter-spacing: 1px; opacity: .9; white-space: nowrap; }
.cdf-shot:hover .cdf-overlay { border-color: rgba(212,249,149,.22); box-shadow: 0 16px 28px rgba(0,0,0,.55), 0 0 18px rgba(143,191,90,.15); }
.cdf-clickable { cursor: pointer; }

/* ===== LIGHTBOX INLINE ===== */
.cdf-lightbox .e-dlg-content { padding: 0 !important; }
.cdf-lightbox-body { width: 100%; height: 100%; display: grid; place-items: center; background: rgba(0,0,0,.72); }
.cdf-lightbox-img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 14px; border: 2px solid rgba(255,255,255,.14); box-shadow: 0 18px 55px rgba(0,0,0,.8), inset 0 0 0 2px rgba(0,0,0,.35); }