/* ==========================================================================
   hero-slider.css
   --------------------------------------------------------------------------
   [tcj_hero_slider] ショートコードが出力するマークアップ用のスタイル。
   スライド機構そのものは Splide.js(assets/vendor/splide/)に任せており、
   ここでは Splide のクラス(.splide__track / .splide__list / .splide__slide /
   .splide__pagination 等)に対して、当サイトの見た目(画像の切り抜き方、
   ドットの配色)だけを上書きしている。Splide本体のCSSは構造・動作に
   必要な最小限のみ(splide-core.min.css)を読み込んでおり、デフォルトの
   見た目テーマは使っていない。

   見出し・キャッチコピーはこのスライダーの中に含めない(固定オーバーレイ側で
   multilingual-safe.css のルールに従って可変にする)。ここでは「画像」だけを
   安全に扱う。
   ========================================================================== */

/* --------------------------------------------------------------------------
   Kadenceの標準「ページタイトル」帯を、このショートコードを使うページでは
   非表示にする。

   経緯: [tcj_hero_slider] を配置した固定ページ(トップページ)で、ヒーローの
   真上にKadence標準の灰色タイトル帯("Top"等、ページ名がそのまま出る)が
   挟まり、ヒーローデザインと衝突することが実機確認で判明した。

   対応方針: このテーマ環境には Kadence Blocks / Kadence Pro が入っておらず、
   ページ単位でタイトル表示を切り替えるKadence標準UIが使えない
   (Customizer側の「Page Title」トグルは全固定ページに一括で効いてしまい、
   Aboutページ等のタイトルまで消えてしまう)。
   このCSSファイルは tcj_render_hero_slider() 内でショートコードが実際に
   出力される時にだけ読み込まれる(inc/hero-slider.php参照)ため、
   「このページはヒーロースライダーを使っている = 独自の見出しをオーバーレイ
   側で表示するので、Kadence標準タイトルは不要」という前提でここに書くのが
   最も安全(他ページに影響しない・特定の投稿IDやbodyクラスに依存しない)。
   -------------------------------------------------------------------------- */
.entry-header.page-title {
	display: none;
}


.tcj-hero-slider {
	position: relative;
}

/* スライド1枚あたりの高さ。ウィンドウの縦幅に合わせて75vhにする指定。
   min/maxはそのまま残し、極端に縦長・縦短な画面でも破綻しない安全策とする
   (崩れるのはテキストであって、写真の縦横比ではないためheight固定でOK)。
   幅はSplideがJS初期化時にインラインstyleで制御するので、ここでは指定しない。 */
.tcj-hero-slider .splide__slide {
	height: 75vh;
	min-height: 320px;
	max-height: 900px;
	overflow: hidden;
}

/* 写真は width:100% + object-fit:cover で、上のスライド枠(75vh)の
   縦横比に関わらず、常に枠いっぱいに(はみ出た部分は切り抜いて)
   自動フィットする。ウィンドウ幅が変わっても追従する。 */
.tcj-hero-slider__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ページネーション(ドット)。Splide標準のクラスに対して配色だけ独自定義。
   splide-core.min.cssは position:absolute を持たないため、ここで
   スライドの下に重ねて表示する位置を指定する。 */
.tcj-hero-slider .splide__pagination {
	position: absolute;
	/* スライダーの右下に配置 */
	left: auto;
	right: clamp(1rem, 3vw, 2rem);
	bottom: 1.25rem;
	z-index: 10;
	gap: 0.6rem;
}

.tcj-hero-slider .splide__pagination__page {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 999px;
	border: none;
	padding: 0;
	background: rgba(255, 255, 255, 0.55);
	cursor: pointer;
}

.tcj-hero-slider .splide__pagination__page.is-active {
	background: #ffffff;
}

.tcj-hero-slider__empty {
	padding: 2rem;
	text-align: center;
	background: var(--terai-slider-empty-bg, #f4f6f8);
	color: #6b7280;
}