/* ==========================================================================
   works.css — 「蒼夜シアター」グループB
   works.html(フィルタ+モザイク) / works-detail.html(ケーススタディ) /
   services.html(4事業+スティッキー番号)
   style.css のトークン・.works-card と theater.css(page-head / crumbs /
   post-nav)への差分のみ。色は :root トークンと黒/白の透過のみを使用。
   ========================================================================== */

/* ---------- 共通: 写真クレジット行(reel__credit と同じ作法) ---------- */

.ph-credit {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .3em 1.4em;
  margin-top: var(--space-2);
  font-size: 10px;
  letter-spacing: .14em;
  color: var(--c-text-faint);
}

/* ==========================================================================
   1. works.html — フィルタタブ+ネイティブ比率モザイク
   ========================================================================== */

.sec-works-archive { padding-block: var(--space-5) var(--space-7); }

.works-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--c-line);
}

.works-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(1.2rem, 2.8vw, 2.4rem);
}

.works-filter button {
  display: grid;
  gap: .4em;
  padding: 0 0 1rem;
  margin-bottom: -1px;          /* タブ下線をツールバー罫線に重ねる */
  background: none;
  border: 0;
  border-bottom: 1px solid transparent;
  color: var(--c-text-dim);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: color .3s ease, border-color .3s ease;
}

.works-filter button .en { font-size: 12px; letter-spacing: .22em; }

.works-filter button small {
  font-size: 9.5px;
  letter-spacing: .16em;
  color: var(--c-text-faint);
}

.works-filter button:hover { color: var(--c-text); }

.works-filter button[aria-pressed="true"] {
  color: var(--c-text);
  border-bottom-color: var(--c-ice);
}

.works-count {
  flex-shrink: 0;
  padding-bottom: 1rem;
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--c-text-faint);
}

/* モザイク: ネイティブ比率のカラム積み(写真の縦横を尊重する) */
.works-mosaic {
  columns: 3;
  column-gap: clamp(1.2rem, 2.4vw, 2rem);
}

.works-mosaic .works-card {
  display: block;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

/* hidden 属性での絞込(.works-card { display:block } より優先させる) */
.works-mosaic .works-card[hidden] { display: none; }

/* 長い英字カテゴリ(flex-shrink:0)が狭幅ではみ出さないよう折返しを許可 */
.works-mosaic .works-card__body { flex-wrap: wrap; row-gap: .35em; }

/* style.css の 3:2 固定をネイティブ比率に解放 */
.works-mosaic .works-card__thumb { aspect-ratio: auto; }

.works-mosaic .works-card__thumb img {
  height: auto;
  filter: grayscale(1);
  transition: transform .9s ease, filter .6s ease;
}

/* モノクロの索引が、触れた瞬間だけ色を取り戻す */
.works-mosaic .works-card:hover .works-card__thumb img,
.works-mosaic .works-card:focus-visible .works-card__thumb img {
  filter: grayscale(0);
}

/* タッチ環境ではホバーが無いため、最初からカラーで見せる */
@media (hover: none) {
  .works-mosaic .works-card__thumb img { filter: none; }
}

/* フィルタ適用時のフェード再生(works.js が .is-fade を付け替える) */
@media (prefers-reduced-motion: no-preference) {
  .works-mosaic .works-card.is-fade { animation: worksFade .55s ease both; }

  @keyframes worksFade {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
  }
}

/* ==========================================================================
   2. works-detail.html — ケーススタディ
   ========================================================================== */

.case-head { padding-bottom: var(--space-4); border-bottom: 0; }

.case-title {
  font-size: clamp(1.7rem, 4.4vw, 3rem);
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: .06em;
}

.case-sub {
  margin-top: var(--space-2);
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--c-text-faint);
}

/* 全幅ヒーロー(data-parallax は img を scale(1.12) するため overflow hidden) */
.case-hero { margin: 0; }

.case-hero__media {
  overflow: hidden;
  height: clamp(320px, 64vh, 720px);
  background: var(--c-black);
}

.case-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 概要: フィルムクレジット風の4列 */
.case-data {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 var(--space-4);
  margin-top: var(--space-6);
}

.case-data > div {
  padding: 1.1rem 0;
  border-top: 1px solid var(--c-line);
}

.case-data dt {
  font-size: 10px;
  letter-spacing: .26em;
  color: var(--c-text-faint);
}

.case-data dd {
  margin-top: .55em;
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--c-text-dim);
}

/* 章: 課題 → アプローチ → 成果 */
.case-ch {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-2) var(--space-4);
  padding-top: var(--space-6);
}

.case-ch__no {
  padding-top: .5em;
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--c-text-faint);
}

.case-ch__title {
  font-size: clamp(1.2rem, 2.4vw, 1.55rem);
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .04em;
}

.case-ch__body p {
  margin-top: 1.2em;
  max-width: 38em;
  font-size: 15px;
  color: var(--c-text-dim);
}

/* ギャラリー: コンタクトシート(theater.js のライトボックスを呼ぶ) */
.case-gallery-sec { margin-top: var(--space-6); }

.case-label {
  display: flex;
  align-items: baseline;
  gap: 1.4em;
  margin-bottom: var(--space-3);
}

.case-label .en {
  font-size: 11px;
  letter-spacing: .3em;
  color: var(--c-text-faint);
}

.case-label h2 {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  color: var(--c-text-dim);
}

.case-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.case-gallery a {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: var(--c-black);
}

.case-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s ease;
}

.case-gallery a:hover img,
.case-gallery a:focus-visible img { transform: scale(1.045); }

