/* ============================================================
   components.css ── ボタン・カード・バッジ等の共通部品
   ============================================================ */

/* ============================================================
   写真フレームシステム
   ============================================================
   今後 ChatGPT 等で生成した写真を継続的に追加していく前提で、
   「どの写真をどこに入れても世界観が崩れない」ことを目的とした
   共通の写真表示ルール。新しいパターン・コンポーネントを作る際は、
   個別に aspect-ratio や border-radius を指定せず、必ずこの
   .bikotsu-photo 系クラス（またはこれと同じ4値）を使うこと。

   比率は4種類のみ：
   　正方形（--ratio-square）      … 症例・小〜中サイズのカード写真
   　縦長ポートレート（--ratio-portrait）… 人物・ヒーロー（スマホ）・ギャラリー
   　横長（--ratio-landscape）     … アイキャッチ・技術紹介・資料サムネイル
   　ヒーロー特大（--ratio-hero）   … TOPヒーロー（PC）専用・多用しない

   対応する登録画像サイズは inc/image-sizes.php を参照。
   ============================================================ */
.bikotsu-photo {
	display: block;
	width: 100%;
	object-fit: cover;
	border-radius: var(--radius-md);
}

.bikotsu-photo--square    { aspect-ratio: var(--ratio-square); }
.bikotsu-photo--portrait  { aspect-ratio: var(--ratio-portrait); }
.bikotsu-photo--landscape { aspect-ratio: var(--ratio-landscape); }
.bikotsu-photo--hero      { aspect-ratio: var(--ratio-hero); border-radius: var(--radius-lg); }

/* 写真の上にバッジ（ゴールド等）を重ねる場合の土台 */
.bikotsu-photo-card {
	position: relative;
}

.bikotsu-photo-card__badge {
	position: absolute;
	left: 12px;
	bottom: 12px;
	padding: 5px 14px;
	border-radius: var(--radius-pill);
	background: var(--gold-grad);
	color: var(--rose-deep-dark);
	font-size: 0.75rem;
	font-weight: 700;
	box-shadow: 0 2px 8px rgba(17, 21, 25, 0.25);
}

/* 写真の下にキャプション（ピンク・小文字）を添える場合 */
.bikotsu-photo-card__caption {
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--pink-dark);
	margin-top: 10px;
	text-align: center;
}

/* ============================================================
   ボタンシステム（通常／hover／visited／focus／active を統一）
   ============================================================
   全てのボタンで共通のルール：
   ・hover と focus は同じ見た目（キーボード操作でも同じ質感を出す）
   ・hover/focus では「少し浮く＋影が強くなる」演出を必ず入れる
   ・active（押下中）は浮きを戻し、影を弱めて「沈む」質感を出す
   ・visited は base と全く同じ色（訪問済みでボタンの色が変わらない）
   ・トランジションは var(--transition-interactive) で統一
   ============================================================ */
.bikotsu-btn {
	display: inline-block;
	padding: 14px 32px;
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	border: none;
	transition: var(--transition-interactive);
}

.bikotsu-btn--primary,
.bikotsu-btn--primary:visited {
	background: var(--pink);
	color: var(--white);
	box-shadow: 0 6px 16px rgba(var(--pink-shadow-rgb), 0.28);
}

.bikotsu-btn--primary:hover,
.bikotsu-btn--primary:focus-visible {
	background: var(--pink-dark);
	color: var(--white);
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(var(--pink-shadow-rgb), 0.4);
}

.bikotsu-btn--primary:active {
	background: var(--pink-dark);
	color: var(--white);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(var(--pink-shadow-rgb), 0.3);
}

/* 濃色パネル上で使う塗りつぶしの副CTA（記事下CTA等） */
.bikotsu-btn--secondary,
.bikotsu-btn--secondary:visited {
	background: var(--white);
	color: var(--rose-deep);
	box-shadow: 0 4px 12px rgba(var(--shadow-rgb), 0.15);
}

