/* ============================================================
   整頁背景 — 照片固定 backdrop（gallery.css 只載本頁，main 安全）
   ============================================================ */
main {
  background-color: var(--color-navy, #262A71);        /* fallback */
  background-image: url('../img/bg/bg-gallery.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;                         /* 固定 → 當整頁的底 */
}

.work-hero {
  position: relative;
  margin-top: 4.625rem;
  padding: 4.5rem 1.5rem 1rem;
  color: var(--color-white, #fff);
  overflow: hidden;
}

.work-hero__inner {
  width: 100%;
  max-width: var(--content-max, 85.3125rem);           /* 內頁固定 1366 */
  margin: 0 auto;
}

.work-hero__head {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}
.work-hero__title {
  margin: 0;
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: clamp(3.5rem, 12vw, 9.375rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-yellow, #F0BC29);
}
.work-hero__desc {
  color: var(--color-white, #fff);
  max-width: 48.5rem;
}
@media (max-width: 767.98px) {
  .work-hero__desc { font-size: 0.9375rem; }
}

@media (min-width: 1024px) {
  .work-hero { padding: 6rem 3rem 1.25rem; }
  .work-hero__head {
    grid-template-columns: auto 1fr;
    gap: 4rem;
  }
  .work-hero__desc { margin-top: 2rem; }               /* 對齊標題視覺中段 */
}
@media (min-width: 1280px) {
  .work-hero { margin-top: 6.25rem; padding-left: 4rem; padding-right: 4rem; }
  .work-hero .breadcrumb { padding-left: var(--edge-pad); padding-right: var(--edge-pad); }
  .work-hero { padding-left: var(--edge-pad); padding-right: var(--edge-pad); }
}

/* ============================================================
   Filter bar — sticky 固定在 header 下方（navy 底）
   ============================================================ */
.work-filterbar {
  position: sticky;
  top: 4.625rem;
  z-index: 20;
  padding: 0.75rem 1.5rem 1.5rem;
  transition: background .25s ease;
}
.work-filterbar.is-stuck {
  background: linear-gradient(180deg,
              rgba(38, 42, 113, .96) 0%,
              rgba(38, 42, 113, .96) 55%,
              rgba(38, 42, 113, 0)  100%);
}
.work-filterbar__inner {
  width: 100%;
  max-width: var(--content-max, 85.3125rem);
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .work-filterbar { padding: 1rem 3rem; }
}
@media (min-width: 1280px) {
  .work-filterbar {
    top: 6.25rem;
    padding-left:  var(--edge-pad);
    padding-right: var(--edge-pad);
  }
}

.work-filter {
  display: flex;
  align-items: center;
  gap: 0.375rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1023.98px) {
  .work-filter {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-left: -1.5rem;
    margin-right: -1.5rem;
    padding: 0 1.5rem 0.25rem;
  }
  .work-filter::-webkit-scrollbar { display: none; }
}
@media (min-width: 1024px) {
  .work-filter { flex-wrap: wrap; }
}
.work-filter__item { display: inline-flex; align-items: center; }
.work-filter__item + .work-filter__item::before {
  content: '|';
  margin: 0 0.875rem;
  opacity: .45;
  font-weight: 400;
}
.work-filter__btn {
  padding: 0.375rem 0.875rem;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--color-white, #fff);
  font-family: var(--font-body, sans-serif);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.3;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.work-filter__btn:hover { color: var(--color-yellow, #F0BC29); }
.work-filter__btn.is-active {
  background: var(--color-white, #fff);
  color: var(--color-navy, #262A71);
  font-weight: 600;
}

@media (min-width: 1024px) {
  .work-filter__btn { font-size: 1.125rem; }
}

.work-grid {
  padding: 1.5rem 1.5rem 3rem;
}
.work-grid__inner {
  width: 100%;
  max-width: var(--content-max, 85.3125rem);
  margin: 0 auto;
}

.masonry {
  columns: 3;
  column-gap: 0.625rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.masonry__item {
  break-inside: avoid;
  margin: 0 0 0.625rem;
  border-radius: 0.75rem;
  overflow: hidden;
  background: rgba(255, 255, 255, .06);
}
.masonry__item[hidden] { display: none; }
.masonry__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.masonry__item:hover img { transform: scale(1.05); }

@media (min-width: 768px) {
  .work-grid { padding: 1.5rem 2.5rem 4rem; }
  .masonry { columns: 3; }
}
@media (min-width: 1024px) {
  .work-grid { padding: 2rem 3rem 5rem; }
}
@media (min-width: 1280px) {
  .work-grid { padding-left: var(--edge-pad); padding-right: var(--edge-pad); }
  .masonry { columns: 4; }
}