/* 成果指標: 大数字(Outfit) */
.case-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0 var(--space-4);
  margin-top: var(--space-6);
}

.case-stats > div {
  display: flex;
  flex-direction: column-reverse;   /* dt(ラベル)を数字の下に */
  gap: .5em;
  padding: 1.4rem 0;
  border-top: 1px solid var(--c-line);
}

.case-stats dt {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--c-text-dim);
}

.case-stats dd {
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  line-height: 1;
  letter-spacing: .04em;
}

.case-stats dd small {
  margin-left: .2em;
  font-size: .32em;
  letter-spacing: .24em;
  color: var(--c-text-faint);
}

.case-note {
  margin-top: var(--space-3);
  font-size: 11px;
  color: var(--c-text-faint);
}

/* ==========================================================================
   3. services.html — 4事業詳細+スティッキー番号
   ========================================================================== */

.svc-flow { padding-block: 0 var(--space-7); }

.svc-detail {
  display: grid;
  grid-template-columns: minmax(150px, 230px) 1fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  padding-block: clamp(3rem, 9vh, 5.5rem);
  border-bottom: 1px solid var(--c-line);
  scroll-margin-top: 92px;
}

/* 左カラム: スクロールしても章番号が画面に留まる */
.svc-detail__side { align-self: stretch; }

.svc-detail__sticky {
  position: sticky;
  top: 92px;
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.svc-detail__no {
  font-size: clamp(3.4rem, 8vw, 6rem);
  line-height: 1;
  letter-spacing: .04em;
  color: var(--c-text-faint);
  transition: color .5s ease;
}

/* 現在見ている章の番号だけが氷青に灯る(works.js のスクロールスパイ) */
.svc-detail.is-current .svc-detail__no { color: var(--c-ice); }

.svc-detail__en {
  max-width: 12em;
  font-size: 10px;
  line-height: 2;
  letter-spacing: .34em;
  color: var(--c-text-faint);
}

.svc-detail__name {
  display: grid;
  gap: .6em;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .05em;
}

.svc-detail__name .en {
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: .3em;
  color: var(--c-text-faint);
}

.svc-detail__desc {
  margin-top: 1.3em;
  max-width: 38em;
  font-size: 15px;
  color: var(--c-text-dim);
}

/* 提供内容: 上映プログラム風の罫線リスト */
.svc-detail__list {
  margin-top: var(--space-4);
  max-width: 44em;
  border-top: 1px solid var(--c-line);
}

.svc-detail__list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2em;
  padding: .95rem 0;
  border-bottom: 1px solid var(--c-line);
  font-size: 14px;
  line-height: 1.8;
  color: var(--c-text-dim);
}

.svc-detail__list li::before {
  content: "—";
  color: var(--c-text-faint);
}

/* 関連実績リンク */
.svc-detail__works {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .9em 1.8em;
  margin-top: var(--space-4);
}

.svc-detail__works .en {
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--c-text-faint);
}

.svc-detail__works a {
  padding-bottom: .3em;
  font-size: 13px;
  color: var(--c-text-dim);
  border-bottom: 1px solid var(--c-line);
  transition: color .3s ease, border-color .3s ease;
}

.svc-detail__works a:hover { color: var(--c-text); border-color: var(--c-ice); }

/* 幕間: 全幅写真帯(微パララックス) */
.services-band { margin: 0; padding-bottom: var(--space-2); background: var(--c-bg); }

.services-band__media {
  overflow: hidden;
  height: clamp(280px, 58vh, 620px);
  background: var(--c-black);
}

.services-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* About への誘導帯 */
.services-cta {
  padding-block: clamp(6rem, 14vh, 9rem);
  background: var(--c-black);
}

.services-cta__inner { text-align: center; }

.services-cta__lead {
  margin: var(--space-3) auto 0;
  max-width: 30em;
  font-size: 15px;
  color: var(--c-text-dim);
}

.services-cta .contact-cta { margin-top: var(--space-4); }

/* ==========================================================================
   responsive
   ========================================================================== */

@media (max-width: 900px) {
  .works-mosaic { columns: 2; }
}

@media (max-width: 768px) {
  .works-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }

  .works-count { padding-bottom: .8rem; }

  .case-data { grid-template-columns: repeat(2, 1fr); }

  .case-ch {
    grid-template-columns: 1fr;
    padding-top: var(--space-5);
  }

  .case-ch__no { padding-top: 0; }

  .case-gallery { grid-template-columns: repeat(2, 1fr); }

  .case-stats { grid-template-columns: repeat(2, 1fr); }

  .svc-detail { grid-template-columns: 1fr; gap: var(--space-3); }

  /* 1カラム化したらスティッキーは解除し、番号と英名を一行に */
  .svc-detail__sticky {
    position: static;
    display: flex;
    align-items: baseline;
    gap: 1.2em;
  }

  .svc-detail__no { font-size: 2.6rem; }

  .svc-detail__en { max-width: none; }
}

@media (max-width: 480px) {
  .works-mosaic { columns: 1; }

  .works-filter { gap: 0 1.2rem; }

  .case-data { grid-template-columns: 1fr; }
  .case-data > div { padding: .9rem 0; }

  .case-stats { gap: 0 var(--space-3); }

  .ph-credit { justify-content: flex-start; }
}

/* ---------- 2026-06-11 PHOTO/MOVIE 増強(提供領域・制作フロー・関連導線) ---------- */
.pm-domains { background: var(--c-black); padding-block: var(--space-7); }
.pm-flow { padding-block: var(--space-7) var(--space-5); }
.pm-links { padding-block: 0 var(--space-7); }
.pm-links .post-nav { margin-top: 0; }