/**
 * EduGallery WP - Frontend & Portal Stylesheet
 *
 * Catatan arsitektur:
 * - Font dimuat lewat wp_enqueue_style, bukan @import, supaya tidak memblokir render.
 * - Aturan peredam tema hanya aktif pada body.has-edu-portal, yaitu halaman
 *   tempat portal menjadi isi utama. Galeri yang disematkan di tengah artikel
 *   tidak lagi ikut menyembunyikan judul dan kontainer artikel itu.
 */

:root {
  --edu-primary: #4f46e5;
  --edu-primary-hover: #4338ca;
  --edu-primary-light: #eef2ff;
  --edu-primary-ring: rgba(79, 70, 229, 0.14);
  --edu-surface: #ffffff;
  --edu-surface-sunken: #f8fafc;
  --edu-bg: #f8fafc;
  --edu-border: #e5e9f0;
  --edu-border-strong: #cbd5e1;
  --edu-border-light: #f1f5f9;
  --edu-text-dark: #0f172a;
  --edu-text-body: #334155;
  --edu-text-muted: #64748b;
  --edu-text-subtle: #94a3b8;
  --edu-radius-sm: 8px;
  --edu-radius-md: 12px;
  --edu-radius-lg: 16px;
  --edu-shadow-card: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03);
  --edu-shadow-hover: 0 14px 30px -12px rgba(15, 23, 42, 0.18), 0 6px 12px -6px rgba(15, 23, 42, 0.08);
  --edu-shadow-pop: 0 14px 34px rgba(15, 23, 42, 0.14);
  --edu-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --edu-font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --edu-sidebar-width: 252px;
  /* Portal selebar halaman sudah dibatasi 1760px dan dipusatkan, jadi isinya
     tidak perlu dibatasi lagi di 1200px. Pembatasan ganda itu menyisakan
     margin kosong lebar di kiri dan kanan kartu. Nilai ini hanya berlaku
     sebagai pengaman untuk galeri yang disematkan di kontainer sangat lebar. */
  --edu-content-max: 1600px;
  --edu-portal-pad: 32px;
  --edu-gap: 24px;
  /* Lebar minimum kartu dihitung dari kebutuhan baris tombol: dua tombol
     berlabel (±92px) + tombol ikon + padding. Di bawah ini label mulai
     terpotong, jadi grid otomatis tidak boleh membuat kartu lebih sempit. */
  --edu-card-min: 256px;
  --edu-sticky-top: 0px;
}

/* ============================================================
   0. PEREDAM TEMA — HANYA DI HALAMAN PORTAL PENUH
   ============================================================ */
body.has-edu-portal {
  overflow-x: hidden;
}

/* Header, footer, dan judul bawaan tema.
   Catatan: footer Jannah adalah <footer id="footer" class="site-footer">
   dengan baris hak cipta #site-info di dalamnya. Versi sebelumnya hanya
   menyasar #tie-footer yang tidak pernah ada, sehingga footer tetap tampil. */
body.has-edu-portal #theme-header,
body.has-edu-portal #tie-wrapper > header,
body.has-edu-portal .header-nav,
body.has-edu-portal #footer,
body.has-edu-portal #tie-footer,
body.has-edu-portal .site-footer,
body.has-edu-portal #site-info,
body.has-edu-portal .site-info,
body.has-edu-portal .copyright-text,
body.has-edu-portal .footer-bottom,
body.has-edu-portal #footer-widgets-container,
body.has-edu-portal .entry-header,
body.has-edu-portal .page-title,
body.has-edu-portal .post-title,
body.has-edu-portal .single-featured-image {
  display: none !important;
}

/* Pembungkus tema dinetralkan agar portal bisa selebar halaman.
   `.tie-row` penting: Jannah memberinya margin -15px kiri-kanan sebagai
   gutter grid, yang menarik portal sampai keluar tepi layar lalu terpotong
   oleh #tie-container yang ber-overflow hidden. */
body.has-edu-portal #tie-wrapper,
body.has-edu-portal #tie-container,
body.has-edu-portal #content,
body.has-edu-portal .site-content,
body.has-edu-portal .entry-content,
body.has-edu-portal .container,
body.has-edu-portal .tie-container,
body.has-edu-portal .tie-row,
body.has-edu-portal .main-content-row,
body.has-edu-portal .main-content,
body.has-edu-portal .edu-portal-page-wrap {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  float: none !important;
}

