/* =========================
   Worksページ専用スタイル（ピックアップ風）
========================= */

/* ページ見出し */
.works-hero {
  background: var(--bg);
  text-align: center;
  padding: 80px 0 36px;
}
.works-hero .h1 {
  font-family: "Noto Serif JP", serif;
  font-size: 40px;
  letter-spacing: 0.08em;
  margin: 0 0 8px;
}
.works-hero .sub {
  color: #6b6b6b;
}

/* フィルタ */
.filters {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 16px 0 28px;
}
.chip {
  border: 1px solid var(--accent);
  background: #fff;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  color: var(--accent);
}
.chip.active {
  background: var(--accent);
  color: #fff;
}

/* ========= タイル一覧 ========= */
.gallery {
  display: grid;
  gap: 32px;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  justify-content: center;
}

/* 台紙（カード） */
.tile {
  position: relative;
  background: #f8f4ef;
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 20px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.06);
  transition: 0.3s ease;
  display: flex;
  flex-direction: column;   /* ←縦並び */
}
.tile:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* =========================
   メディア枠（ここが一番大事）
========================= */
.tile__media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;

  display: flex;
  align-items: center;
  justify-content: center;

  overflow: hidden; /* ←はみ出し＆“二重っぽさ”の原因をカット */
  flex-shrink: 0;
}

/* 通常の画像だけ（mock-frameは除外） */
.tile__media > img:not(.mock-frame) {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  object-position: center;
  transition: transform 0.35s ease;
  pointer-events: none;
}
.tile:hover .tile__media > img:not(.mock-frame) {
  transform: scale(1.03);
}

/* 動画（フレーム無しの動画用） */
.tile__media > video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================
   フレーム（MacBook / iMac共通）
========================= */
.mock-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;

  object-fit: contain;
  object-position: center;

  z-index: 2;
  pointer-events: none;

  /* “二重”に見える原因になりやすい影を無効化 */
  filter: none !important;
  box-shadow: none !important;
}

/* フレーム内の動画（共通：MacBook想定の初期値） */
.tile__video {
  position: absolute;
  inset: 6% 6% 10% 6%;
  width: auto;
  height: auto;
  max-width: 88%;
  max-height: 84%;
  margin: auto;

  object-fit: cover;
  z-index: 1;
}

/* =========================
   iMacモック専用（全体バランス調整）
   - 右側の“二重っぽさ”対策：overflow + 影無効 + 位置調整
   - 上に寄りすぎ対策：object-position と scale
========================= */
.tile__media--imac {
  aspect-ratio: 16 / 13; /* キーボード&マウスが入る比率 */
}

/* iMacフレームを少し下げて、少し縮めて“全体が収まる” */
.tile__media--imac .mock-frame {
  object-position: center 64%; /* ←下に寄せる（好みで 62〜70%） */
  transform: scale(0.955);     /* ←全体ちょい縮小 */
  transform-origin: center;
}

/* iMac画面のくり抜き（中の動画位置） */
.tile__media--imac .tile__video {
  inset: 10% 11% 36% 11%;
  max-width: none;
  max-height: none;
}

/* =========================
   キャプション
========================= */
.tile__cap {
  padding: 14px 6px 4px;
}
.tile__cap strong {
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}
.meta {
  display: block;
  margin: 6px 0 8px;
  font-size: 12px;
  line-height: 1.6;
  color: #6b6b6b;
}
.tag {
  display: inline-block;
  font-size: 12px;
  color: #6b6b6b;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 10px;
  background: #fafafa;
}

/* =========================
   タイル全体リンク（必要なカードだけで使う）
========================= */
.tile__link {
  position: absolute;
  inset: 0;
  border-radius: 24px;
  z-index: 10;
  display: block;
  cursor: pointer;
}

/* メディアとキャプションはリンクの下敷きにならないように */
.tile__media,
.tile__cap {
  position: relative;
  z-index: 1;
}

/* =========================
   タイル内アクション（「動画を拡大して見る →」用）
========================= */
.tile__actions {
  margin-top: 10px;
}
.btn-mini {
  display: inline-block;
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid var(--accent);
  background: #fff;
  color: var(--accent);
  transition: transform 0.15s ease, opacity 0.2s ease;
}
.btn-mini:hover {
  transform: translateY(-1px);
  opacity: 0.92;
}

/* LPカード内はボタンを塗りにして目立たせる（任意） */
.tile[data-cat="lp"] .btn-mini {
  background: var(--accent);
  color: #fff;
}

/* =========================
   下部リンク（既存のまま）
========================= */
.bottom-links {
  padding: 64px 0;
  text-align: center;
}
.bottom-links__inner {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

/* =========================
   レスポンシブ
========================= */
@media (max-width: 720px) {
  .gallery {
    grid-template-columns: 1fr;
  }
  .works-hero .h1 {
    font-size: 32px;
  }
}

/* =========================
   動画もホバーで拡大（posterも一緒に拡大される）
========================= */

/* 動画（フレーム無しの動画）にも拡大を効かせる */
.tile__media > video,
.tile__video{
  transition: transform .35s ease;
  will-change: transform;
}

/* ホバーで拡大（画像と同じ倍率） */
.tile:hover .tile__media > video,
.tile:hover .tile__video{
  transform: scale(1.03);
}

/* iMacは拡大でズレが気になることがあるので、originを中央に固定 */
.tile__media--imac .tile__video{
  transform-origin: center;
}

/* =========================
   タイル全体リンクの上に、ボタンだけ出す
========================= */
.tile__actions,
.tile__actions a,
.tile__cap a {
  position: relative;
  z-index: 20;
}

/* ついで：マウスカーソルを “クリックできる感” に */
.tile__media { cursor: pointer; }

/* =========================
   LP静止画像：ホバー＆クリック用
========================= */

/* メディアだけリンクにする */
.tile__mediaLink {
  display: block;
}

/* ホバー時の拡大（動画と同じ思想） */
.tile__media img {
  transition: transform 0.35s ease;
  will-change: transform;
}

/* カード or メディアにホバーで拡大 */
.tile:hover .tile__media img {
  transform: scale(1.03);
}

/* クリックできる感 */
.tile__mediaLink,
.tile__media {
  cursor: pointer;
}