/* Cakela gallery. Loads on top of home.css so the header, buttons, footer and
   lightbox stay identical to the storefront. Everything here is about the two
   gallery views: the album index and the photos inside one album. Every tile is
   a square of the same size, so no row ends ragged and no photo is stretched. */
/* Cards, buttons and the lightbox arrows all set `display`, which would beat the
   browser default for [hidden]; the toggled elements need this to stay hidden. */
[hidden] { display: none !important; }
.gallery-page .home-section { padding-top: clamp(26px, 3vw, 38px); padding-bottom: clamp(26px, 3vw, 38px); }
.gallery-head { padding-bottom: 0 !important; }
.gallery-head h1 { color: var(--brown); font-size: clamp(1.6rem, 1.3rem + 1.6vw, 2.6rem); font-weight: 700; }
.gallery-head .section-title { max-width: 720px; margin-bottom: 16px; }
.gallery-head .section-title p:not(.home-kicker) { color: var(--muted); }
.gallery-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin-bottom: 10px; }
/* 44px cho ngón tay, không chỉ cao bằng dòng chữ. */
.gallery-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: var(--red); font-size: var(--text-sm); font-weight: 800; text-decoration: none; }
.gallery-crumbs a:hover { text-decoration: underline; }

/* Toolbar: photo count and actions inside one album. */
.gallery-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 18px; }
.gallery-status { color: var(--muted); font-size: var(--text-sm); font-weight: 700; }
.gallery-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Album index: uniform square cover, name and photo count below the image.
   Số cột tự tính theo bề ngang thật: 2 ô trên điện thoại, 3 ở máy nhỏ, 4 ở máy
   tính và 5 khi màn rất rộng - không cần điểm ngắt nào, và không có bề ngang nào
   cho ra một hàng cụt. min(100%, ...) để ô không bao giờ rộng hơn khung. */
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(132px, 21vw, 240px)), 1fr)); gap: clamp(12px, 1.4vw, 18px); }
.album-card { display: grid; gap: 4px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.album-card__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: var(--cream); }
/* Ô bìa đang chờ ảnh về thì nhấp nháy nhẹ như Facebook, khung vẫn giữ đúng chỗ.
   .is-near do gallery.js gắn đúng lúc bắt đầu tải bìa của ô đó, .is-loaded gắn khi
   ảnh về xong: nhịp nhấp nháy vì vậy chỉ chạy ở mấy ô khách đang nhìn. Trước đây
   luật chỉ có :not(.is-loaded) mà .is-loaded lại được gắn ngay khi gán src, nên hoá
   ra chạy đúng 22 animation vô hạn cho những ô còn nằm ngoài màn và không chạy cho
   ô đang thật sự chờ - ngược hẳn ý định. */
.album-card.is-near:not(.is-loaded) .album-card__media { animation: photo-pulse 1.4s ease-in-out infinite; }
.album-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .28s ease; }
/* Ảnh bìa chỉ được gán src khi ô sắp vào khung nhìn. Trong lúc chờ, thẻ <img>
   chưa có src nên trình duyệt vẽ icon "ảnh vỡ" nhỏ ở góc ô - ẩn thẻ ảnh đi thì
   ô bìa chỉ còn khung kem nhấp nháy đúng như ý. */
.album-card img:not([src]), .photo-grid img:not([src]) { visibility: hidden; }
/* Tắt JS: thẻ <img> chờ không có src nên ẩn đi, ảnh trong <noscript> hiện thay. */
.no-js .album-card img[data-cover-src] { display: none; }
.no-js .album-card noscript { display: contents; }
/* Chỉ máy có chuột mới nhấc thẻ lên: trên màn cảm ứng trạng thái hover dính lại
   sau khi chạm, thẻ cứ nằm lệch cho tới lúc chạm chỗ khác. */
@media (hover: hover) {
  .album-card:hover { transform: translateY(-3px); border-color: rgba(181, 34, 29, .28); box-shadow: 0 14px 30px rgba(89, 50, 31, .18); }
  .album-card:hover img, .photo-grid a:hover img { transform: scale(1.04); }
}
/* Tên album do Facebook đặt, có thể rất dài: cho phép ngắt trong từ để không đẩy
   ô tràn ra ngoài, và cỡ chữ co lại một nhịp trên máy nhỏ. */
.album-card strong { margin-top: 4px; color: var(--brown); font-family: var(--display); font-size: clamp(.98rem, .92rem + .32vw, 1.15rem); font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.album-card small { color: var(--muted); font-size: var(--text-xs); font-weight: 700; }
.gallery-empty { display: grid; justify-items: start; gap: 12px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); color: var(--muted); }