body.admin-bar {
  --edu-sticky-top: 32px;
}

/* ============================================================
   1. KERANGKA PORTAL
   ============================================================ */
.edu-portal-layout {
  display: flex;
  align-items: flex-start;
  width: 100%;
  max-width: 100%;
  margin: 0;
  background: var(--edu-surface);
  font-family: var(--edu-font-sans) !important;
  color: var(--edu-text-dark);
  box-sizing: border-box;
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.edu-portal-layout.edu-portal-embedded {
  border: 1px solid var(--edu-border);
  border-radius: var(--edu-radius-lg);
  overflow: hidden;
  margin: 28px 0;
}

/* Portal selebar halaman tetap diberi jarak dari tepi layar dan dipusatkan.
   Tanpa ini sidebar menempel persis di tepi kiri dan terasa sesak. */
@media (min-width: 861px) {
  .edu-portal-layout.edu-portal-fullbleed {
    /* 1800px dipilih agar layar 1920px muat 5 kolom kartu ~263px, bukan
       4 kolom gemuk 325px. Selisihnya memang hanya beberapa piksel. */
    max-width: 1800px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--edu-portal-pad);
    padding-right: var(--edu-portal-pad);
  }
}

.edu-portal-layout *,
.edu-portal-layout *::before,
.edu-portal-layout *::after {
  box-sizing: border-box;
}

.edu-portal-layout [hidden] {
  display: none !important;
}

/* Reset elemen yang sering diwarisi dari tema */
.edu-portal-layout ul,
.edu-portal-layout ol,
.edu-portal-layout li {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
}

.edu-portal-layout li::before,
.edu-portal-layout li::after {
  content: none !important;
  display: none !important;
}

.edu-portal-layout a {
  text-decoration: none !important;
  box-shadow: none !important;
  border: none !important;
}

.edu-portal-layout button {
  font-family: inherit;
  cursor: pointer;
}

.edu-portal-layout :focus-visible {
  outline: 2px solid var(--edu-primary);
  outline-offset: 2px;
  border-radius: 6px;
}

.edu-portal-layout .screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================================
   2. SIDEBAR
   ============================================================ */
.edu-sidebar {
  width: var(--edu-sidebar-width);
  flex: 0 0 var(--edu-sidebar-width);
  background: var(--edu-surface);
  border-right: 1px solid var(--edu-border);
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 24px 16px;
  position: sticky;
  top: var(--edu-sticky-top);
  max-height: calc(100vh - var(--edu-sticky-top));
  overflow-y: auto;
  scrollbar-width: thin;
}

.edu-sidebar::-webkit-scrollbar {
  width: 8px;
}

.edu-sidebar::-webkit-scrollbar-thumb {
  background: #e2e8f0;
  border-radius: 999px;
}

.edu-sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 8px 18px 8px;
  border-bottom: 1px solid var(--edu-border-light);
  color: var(--edu-text-dark) !important;
  transition: opacity var(--edu-transition);
}

.edu-sidebar-brand:hover {
  opacity: 0.85;
}

.edu-brand-logo-img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
  display: block;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.1);
  transition: transform var(--edu-transition);
}

.edu-sidebar-brand:hover .edu-brand-logo-img {
  transform: scale(1.05);
}

.edu-brand-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

.edu-nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.edu-nav-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #475569 !important;
  transition: background var(--edu-transition), color var(--edu-transition);
}

.edu-nav-item:hover {
  background: var(--edu-border-light);
  color: var(--edu-text-dark) !important;
}

.edu-nav-item.is-active {
  background: var(--edu-primary);
  color: #ffffff !important;
  box-shadow: 0 6px 16px -6px rgba(79, 70, 229, 0.6);
}

.edu-nav-item.is-empty {
  opacity: 0.55;
}

.edu-nav-item.is-empty.is-active {
  opacity: 1;
}

