/* FILE: assets/css/page-home.css */
/* トップページ（/index.html）固有のスタイル */

/* =========================================================
   ヒーロー

   動画（16:9）を右寄せで置き、左側に地色の帯を作って
   そこへ白い半透明のパネルを重ねる。

   動画をトリミングせずに右へ寄せられるので、被写体の
   頭や足が切れない。帯の色は動画の背景（上 #ECECEC →
   下 #C1C1C1 のグラデーション）に合わせてあるため、
   動画との継ぎ目はほとんど見えない。
   ========================================================= */
.home-hero {
  position: relative;
}

.home-hero__media {
  position: relative;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  /* 動画の背景に合わせた地色。動画が読み込めないときの受け皿も兼ねる */
  background-image: linear-gradient(
    to bottom,
    #ECECEC 0%,
    #ECECEC 30%,
    #E9E9E9 60%,
    #DCDCDC 80%,
    #C1C1C1 100%
  );
}

.home-hero__video {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: auto;
  max-width: none;
}

/* テキストを重ねる層 */
.home-hero__inner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  pointer-events: none; /* 動画の操作を妨げない */
}

.home-hero__panel {
  pointer-events: auto;
  width: fit-content;
  max-width: min(34em, 100%);
  padding: var(--space-lg);
  /* 背景が明るいので、不透明度は高めにして可読性を確保する */
  background-color: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(2px);
  border-radius: var(--radius-md);
}

.home-hero__title {
  /* 画面幅に応じて伸縮させる。折り返し位置はHTMLの <br> で決める */
  font-size: clamp(1.75rem, 3vw, 3rem);
  line-height: 1.35;
  letter-spacing: 0.02em;
}

/* ヒーローのリード文（第14弾で社名表記から差し替え）。
   キャッチコピーより一段小さく、本文として読める大きさにする */
.home-hero__lead {
  margin-top: var(--space-md);
  font-size: var(--fs-sm);
  line-height: 1.9;
  color: var(--color-ink-sub);
}

/* --- タブレット以下（〜1023px） ---
   幅が狭いと、左に文字を置くと被写体に重なってしまう。
   動画は全体が見える大きさで表示し、テキストはその下に置く。 */
@media (max-width: 1023px) {
  .home-hero__media {
    aspect-ratio: 16 / 9;
  }
  .home-hero__video {
    position: static;
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  .home-hero__inner {
    position: static;
    display: block;
    padding-block: var(--space-lg);
  }
  .home-hero__panel {
    width: 100%;
    max-width: none;
    padding: 0;
    background-color: transparent;
    backdrop-filter: none;
  }
}

@media (max-width: 767px) {
  .home-hero__inner {
    padding-block: var(--space-md);
  }
}

/* 動きを減らす設定の人には、動画を止めて静止画として見せる */
@media (prefers-reduced-motion: reduce) {
  .home-hero__video {
    display: none;
  }
  .home-hero__media {
    background-image: url("../images/home-hero-poster.webp");
    background-size: cover;
    background-position: center;
  }
}

/* =========================================================
   WHAT WE DO（3領域）

   高さを固定せず、各領域を縦に積む。文章量が変わっても
   崩れない（HANDOVER_v3.md §6-1 の禁止事項に沿った作り）。
   ========================================================= */
.home-domains {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
}

.home-domain {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-areas:
    "title  title"
    "thumbs list";
  column-gap: var(--space-lg);
  row-gap: var(--space-md);
  align-items: start;
  background-color: var(--color-surface);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.home-domain__title {
  grid-area: title;
  font-size: var(--fs-lg);
  padding-bottom: var(--space-xs);
  border-bottom: var(--line-width) solid var(--color-line);
  overflow-wrap: break-word;
}

/* --- サムネイル --- */
.home-domain__thumbs {
  grid-area: thumbs;
  display: grid;
  gap: var(--space-xs);
  min-width: 0;
}

.home-domain__thumbs--quad {
  grid-template-columns: 1fr 1fr; /* 2列2行 */
}

.home-domain__thumbs--single {
  grid-template-columns: 1fr;
}

/* ★高さを揃えるルール（16:10 / object-fit: contain）は base.css の
   「サムネイルの共通枠」に集約されています。ここには書かないこと。
   このページ固有の見た目（角丸）だけを足しています。 */
.home-domain__thumbs img,
.home-domain__thumbs .wf-media {
  border-radius: var(--radius-sm);
}

/* --- 箇条書き --- */
.domain-list {
  grid-area: list;
  min-width: 0;
}

.domain-list li {
  position: relative;
  padding-left: 1.2em;
  overflow-wrap: break-word;
}

.domain-list li + li {
  margin-top: var(--space-sm);
}

.domain-list li::before {
  content: "・";
  position: absolute;
  left: 0;
}

.domain-list strong {
  font-weight: var(--fw-bold);
}

/* 「＊進行中プロジェクト」など、箇条書きに属さない補足行。
   「・」を出さずに、他の項目と行頭を揃える。
   .domain-list li::before より詳細度を高くする必要がある。 */
.domain-list li.domain-list__note {
  font-size: var(--fs-sm);
  color: var(--color-ink-sub);
}

.domain-list li.domain-list__note::before {
  content: "";
}

/* --- タブレット以下：2カラムを解除して縦積みに --- */
@media (max-width: 1023px) {
  .home-domain {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "thumbs"
      "list";
    padding: var(--space-md);
  }
}

/* --- スマートフォン：サムネイルも縦積み --- */
@media (max-width: 767px) {
  .home-domain__thumbs--quad {
    grid-template-columns: 1fr;
  }
  .home-domain__title {
    font-size: var(--fs-md);
  }
}

/* サムネイルの高さを揃えるルールは base.css に集約しています。
   .home-solution__media / .home-mailmagazine__media / .home-works__media /
   .home-domain__thumbs はそちらで 16:10 に統一されます。 */

/* =========================================================
   OUR SOLUTIONS（3点）
   カードの幅は layout.css の .card-grid（グリッド）に任せる
   ========================================================= */
.home-solution__title {
  font-size: var(--fs-md);
}

/* =========================================================
   OUR MAILMAGAZINE
   ========================================================= */
/* ★このブロックは OUR MAILMAGAZINE 用。第26弾で .home-news から改名した。
   トップの NEWS セクション（.home-news）と名前が衝突し、
   見出しとリストが横並びになる不具合が出ていたため */
.home-mailmagazine {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-lg);
  align-items: start;
}

.home-mailmagazine__body {
  min-width: 0;
}

@media (max-width: 767px) {
  .home-mailmagazine {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   WORKS（抜粋3件）
   カードの幅も、見出しの行数が違ってもクライアント名の行が
   下端で揃う仕組みも layout.css の .card / .card__client に
   集約したので、ここには何も書かない
   ========================================================= */