/* hero-split-slider.css — ベースライン(自動読込)。最低限の見た目を保証する。
   上書き・拡張はページ側/custom側で行い、このファイルと同名クラスをゼロから書き直さないこと。
   色・フォントは必ず var(--color-*) / var(--font-*) を参照。装飾はサイトに合わせて足す。
   最小要件: grid 2カラム / 画像は object-fit:cover / 高さを第一画面に収める / モバイルは縦積み。 */
.hero-split {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 案ごとに 58/42・45/55 等へ変える */
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  background: var(--color-bg);
}

/* 左: 写真スライド。高さは第一画面に収める(No.3/No.8) */
.hero-split-media {
  position: relative;
  max-height: 620px;
  overflow: hidden;
}
.hero-split-media .slider,
.hero-split-media .slider-viewport { height: 100%; }
.hero-split-media .slider-slide img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;              /* 案で 3/2・1/1 等に変える */
  object-fit: cover;
  display: block;
}

/* ドット: 写真下に重ねる(帯にする案も可) */
.hero-split-media .slider-dots {
  position: absolute;
  left: 0; right: 0; bottom: 1rem;
  display: flex; justify-content: center; gap: .5rem;
  z-index: 2;
}
.hero-split-media .slider-dot {
  width: .6rem; height: .6rem; padding: 0; border: none; border-radius: 50%;
  background: color-mix(in srgb, var(--color-bg) 55%, transparent);
  cursor: pointer; transition: background .2s;
}
.hero-split-media .slider-dot.is-active { background: var(--color-accent); }

/* 右: コピー。写真に重ねないので通常の文字色でよい(可読性が高い) */
.hero-split-copy {
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.5rem, 5vw, 4rem);
  max-width: 34rem;
}
.hero-split-eyebrow {
  font-size: .85rem; letter-spacing: .12em;
  color: var(--color-text-muted); margin: 0 0 .75rem;
}
.hero-split-title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.4vw, 3rem);   /* 短いキャッチは大きく・長ければ抑える(No.2) */
  line-height: 1.25;
  color: var(--color-heading-ink, var(--color-primary));
  margin: 0 0 1rem;
}
.hero-split-lead {
  color: var(--color-text);
  line-height: 1.9;
  margin: 0 0 1.75rem;
}

/* SCROLL 指標(任意)。モバイルでは隠す */
.hero-split-scroll {
  position: absolute; left: 50%; bottom: 1rem; transform: translateX(-50%);
  font-size: .75rem; letter-spacing: .2em;
  color: var(--color-text-muted); text-decoration: none;
}

@media (max-width: 768px) {
  .hero-split { grid-template-columns: 1fr; gap: 0; }   /* 縦積み(必須) */
  .hero-split-media { max-height: 46vh; }
  .hero-split-copy { padding: 1.5rem 1.25rem 2rem; max-width: none; }
  .hero-split-scroll { display: none; }
}