.edu-nav-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.edu-nav-icon {
  font-size: 15px;
  line-height: 1;
  width: 18px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.edu-nav-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edu-nav-count {
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--edu-border-light);
  color: var(--edu-text-muted);
  flex-shrink: 0;
}

.edu-nav-item.is-active .edu-nav-count {
  background: rgba(255, 255, 255, 0.24);
  color: #ffffff;
}

.edu-sidebar-stat {
  margin-top: auto;
  padding: 14px 16px;
  background: linear-gradient(160deg, #eef2ff 0%, #f8fafc 100%);
  border: 1px solid #e0e7ff;
  border-radius: var(--edu-radius-md);
}

.edu-sidebar-stat-value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--edu-primary);
  letter-spacing: -0.5px;
}

.edu-sidebar-stat-label {
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--edu-text-muted);
}

/* ============================================================
   3. KONTEN UTAMA
   ============================================================ */
.edu-main-content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 30px 36px 44px;
  background: var(--edu-surface);
}

/* Lebar isi dibatasi dan dipusatkan. Sebelumnya kartu menumpuk di kiri dan
   menyisakan ruang kosong besar di kanan pada layar lebar. */
.edu-main-inner {
  width: 100%;
  max-width: var(--edu-content-max);
  margin: 0 auto;
}

.edu-top-action-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding-bottom: 18px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--edu-border-light);
}

.edu-page-intro {
  min-width: 0;
}

.edu-portal-heading {
  margin: 0 0 5px 0 !important;
  padding: 0 !important;
  font-family: var(--edu-font-sans) !important;
  font-size: 25px !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: var(--edu-text-dark) !important;
  letter-spacing: -0.6px;
}

.edu-portal-subheading {
  margin: 0 !important;
  font-size: 13.5px !important;
  line-height: 1.5 !important;
  color: var(--edu-text-muted) !important;
  max-width: 58ch;
}

.edu-top-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.edu-result-summary {
  margin: 0 0 18px 0 !important;
  font-size: 12.5px !important;
  font-weight: 500;
  color: var(--edu-text-subtle) !important;
}

.edu-result-summary:empty {
  display: none;
}

/* Kotak pencarian */
.edu-search-wrap {
  position: relative;
  width: 258px;
  height: 42px;
  display: flex;
  align-items: center;
}

.edu-search-icon-svg {
  position: absolute;
  left: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--edu-text-subtle);
  pointer-events: none;
  z-index: 2;
}

.edu-search-field {
  width: 100%;
  height: 42px;
  min-height: 42px;
  max-height: 42px;
  box-sizing: border-box;
  padding: 0 34px 0 38px !important;
  margin: 0 !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 500;
  line-height: 40px !important;
  color: var(--edu-text-dark) !important;
  background: var(--edu-surface) !important;
  border: 1px solid var(--edu-border) !important;
  border-radius: 10px !important;
  outline: none;
  box-shadow: none !important;
  transition: border-color var(--edu-transition), box-shadow var(--edu-transition);
  -webkit-appearance: none;
  appearance: none;
}

.edu-search-field::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.edu-search-field:focus {
  border-color: var(--edu-primary) !important;
  box-shadow: 0 0 0 3px var(--edu-primary-ring) !important;
}

.edu-search-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--edu-border-light);
  color: var(--edu-text-muted);
  font-size: 15px;
  line-height: 1;
  padding: 0;
  z-index: 2;
}

.edu-search-clear:hover {
  background: var(--edu-border-strong);
  color: var(--edu-text-dark);
}

/* Dropdown tipe media */
.edu-custom-dropdown {
  position: relative;
  min-width: 228px;
}

.edu-dropdown-trigger {
  width: 100%;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 36px 0 16px;
  margin: 0;
  background: var(--edu-surface);
  border: 1px solid var(--edu-border);
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--edu-text-dark);
  box-shadow: none;
  transition: border-color var(--edu-transition), box-shadow var(--edu-transition);
}

.edu-dropdown-trigger:hover {
  border-color: var(--edu-border-strong);
}

.edu-dropdown-trigger:focus,
.edu-custom-dropdown.is-open .edu-dropdown-trigger {
  border-color: var(--edu-primary);
  box-shadow: 0 0 0 3px var(--edu-primary-ring);
}