.bikotsu-btn--secondary:hover,
.bikotsu-btn--secondary:focus-visible {
	background: var(--pink-pale);
	color: var(--pink-dark);
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(var(--shadow-rgb), 0.22);
}

.bikotsu-btn--secondary:active {
	background: var(--pink-pale);
	color: var(--pink-dark);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(var(--shadow-rgb), 0.18);
}

/* 濃色パネル上で使う輪郭のみのボタン（記事下CTA等） */
.bikotsu-btn--outline,
.bikotsu-btn--outline:visited {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.5);
	color: var(--white);
}

.bikotsu-btn--outline:hover,
.bikotsu-btn--outline:focus-visible {
	background: var(--white);
	border-color: var(--white);
	color: var(--pink-dark);
	transform: translateY(-3px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.bikotsu-btn--outline:active {
	background: var(--white);
	border-color: var(--white);
	color: var(--pink-dark);
	transform: translateY(-1px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.14);
}

/* 白背景上で使う、ピンク輪郭の副CTA(「もっと見る」等)。
   ホバーで塗りつぶしに変化させ、プライマリーボタンと同じ「押せる」重みを出す */
.bikotsu-btn--outline-pink,
.bikotsu-btn--outline-pink:visited {
	background: var(--white);
	border: 1.5px solid var(--pink);
	color: var(--pink-dark);
}

.bikotsu-btn--outline-pink:hover,
.bikotsu-btn--outline-pink:focus-visible {
	background: var(--pink-dark);
	border-color: var(--pink-dark);
	color: var(--white);
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(var(--pink-shadow-rgb), 0.32);
}

.bikotsu-btn--outline-pink:active {
	background: var(--pink-dark);
	border-color: var(--pink-dark);
	color: var(--white);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(var(--pink-shadow-rgb), 0.24);
}

/* e-learning（LMS）専用ボタン。サイト全体のCTA（ピンク）とは意図的に
   区別し、ログイン後の受講エリアはゴールド基調で統一する。 */
.bikotsu-btn--gold,
.bikotsu-btn--gold:visited {
	background: var(--gold);
	color: var(--white);
	box-shadow: 0 6px 16px rgba(var(--shadow-rgb), 0.24);
}

.bikotsu-btn--gold:hover,
.bikotsu-btn--gold:focus-visible {
	background: var(--gold-dark);
	color: var(--white);
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(var(--shadow-rgb), 0.32);
}

.bikotsu-btn--gold:active {
	background: var(--gold-dark);
	color: var(--white);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(var(--shadow-rgb), 0.24);
}

.bikotsu-btn--gold:disabled,
.bikotsu-btn--gold[aria-disabled="true"] {
	background: var(--border);
	color: var(--text-light);
	box-shadow: none;
	cursor: not-allowed;
	pointer-events: none;
}

.bikotsu-btn--outline-gold,
.bikotsu-btn--outline-gold:visited {
	background: var(--white);
	border: 1.5px solid var(--gold);
	color: var(--gold-dark);
}

.bikotsu-btn--outline-gold:hover,
.bikotsu-btn--outline-gold:focus-visible {
	background: var(--gold);
	border-color: var(--gold);
	color: var(--white);
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(var(--shadow-rgb), 0.24);
}

.bikotsu-btn--outline-gold:active {
	background: var(--gold-dark);
	border-color: var(--gold-dark);
	color: var(--white);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(var(--shadow-rgb), 0.2);
}

.bikotsu-btn--outline-gold[aria-disabled="true"] {
	background: var(--white);
	border-color: var(--border);
	color: var(--text-light);
	cursor: not-allowed;
	pointer-events: none;
	transform: none;
	box-shadow: none;
}

/*
 * --- ブロックエディター用ボタンスタイル（core/button のスタイルバリエーション） ---
 *
 * background/color/border-color に !important を付けている理由：
 * Lightning本体のtheme.json由来CSS（style-theme-json.css）に
 * `.wp-block-button .wp-block-button__link{background-color:var(--vk-color-primary)}`
 * というルールがあり、これがこのセレクタと同じ詳細度（クラス2つ）で、
 * かつLightning側のCSSが本テーマのCSSより後に読み込まれるため、
 * 詳細度が同点の場合は後発のLightning側が勝ってしまい、
 * ボタンが本来のピンクではなくLightningの既定色（青 #337ab7）で
 * 表示される不具合が実際に発生していた（読み込み順に依存する不具合の
 * ため、!important を付けない限りテーマ更新のたびに再発しうる）。
 */
.is-style-bikotsu-primary .wp-block-button__link,
.is-style-bikotsu-primary .wp-block-button__link:visited {
	background: var(--pink) !important;
	color: var(--white) !important;
	border-radius: var(--radius-pill);
	padding: 14px 40px;
	font-weight: 700;
	box-shadow: 0 6px 16px rgba(var(--pink-shadow-rgb), 0.28);
	transition: var(--transition-interactive);
}

.is-style-bikotsu-primary .wp-block-button__link:hover,
.is-style-bikotsu-primary .wp-block-button__link:focus-visible {
	background: var(--pink-dark) !important;
	color: var(--white) !important;
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(var(--pink-shadow-rgb), 0.4);
}

.is-style-bikotsu-primary .wp-block-button__link:active {
	background: var(--pink-dark) !important;
	color: var(--white) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(var(--pink-shadow-rgb), 0.3);
}

/*
 * 「もっと見る」系の副CTA。既定は輪郭のみだが、ホバーでは
 * プライマリーボタンと同様に濃いピンクで塗りつぶし、白文字にする。
 * これにより「スクール案内を見る」（プライマリー）と同じ、
 * はっきりした押せる質感のマウスオーバーで統一される。
 */
.is-style-bikotsu-outline .wp-block-button__link,
.is-style-bikotsu-outline .wp-block-button__link:visited {
	background: var(--white) !important;
	color: var(--pink-dark) !important;
	border: 1.5px solid var(--pink);
	border-radius: var(--radius-pill);
	padding: 12.5px 40px;
	font-weight: 700;
	transition: var(--transition-interactive);
}

.is-style-bikotsu-outline .wp-block-button__link:hover,
.is-style-bikotsu-outline .wp-block-button__link:focus-visible {
	background: var(--pink-dark) !important;
	border-color: var(--pink-dark);
	color: var(--white) !important;
	transform: translateY(-3px);
	box-shadow: 0 14px 28px rgba(var(--pink-shadow-rgb), 0.32);
}

.is-style-bikotsu-outline .wp-block-button__link:active {
	background: var(--pink-dark) !important;
	border-color: var(--pink-dark);
	color: var(--white) !important;
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(var(--pink-shadow-rgb), 0.24);
}

/* --- カード（ゴールドの上辺アクセント＋ホバーで浮き上がる質感） --- */
.bikotsu-card {
	background: var(--white);
	border: 1px solid var(--border);
	border-top: 3px solid var(--gold);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: box-shadow 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}

.bikotsu-card:hover,
.bikotsu-card:focus-within {
	box-shadow: 0 14px 30px rgba(var(--shadow-rgb), 0.16);
	transform: translateY(-3px);
	border-color: var(--gold-light);
}

.bikotsu-card__body {
	padding: 20px;
}

/* --- バッジ --- */
.bikotsu-badge {
	display: inline-block;
	padding: 4px 14px;
	border-radius: var(--radius-pill);
	font-size: 0.8rem;
	font-weight: 700;
	background: var(--gold-pale);
	color: var(--gold-dark);
}

.bikotsu-badge--rose-deep {
	background: var(--rose-deep);
	color: var(--white);
}

/* --- セクション見出し --- */
.bikotsu-heading {
	text-align: center;
	margin-bottom: 40px;
}

.bikotsu-heading__en {
	display: block;
	font-family: var(--font-sans);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: var(--gold-dark);
	text-transform: uppercase;
	margin-bottom: 8px;
}

.bikotsu-heading__ja {
	font-size: 1.6rem;
}

@media (min-width: 960px) {
	.bikotsu-heading__ja {
		font-size: 2rem;
	}
}