/* ==========================================================================
   components-band.css：ページ上部の帯（Band）
   目的：ページ導入UI（帯）
   方針：
   - レイアウト依存を持たない
   - 見た目はここで完結
   ========================================================================== */

/* ==========================================================================
   01) Band（ページヘッダー帯）
   ========================================================================== */

.c-band {
  position: relative;
  overflow: hidden;
  min-height: var(--band-min-height);
}

.c-band__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--band-min-height);
}

/* 🌹 帯の画像はここで指定している */
.c-band__bg {
  position: absolute;
  inset: 0;
  z-index: 0;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 固定ページ */
body.page .c-band__bg {
  background-image: var(--band-img-page);
}

/* 投稿 single */
body.single .c-band__bg {
  background-image: var(--band-img-single);
}

/* アーカイブページ */
body.archive .c-band__bg {
  background-image: var(--band-img-archive);
}

/* ホーム（投稿一覧）ページ：home / blog 両対応 */
body.home .c-band__bg,
body.blog .c-band__bg {
  background-image: var(--band-img-archive);
}

.c-band__img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.c-band__title {
  position: relative;
  z-index: 1;
  margin: 0;
  line-height: var(--band-title-line);
  color: var(--band-title-color);
  font-size: var(--band-title-size);
  font-weight: var(--band-title-weight);
}