/* ==========================================================
 * gallery-harian.css
 * Gaya untuk SEMUA section galeri berbasis artikel. Dipilih lewat kelas
 * .pg-article-gallery (dipasang di index.php), sehingga keempat section
 * (Kegiatan Harian, Prestasi, Agenda Keagamaan, Galeri Ekskul) tampil
 * dan berperilaku sama persis.
 *
 * - Grid 6 kolom x 2 baris = 12 kartu per slide (rapi & konsisten)
 * - Aspect ratio kartu tetap (tidak berantakan pada slide ke-2)
 * - Transisi slide bersih (fade + slight scale)
 * - Style Instagram-style lightbox
 *
 * Catatan spesifisitas: aturan dasar di premium-bright.css memakai selektor
 * satu kelas (.pg-card, .pg-slide-grid, ...). Selektor di file ini memakai
 * dua kelas dan file ini dimuat setelahnya, jadi selalu menang.
 * ========================================================== */

/* ---- SLIDER GRID FIX ---- */
.pg-article-gallery .pg-slider-viewport {
  overflow: hidden;
  border-radius: 24px;
  min-height: 0;
}

/* Track menampung slide dgn tinggi yg konsisten */
.pg-article-gallery .pg-slider-track {
  position: relative;
  width: 100%;
}

/* Setiap slide: absolute overlay dengan opacity switch, JS akan set is-active */
.pg-article-gallery .pg-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(.985);
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

.pg-article-gallery .pg-slide.is-active {
  position: relative;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: scale(1);
  z-index: 2;
}

/* GRID: 6 kolom × 2 baris = 12 kartu per slide.
   Dengan batas 36 artikel, hasilnya pas 3 slide penuh (12 + 12 + 12).
   Gunakan aspect-ratio agar semua kartu sama tinggi tanpa content jump.

   UKURAN KARTU: diatur lewat --pg-card-w (lebar maksimum satu kartu).
   Kolom memakai minmax(0, var(--pg-card-w)) supaya kartu tidak melebar
   mengikuti container, lalu grid dipusatkan dengan justify-content: center.
   Untuk mengubah ukuran, cukup ubah satu nilai --pg-card-w di bawah.

   Kenapa 200px: ruang isi container pada layar 1440px hanya 1288px.
   6 × 200 + 5 × 12 (gap) = 1260px, jadi masih sisa dan kartu tidak
   pernah menyusut. Nilai 205px akan menghasilkan 1290px (lebih 2px)
   sehingga kartu ikut mengecil sendiri. */
.pg-article-gallery .pg-slide-grid {
  --pg-card-w: 200px;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, var(--pg-card-w))) !important;
  grid-auto-rows: unset !important;
  gap: 12px !important;
  justify-content: center !important;
}

.pg-article-gallery .pg-card {
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  overflow: hidden;
  cursor: zoom-in;
  position: relative;
}

.pg-article-gallery .pg-card img,
.pg-article-gallery .pg-card video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Badge play untuk kartu berisi video.
   Catatan: JANGAN pakai backdrop-filter di sini — properti itu membuat
   composited layer yang bentrok dengan `mix-blend-mode: multiply` pada
   .pg-card::after sehingga kartu lain ikut ter-tint. Gunakan warna solid. */
.pg-article-gallery .pg-card .pg-video-badge {
  position: absolute;
  top: 8px; left: 8px;
  width: 25px; height: 25px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,0,0,.62);
  border: 1px solid rgba(255,255,255,.45);
  color: #fff;
  z-index: 3;
  pointer-events: none;
}
.pg-article-gallery .pg-card .pg-video-badge svg { width: 14px; height: 14px; }

/* Hover overlay ala IG (garis tipis + zoom icon) */
.pg-article-gallery .pg-card .pg-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 9px;
  background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%);
  opacity: 0;
  transition: opacity .35s ease;
  z-index: 2;
}
.pg-article-gallery .pg-card:hover .pg-overlay { opacity: 1; }

