/* gallery.css — phần đặc thù của module "gallery" (thư viện ảnh và video).
   Các lớp nền (mt-card, mt-grid, mt-filter, mt-badge, mt-empty, mt-btn, ...) do hệ thiết kế của theme định nghĩa (docs/architecture.md mục 8.3);
   tệp này chỉ bổ sung bố cục của các lớp mt-gallery-* và, trong phạm vi .mt-gallery / .mt-lightbox--gallery, bố cục lưới ảnh, video và lightbox
   để module hiển thị đúng cả khi theme đang dùng chưa định nghĩa các thành phần đó (vd. theme mặc định của lõi trên site sandbox).
   Dùng token --mt-* (có giá trị dự phòng để không vỡ khi theme chưa nạp token). Không URL ngoài, không @import. */

/* ---------- Khung chung ---------- */
.mt-gallery {
  min-width: 0;
}

.mt-gallery__intro {
  margin: 0 0 1em;
  color: var(--mt-text-muted, #576F8F);
}

.mt-gallery__head {
  margin-bottom: 0.5em;
}

.mt-gallery__badges {
  margin: 0 0 0.5em;
}

.mt-gallery__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25em 0;
  margin: 0.5em 0 0;
}

.mt-gallery__meta-item + .mt-gallery__meta-item::before {
  content: "\00b7";
  margin: 0 0.5em;
}

.mt-gallery__description {
  max-width: 48em;
}

.mt-gallery__source a,
.mt-gallery__legacy a {
  text-decoration: underline;
}

