/* ==========================================================================
   Justified Gallery CSS  (/Content/justifiedGallery.css)
   Compatible dengan jQuery Justified Gallery (class .justified-gallery / .jg-entry)
   Theme-aware (light/dark) & accessible
   ========================================================================== */

/* ---- Theme tokens (fallback jika belum didefinisikan di tempat lain) ---- */
:root {
    --jg-bg: #ffffff;
    --jg-border: #e2e8f0;
    --jg-shadow: 0 2px 10px rgba(2,6,23,.08);
    --jg-hover-overlay: rgba(2,6,23,.22);
    --jg-caption-bg: rgba(255,255,255,.92);
    --jg-caption-color: #0f172a;
    --jg-caption-shadow: 0 4px 12px rgba(2,6,23,.12);
    --jg-focus: #94c0ff;
    --jg-spinner: #2938c4;
    --jg-gutter: 8px;           /* jarak antar item, disarankan samakan dengan opsi plugin */
    --jg-radius: 10px;          /* sudut kartu */
    --jg-row-height: 220px;     /* tinggi target baris, hanya utk skeleton awal */
  }
  
  /* Dark theme override (sinkron dgn lightgallery.css) */
  html[data-theme="dark"], body.theme-dark {
    --jg-bg: #0b1220;
    --jg-border: rgba(255,255,255,.08);
    --jg-shadow: 0 2px 12px rgba(0,0,0,.35);
    --jg-hover-overlay: rgba(255,255,255,.10);
    --jg-caption-bg: rgba(16,23,42,.84);
    --jg-caption-color: #e5eaf3;
    --jg-caption-shadow: 0 6px 16px rgba(0,0,0,.5);
    --jg-focus: #7db0ff;
    --jg-spinner: #7db0ff;
  }
  
  /* ---- Container ---------------------------------------------------------- */
  .justified-gallery {
    position: relative;
    width: 100%;
    background: var(--jg-bg);
    min-height: 60px;                /* agar ada area saat proses layout */
    box-sizing: border-box;
    /* optional padding, gunakan gutter agar pinggir konsisten */
    padding: 0;
  }
  
  /* Saat plugin menghitung layout (opsional skeleton) */
  .justified-gallery.jg-loading {
    background: linear-gradient(0deg, transparent, transparent),
                var(--jg-bg);
  }
  
  /* ---- Entries (plugin mengisi posisi/ukuran via inline style) ------------ */
  .justified-gallery .jg-entry {
    position: absolute;              /* dikelola plugin */
    overflow: hidden;
    border-radius: var(--jg-radius);
    box-shadow: var(--jg-shadow);
    background: #f1f5f9;             /* fallback sebelum img load */
    outline: none;
    transform: translateZ(0);        /* memperbaiki aliasing saat transform */
  }
  
  /* visibilitas dikontrol plugin; kita jaga transisi halus */
  .justified-gallery .jg-entry,
  .justified-gallery .jg-entry img {
    transition: transform 160ms ease, opacity 160ms ease;
  }
  
  /* Fokus keyboard yang jelas */
  .justified-gallery .jg-entry:focus-visible,
  .justified-gallery .jg-entry a:focus-visible {
    outline: 2px solid var(--jg-focus);
    outline-offset: 2px;
  }
  
  /* ---- Link wrapper ------------------------------------------------------- */
  .justified-gallery .jg-entry > a,
  .justified-gallery .jg-entry > div {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    text-decoration: none;
    color: inherit;
  }
  
  /* ---- Images ------------------------------------------------------------- */
  .justified-gallery .jg-entry img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;                /* isi penuh, crop proporsional */
    object-position: center;
    backface-visibility: hidden;
    -webkit-user-drag: none;
    user-select: none;
  }
  
  /* ---- Hover overlay ------------------------------------------------------ */
  .justified-gallery .jg-entry::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--jg-hover-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity 140ms ease;
  }
  
  .justified-gallery .jg-entry:hover::after {
    opacity: 1;
  }
  
  /* Sedikit zoom pada gambar saat hover */
  .justified-gallery .jg-entry:hover img {
    transform: scale(1.03);
  }
  
  /* ---- Captions ----------------------------------------------------------- */
  .justified-gallery .jg-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 8px 10px;
    background: var(--jg-caption-bg);
    color: var(--jg-caption-color);
    font: 500 13px/1.4 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    transform: translateY(100%);
    transition: transform 160ms ease, opacity 160ms ease;
    opacity: 0;
    box-shadow: var(--jg-caption-shadow);
  }
  
  .justified-gallery .jg-entry:hover .jg-caption,
  .justified-gallery .jg-entry:focus-within .jg-caption {
    transform: translateY(0);
    opacity: 1;
  }
  
  /* Opsi: tunjukkan caption selalu */
  .justified-gallery.jg-show-captions .jg-caption {
    transform: translateY(0);
    opacity: 1;
  }
  
  /* ---- Gutters (fallback visual) ----------------------------------------- */
  /* Plugin biasanya menghitung dan menambahkan gutter antar item melalui top/left.
     Aturan ini hanya menjaga padding pinggir baris jika kontainer diberi padding. */
  .justified-gallery.jg-has-gutter {
    padding: calc(var(--jg-gutter) / 2);
  }
  
  /* ---- Spinner (saat loading) -------------------------------------------- */
  .justified-gallery .jg-spinner {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
  }
  
  .justified-gallery .jg-spinner::before {
    content: "";
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 3px solid color-mix(in oklab, var(--jg-spinner) 30%, transparent);
    border-top-color: var(--jg-spinner);
    animation: jg-rotate .8s linear infinite;
  }
  
  @keyframes jg-rotate {
    to { transform: rotate(360deg); }
  }
  
  /* ---- Reduced motion ----------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    .justified-gallery .jg-entry,
    .justified-gallery .jg-entry img,
    .justified-gallery .jg-entry::after,
    .justified-gallery .jg-caption {
      transition: none !important;
    }
  }
  
  /* ---- RTL support -------------------------------------------------------- */
  [dir="rtl"] .justified-gallery .jg-caption {
    text-align: right;
  }
  
  /* ---- Responsive helpers (opsional) ------------------------------------- */
  /* Jika ingin garis luar container terlihat */
  .justified-gallery.jg-bordered {
    border: 1px solid var(--jg-border);
    border-radius: calc(var(--jg-radius) + 4px);
    padding: calc(var(--jg-gutter) / 2);
  }
  
  /* Skeleton baris awal agar tidak “loncat” saat init */
  .justified-gallery.jg-skeleton::before {
    content: "";
    display: block;
    height: var(--jg-row-height);
    background: linear-gradient(90deg,
      rgba(120,144,180,.08) 0%,
      rgba(120,144,180,.18) 50%,
      rgba(120,144,180,.08) 100%);
    background-size: 240px 100%;
    animation: jg-shimmer 1.2s infinite linear;
    border-radius: var(--jg-radius);
    margin-bottom: var(--jg-gutter);
  }
  @keyframes jg-shimmer {
    0% { background-position: 0 0; }
    100% { background-position: 240px 0; }
  }
  
  /* ---- Utilities (opsional kecil) ---------------------------------------- */
  .jg-hide-caption .jg-caption { display: none !important; }
  .jg-no-shadow .jg-entry { box-shadow: none !important; }
  .jg-square .jg-entry img { object-fit: cover; object-position: center; }