/* Album view: one grid of equal squares, no spans, no featured tile. Ô ảnh nhỏ
   hơn ô album (không có chữ kèm) nên xếp dày hơn một nhịp: 2 ô ở 320px, 3 ô trên
   điện thoại thường, 5 ô từ máy tính trở lên - giống lưới ảnh của Facebook. */
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, clamp(104px, 15vw, 220px)), 1fr)); gap: clamp(8px, 1vw, 12px); }
.photo-grid a, .photo-skeleton { aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius); background: var(--cream); box-shadow: var(--shadow); }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .28s ease; }
.photo-skeleton { animation: photo-pulse 1.4s ease-in-out infinite; }
/* Tắt JS thì không có gì thay ô chờ, nên ẩn chúng và để <noscript> lo phần ảnh. */
.no-js .photo-skeleton { display: none; }
/* Bìa hoặc ảnh lỗi cả bản dự phòng: ẩn thẻ ảnh và tắt nhịp nhấp nháy, ô còn lại là
   khung kem phẳng - tên album bên dưới vẫn đọc được bình thường. */
.album-card.is-broken .album-card__media { animation: none; }
.album-card.is-broken img, .photo-grid a.is-broken img { display: none; }
@keyframes photo-pulse { 0%, 100% { opacity: .55; } 50% { opacity: .95; } }
.gallery-more { display: grid; justify-items: center; gap: 10px; margin-top: 20px; }
.gallery-more .home-button { min-width: min(200px, 100%); }

/* Lightbox extras on top of the shared one: the full photo, uncropped. */
.lightbox figure { margin: 0; display: grid; justify-items: center; gap: 10px; }
.lightbox figcaption { display: flex; align-items: center; gap: 14px; color: rgba(255, 255, 255, .82); font-size: var(--text-sm); font-weight: 700; }
.lightbox figcaption a { color: #ffd9ae; }
.lightbox-nav { position: absolute; top: 50%; width: 46px; height: 46px; display: grid; place-items: center; transform: translateY(-50%); border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--brown); font-size: 1.25rem; cursor: pointer; }
.lightbox-nav.prev { left: max(16px, env(safe-area-inset-left)); }
.lightbox-nav.next { right: max(16px, env(safe-area-inset-right)); }

@media (max-width: 780px) {
  .gallery-toolbar { align-items: stretch; }
  /* Hai nút qua lại nằm dưới đáy cho ngón tay với tới; max() để trên iPhone chúng
     không nằm đúng chỗ vạch home. */
  .lightbox-nav { top: auto; bottom: max(18px, env(safe-area-inset-bottom)); transform: none; }
  .lightbox-nav.prev { left: calc(50% - 58px); }
  .lightbox-nav.next { right: calc(50% - 58px); }
  /* svh: 74vh tính cả phần thanh địa chỉ che mất nên ảnh bị cắt đáy. */
  .lightbox img { max-height: 74vh; max-height: 74svh; }
}
@media (max-width: 420px) {
  .gallery-actions .home-button { width: 100%; }
}

/* ===========================================================================
   Trang danh sách album.

   Đầu trang là một khối chữ ngắn, từ đó xuống là phần của ảnh: một lưới album duy
   nhất, không tiêu đề nhóm, không câu dẫn - tên album đã tự nói nó là bánh gì rồi.
   Mọi ô một cỡ, ảnh bìa vuông như nhau: album 1.129 ảnh hay album 2 ảnh cũng một ô,
   nên không hàng nào cụt và mắt khách đi hết lưới theo đúng một nhịp.
   =========================================================================== */

/* Lưới album nằm trong .album-index nên không còn là con trực tiếp của <main>: khoảng
   trên gọn lại một nhịp cho ảnh nhích lên cao, khoảng dưới giữ nguyên. */
.gallery-page .album-list { padding-top: clamp(14px, 1.8vw, 22px); padding-bottom: clamp(24px, 3vw, 40px); }

/* Chữ trong ô album gom vào một bọc, nhờ vậy ảnh với chữ xếp được theo nhiều kiểu mà
   không phải đổi cấu trúc thẻ. min-width: 0 để tên album dài không đẩy cột chữ nở ra
   ngoài ô. */
.album-card__text { display: grid; align-content: start; gap: 4px; min-width: 0; }

@media (max-width: 420px) {
  /* Trang một album có tới ba nút: để nút đặt bánh riêng một hàng, hai nút phụ chia
     nhau hàng dưới - ba nút xếp dọc chiếm gần hết một màn điện thoại. */
  .gallery-actions .home-button.outline { flex: 1 1 44%; width: auto; padding-left: 12px; padding-right: 12px; }
}