/* =====================================================================
   works.css
   Worksページだけで使うCSSです。
   色・ナビ・フッターなどの共通部分は common.css 側にあるので、
   このファイルは必ず common.css の後に読み込んでください。
===================================================================== */

/* =====================================================================
   ページ見出し(簡易ヘッダー帯)
===================================================================== */
.page-head{
  background:var(--paper-deep);
  padding:120px 0 30px;
  text-align:center;
  border-bottom:1px solid var(--line);
}
.page-head .eyebrow{
  display:block;
  font-size:.8rem;
  color:var(--rust);
  letter-spacing:.08em;
  margin-bottom:10px;
}
.page-head h1{
  font-size:clamp(2rem, 5vw, 2.8rem);
  font-family:'Fraunces', serif;
  font-style:italic;
  color:var(--rust-deep);
}
.page-head p{
  margin-top:16px;
  color:var(--ink-soft);
  font-size:.95rem;
}

/* =====================================================================
   フィルターボタン(すべて / Web Design / Graphic Design)
===================================================================== */
.filter-bar{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin:48px 0 40px;
}
.filter-btn{
  padding:10px 26px;
  background:transparent;
  border:1px solid var(--line);
  color:var(--ink-soft);
  font-size:.85rem;
  letter-spacing:.03em;
  border-radius:999px;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.filter-btn:hover{ border-color:var(--rust); color:var(--rust-deep); }
/* .active クラスが付いているボタン=現在選ばれているフィルター */
.filter-btn.active{
  background:var(--rust);
  border-color:var(--rust);
  color:var(--paper);
}

/* =====================================================================
   作品カードの一覧(グリッド)
===================================================================== */
.works-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr); /* 横4列 */
  gap:28px;
  margin-bottom:40px;
}

.work-card{
  display:block;
  background:#fff;
  border:1px solid var(--line);
  cursor:pointer;
  text-align:left;
  transition:transform .25s ease, box-shadow .25s ease;
  /* JSから「表示する/しない」を切り替えるので、はじめは全部表示しておく */
}
.work-card:hover{
  transform:translateY(-5px);
  box-shadow:0 16px 28px rgba(30,20,10,.14);
}

/* サムネイル画像を置く部分(実画像がある場合) */
.work-card .thumb{
  width:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  display:block;
}

