/**
 * onchain-guide.com - 取引所CTA ブロックパターン用スタイル
 *
 * パターンA: .ocg-cta-simple
 * パターンB: .ocg-cta-cards
 *
 * ダークテーマ系・Web3デザインに合わせたスタイル定義
 * ブロックエディタのインラインスタイルを補完・上書きするもの
 */

/* ============================================================
   共通ユーティリティ
   ============================================================ */

/* CTAブロック全体の背景・グラデーション */
.ocg-cta-simple,
.ocg-cta-cards {
	background: linear-gradient(
		160deg,
		#0f1117 0%,
		#15192a 50%,
		#0f1117 100%
	);
	color: #e2e8f0;
}

/* 見出しの色をダークテーマに合わせて上書き */
.ocg-cta-simple h2.wp-block-heading,
.ocg-cta-cards h2.wp-block-heading {
	color: #f1f5f9;
}

/* カード内の h3 */
.ocg-exchange-card h3.wp-block-heading {
	color: #f1f5f9;
}

/* ============================================================
   パターンA: シンプル1カラム型 (.ocg-cta-simple)
   ============================================================ */

/* 内側コンテナ: ダークグラスモーフィズム風 */
.ocg-cta-simple__inner {
	background: rgba(255, 255, 255, 0.035) !important;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	/* インラインのボーダー指定はそのままで、背景のみ上書き */
}

/* CTAメインボタン: オレンジ・ホバーエフェクト */
.ocg-btn-cta .wp-block-button__link {
	transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	box-shadow: 0 4px 18px rgba(249, 115, 22, 0.35);
}

.ocg-btn-cta .wp-block-button__link:hover {
	background-color: #ea6c0a !important;
	transform: translateY(-2px);
	box-shadow: 0 6px 24px rgba(249, 115, 22, 0.5);
}

.ocg-btn-cta .wp-block-button__link:active {
	transform: translateY(0);
	box-shadow: 0 2px 10px rgba(249, 115, 22, 0.3);
}

/* ============================================================
   パターンB: 取引所カード比較型 (.ocg-cta-cards)
   ============================================================ */

/* カードグリッド: モバイルで縦積み */
.ocg-exchange-cards-grid {
	/* WordPress columns ブロックはデフォルトでモバイル縦積みに対応しているが、
	   ブレークポイントを微調整 */
}

/* 各取引所カード */
.ocg-exchange-card {
	background: rgba(255, 255, 255, 0.03) !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
	display: flex;
	flex-direction: column;
}

.ocg-exchange-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
	border-color: #4a5568 !important;
}

/* おすすめカード（コインチェック）: 枠線オレンジ + 微発光 */
.ocg-exchange-card--featured {
	background: rgba(249, 115, 22, 0.06) !important;
	box-shadow: 0 0 24px rgba(249, 115, 22, 0.12);
}

.ocg-exchange-card--featured:hover {
	box-shadow: 0 12px 36px rgba(249, 115, 22, 0.25);
	border-color: #ea6c0a !important;
}

/* バッジ共通 */
.ocg-exchange-badge {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	line-height: 1;
	/* インラインスタイルで色・パディング・ボーダーを指定済み */
}

/* フィーチャーリスト */
.ocg-exchange-features {
	list-style: none !important;
}

.ocg-exchange-features li {
	position: relative;
	padding-left: 1.3em;
	color: #94a3b8;
}

.ocg-exchange-features li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 0.5em;
	height: 0.5em;
	background-color: #f97316;
	border-radius: 50%;
}

/* カード内ボタン: ホバーエフェクト */
.ocg-btn-exchange .wp-block-button__link {
	transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
	box-shadow: 0 3px 12px rgba(249, 115, 22, 0.3);
	text-align: center;
}

.ocg-btn-exchange .wp-block-button__link:hover {
	background-color: #ea6c0a !important;
	transform: translateY(-1px);
	box-shadow: 0 5px 18px rgba(249, 115, 22, 0.45);
}

.ocg-btn-exchange .wp-block-button__link:active {
	transform: translateY(0);
}

/* ============================================================
   レスポンシブ: モバイル（600px以下）
   ============================================================ */
@media (max-width: 599px) {
	/* シンプル型: パディングを縮小 */
	.ocg-cta-simple__inner {
		padding-left: 1.25rem !important;
		padding-right: 1.25rem !important;
	}

	/* カード型: WordPress columns はデフォルトで縦積みになるが、
	   念のためガター調整 */
	.ocg-exchange-cards-grid .wp-block-column {
		margin-bottom: 0.75rem;
	}

	.ocg-exchange-cards-grid .wp-block-column:last-child {
		margin-bottom: 0;
	}
}

/* ============================================================
   レスポンシブ: タブレット（600px〜781px）
   ============================================================ */
@media (min-width: 600px) and (max-width: 781px) {
	/* WordPress の columns ブロックは 600px 以上で横並びになるが、
	   3カラムが狭いので 1カラムに戻す */
	.ocg-exchange-cards-grid {
		flex-wrap: wrap !important;
	}

	.ocg-exchange-cards-grid .wp-block-column {
		flex-basis: 100% !important;
		margin-bottom: 1rem;
	}

	.ocg-exchange-cards-grid .wp-block-column:last-child {
		margin-bottom: 0;
	}
}