/* 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 a:hover,
.mt-gallery__source a:focus,
.mt-gallery__legacy a:hover,
.mt-gallery__legacy a:focus {
  text-decoration: none;
}

.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;
}

/* Album có video: nút phát trang trí giữa ảnh bìa (liên kết của thẻ đã phủ toàn bộ thẻ nên nút không cần bấm riêng) */
.mt-gallery-card__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3.25rem;
  height: 3.25rem;
  margin: -1.625rem 0 0 -1.625rem;
  border: 2px solid rgba(255, 255, 255, 0.92);
  border-radius: 50%;
  background: rgba(8, 45, 127, 0.78);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  pointer-events: none;
  transition: background-color 0.2s;
}

.mt-gallery-card__play::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  border-style: solid;
  border-width: 0.6rem 0 0.6rem 1rem;
  border-color: transparent transparent transparent #FFFFFF;
  transform: translate(-50%, -50%);
}

.mt-gallery-card:hover .mt-gallery-card__play {
  background: var(--mt-primary, #0D46A6);
}

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

.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;
}

/* Cùng thang với thẻ tin trên trang chủ: 15 px, tối đa 3 dòng để các thẻ album cùng hàng cao bằng nhau */
.mt-gallery-card .mt-card__title {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  font-size: .9375rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* 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;
}

/* Ngày và số ảnh nằm sát đáy thẻ: các thẻ cùng hàng thẳng dòng dù tiêu đề dài ngắn khác nhau */
.mt-gallery-card__meta {
  margin-top: auto;
}

@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 a:hover,
.mt-gallery-video__caption a:focus {
  text-decoration: none;
}

.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;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mt-gallery .mt-video .mt-video__icon {
  position: relative;
  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;
  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__original:hover,
.mt-lightbox--gallery .mt-lightbox__original:focus {
  color: var(--mt-gold, #FEDB4A);
  text-decoration: none;
}

.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;
}