/* Teks overlay ikut diperkecil agar proporsional dengan kartu baru. */
.pg-article-gallery .pg-card .pg-index {
  align-self: flex-end;
  font-family: "Sora", sans-serif;
  font-size: .64rem;
  font-weight: 700;
  color: #fff;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.3);
  padding: 2px 8px;
  border-radius: 999px;
  backdrop-filter: blur(6px);
}
.pg-article-gallery .pg-card .pg-caption {
  color: #fff;
}
.pg-article-gallery .pg-card .pg-caption .pg-tag {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .8;
}
.pg-article-gallery .pg-card .pg-caption h3 {
  font-size: .8rem;
  margin: 2px 0 0;
  font-weight: 700;
  line-height: 1.22;
  color: #fff;
}
.pg-article-gallery .pg-card .pg-zoom { display: none; }

/* Kartu galeri berbasis artikel: batasi panjang judul agar grid tetap rapi
   walau judul artikel panjang. */
.pg-article-gallery .pg-card .pg-caption h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- EMPTY STATE (belum ada artikel) ---- */
/* Warna garis mengikuti aksen tiap section (--pg-accent di atribut style). */
.pg-article-gallery .pg-empty {
  border: 1px dashed color-mix(in srgb, var(--pg-accent, #0d8f4a) 38%, transparent);
  background: #fff;
  border-radius: 20px;
  padding: clamp(20px, 4vw, 34px);
  text-align: center;
}
.pg-article-gallery .pg-empty strong {
  display: block;
  font-family: "Sora", sans-serif;
  font-size: 1.05rem;
  color: #0f2819;
  margin-bottom: 8px;
}
.pg-article-gallery .pg-empty p {
  margin: 0;
  color: #4a5651;
  font-size: .93rem;
  line-height: 1.6;
  max-width: 62ch;
  margin-inline: auto;
}

/* Responsive.
   Semua breakpoint tetap memakai minmax(0, var(--pg-card-w)) supaya kartu
   punya batas lebar dan tidak ikut melebar mengisi container. Kolom masih
   bisa menyusut sendiri bila ruang kurang, jadi tidak pernah meluber.

   Jumlah kartu per slide tetap 12 (diatur di index.php); yang berubah hanya
   jumlah kolom, jadi 12 kartu tersusun ulang: 6×2 → 4×3 → 3×4 → 2×6.
   Tinggi section otomatis bertambah di layar kecil, itu wajar untuk slider. */
@media (max-width: 1200px) {
  .pg-article-gallery .pg-slide-grid {
    --pg-card-w: 200px;
    grid-template-columns: repeat(4, minmax(0, var(--pg-card-w))) !important;
  }
}
@media (max-width: 820px) {
  .pg-article-gallery .pg-slide-grid {
    --pg-card-w: 190px;
    grid-template-columns: repeat(3, minmax(0, var(--pg-card-w))) !important;
  }
}
@media (max-width: 560px) {
  .pg-article-gallery .pg-slide-grid {
    --pg-card-w: 210px;
    grid-template-columns: repeat(2, minmax(0, var(--pg-card-w))) !important;
    gap: 10px !important;
  }
  .pg-article-gallery .pg-card { aspect-ratio: 1 / 1; border-radius: 12px; }
}

/* =========================================================
 * IG-STYLE LIGHTBOX
 * ========================================================= */
.ig-lightbox {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.86);
  backdrop-filter: blur(10px);
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
  opacity: 0;
  transition: opacity .25s ease;
}
.ig-lightbox.is-open { display: flex; opacity: 1; }

/* Dialog dibuat lebar seperti lightbox Instagram di desktop:
   area gambar mengambil sisa ruang, panel teks memakai lebar tetap
   (bukan pecahan) supaya gambar tidak ikut mengecil saat panel melebar. */
.ig-lightbox__dialog {
  position: relative;
  width: min(1240px, 100%);
  max-height: 94vh;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(300px, 27%, 400px);
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
  animation: ig-pop .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes ig-pop {
  from { opacity: 0; transform: translateY(20px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* Media area.
   min-height memakai vh agar area gambar tinggi di desktop, sehingga foto
   portrait maupun landscape tampil besar. object-fit: contain menjaga
   proporsi asli — gambar tidak pernah terpotong atau melar. */
.ig-lightbox__media {
  position: relative;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: min(72vh, 720px);
  max-height: 94vh;
  overflow: hidden;
}
.ig-lightbox__media img,
.ig-lightbox__media video {
  max-width: 100%;
  max-height: 94vh;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
/* Video di lightbox: JS yang mengatur display saat aktif */
.ig-lightbox__media .ig-media--video { display: none; background: #000; }
.ig-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: none;
  color: #111;
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  transition: transform .2s ease, background .2s ease;
}
.ig-nav:hover { transform: translateY(-50%) scale(1.08); background: #fff; }
.ig-nav svg { width: 16px; height: 16px; }
.ig-nav--prev { left: 12px; }
.ig-nav--next { right: 12px; }

/* Right panel (like IG comments/info) */
.ig-lightbox__panel {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-left: 1px solid #eee;
  min-width: 0;
}
.ig-panel-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #efefef;
}
.ig-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, #0d8f4a, #1fb573);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800;
  font-family: "Sora", sans-serif;
  font-size: .8rem;
  flex-shrink: 0;
}
.ig-panel-head .ig-handle {
  display: flex; flex-direction: column;
  font-family: "Sora", sans-serif;
  min-width: 0;
}
.ig-panel-head .ig-handle strong { font-size: .85rem; color: #111; }
.ig-panel-head .ig-handle span { font-size: .72rem; color: #8a8f8b; }

.ig-panel-body {
  padding: 14px 16px;
  overflow-y: auto;
  flex: 1;
  font-family: "Instrument Sans", "Sora", sans-serif;
}
.ig-panel-body h4 {
  font-size: 1.05rem;
  margin: 0 0 8px;
  color: #0f2819;
  font-weight: 700;
}
.ig-panel-body p {
  margin: 0 0 12px;
  color: #4a5651;
  line-height: 1.55;
  font-size: .92rem;
}
.ig-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.ig-tags span {
  padding: 3px 10px;
  background: #eaf6ef;
  color: #0d8f4a;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 600;
  font-family: "Sora", sans-serif;
}

.ig-actions {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 16px;
  border-top: 1px solid #efefef;
  color: #111;
}
.ig-actions button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #111;
  transition: transform .2s ease, color .2s ease;
}
.ig-actions button:hover { transform: scale(1.08); }
.ig-actions .ig-like.is-liked { color: #ed4956; }
.ig-actions .ig-like.is-liked svg { fill: currentColor; }

/* Jumlah dibuka (view counter) — tampilan statis, bukan tombol */
.ig-actions .ig-views {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #4a5651;
  cursor: default;
}
.ig-actions .ig-like-count,
.ig-actions .ig-views-count {
  font-family: "Sora", sans-serif;
  font-size: .84rem;
  font-weight: 700;
  line-height: 1;
}

.ig-meta {
  padding: 6px 16px 14px;
  font-family: "Sora", sans-serif;
  font-size: .72rem;
  color: #8a8f8b;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.ig-lightbox__close {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,.9);
  border: none;
  color: #111;
  cursor: pointer;
  display: grid; place-items: center;
  z-index: 3;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
}
.ig-lightbox__close:hover { background: #fff; }

/* Responsive lightbox.
   Di bawah 820px panel pindah ke bawah gambar (satu kolom). min-height
   ditulis ulang di sini supaya tidak bentrok dengan min(72vh, 720px)
   milik desktop — kalau min-height lebih besar dari max-height, gambar
   bisa mendorong panel keluar layar. */
@media (max-width: 820px) {
  .ig-lightbox__dialog {
    grid-template-columns: 1fr;
    max-height: 95vh;
  }
  .ig-lightbox__media {
    min-height: 240px;
    max-height: 58vh;
  }
  .ig-lightbox__panel { max-height: 40vh; border-left: none; border-top: 1px solid #eee; }
}

/* Layar pendek (mis. laptop 1366×768): kurangi tinggi minimum gambar
   agar panel teks dan tombol aksi tidak terpotong. */
@media (max-height: 780px) and (min-width: 821px) {
  .ig-lightbox__media { min-height: min(64vh, 560px); }
}

body.ig-lock { overflow: hidden; }