/* 実画像がまだない作品用の「仮サムネイル」(グラデーション+カテゴリ名) */
.work-card .thumb-placeholder{
  width:100%;
  aspect-ratio:4/3;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#F4EFE3;
  font-family:'Fraunces', serif;
  font-style:italic;
  font-size:.95rem;
  letter-spacing:.04em;
}
/* カテゴリごとに仮サムネイルの色を変える */
.thumb-placeholder.cat-web{
  background:linear-gradient(135deg, var(--dusk) 0%, #33456A 50%, var(--rust) 130%);
}
.thumb-placeholder.cat-graphic{
  background:linear-gradient(135deg, #4B3A2A 0%, #8C5A34 55%, #C89A46 130%);
}

.work-card .body{ padding:16px 18px 20px; }

.work-card .badges{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  margin-bottom:10px;
}
/* 小さなバッジ(タグ)の共通スタイル */
.badge{
  font-size:.68rem;
  padding:3px 9px;
  border-radius:999px;
  letter-spacing:.02em;
}
.badge-category{ background:var(--paper-deep); color:var(--ink-soft); }
.badge-self{ background:#EFE3C8; color:var(--rust-deep); }
.badge-coconala{
  background:var(--dusk);
  color:#F4EFE3;
}
.badge-coconala:hover{ background:var(--rust); }

.work-card h3{
  font-size:1rem;
  margin-bottom:6px;
  line-height:1.5;
}
.work-card .meta{
  font-size:.78rem;
  color:var(--ink-soft);
}

/* =====================================================================
   「もっと見る」ボタンのまわり
   (ボタン自体の見た目 .btn-outline は common.css 側にあります)
===================================================================== */
.load-more-wrap{ text-align:center; padding-bottom:100px; }
/* 表示する作品が無くなったら、JSでこのクラスを付けてボタンを隠す */
.btn-outline.is-hidden{ display:none; }

/* =====================================================================
   詳細モーダル(カードをクリックすると開くポップアップ)
===================================================================== */
.modal-overlay{
  position:fixed; inset:0;
  background:rgba(19,27,44,.72);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  z-index:200;
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease;
}
/* .is-open クラスが付いたら表示する */
.modal-overlay.is-open{
  opacity:1;
  visibility:visible;
}

.modal-box{
  background:var(--paper);
  max-width:860px;
  width:100%;
  max-height:88vh;
  overflow-y:auto;
  position:relative;
  padding:40px;
  transform:translateY(16px);
  transition:transform .25s ease;
}
.modal-overlay.is-open .modal-box{ transform:translateY(0); }

.modal-close{
  position:absolute;
  top:14px; right:14px;
  width:36px; height:36px;
  border:none;
  background:var(--paper-deep);
  color:var(--ink);
  font-size:1.3rem;
  line-height:1;
  border-radius:50%;
}
.modal-close:hover{ background:var(--rust); color:#fff; }

/* モーダル内のギャラリー(画像が複数ある場合は横スクロール) */
.modal-gallery{
  display:flex;
  gap:16px;
  overflow-x:auto;
  padding-bottom:12px;
  margin-bottom:24px;
}
.modal-gallery img{
  /* 画像ごとに縦長・横長が違ってもOKなように、高さだけ揃える */
  height:min(60vh, 440px);
  width:auto;
  max-width:100%;
  flex-shrink:0;
  background:var(--paper-deep);
  cursor:zoom-in; /* クリックすると拡大できることが伝わるように、虫眼鏡カーソルにする */
}

/* =====================================================================
   画像の拡大表示(ライトボックス)
   モーダルより、さらに上に重ねて表示します
===================================================================== */
.lightbox-overlay{
  position:fixed; inset:0;
  background:rgba(10,8,6,.92);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
  z-index:300; /* モーダル(z-index:200)より、さらに上に表示する */
  opacity:0;
  visibility:hidden;
  transition:opacity .25s ease;
}
/* .is-open クラスが付いたら表示する(モーダルと同じ仕組み) */
.lightbox-overlay.is-open{
  opacity:1;
  visibility:visible;
}
.lightbox-overlay img{
  max-width:100%;
  max-height:100%;
  object-fit:contain; /* 画像全体が見えるように、縦横比を保ったまま画面に収める */
}
.lightbox-close{
  position:absolute;
  top:20px; right:24px;
  width:40px; height:40px;
  border:none;
  border-radius:50%;
  background:rgba(244,239,227,.15);
  color:#F4EFE3;
  font-size:1.5rem;
  line-height:1;
}
.lightbox-close:hover{ background:rgba(244,239,227,.3); }

.modal-title{
  font-size:1.3rem;
  margin-bottom:6px;
}
.modal-badges{ display:flex; gap:6px; margin-bottom:18px; flex-wrap:wrap; }

.modal-description{
  margin-bottom:22px;
  color:var(--ink);
}

/* ターゲット・使用ソフトなどの項目リスト */
.modal-specs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 28px;
  padding-top:18px;
  border-top:1px solid var(--line);
}
.modal-specs dt{
  font-size:.75rem;
  color:var(--ink-soft);
  letter-spacing:.05em;
  margin-bottom:3px;
}
.modal-specs dd{
  margin:0;
  font-size:.92rem;
}

css
/* 動画(YouTube / Vimeo / mp4) */
.modal-video{
  margin-bottom:20px;
  background:#000;
}
.modal-video iframe{
  display:block;
  width:100%;
  aspect-ratio:16/9;   /* 横長の枠(16:9)を、幅に合わせて自動で決める */
  height:auto;
  border:0;
}
.modal-video video{
  display:block;
  width:100%;
  height:auto;
  max-height:70vh;     /* 縦長の動画でも、画面からはみ出さない */
  background:#000;
}

/* ✕ボタンを、いちばん上に表示する */
.modal-close{ z-index:10; }

/* =====================================================================
   レスポンシブ(画面幅が狭いとき)
===================================================================== */
@media (max-width:1000px){
  .works-grid{ grid-template-columns:repeat(2, 1fr); } /* 2列に */
}

@media (max-width:760px){
  .works-grid{ grid-template-columns:1fr; } /* 1列に */
  .modal-box{ padding:26px; }
  .modal-specs{ grid-template-columns:1fr; }
}

.modal-gallery{
  align-items:flex-start;   /* 高さを、まわりにそろえない(伸びを止める) */
}
.modal-gallery img{
  height:auto;              /* 高さは、幅に合わせて自動で決める */
  object-fit:contain;       /* 画像を、切らず・伸ばさずに表示する */
}