/* 実績カードのサムネ（2026-10-23 本人決定）。HTML は template-parts/works-card-thumb.php
   写真の形：写真だけ。ロゴは会社名の行に置く（2026-10-23 本人「ロゴはサムネの中にない方がいい」。それまでは写真の左下の白い台）
   ロゴの面の形：写真が無い実績。薄いグレーの面の真ん中に元のロゴ
   ロゴの色は変えない（2026-10-23 本人指示）
   実績一覧・カテゴリの一覧・トップの WORKS の3か所で同じ見た目にする（それまでは works.css と home.css に同じ指定が2つあった） */

.works-list-item .works-thumb {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-card, 10px);
  aspect-ratio: 16 / 9; /* 3:2 から 16:9 に（動画の実績が多いため） */
  background: #212121;
}

/* 写真の形 */
.works-thumb--photo .works-thumb__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.works-list-item a:hover .works-thumb--photo .works-thumb__photo,
.works-list-item a:focus-visible .works-thumb--photo .works-thumb__photo {
  transform: scale(1.04);
}
@media (prefers-reduced-motion: reduce) {
  .works-thumb--photo .works-thumb__photo { transition: none; }
}

/* ロゴの面の形 */
.works-thumb--logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.works-list-item .works-thumb--logo {
  background: var(--color-bg-neutral, #F2F2F2);
}
.works-thumb--logo .works-thumb__logo {
  width: auto;
  height: auto;
  max-width: 50%;
  max-height: 40%;
  mix-blend-mode: multiply; /* ロゴの白地をグレーの面になじませる（ロゴの色は変わらない） */
}

/* 会社名の行：ロゴ＋会社名（2026-10-23）。HTML は template-parts/works-card-company.php */
.works-list-item .works-info__company {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}
.works-info__logo {
  flex: none;
  width: auto;
  height: auto;
  max-width: 88px;
  max-height: 20px;
  mix-blend-mode: multiply; /* ロゴの白地を背景（トップの WORKS はグレー）になじませる。ロゴの色は変わらない */
}
@media screen and (min-width: 1024px) {
  .works-info__logo { max-height: 24px; max-width: 104px; }
}