/* ==================================
   Works Page
================================== */

.works-page{
  width:min(1400px, 100%);
  margin:0 auto;

  padding:
    70px
    6vw
    130px;
}


/* ==================================
   Heading
================================== */

.works-heading{
  position:relative;

  display:block;

  margin:0 0 60px;

  padding:0;

  text-align:center;

  background:none;
}


.works-heading::before{
  content:"✦ ✦ ✦";

  display:block;

  margin-bottom:14px;

  color:var(--magenta);

  font-size:10px;

  letter-spacing:.55em;

  opacity:.8;
}


.works-eyebrow{
  display:block;

  margin-bottom:8px;

  color:var(--ink-soft);

  font-family:
    "Cormorant Garamond",
    serif;

  font-style:italic;

  font-size:12px;

  letter-spacing:.3em;

  text-transform:uppercase;
}


.works-heading h1{
  margin:0;

  color:var(--ink);

  font-family:
    "Zen Old Mincho",
    serif;

  font-size:
    clamp(
      38px,
      6vw,
      66px
    );

  line-height:1.1;

  letter-spacing:.08em;
}


.works-heading p{
  margin:
    14px
    0
    0;

  color:
    var(--ink-soft);

  font-family:
    "Cormorant Garamond",
    serif;

  font-style:italic;

  font-size:13px;

  letter-spacing:.12em;
}


/* ==================================
   Gallery
================================== */

.works-gallery{

  display:grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  grid-auto-rows:
    210px;

  gap:
    25px;

  grid-auto-flow:
    dense;

}


/* ==================================
   Work Item
================================== */

.work-item{

  position:relative;

  min-width:0;

  margin:0;

  padding:11px;

  overflow:hidden;

  background:
    var(--cream-deep);

  border:
    1px dashed
    var(--stitch);

  border-radius:
    4px;

  cursor:
    zoom-in;

  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;

}


.work-item img{

  display:block;

  width:100%;

  height:100%;

  object-fit:
    cover;

  border-radius:
    2px;

  filter:
    saturate(.9)
    contrast(1.04);

  transition:
    transform .45s ease,
    filter .45s ease;

}


.work-item:hover{

  z-index:5;

  transform:
    translateY(-5px);

  border-color:
    var(--magenta);

  box-shadow:
    0 18px 40px
    rgba(
      0,
      0,
      0,
      .35
    );

}


.work-item:hover img{

  transform:
    scale(1.035);

  filter:
    saturate(1)
    contrast(1.06);

}


/* ==================================
   Mosaic Pattern
================================== */


/* 1枚目：大きなメイン作品 */

.work-item:nth-child(1){

  grid-column:
    span 2;

  grid-row:
    span 2;

}


/* 4枚目：縦長 */

.work-item:nth-child(4){

  grid-row:
    span 2;

}


/* 6枚目：横長 */

.work-item:nth-child(6){

  grid-column:
    span 2;

}


/* 9枚目：横長 */

.work-item:nth-child(9){

  grid-column:
    span 2;

}


/* 11枚目：縦長 */

.work-item:nth-child(11){

  grid-row:
    span 2;

}


/* ==================================
   Modal
================================== */

.works-modal{

  position:fixed;

  inset:0;

  display:flex;

  align-items:center;

  justify-content:center;

  padding:
    30px;

  background:
    rgba(
      5,
      3,
      4,
      .92
    );

  backdrop-filter:
    blur(8px);

  opacity:0;

  visibility:hidden;

  pointer-events:none;

  transition:
    opacity .25s ease,
    visibility .25s ease;

  z-index:9999;

  cursor:
    zoom-out;

}


.works-modal.active{

  opacity:1;

  visibility:visible;

  pointer-events:auto;

}


.works-modal img{

  display:block;

  width:auto;

  height:auto;

  max-width:
    min(
      92vw,
      1500px
    );

  max-height:
    90vh;

  object-fit:
    contain;

  background:
    var(--cream-deep);

  border:
    1px solid
    var(--stitch);

  border-radius:
    4px;

  box-shadow:
    0 25px 90px
    rgba(
      0,
      0,
      0,
      .75
    );

  animation:
    works-popup
    .28s
    ease;

}


@keyframes works-popup{

  from{

    opacity:0;

    transform:
      scale(.94);

  }

  to{

    opacity:1;

    transform:
      scale(1);

  }

}


/* モーダル表示中 */

body.modal-open{

  overflow:hidden;

}


/* ==================================
   Tablet
================================== */

@media(
  max-width:900px
){

  .works-gallery{

    grid-template-columns:
      repeat(
        3,
        1fr
      );

    grid-auto-rows:
      180px;

    gap:
      20px;

  }

}


/* ==================================
   Smartphone
================================== */

@media(
  max-width:600px
){

  .works-page{

    padding:
      50px
      5vw
      100px;

  }


  .works-heading{

    margin-bottom:
      38px;

  }


  .works-gallery{

    grid-template-columns:
      repeat(
        2,
        1fr
      );

    grid-auto-rows:
      145px;

    gap:
      14px;

  }


  .work-item{

    padding:
      7px;

  }


  /* スマホ用にモザイクを整理 */

  .work-item:nth-child(1){

    grid-column:
      span 2;

    grid-row:
      span 2;

  }


  .work-item:nth-child(4),

  .work-item:nth-child(11){

    grid-row:
      span 1;

  }


  .work-item:nth-child(6),

  .work-item:nth-child(9){

    grid-column:
      span 2;

  }


  .works-modal{

    padding:
      12px;

  }

}