/* =========================================================
   KA BABY STUDIO — gallery.css
   Bộ ảnh: Bìa album → mở album (thumbnail + tải dần + xem lớn)
   Dùng token từ tokens.css.
   ========================================================= */
.kb-gallery { min-height: 320px; }

.kb-loading, .kb-error, .kb-empty {
  text-align: center; padding: 64px 20px; color: var(--ink-3); font-size: 1rem;
}
.kb-error { color: #c0562a; }
.kb-spin {
  width: 36px; height: 36px; border: 3px solid var(--hairline);
  border-top-color: var(--orange); border-radius: 50%;
  margin: 0 auto 16px; animation: kbspin 0.9s linear infinite;
}
@keyframes kbspin { to { transform: rotate(360deg); } }

/* ---------- Bìa album (8 mục) ---------- */
.kb-covers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.kb-cover {
  position: relative; aspect-ratio: 3/4; border-radius: var(--r-md); overflow: hidden;
  cursor: pointer; background: var(--paper-3); border: 1px solid var(--hairline);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
}
.kb-cover:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }
.kb-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease); }
.kb-cover:hover img { transform: scale(1.06); }
.kb-cover .ph { width: 100%; height: 100%; display: grid; place-items: center; font-size: 2.2rem; background: linear-gradient(140deg, #ffe6c9, #fbc888); }
.kb-cover .ov {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 18px 16px; background: linear-gradient(transparent 42%, rgba(42, 33, 25, 0.8)); color: #fff;
}
.kb-cover .ov b { font-size: 1.1rem; font-weight: 700; line-height: 1.2; }
.kb-cover .ov span { font-size: 0.82rem; opacity: 0.92; margin-top: 3px; }
.kb-cover .go { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: rgba(255,255,255,0.9); color: var(--orange-text); font-size: 0.9rem; opacity: 0; transform: scale(0.8); transition: all 0.25s var(--ease); }
.kb-cover:hover .go { opacity: 1; transform: none; }
@media (max-width: 900px) { .kb-covers { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Chi tiết album ---------- */
.kb-albhead { display: flex; align-items: center; gap: 14px; margin-bottom: 24px; flex-wrap: wrap; }
.kb-back {
  display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-weight: 600; font-size: 0.92rem;
  color: var(--ink); background: var(--paper); border: 1px solid var(--hairline-2);
  padding: 9px 17px; border-radius: var(--r-pill); cursor: pointer; transition: all 0.2s var(--ease);
}
.kb-back:hover { border-color: var(--orange); color: var(--orange-text); }
.kb-albhead h3 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); font-weight: 800; margin: 0; }
.kb-albhead .n { color: var(--ink-3); font-size: 0.9rem; font-weight: 600; }

.kb-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kb-thumb { position: relative; aspect-ratio: 4/5; border-radius: var(--r-sm); overflow: hidden; cursor: pointer; background: var(--paper-3); }
.kb-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.kb-thumb:hover img { transform: scale(1.06); }
@media (max-width: 900px) { .kb-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .kb-grid { grid-template-columns: repeat(2, 1fr); } }

.kb-more {
  display: block; margin: 30px auto 0; font-family: inherit; font-weight: 700; font-size: 1rem;
  color: var(--ink); background: var(--paper); border: 1.5px solid var(--hairline-2);
  padding: 13px 32px; border-radius: var(--r-pill); cursor: pointer; transition: all 0.2s var(--ease);
}
.kb-more:hover { background: var(--paper-3); border-color: var(--orange); }

/* ---------- Xem lớn (lightbox) ---------- */
.kb-lb { position: fixed; inset: 0; z-index: 120; background: rgba(28, 20, 12, 0.93); display: none; align-items: center; justify-content: center; padding: 24px; }
.kb-lb.open { display: flex; }
.kb-lb img { max-width: 92vw; max-height: 86vh; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.kb-lbbtn { position: absolute; background: rgba(255,255,255,0.14); color: #fff; border: none; border-radius: 50%; cursor: pointer; display: grid; place-items: center; transition: background 0.2s; }
.kb-lbbtn:hover { background: rgba(255,255,255,0.3); }
.kb-lbnav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; font-size: 1.7rem; }
.kb-prev { left: 18px; } .kb-next { right: 18px; }
.kb-close { top: 18px; right: 18px; width: 44px; height: 44px; font-size: 1.2rem; }
.kb-count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 0.85rem; background: rgba(0,0,0,0.4); padding: 5px 15px; border-radius: var(--r-pill); }
@media (max-width: 600px) { .kb-prev { left: 6px; } .kb-next { right: 6px; } .kb-lbnav { width: 44px; height: 44px; font-size: 1.4rem; } }

@media (prefers-reduced-motion: reduce) { .kb-spin { animation-duration: 0.001ms; } *, *::before, *::after { transition-duration: 0.001ms !important; } }