/* 1. WORKS 共通（一覧・詳細 両方で使うもの） */
/* home内に記述 */

/* 2. アーカイブ（一覧）専用 */
.works-list {
  width: var(--wrapper-md);
  margin: 0 auto;
  border-bottom: 1px solid var(--color-border-200);
}

.works-item-row {
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-xs) 0;
    border-top: 1px solid var(--color-border-200);
}

.works-item-link {
    display: flex;
    gap: var(--space-md);
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.works-item__thumb {
    width: var(--space-xl);
    height: auto;
    flex-shrink: 0;
}

.works-item__thumb img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

.works-item__info {
    flex-grow: 1;
}

.works-item__info h3 {
  letter-spacing: 0.02em;
}

.works-item__date {
    font-size: var(--fs-sm);
    color: var(--color-text-drk-200);
}

.works-item__title {
    font-size: var(--fs-md);
    margin: 0;
}

.works-item__sub-title,
.works-item__client {
    font-size: var(--fs-sm);
    margin: 0;
}

/* 3. 個別ページ専用（共通設定を上書き・拡張） */
.works-head,
.works-body {
  width: var(--wrapper-lg);
  text-align: center;
  margin: 0 auto;
}

h1.works-head__title {
  display: block;
  text-align: center;
  margin: 0 auto var(--space-sm);
}

/* WORKS - grid layout (strong selectors to avoid override) */
.works-media__grid {
  display: grid;
  gap: var(--space-md);
}

@media (min-width: 720px) {
  .works-media__grid {
    gap: var(--space-lg);
  }
}

.works-media__item{ margin: 0; }
.works-media__img {
  height: auto;
  display: block;
  margin: var(--space-lg) auto 0;
}

.works-media__section--layout-smp1-pc1 > .works-media__grid,
.works-media__section--layout-smp1-pc2 > .works-media__grid,
.works-media__section--layout-smp1-pc3 > .works-media__grid {
  grid-template-columns: 1fr;
}

.works-media__section--layout-smp2-pc2 > .works-media__grid { grid-template-columns: repeat(2, 1fr); }
.works-media__section--layout-smp3-pc3 > .works-media__grid { grid-template-columns: repeat(3, 1fr); }

@media (min-width: 720px) {
  .works-media__section--layout-smp1-pc1 > .works-media__grid { grid-template-columns: 1fr; }
  .works-media__section--layout-smp1-pc2 > .works-media__grid,
  .works-media__section--layout-smp2-pc2 > .works-media__grid { grid-template-columns: repeat(2, 1fr); }
  .works-media__section--layout-smp1-pc3 > .works-media__grid,
  .works-media__section--layout-smp3-pc3 > .works-media__grid { grid-template-columns: repeat(3, 1fr); }
}

.works-credits {
  width: auto;
  margin: var(--space-lg) auto;
}