/* ==========================================================================
   MEDIA.CSS
   Tab Gambar (grid + preview) & tab Video (grid kartu).
   Gabungan dari i2025.css + g2079.css + m2095.css.
   ========================================================================== */

/* --------------------------------------------------------------------
   Tab video — grid kartu (dulu m2095.css)
   -------------------------------------------------------------------- */

.video-grid {
  min-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  background: var(--color-white);
}

.video-card {
  width: 48%;
  padding: 0;
  box-shadow: var(--card-shadow);
  border-radius: 10px;
  margin: 2px;
  position: relative;
}
.video-card a { text-decoration: none; -webkit-tap-highlight-color: transparent; }
.video-card a:active > * { opacity: .5; }
.video-card .thumbnail { width: 100%; height: 100px; object-fit: cover; border-radius: 10px 10px 0 0; background: #ededed; }
.video-card .title {
  color: var(--color-title);
  margin: 2px 5px 8px;
  font-size: 15px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.video-card .source { color: #000; padding: 8px 8px 8px; font-size: 12px; }
.video-card .info { display: flex; margin-top: 4px; align-items: center; gap: 4px; overflow: hidden; white-space: nowrap; }
.video-card .favicon { width: 16px; height: 16px; }

@media (min-width: 780px) {
  .video-grid { padding-left: 130px; }
  .video-card { width: calc(160px + .5px); }
  .video-card .thumbnail { height: 115px; }
}
@media (min-width: 992px) {
  .video-card { width: 205px; margin: 4px; }
}

body.dark .video-grid { background: #171717; }
body.dark .video-card { border-color: #24282B; background: #202125; }
body.dark .video-card .title { color: #8BB4F4; }
body.dark .video-card .source { color: #BDC1C4; }

/* --------------------------------------------------------------------
   Tab gambar — grid hasil (dulu i2025.css)
   -------------------------------------------------------------------- */

.image-item { position: relative; transition: all 0.3s ease; width: 250px; }
.image-item__box { padding: 4px; }
.image-item__thumb {
  overflow: hidden;
  position: relative;
  border-radius: 16px;
  background-color: #e9e9ec;
  cursor: pointer;
  display: flex;
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.image-item__thumb img { width: 100%; }
.image-item__info { display: flex; flex-direction: column; justify-content: start; }
.image-item__info p, .image-item__info span { color: #1f1f1f; font-size: 12px; font-family: 'Google Sans', Roboto, sans-serif; }
.image-item__desc { align-items: center; display: flex; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; gap: 6px; }
.image-item__desc img { width: 16px; border-radius: 50%; }
.image-item__info .title { font-weight: 500; }
a.image-item__info { padding: 4px 0; display: flex; flex-direction: column; gap: 3px; text-decoration: none; }
.image-item__info p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Grid mosaik (thumbnail utama + 2 sisi) — dulu g2079.css */
.image-grid { display: grid; grid-template-rows: 1fr 1fr; gap: 4px; overflow: hidden; border-radius: 12px; grid-auto-flow: column; }
.image-grid__main { grid-column: span 2; grid-row: 1 / -1; }
.image-grid__cell { background: #ededed; }
.image-grid__cell--side { height: 90px; }
.image-grid__caption { padding: 0 16px 4px 16px; }
.image-grid__cell img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------
   Preview gambar fullscreen (dulu i2025.css .preview / .p-header / .jtext-p)
   -------------------------------------------------------------------- */

.image-preview {
  width: 100%; height: 100%;
  background: white;
  position: fixed; left: 0; top: 0; z-index: 999;
  font-family: Roboto, Sans-Serif;
}
.image-preview__header { padding: 12px 16px; display: flex; align-items: center; position: relative; justify-content: space-between; }
.image-preview__header .left { display: flex; gap: 10px; align-items: center; }
.image-preview .title { font-size: 14px; font-weight: 500; }
.image-preview__favicon { width: 30px; height: 30px; border: 1px solid #ededed; background: #f9f9f9; border-radius: 50%; display: grid; place-items: center; }
.image-preview__favicon img { width: 20px; height: 20px; border-radius: 50%; }
.image-preview__thumbnail { position: relative; background: #f1f3f4; display: flex; align-items: center; width: 100%; }
.image-preview__thumbnail img { width: 100%; height: 100%; object-fit: contain; max-height: 350px; }
.image-preview__footer { padding: 12px 16px 8px; display: flex; justify-content: space-between; }
.image-preview__footer .left { padding-right: 8px; }
.image-preview__footer .right { margin-left: auto; }
.image-preview__footer .title { font-size: 16px; }
.image-preview__footer div { font-size: 12px; }
.image-preview__footer .site { margin-top: 6px; }
.image-preview__footer button {
  padding: 10px 16px; background: #1a73e9; border: none; border-radius: 22px; font-weight: 500; font-size: 14px;
}
.image-preview__footer button a { color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.image-preview__footer button:hover { filter: brightness(80%); }

.show-wrapper--preview { bottom: 0; }