.edu-dropdown-selected-label {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edu-dropdown-arrow-svg {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--edu-text-muted);
  pointer-events: none;
  transition: transform var(--edu-transition);
}

.edu-custom-dropdown.is-open .edu-dropdown-arrow-svg {
  transform: translateY(-50%) rotate(180deg);
  color: var(--edu-primary);
}

.edu-dropdown-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--edu-surface);
  border: 1px solid var(--edu-border);
  border-radius: var(--edu-radius-md);
  box-shadow: var(--edu-shadow-pop);
  padding: 6px;
  max-height: 290px;
  overflow-y: auto;
  z-index: 60;
  scrollbar-width: thin;
  animation: eduDropdownFade 0.15s ease-out;
}

@keyframes eduDropdownFade {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.edu-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--edu-radius-sm);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--edu-text-body);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--edu-transition), color var(--edu-transition);
}

.edu-dropdown-item:hover,
.edu-dropdown-item:focus {
  background: var(--edu-border-light);
  color: var(--edu-text-dark);
  outline: none;
}

.edu-dropdown-item.is-selected {
  background: var(--edu-primary-light);
  color: var(--edu-primary);
  font-weight: 700;
}

.edu-dropdown-item .edu-item-count {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--edu-text-subtle);
}

.edu-dropdown-item.is-selected .edu-item-count {
  color: var(--edu-primary);
}

/* Toggle tampilan */
.edu-view-toggle-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--edu-border-light);
  padding: 3px;
  border-radius: 10px;
  height: 42px;
  flex-shrink: 0;
}

.edu-view-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--edu-radius-sm);
  border: none;
  background: transparent;
  color: var(--edu-text-muted);
  padding: 0;
  transition: background var(--edu-transition), color var(--edu-transition);
}

.edu-view-btn:hover {
  color: var(--edu-text-dark);
}

.edu-view-btn.is-active {
  background: var(--edu-surface);
  color: var(--edu-primary);
  box-shadow: 0 1px 4px rgba(15, 23, 42, 0.1);
}

/* ============================================================
   4. GRID KARTU
   ============================================================ */
.edu-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--edu-card-min)), 1fr));
  gap: var(--edu-gap);
  align-items: start;
}

.edu-gap-compact { --edu-gap: 16px; }
.edu-gap-normal { --edu-gap: 24px; }
.edu-gap-spacious { --edu-gap: 36px; }

/* Masonry memakai CSS multi-column agar tinggi kartu mengikuti gambar */
.edu-cards-grid.edu-layout-masonry {
  display: block;
  column-count: 4;
  column-gap: var(--edu-gap);
}

.edu-cards-grid.edu-layout-masonry .edu-media-card {
  break-inside: avoid;
  margin: 0 0 var(--edu-gap) 0;
  width: 100%;
}

.edu-cards-grid.edu-layout-masonry .edu-card-thumb-wrap {
  aspect-ratio: auto;
}

.edu-cards-grid.edu-layout-masonry .edu-card-img {
  height: auto;
  object-fit: contain;
}

/* Tampilan baris */
.edu-cards-grid.edu-layout-list,
.edu-cards-grid.is-list-view {
  display: grid;
  grid-template-columns: 1fr;
}

.edu-cards-grid.edu-layout-list .edu-media-card,
.edu-cards-grid.is-list-view .edu-media-card {
  flex-direction: row;
  max-width: 100%;
}

.edu-cards-grid.edu-layout-list .edu-card-thumb-wrap,
.edu-cards-grid.is-list-view .edu-card-thumb-wrap {
  width: 230px;
  flex: 0 0 230px;
  aspect-ratio: 4 / 3;
}

.edu-cards-grid.edu-layout-list .edu-card-heading,
.edu-cards-grid.is-list-view .edu-card-heading {
  -webkit-line-clamp: 2;
  min-height: 0;
}

.edu-cards-grid.edu-layout-list .edu-card-description,
.edu-cards-grid.is-list-view .edu-card-description {
  -webkit-line-clamp: 3;
  min-height: 0;
}

.edu-cards-grid.edu-layout-list .edu-card-actions-bar,
.edu-cards-grid.is-list-view .edu-card-actions-bar {
  max-width: 330px;
}

