/* ============ WORKS一覧・詳細CSS：WP化時はWORKS一覧・詳細ページで読み込む ============ */
@layer page {
  @media (max-width: 767px) {
    .c-filter-tabs {
      padding-inline: 2rem;
    }
  }

  /* ここから：WORKS一覧 */
  .p-works-list {
    .p-works-list__head {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      justify-content: space-between;
      gap: 2rem 4rem;
      /* 一覧・タブとも同じ左右余白。head/listで幅を揃える（NEWSと違いWORKSは非対称にしない） */
      padding-inline: var(--page-padding-100);
    }

    .p-works-list__title {
      /* cap-height実測から逆算したfont-size（PDFテキストオブジェクト実測130px） */
      font-size: clamp(8rem, 4rem + 7.5vw, 13rem);
      font-weight: var(--fw-heavy);
      line-height: 1;
      white-space: nowrap;
    }

    /* タブはc-filter-tabs流用。文字数差が小さいためNEWSと違い固定幅にする */
    .p-works-list__tabs .c-filter-tab {
      width: 8rem; /* PDFベクター矩形実測：幅80px固定 */
      /* 固定幅ぶん、c-filter-tab既定のpadding-inline(2rem)を解除しないと文字が折り返す */
      padding-inline: 0;
    }

    .p-works-list__list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 3.3rem; /* PDF実測（カラム間33px） */
      row-gap: 6.9rem; /* PDF実測（行送り520px−カード内要素実測451pxの残り） */
      margin-block-start: 7rem; /* PDF実測：タブ下端からカード上端まで */
      padding-inline: var(--page-padding-100);
    }

    /* 区切り線は無意味な要素を増やさずc-pagination自体のborderで表現する(裸セレクタで二重ネスト回避) */
    .c-pagination {
      margin-block-start: 4.15rem; /* PDF実測：カード下端から線まで */
      padding-block-start: 4rem; /* c-pagination既定のmargin-block-startを流用（線からボタンまで） */
      margin-inline: var(--page-padding-100);
      border-block-start: 1px solid var(--color-border);
    }

    @media (max-width: 767px) {
      .p-works-list__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        padding-inline: 2rem; /* 下層ページ共通：SP左右余白は2remに統一 */
      }

      .p-works-list__title {
        /* PC130px→SP640px時143px(PDF実測)。375px以下は floor(7rem)へ */
        font-size: clamp(7rem, 22.3vw, 14.3rem);
        white-space: normal;
        margin-inline-start: -2rem; /* 親のpadding-inline(2rem)を打ち消す */
      }

      /* PC専用の固定幅8rem(PDF実測)がSPのgridセルにも効いてタブが小さいままだったため解除 */
      .p-works-list__tabs .c-filter-tab {
        width: 100%;
        padding-inline: 0.5rem; /* c-filter-tabのSP既定値に戻す */
      }

      .p-works-list__list {
        grid-template-columns: 1fr;
        row-gap: 4rem; /* デザインに明記なし。SP1カラム時の判断値 */
        margin-block-start: 4rem; /* デザインに明記なし。SP1カラム時の判断値 */
        /* 写真はフルブリード。文字はc-work-card側で2rem内側に戻す */
        padding-inline: 0;
      }

      .c-pagination {
        margin-inline: 2rem; /* 下層ページ共通：SP左右余白は2remに統一 */
        padding-block-start: 3rem; /* c-pagination既定のSP margin-block-startを流用 */
      }
    }
  }

  /* ここから：WORKS詳細 */
  .p-works-detail {
    /* PC左右100px、SPのみフルブリード。aspect-ratioは実ファイル比率と一致のため指定不要 */
    .p-works-detail__hero {
      display: block;
      width: 100%;
      height: auto;
    }

    .p-works-detail__body {
      padding-inline: var(--page-padding-100);
    }

    .p-works-detail__tags {
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      margin-block-start: 5rem; /* PDF実測：KV下端からタグまで約50px */
    }

    .p-works-detail__tag {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 8rem;
      height: 3rem;
      padding-block: 0.3em 0;
      background-color: var(--color-text);
      color: var(--color-text-invert);
      font-size: 1.2rem;
      font-weight: var(--fw-bold);
      letter-spacing: 0.05em;
    }

    .p-works-detail__title {
      margin-block-start: 2rem; /* PDF実測：タグ下端からタイトルまで */
      font-size: 1.8rem; /* PDFテキストオブジェクト実測値 */
      font-weight: var(--fw-bold);
      letter-spacing: 0.05em;
    }

    .p-works-detail__meta {
      margin-block-start: 1.7rem; /* PDF実測：タイトル下端からメタ情報まで */
    }

    .p-works-detail__meta-row {
      display: flex;
      gap: 0.5em;
      font-size: var(--fs-sm);
      line-height: 3rem; /* PDF実測：行送り30px */
      letter-spacing: 0.05em;

      dd::before {
        content: "：";
      }
    }

    /* 本文は写真ギャラリーの繰り返しのみ。2カラムに見えたのは1枚の写真の壁の角(PDF実測で確認) */
    .p-works-detail__gallery {
      display: flex;
      flex-direction: column;
      gap: 2.7rem; /* PDF実測（画像間26〜28px） */
      margin-block-start: 3.8rem; /* PDF実測：メタ情報下端からギャラリーまで */
    }

    .p-works-detail__gallery img {
      display: block;
      width: 100%;
      /* flexアイテムのmin-width初期値(auto)がimgの実サイズを優先し縮まないことがあるため0にする */
      min-width: 0;
      height: auto;
    }

    .p-works-detail__back {
      display: flex;
      justify-content: center;
      margin-block-start: 4rem; /* NEWS詳細と同じ実測値を踏襲 */
    }

    /* 区切り線は無意味な要素を増やさずrelated-list自体のborderで表現する */
    .p-works-detail__related-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 3.3rem; /* 一覧と同じカードグリッドの間隔を踏襲 */
      margin-block-start: 12rem; /* デザインに明記なし。戻るボタンから線までの判断値 */
      padding-block-start: 12rem; /* デザインに明記なし。線からリストまでの判断値 */
      border-block-start: 1px solid var(--color-border);
    }

    .p-works-detail__more {
      display: flex;
      justify-content: center;
      margin-block-start: 4rem; /* デザインに明記なし。判断値 */
    }

    @media (max-width: 767px) {
      .p-works-detail__hero {
        /* SPはフルブリード。reset(img{max-width:100%})がwidth拡張を妨げるため無効化 */
        max-width: none;
        width: calc(100% + 4rem);
        margin-inline: -2rem;
      }

      .p-works-detail__body {
        padding-inline: 2rem; /* 下層ページ共通：SP左右余白は2remに統一 */
      }

      .p-works-detail__tags {
        margin-block-start: 3rem;
      }

      .p-works-detail__title {
        font-size: clamp(1.8rem, 1.1rem + 1.7vw, 2.2rem); /* 400px以下は18px、640px実測22px */
      }

      .p-works-detail__meta-row {
        font-size: clamp(1.4rem, 0.4rem + 2.5vw, 2rem); /* 400px以下は14px、640px実測20px */
        line-height: 2.1;
      }

      .p-works-detail__gallery {
        gap: 1rem;
        /* SPはフルブリード。hero/card__thumbと同じくwidthも明示する */
        width: calc(100% + 4rem);
        margin-inline: -2rem;
      }

      .p-works-detail__related-list {
        grid-template-columns: 1fr;
        row-gap: 4rem;
        /* 線と写真はフルブリード。文字はc-work-card側で2rem内側に戻す */
        margin-inline: -2rem;
      }
    }
  }
}