/**
 * Works共通グリッド。単純な3列カードにせず、3件ごとに先頭を大きくして
 * 大小混在のEditorial Layoutにする（MASTER_SPEC第22項）。
 * TOPセクション（.works-top）とアーカイブ/タクソノミー一覧の両方で共用する。
 */
.works-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-6);
}

.work-card:nth-child(3n+1) {
	grid-column: span 2;
}

.work-card__thumb {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--color-surface);
	border: var(--border-hairline);
}

.work-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	background: #f3f5f5;
}

.work-card__thumb-placeholder {
	width: 100%;
	height: 100%;
	background:
		linear-gradient(135deg, transparent 48%, var(--color-line) 48%, var(--color-line) 52%, transparent 52%);
}

.work-card__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: var(--fs-lead);
	margin-top: var(--space-4);
	transition: color var(--duration-fast) var(--ease-standard);
}

.work-card__link:hover .work-card__title,
.work-card__link:focus-visible .work-card__title {
	color: var(--color-accent);
}

.work-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-3);
}

@media (max-width: 767px) {
	.works-grid {
		grid-template-columns: 1fr;
	}

	.work-card:nth-child(3n+1) {
		grid-column: span 1;
	}

}

/**
 * Worksフィルター（MASTER_SPEC第23項）
 */
.works-filter {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	padding-bottom: var(--space-5);
	border-bottom: var(--border-hairline);
}

.works-filter__link {
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-ink-soft);
	padding-block: var(--space-1);
	border-bottom: 1px solid transparent;
}

.works-filter__link:hover,
.works-filter__link:focus-visible {
	color: var(--color-ink);
}

.works-filter__link.is-active {
	color: var(--color-ink);
	border-bottom-color: var(--color-accent);
}

/**
 * Works詳細：制作内容/担当範囲/制作期間
 */
.works-meta {
	margin-top: var(--space-7);
	border-top: var(--border-hairline);
}

.works-meta > div {
	display: grid;
	grid-template-columns: 8rem 1fr;
	gap: var(--space-5);
	padding-block: var(--space-4);
	border-bottom: var(--border-hairline);
}

.works-meta dt {
	font-family: var(--font-mono);
	font-size: var(--fs-eyebrow);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--color-ink-faint);
}

@media (max-width: 767px) {
	.works-meta > div {
		grid-template-columns: 1fr;
		gap: var(--space-2);
	}
}
/* WORKS detail media */
.works-detail-gallery{position:relative;margin-top:clamp(24px,4vw,56px);padding-inline:0}
.works-detail-gallery__viewport{position:relative;overflow:hidden;border:1px solid rgba(8,48,82,.2);background:#f3f5f5}
.works-detail-gallery__track{display:flex;align-items:flex-start;transition:transform .45s ease}
.works-detail-gallery__slide{flex:0 0 100%;margin:0}
.works-detail-gallery__zoom{display:grid;width:100%;aspect-ratio:16/9;padding:0;border:0;background:transparent;place-items:center;cursor:zoom-in}
.works-detail-gallery__slide img{display:block;width:100%;height:100%;min-height:0;object-fit:cover}
.works-detail-gallery__nav{position:absolute;top:42%;z-index:3;display:grid;place-items:center;width:46px;height:46px;padding:0;transform:translateY(-50%);border:1px solid rgba(8,48,82,.35);border-radius:50%;background:rgba(255,255,255,.92);color:var(--color-ink);font-size:1.2rem;cursor:pointer;box-shadow:0 8px 24px rgba(8,48,82,.12)}
.works-detail-gallery__nav--prev{left:0}.works-detail-gallery__nav--next{right:0}
.works-detail-gallery__nav:disabled{opacity:.35;cursor:default}
.works-detail-gallery__thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:clamp(6px,1vw,12px);width:100%;margin-top:16px;padding:0 0 6px;overflow:visible;box-sizing:border-box}
.works-detail-gallery__thumb{display:block;min-width:0;width:100%;aspect-ratio:16/9;min-height:0;padding:0;border:1px solid rgba(8,48,82,.2);background:transparent;color:var(--color-ink);cursor:pointer;transition:border-color .25s,box-shadow .25s;box-sizing:border-box}
.works-detail-gallery__thumb img{display:block;width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:center;background:transparent}
.works-detail-gallery__thumb.is-active{border-color:#1988c9;box-shadow:0 0 0 2px rgba(25,136,201,.2),0 8px 20px rgba(25,136,201,.16)}
.works-detail__header{margin-top:clamp(30px,5vw,68px)}
.works-detail__header h1{margin-top:var(--space-4);font-size:clamp(2.25rem,4vw,3rem);line-height:1.2;white-space:nowrap}
.works-detail__category{margin-top:var(--space-3);font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--color-ink-faint)}
.works-detail-lightbox[hidden]{display:none}.works-detail-lightbox{position:fixed;inset:0;z-index:10000;display:grid;padding:24px;background:rgba(4,17,29,.52);backdrop-filter:blur(4px);place-items:center}.works-detail-lightbox__window{position:relative;display:grid;width:min(680px,78vw);height:min(520px,68vh);padding:24px;border:1px solid rgba(8,48,82,.2);border-radius:10px;background:#f8f8f6;box-shadow:0 24px 70px rgba(4,17,29,.35);place-items:center;box-sizing:border-box;overflow:hidden}.works-detail-lightbox img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain}.works-detail-lightbox__close{position:absolute;z-index:2;top:8px;right:8px;width:36px;height:36px;padding:0;border:1px solid rgba(8,48,82,.28);border-radius:50%;background:rgba(255,255,255,.94);color:var(--color-ink);font-size:1.4rem;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(8,48,82,.12)}
@media(max-width:767px){.works-detail-lightbox{padding:16px}.works-detail-lightbox__window{width:90vw;height:64vh;padding:18px}}
@media(max-width:767px){.works-detail-gallery{padding-inline:0}.works-detail-gallery__nav{top:38%;width:44px;height:44px}.works-detail-gallery__nav--prev{left:8px}.works-detail-gallery__nav--next{right:8px}.works-detail-gallery__thumbs{margin-inline:0;padding-inline:8px}.works-detail-gallery__thumb{padding:3px}.works-detail__header h1{font-size:clamp(1.75rem,9vw,2.5rem);white-space:normal}}
@media(prefers-reduced-motion:reduce){.works-detail-gallery__track{transition:none}}

/* 2026-09-24 レスポンシブ総点検：WORKS一覧のカテゴリー絞り込み（高さ29px）、詳細ギャラリーの
   ドット（9px）・矢印（30px）がスマホでタップしにくかった。見た目は保ったまま最小44px（ドットは
   24px）のタップ領域を確保する。 */
@media (max-width: 767px) {
	.works-filter__link { display: inline-flex; align-items: center; min-height: 44px; }
	.works-filter { gap: var(--space-3) var(--space-5); }
	.works-detail-gallery__nav { width: 44px; height: 44px; }
	.works-detail-gallery__thumbs { gap: 10px; }
}