/* Penguncian jumlah kolom (hanya pada layar lebar) */
@media (min-width: 1025px) {
  .edu-cards-grid.edu-cols-2:not(.edu-layout-masonry):not(.is-list-view) { grid-template-columns: repeat(2, 1fr); }
  .edu-cards-grid.edu-cols-3:not(.edu-layout-masonry):not(.is-list-view) { grid-template-columns: repeat(3, 1fr); }
  .edu-cards-grid.edu-cols-4:not(.edu-layout-masonry):not(.is-list-view) { grid-template-columns: repeat(4, 1fr); }
  .edu-cards-grid.edu-cols-5:not(.edu-layout-masonry):not(.is-list-view) { grid-template-columns: repeat(5, 1fr); }
  .edu-cards-grid.edu-cols-6:not(.edu-layout-masonry):not(.is-list-view) { grid-template-columns: repeat(6, 1fr); }

  .edu-cards-grid.edu-layout-masonry.edu-cols-2 { column-count: 2; }
  .edu-cards-grid.edu-layout-masonry.edu-cols-3 { column-count: 3; }
  .edu-cards-grid.edu-layout-masonry.edu-cols-4 { column-count: 4; }
  .edu-cards-grid.edu-layout-masonry.edu-cols-5 { column-count: 5; }
  .edu-cards-grid.edu-layout-masonry.edu-cols-6 { column-count: 6; }

  /* Pada 5–6 kolom kartu terlalu sempit untuk label tombol: labelnya akan
     terpotong jadi "Pe…". Lebih baik tampilkan ikonnya saja. Nama tombol
     tetap terbaca pembaca layar lewat aria-label. */
  .edu-cols-5 .edu-btn-action span,
  .edu-cols-6 .edu-btn-action span {
    display: none;
  }

  .edu-cols-5 .edu-btn-action,
  .edu-cols-6 .edu-btn-action {
    gap: 0;
    padding: 0;
  }
}

/* ============================================================
   5. KARTU MEDIA
   ============================================================ */
.edu-media-card {
  margin: 0;
  padding: 0;
  background: var(--edu-surface);
  border: 1px solid var(--edu-border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--edu-shadow-card);
  display: flex;
  flex-direction: column;
  width: 100%;
  transition: transform var(--edu-transition), box-shadow var(--edu-transition), border-color var(--edu-transition);
}

.edu-media-card:hover {
  box-shadow: var(--edu-shadow-hover);
  border-color: #d7def0;
  transform: translateY(-3px);
}

.edu-card-thumb-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: var(--edu-border-light);
  overflow: hidden;
  flex-shrink: 0;
}

.edu-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Poster dan infografis biasanya memuat judul di bagian atas gambar,
     jadi pemotongan dimulai dari atas agar judulnya tetap terlihat. */
  object-position: center top;
  display: block;
  margin: 0;
  transition: transform 0.4s ease;
}

.edu-media-card:hover .edu-card-img {
  transform: scale(1.04);
}

.edu-floating-badge {
  position: absolute;
  top: 9px;
  left: 9px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: calc(100% - 18px);
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(226, 232, 240, 0.9);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  color: #1e293b;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  z-index: 3;
  pointer-events: none;
}

.edu-badge-icon {
  font-size: 11px;
  line-height: 1;
}

.edu-badge-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Seluruh area thumbnail bisa diklik untuk membuka lightbox */
.edu-thumb-zoom-trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  padding: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0) 40%, rgba(15, 23, 42, 0.25) 100%);
  opacity: 0;
  z-index: 2;
  transition: opacity var(--edu-transition);
}

.edu-media-card:hover .edu-thumb-zoom-trigger,
.edu-thumb-zoom-trigger:focus-visible {
  opacity: 1;
}

.edu-thumb-zoom-chip {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  color: var(--edu-primary);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.25);
  transform: scale(0.85);
  transition: transform var(--edu-transition);
}

.edu-media-card:hover .edu-thumb-zoom-chip {
  transform: scale(1);
}

.edu-card-info-box {
  padding: 13px 14px 14px;
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: var(--edu-surface);
}

.edu-card-heading {
  margin: 0 0 5px 0 !important;
  padding: 0 !important;
  font-family: var(--edu-font-sans) !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.38 !important;
  color: var(--edu-text-dark) !important;
  letter-spacing: -0.2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 37px;
}

.edu-card-description {
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  font-size: 11.5px !important;
  font-weight: 400;
  line-height: 1.5 !important;
  color: var(--edu-text-muted) !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 34px;
}

.edu-card-actions-bar {
  display: flex;
  align-items: stretch;
  gap: 6px;
  margin-top: auto;
}

.edu-btn-action {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
  padding: 0 9px;
  font-family: inherit;
  font-size: 11.5px !important;
  font-weight: 600;
  border-radius: var(--edu-radius-sm);
  border: 1px solid transparent;
  transition: background var(--edu-transition), color var(--edu-transition), border-color var(--edu-transition);
}

.edu-btn-action span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.edu-btn-action svg {
  flex-shrink: 0;
}

.edu-btn-zoom {
  background: var(--edu-primary-light);
  color: var(--edu-primary) !important;
  border-color: rgba(79, 70, 229, 0.14);
}

.edu-btn-zoom:hover {
  background: #e0e7ff;
  color: var(--edu-primary-hover) !important;
}

.edu-btn-download {
  background: var(--edu-border-light);
  color: var(--edu-text-body) !important;
  border-color: var(--edu-border);
}

.edu-btn-download:hover {
  background: #e2e8f0;
  color: var(--edu-text-dark) !important;
}

.edu-btn-icon {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--edu-border);
  border-radius: var(--edu-radius-sm);
  color: var(--edu-text-muted);
  padding: 0;
  transition: background var(--edu-transition), color var(--edu-transition), border-color var(--edu-transition);
}

.edu-btn-icon:hover {
  background: var(--edu-border-light);
  color: var(--edu-primary);
  border-color: var(--edu-border-strong);
}

.edu-btn-icon.is-done {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #15803d;
}

/* ============================================================
   6. MUAT LEBIH BANYAK, STATUS KOSONG, TOAST
   ============================================================ */
.edu-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 30px;
}

.edu-load-more-btn {
  height: 42px;
  padding: 0 26px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--edu-primary) !important;
  background: var(--edu-primary-light);
  border: 1px solid rgba(79, 70, 229, 0.18);
  border-radius: 999px;
  transition: background var(--edu-transition), transform var(--edu-transition);
}

.edu-load-more-btn:hover {
  background: #e0e7ff;
  transform: translateY(-1px);
}

.edu-state-box {
  grid-column: 1 / -1;
  text-align: center;
  padding: 56px 24px;
  background: var(--edu-surface-sunken);
  border: 1px dashed var(--edu-border-strong);
  border-radius: var(--edu-radius-lg);
}

.edu-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--edu-surface);
  border: 1px solid var(--edu-border);
  color: var(--edu-text-subtle);
}

.edu-state-title {
  margin: 0 0 6px 0 !important;
  font-family: var(--edu-font-sans) !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: var(--edu-text-dark) !important;
}

.edu-state-text {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  color: var(--edu-text-muted) !important;
  max-width: 44ch;
  margin-inline: auto !important;
}

.edu-no-results-msg {
  margin-top: 4px;
}

.edu-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  transform: translate(-50%, 14px);
  z-index: 1000000;
  max-width: calc(100vw - 32px);
  padding: 11px 20px;
  background: #0f172a;
  color: #f8fafc;
  font-family: var(--edu-font-sans);
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.edu-toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ============================================================
   7. TABLET
   ============================================================ */
/* Laptop 1280–1520px: sidebar dan padding dirampingkan sedikit supaya
   ruang yang tersisa tetap cukup untuk 4 kolom kartu ~257px dengan label
   tombol utuh, bukan 3 kolom raksasa. */
@media (min-width: 861px) and (max-width: 1520px) {
  :root {
    --edu-sidebar-width: 228px;
    --edu-portal-pad: 28px;
  }

  .edu-main-content {
    padding-left: 24px;
    padding-right: 24px;
  }
}

@media (max-width: 1200px) {
  .edu-cards-grid.edu-layout-masonry { column-count: 3; }
}