.mt-gallery__source,
.mt-gallery__legacy {
  margin: 0;
  color: var(--mt-text-muted, #576F8F);
}

.mt-gallery__back {
  margin: 1em 0 0;
}

.mt-gallery__pagination {
  margin-top: 1.5em;
}

.mt-gallery__pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.375em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mt-gallery__pagination li > a,
.mt-gallery__pagination li > span {
  display: inline-block;
  min-width: 2.5em;
  padding: 0.5em 0.75em;
  border: 1px solid var(--mt-border-strong, #667E9E);
  border-radius: 0.5em;
  background: var(--mt-bg-card, #FFFFFF);
  color: var(--mt-primary, #0D46A6);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.mt-gallery__pagination li.active > a,
.mt-gallery__pagination li.active > span {
  border-color: var(--mt-primary, #0D46A6);
  background: var(--mt-primary, #0D46A6);
  color: var(--mt-on-primary, #FFFFFF);
}

.mt-gallery__pagination li.disabled > a,
.mt-gallery__pagination li.disabled > span {
  color: var(--mt-text-muted, #576F8F);
}

/* ---------- Bộ lọc ---------- */
.mt-gallery-filter {
  margin: 0 0 1.5em;
}

.mt-gallery-filter .mt-filter__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75em 1em;
}

.mt-gallery-filter .mt-filter__field {
  display: flex;
  flex: 1 1 11em;
  flex-direction: column;
  gap: 0.25em;
  min-width: 0;
}

.mt-gallery-filter .mt-filter__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}

.mt-gallery-filter .mt-input,
.mt-gallery-filter .mt-select {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.75em;
  padding: 0.375em 0.625em;
}

/* ---------- Lưới album ---------- */
.mt-gallery-albums {
  display: grid;
  gap: 1.25em;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15em), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.mt-gallery-albums__item {
  min-width: 0;
}

.mt-gallery-card {
  position: relative;
  display: flex;
  height: 100%;
  flex-direction: column;
  border: 1px solid var(--mt-border, #C9D2DD);
  border-radius: 0.5em;
  background: var(--mt-bg-card, #FFFFFF);
  overflow: hidden;
}

.mt-gallery-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--mt-bg-tint, #E0F3FB);
  overflow: hidden;
}

.mt-gallery-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mt-gallery-card__placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, var(--mt-primary-strong, #082D7F), var(--mt-primary, #0D46A6));
  opacity: 0.12;
}

/* Thẻ album VIDEO (data-kind="2"): dấu phát ở giữa ảnh bìa (trang trí: loại "Video" đã có chữ ở huy hiệu của thẻ). Vòng tròn vàng + tam giác mực
   cùng kiểu với nút phát của khung video ở trang album; chỉ dựa vào CSS (không ảnh, không yêu cầu mạng). */
.mt-gallery-card__media[data-kind="2"]::before {
  content: "";
  position: absolute;
  top: 46%;
  left: 50%;
  width: 3.25em;
  height: 3.25em;
  margin: -1.625em 0 0 -1.625em;
  border-radius: 50%;
  background: var(--mt-accent, #FAD233);
  box-shadow: 0 0 0 0.25em rgba(255, 255, 255, 0.28), 0 0.375em 1.25em rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.mt-gallery-card__media[data-kind="2"]::after {
  content: "";
  position: absolute;
  top: 46%;
  left: 50%;
  margin: -0.7em 0 0 -0.42em;
  border-style: solid;
  border-width: 0.7em 0 0.7em 1.1em;
  border-color: transparent transparent transparent var(--mt-on-accent, #1E2C58);
  pointer-events: none;
}

.mt-gallery-card .mt-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.375em;
  padding: 0.875em 1em 1em;
}

.mt-gallery-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375em;
  margin: 0;
}

.mt-gallery-card .mt-card__title {
  margin: 0;
  font-size: 1.0625em;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* Liên kết "bao phủ thẻ": cả thẻ bấm được nhưng chỉ có MỘT liên kết cho trình đọc màn hình */
.mt-gallery-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

.mt-gallery-card:focus-within {
  outline: 3px solid var(--mt-focus, #082D7F);
  outline-offset: 2px;
}

.mt-gallery-card__link:focus {
  outline: none;
}

.mt-gallery-card__meta,
.mt-gallery-card__counts {
  margin: 0;
  color: var(--mt-text-muted, #576F8F);
  font-size: 0.9375em;
}

@media (prefers-reduced-motion: no-preference) {
  .mt-gallery-card {
    transition: box-shadow 0.2s ease;
  }

  .mt-gallery-card:hover {
    box-shadow: 0 4px 16px rgba(8, 45, 127, 0.18);
  }
}

.mt-gallery-block__more {
  margin: 0.75em 0 0;
}

/* ---------- Lưới ảnh của album ---------- */
.mt-gallery .mt-gallery-grid {
  display: grid;
  gap: 0.75em;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10em), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.mt-gallery .mt-gallery-grid__item {
  position: relative;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 0.5em;
  background: var(--mt-bg-tint, #E0F3FB);
}

.mt-gallery .mt-gallery-grid__item a {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  cursor: zoom-in;
}

.mt-gallery .mt-gallery-grid__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mt-gallery .mt-gallery-grid__item a:focus-visible {
  outline: 3px solid var(--mt-focus, #082D7F);
  outline-offset: -3px;
}

/* Chú thích nằm DƯỚI ảnh (ghi đè kiểu phủ lên ảnh của theme để chú thích dài vẫn đọc được) */
.mt-gallery .mt-gallery-grid__caption {
  position: static;
  display: -webkit-box;
  margin: 0;
  padding: 0.375em 0.5em 0.5em;
  background: none;
  color: var(--mt-text, #1E2C58);
  font-size: 0.8125em;
  line-height: 1.35;
  overflow: hidden;
  overflow-wrap: anywhere;
  pointer-events: auto;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

@media (prefers-reduced-motion: no-preference) {
  .mt-gallery .mt-gallery-grid__item img {
    transition: transform 0.35s ease;
  }

  .mt-gallery .mt-gallery-grid__item a:hover img {
    transform: scale(1.05);
  }
}

/* ---------- Video ---------- */
.mt-gallery-videos {
  display: grid;
  gap: 1.5em;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20em), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.mt-gallery-videos__item {
  min-width: 0;
}

.mt-gallery-video {
  margin: 0;
}

.mt-gallery-video__caption a {
  text-decoration: underline;
}

.mt-gallery-video__caption {
  padding-top: 0.5em;
  color: var(--mt-text-muted, #576F8F);
  font-size: 0.9375em;
  overflow-wrap: anywhere;
}

.mt-gallery .mt-video {
  position: relative;
  aspect-ratio: 16 / 9;
  margin: 0;
  overflow: hidden;
  border-radius: 0.5em;
  background: var(--mt-primary-strong, #082D7F);
}

.mt-gallery .mt-video video,
.mt-gallery .mt-video iframe,
.mt-gallery .mt-video .mt-video__el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  object-fit: contain;
}

.mt-gallery .mt-video .mt-video__play {
  position: absolute;
  inset: 0;
  display: grid;
  width: 100%;
  place-items: center;
  padding: 0;
  border: 0;
  background: linear-gradient(140deg, var(--mt-primary-strong, #082D7F), var(--mt-primary, #0D46A6));
  color: #FFFFFF;
  text-decoration: none;
  cursor: pointer;
}

.mt-gallery .mt-video .mt-video__poster {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Khi khung có ảnh bìa (poster) thì nhãn chữ KHÔNG hiện chồng lên ảnh (ảnh bìa dự phòng đã có tiêu đề, ảnh thật không cần chữ đè; tiêu đề đã nằm ở chú thích bên dưới khung):
   nhãn vẫn ở trong DOM làm tên đọc được của nút phát (ẩn kiểu "visually hidden") */
.mt-gallery .mt-video .mt-video__poster ~ .mt-video__label {
  position: absolute;
  top: auto;
  right: auto;
  bottom: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.mt-gallery .mt-video .mt-video__icon {
  position: relative;
  z-index: 2;
  display: grid;
  width: 4em;
  height: 4em;
  place-items: center;
  border-radius: 50%;
  background: var(--mt-accent, #FAD233);
  color: var(--mt-on-accent, #1E2C58);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

.mt-gallery .mt-video .mt-video__label {
  position: absolute;
  z-index: 2;
  right: 1em;
  bottom: 0.75em;
  left: 1em;
  color: #FFFFFF;
  font-weight: 600;
  text-align: left;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
  overflow-wrap: anywhere;
}

.mt-gallery .mt-video .mt-video__play:focus-visible {
  outline: 3px solid var(--mt-accent, #FAD233);
  outline-offset: -5px;
}

@media (prefers-reduced-motion: no-preference) {
  .mt-gallery .mt-video .mt-video__icon {
    transition: transform 0.2s ease;
  }

  .mt-gallery .mt-video .mt-video__play:hover .mt-video__icon {
    transform: scale(1.08);
  }
}

/* ---------- Lightbox (js/gallery.js dựng; chỉ hiện khi có JS) ---------- */
html.mt-gallery-lb-open {
  overflow: hidden;
}

.mt-lightbox.mt-lightbox--gallery {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 3.5em 0.75em 0.75em;
  background: rgba(4, 14, 44, 0.94);
  color: #FFFFFF;
}

.mt-lightbox--gallery .mt-lightbox__figure {
  display: flex;
  max-width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  margin: 0;
  touch-action: pan-y pinch-zoom;
}

.mt-lightbox--gallery .mt-lightbox__img {
  display: block;
  max-width: 100%;
  min-height: 0;
  max-height: calc(100vh - 11em);
  max-height: calc(100dvh - 11em);
  object-fit: contain;
  border-radius: 0.25em;
  background: rgba(255, 255, 255, 0.06);
}

.mt-lightbox--gallery .mt-lightbox__caption {
  max-width: 52em;
  margin: 0;
  padding: 0 3.5em;
  color: #FFFFFF;
  font-size: 0.9375em;
  line-height: 1.4;
  text-align: center;
  overflow-wrap: anywhere;
}

.mt-lightbox--gallery .mt-lightbox__error {
  margin: 0;
  color: #FFFFFF;
}

.mt-lightbox--gallery .mt-lightbox__counter {
  position: absolute;
  top: 1.25em;
  left: 1em;
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9375em;
}

.mt-lightbox--gallery .mt-lightbox__original {
  color: #FFFFFF;
  font-size: 0.9375em;
  text-decoration: underline;
}

.mt-lightbox--gallery .mt-lightbox__btn {
  position: absolute;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  background: rgba(6, 22, 66, 0.75);
  color: #FFFFFF;
  cursor: pointer;
}

.mt-lightbox--gallery .mt-lightbox__btn:hover,
.mt-lightbox--gallery .mt-lightbox__btn:focus {
  border-color: var(--mt-accent, #FAD233);
  background: var(--mt-accent, #FAD233);
  color: var(--mt-on-accent, #1E2C58);
}

.mt-lightbox--gallery .mt-lightbox__btn:focus-visible,
.mt-lightbox--gallery .mt-lightbox__original:focus-visible {
  outline: 3px solid #FFFFFF;
  outline-offset: 2px;
}

.mt-lightbox--gallery .mt-lightbox__btn--close {
  top: 0.75em;
  right: 0.75em;
}

.mt-lightbox--gallery .mt-lightbox__btn--prev,
.mt-lightbox--gallery .mt-lightbox__btn--next {
  top: 50%;
  margin-top: -24px;
}

.mt-lightbox--gallery .mt-lightbox__btn--prev {
  left: 0.5em;
}

.mt-lightbox--gallery .mt-lightbox__btn--next {
  right: 0.5em;
}

.mt-lightbox--gallery .mt-lightbox__btn svg {
  display: block;
  width: 24px;
  height: 24px;
}

.mt-lightbox--gallery [hidden] {
  display: none;
}

@media (max-width: 40em) {
  .mt-lightbox--gallery .mt-lightbox__caption {
    padding: 0 0.25em;
  }

  .mt-lightbox--gallery .mt-lightbox__btn--prev,
  .mt-lightbox--gallery .mt-lightbox__btn--next {
    top: auto;
    bottom: 0.75em;
    margin-top: 0;
  }

  .mt-lightbox--gallery .mt-lightbox__btn--prev {
    left: 0.75em;
  }

  .mt-lightbox--gallery .mt-lightbox__btn--next {
    right: 0.75em;
  }

  .mt-lightbox.mt-lightbox--gallery {
    padding-bottom: 4.5em;
  }

  .mt-lightbox--gallery .mt-lightbox__img {
    max-height: calc(100vh - 13em);
    max-height: calc(100dvh - 13em);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .mt-lightbox.mt-lightbox--gallery {
    animation: mt-gallery-lb-in 0.15s ease-out;
  }
}

@keyframes mt-gallery-lb-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@media print {
  .mt-lightbox.mt-lightbox--gallery,
  .mt-gallery-filter,
  .mt-gallery__pagination {
    display: none;
  }

  .mt-gallery a[href]::after {
    content: none;
  }

  .mt-gallery .mt-gallery-video__caption a[href^="http"]::after {
    content: " (" attr(href) ")";
  }

  .mt-video--youtube {
    display: none;
  }

  .mt-gallery-grid__item,
  .mt-gallery-card,
  .mt-gallery-video {
    break-inside: avoid;
  }
}

/* Chữ chỉ dành cho trình đọc màn hình (dự phòng khi theme chưa định nghĩa .mt-visually-hidden) */
.mt-gallery .mt-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}