/**
 * FCプランニングオフィス - ファーストビュー内プロジェクトカルーセル専用CSS
 * .hero-content が表示された2秒後に入れ替わりで表示される
 *
 * @package FCプランニングオフィス
 */

.hero-projects {
  position: absolute;
  z-index: 3;
  opacity: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;

  /* PC用レイアウト：Y軸中央、高さは画面の75% */
  @media (min-width: 769px) {
    top: 50%;
    transform: translateY(-50%);
    /* .hero-contentと左端を揃えるため、right:2%ではなく.hero-contentと同じ右基準の計算式で左端を指定する
       （幅はhero-projects自身のclamp値のままなので、right基準では左端が揃わない） */
    left: calc(100% - 2% - clamp(320px, 50vw, 1600px));
    width: clamp(320px, 42vw, 720px);
    height: 75vh;
    max-height: 75vh;
  }

  /* モバイル用レイアウト：.hero-contentと同じtop:40%配置のまま（Y軸中央にはしない） */
  @media (max-width: 768px) {
    top: 40%;
    left: 5%;
    width: 90%;
    height: 60vh;
    max-height: 60vh;
  }
}

.hero-projects.is-active {
  pointer-events: auto;
}

/* ==========================================================================
   ヘッダー（PROJECTS — LATEST）
   ========================================================================== */

.hero-projects-header {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: var(--spacing-sm);
  flex-shrink: 0;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.hero-projects-label {
  color: var(--color-main);
  font-size: var(--font-size-lg);
}

/* 「- LATEST」：ハイフンは疑似要素の1pxラインに置き換え、メインカラーに統一。
   .hero-projects-label とは font-size が異なるため、ダッシュ左右の余白はどちらも
   rem基準（0.5rem）で揃える。ダッシュ幅自体（0.8em）だけはsublabelの文字サイズに追従させる */
.hero-projects-sublabel {
  position: relative;
  padding-left: calc(0.8em + 0.5rem);
  color: var(--color-main);
  font-size: var(--font-size-lg);
}

.hero-projects-sublabel::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.8em;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
}

/* ==========================================================================
   カルーセル本体
   ========================================================================== */

.hero-projects-swiper {
  width: 100%;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
}

.hero-projects-swiper .swiper-wrapper,
.hero-projects-swiper .swiper-slide {
  height: 100%;
}

/* container-type: size でこの要素の確定サイズ（幅・高さ）をコンテナクエリ単位として子へ渡す。
   縦横どちらが制約になっても .hero-project-thumb を正方形のまま収めるため */
.hero-project-slide {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  container-type: size;
  text-decoration: none;

  /* PC用レイアウト：正方形サムネイルが余った幅を持つ場合は中央寄せではなく左寄せにする */
  @media (min-width: 769px) {
    justify-content: flex-start;
  }
}

/* サムネイルは常に1:1。幅・高さのうち小さい方（cqw/cqh）に合わせて正方形を維持する */
.hero-project-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  width: min(100cqw, 100cqh);
  overflow: hidden;
  background-color: rgba(255, 255, 255, 0.05);
}

/* .hero-project-image は get_the_post_thumbnail() が出力する img に付与しているクラスだが、
   ホスティング側のAVIF自動変換で img が picture > source + img に置き換わり、
   クラスが picture 側に残ったまま img 側には付かない環境がある。
   picture は既定でdisplay:inlineの非置換要素でtransform/object-fitが効かないため、
   img が picture でラップされたケースにも対応できるよう、内側の img にもスタイルを当てる */
.hero-project-image,
.hero-project-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform 0.6s ease;
}

.hero-project-slide:hover .hero-project-image,
.hero-project-slide:hover .hero-project-image img {
  transform: scale(1.05);
}

/* サムネイル下部を暗くするグラデーション（日付・タイトルの可読性確保）
   添付デザイン（Claude Design canvas）のグラデーション設定に合わせた数値:
   上から61%地点まで透明、94%地点で黒70%に到達しそのまま底まで維持 */
.hero-project-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 61%, rgba(0, 0, 0, 0.7) 94%);
  pointer-events: none;
}

/* 日付・タイトルはサムネイルへ重ねて表示 */
.hero-project-meta {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: var(--spacing-md);
  color: var(--color-white);
}

.hero-project-date {
  display: block;
  font-family: var(--font-roboto);
  font-size: var(--font-size-lg);
  font-weight: 500;
  letter-spacing: 0.05em;
  opacity: 0.85;
  margin-bottom: 0.25rem;
}

.hero-project-title {
  font-family: var(--font-japanese);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1.4;
  margin: 0;
}

/* ==========================================================================
   フッター（ページネーション・カウンター・BROWSE）
   ========================================================================== */

.hero-projects-footer {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 1.5rem;
  flex-shrink: 0;
  margin-top: var(--spacing-sm);
}

/* Swiperのデフォルトpagination CSS（.swiper-pagination-bullets.swiper-pagination-horizontal）と
   詳細度を揃えるため .hero-projects-footer を前段に付けて確実に上書きする */
.hero-projects-footer .hero-projects-pagination {
  position: static;
  width: auto;
  left: auto;
  bottom: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero-projects-footer .hero-projects-pagination .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  margin: 0;
  background: var(--color-white);
  opacity: 0.35;
  transition: opacity 0.3s ease, background-color 0.3s ease;
}

.hero-projects-footer .hero-projects-pagination .swiper-pagination-bullet-active {
  background: var(--color-main);
  opacity: 1;
}

.hero-projects-nav-info {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-size: var(--font-size-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-white);
  opacity: 0.85;
}

/* 「01 / 03 - BROWSE」：ハイフンは疑似要素の1pxラインに置き換え。
   .hero-projects-sublabelと同じ考え方で、ダッシュ左右の余白をrem基準（0.5rem）に揃える。
   RighteousはRegular(400)しか読み込んでいないため、font-weightは400を明示して
   ブラウザの疑似太字（faux bold）を防ぐ */
.hero-projects-browse {
  position: relative;
  padding-left: calc(0.8em + 0.5rem);
  color: var(--color-white);
  font-weight: 400;
  text-decoration: none;
  transition: color 0.3s ease;
}

.hero-projects-browse::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 0.8em;
  height: 1px;
  background: currentColor;
  transform: translateY(-50%);
}

.hero-projects-browse:hover {
  color: var(--color-main);
}