/* components/hero.css — メインビジュアル / ページタイトル帯（Figma: PageHero）
   写真背景＋半透明オーバーレイ＋中央白抜きタイトル。 */

.c-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 22rem;            /* 下層ページ用の標準高さ */
  padding: var(--space-64) var(--space-24);
  text-align: center;
  background-color: var(--color-brown);
  background-size: cover;
  background-position: center;
  color: var(--color-white);
  overflow: hidden;
}
/* 半透明オーバーレイ（写真の上に重ねて文字を可読に） */
.c-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--color-brown) 35%, transparent);
}
.c-hero__inner { position: relative; z-index: 1; max-width: var(--layout-narrow); }
.c-hero__title {
  font-size: var(--font-size-h1);
  font-weight: var(--font-weight-bold);
  margin: 0;
}
.c-hero__subtitle {
  margin-top: var(--space-16);
  font-size: var(--font-size-body);
}

/* トップページ用の大型ヒーロー（左寄せ・高め） */
.c-hero--top {
  min-height: 36rem;
  justify-content: flex-start;
  text-align: left;
}
.c-hero--top .c-hero__inner { margin-inline: 0; }
.c-hero--top .c-hero__title { font-size: var(--font-size-large); }

@media (max-width: 768px) {
  .c-hero { min-height: 16rem; }
  .c-hero--top { min-height: 24rem; }
  .c-hero--top .c-hero__title { font-size: var(--font-size-h1); }
}