/* Hallmark · macrostructure: bespoke · page: works（施工事例） */

/* ---------- 絞り込み ---------- */
.filter { display: flex; flex-wrap: wrap; gap: var(--space-xs); padding-block: var(--space-xl) 0; }
.filter button {
  min-height: 44px; padding: 0 var(--space-lg);
  border: var(--rule-hair) solid var(--color-line); background: var(--color-white);
  font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: 0.12em; white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.filter button:hover { border-color: var(--color-navy); }
.filter button[aria-pressed="true"] { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-on-dark); }

/* ---------- 事例 ---------- */
.cases { display: grid; gap: var(--space-4xl); padding-block: var(--space-3xl) var(--section-y); }
.case { scroll-margin-top: 96px; }
.case[hidden] { display: none; }
.case__head { display: grid; gap: var(--space-sm); max-width: 44rem; }
.case__cat { font-size: var(--text-xs); letter-spacing: 0.24em; color: var(--color-accent); }
.case__head h2 { font-size: var(--text-2xl); color: var(--color-navy); }
.case__head p:last-child { color: var(--color-muted); }

.gallery { columns: 2; column-gap: var(--space-xs); margin-top: var(--space-xl); }
.gallery li { break-inside: avoid; margin-bottom: var(--space-xs); }
.thumb { display: block; width: 100%; overflow: hidden; background: var(--color-paper-2); }
.thumb img { width: 100%; transition: transform 1s var(--ease-out); }
.thumb:hover img { transform: scale(1.04); }
@media (min-width: 768px) {
  .gallery { columns: 3; column-gap: var(--space-sm); }
  .gallery li { margin-bottom: var(--space-sm); }
}
@media (min-width: 1200px) { .gallery { columns: 4; } }

.case__media { display: grid; gap: var(--space-sm); margin-top: var(--space-xl); }
.case__media .gallery { margin-top: 0; }
.case__video { overflow: hidden; background: var(--color-ink); aspect-ratio: 9 / 16; width: min(100%, 360px); }
.case__video video { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 900px) {
  .case__media { grid-template-columns: 300px minmax(0, 1fr); gap: var(--space-md); align-items: start; }
  .case__media .gallery { columns: 3; }
}

/* ---------- ライトボックス ---------- */
.lightbox {
  width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0;
  background: var(--color-veil-strong); color: var(--color-on-dark);
}
.lightbox::backdrop { background: var(--color-ink); opacity: 0.6; }
.lightbox[open] { display: grid; place-items: center; animation: lb-in var(--dur-base) var(--ease-out); }
.lightbox__fig { display: grid; gap: var(--space-sm); justify-items: center; padding: 64px var(--space-md); }
.lightbox__fig img { max-width: min(92vw, 1400px); max-height: calc(100dvh - 160px); width: auto; height: auto; object-fit: contain; }
.lightbox__fig figcaption { font-size: var(--text-sm); color: var(--color-on-dark-muted); letter-spacing: 0.1em; }
.lightbox__btn { position: absolute; display: grid; place-items: center; width: 52px; height: 52px; color: var(--color-on-dark); background: var(--color-veil); }
.lightbox__btn:hover { background: var(--color-navy-2); }
.lightbox__btn .icon { width: 26px; height: 26px; }
.lightbox__close { top: var(--space-md); right: var(--space-md); }
.lightbox__prev { left: var(--space-md); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: var(--space-md); top: 50%; transform: translateY(-50%); }
@media (max-width: 767px) {
  .lightbox__prev, .lightbox__next { top: auto; bottom: var(--space-md); transform: none; }
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }