/* =============================================================================
   site.css — Phase 2 の追加分（既存 styles.min.css の後に読み込む）
   ・Dosis を自前ホスト（Google Fonts CDN をやめて GDPR 対応）
   ・作品グリッドを CSS Grid で実装（Isotope/Packery + jQuery を撤去）
   ・ヒーロー高さ・背景、スクロールアップの表示制御を JS から CSS へ
   ============================================================================= */

/* ---- Self-hosted Dosis (variable) ---------------------------------------- */
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/dosis/dosis-latin-wght-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Dosis';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/dosis/dosis-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---- Works grid: CSS Grid (uniform 5:4 thumbnails, responsive 4/3/2/1) ---- */
.works-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; position: static; width: 100%; padding: 0 15px; }
@media (max-width: 1200px) { .works-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 992px)  { .works-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .works-grid { grid-template-columns: 1fr; gap: 20px; } }

.works-grid .grid-sizer { display: none; }

/* 旧 Isotope の絶対配置を打ち消し、通常フローのグリッドセルにする */
.works-grid .work-item {
  width: auto !important; height: auto !important; position: relative !important; margin: 0 !important; float: none !important;
}
.works-grid .work-item a {
  position: relative !important; inset: auto !important;
  top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
  display: block; overflow: hidden;
}
.works-grid .work-item picture { display: block; }
.works-grid .work-item img {
  display: block; width: 100%; height: auto; aspect-ratio: 5 / 4; object-fit: cover;
}
/* キャプション（ホバーで中央表示）は既存 styles.min.css の挙動をそのまま利用 */

/* ---- Hero: full height + vertically centered title ----------------------- */
/* テンプレートの .hero-caption { display:table; height:100% } / .hero-text { vertical-align:middle }
   は親に明示的な height が必要なうえ、ブラウザによって動作が安定しない。
   flexbox で中央揃えすることで確実に機能させる。
   :before オーバーレイ(position:absolute; z-index:0)よりテキストを前面に出すため
   .hero-caption に z-index:1 を与える。                                         */
#hero.module-full-height {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
#hero .hero-caption {
  position: relative !important;
  z-index: 1;
  display: block !important;
  height: auto !important;
  width: 100%;
  text-align: center;
}
#hero .hero-text {
  display: block !important;
  height: auto !important;
}

/* ---- Scroll-up button: JS フェードの代わりに CSS で表示制御 --------------- */
.scroll-up { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.scroll-up.visible { opacity: 1; visibility: visible; }