@media (max-width: 1024px) {
  :root { --edu-sidebar-width: 216px; }

  .edu-main-content {
    padding: 24px 24px 36px;
  }

  .edu-portal-heading {
    font-size: 22px !important;
  }

  .edu-cards-grid.edu-layout-masonry { column-count: 2; }
}

/* ============================================================
   8. MOBILE — SEMUA RATA TENGAH, SATU KOLOM
   ============================================================ */
@media (max-width: 860px) {
  .edu-portal-layout {
    display: block;
    margin: 0;
    border-radius: 0;
    border: none;
  }

  .edu-portal-layout.edu-portal-embedded {
    margin: 20px 0;
    border: 1px solid var(--edu-border);
    border-radius: var(--edu-radius-md);
  }

  .edu-sidebar {
    display: none;
  }

  .edu-main-content {
    padding: 16px 12px 28px;
    width: 100%;
  }

  .edu-top-action-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    text-align: center;
    padding-bottom: 14px;
    margin-bottom: 14px;
  }

  .edu-page-intro {
    width: 100%;
    margin: 0 auto;
  }

  .edu-portal-heading {
    font-size: 16.5px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    text-align: center;
    margin: 0 0 5px 0 !important;
    letter-spacing: -0.2px;
  }

  .edu-portal-subheading {
    font-size: 12px !important;
    line-height: 1.45 !important;
    text-align: center;
    margin: 0 auto !important;
    max-width: 320px;
  }

  .edu-top-tools {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .edu-search-wrap,
  .edu-custom-dropdown {
    width: 100%;
    min-width: 0;
  }

  .edu-result-summary {
    text-align: center;
    margin-bottom: 14px !important;
  }

  /* Di ponsel tampilan selalu kotak satu kolom */
  .edu-view-toggle-wrap {
    display: none;
  }

  .edu-cards-grid,
  .edu-cards-grid.edu-layout-masonry,
  .edu-cards-grid.edu-layout-list,
  .edu-cards-grid.is-list-view {
    display: grid;
    grid-template-columns: 1fr;
    column-count: auto;
    gap: 20px;
    justify-items: center;
    width: 100%;
  }

  .edu-media-card,
  .edu-cards-grid.edu-layout-list .edu-media-card,
  .edu-cards-grid.is-list-view .edu-media-card {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    flex-direction: column;
  }

  .edu-card-thumb-wrap,
  .edu-cards-grid.edu-layout-list .edu-card-thumb-wrap,
  .edu-cards-grid.is-list-view .edu-card-thumb-wrap {
    width: 100%;
    flex: 0 0 auto;
    aspect-ratio: 16 / 10;
  }

  .edu-cards-grid.edu-layout-masonry .edu-card-img {
    height: 100%;
    object-fit: cover;
  }

  .edu-card-actions-bar,
  .edu-cards-grid.edu-layout-list .edu-card-actions-bar,
  .edu-cards-grid.is-list-view .edu-card-actions-bar {
    max-width: 100%;
  }

  /* Di layar sentuh overlay hover tidak berguna */
  .edu-thumb-zoom-trigger {
    background: none;
  }

  .edu-thumb-zoom-chip {
    display: none;
  }

  .edu-state-box {
    padding: 40px 18px;
  }
}

/* Di ponsel kartu memakai lebar penuh, jadi label tombol tetap muat
   bahkan pada layar 320px. Yang perlu dikecilkan hanya judulnya. */
@media (max-width: 360px) {
  .edu-card-heading {
    font-size: 13px !important;
  }
}

/* ============================================================
   9. AKSESIBILITAS: HORMATI PREFERENSI GERAK
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .edu-portal-layout *,
  .edu-toast {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .edu-media-card:hover {
    transform: none;
  }

  .edu-media-card:hover .edu-card-img {
    transform: none;
  }
}

/* ============================================================
   10. CETAK
   ============================================================ */
@media print {
  .edu-sidebar,
  .edu-top-tools,
  .edu-card-actions-bar,
  .edu-load-more-wrap,
  .edu-thumb-zoom-trigger {
    display: none !important;
  }

  .edu-media-card {
    break-inside: avoid;
    box-shadow: none;
  }
}