/* Interaction Metrics Block - Frontend Styles */

/* ============================================
   コンテナクエリの定義
   ============================================ */
.ut-crazy-client-interaction-metrics-block {
	container-type: inline-size;
	container-name: interaction-metrics-block;
}

/* ============================================
   デフォルトスタイル（モバイルファースト）
   ============================================ */
.ut-crazy-client-interaction-metrics-block {
	/* marginはWordPress block supportsで制御 */
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 20px;
}

.ut-crazy-client-interaction-metrics-block-empty {
	/* padding, background-color, border-radiusはインラインスタイルで制御 */
	text-align: center;
	color: #666;
}

.ut-crazy-client-interaction-metrics-content {
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 20px;
	width: 100%;
	flex-wrap: wrap;
}

.ut-crazy-client-interaction-metric {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: 1;
	min-width: 80px;
}

.ut-crazy-client-interaction-metric-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.ut-crazy-client-interaction-metric-info {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

.ut-crazy-client-interaction-metric-value {
	font-weight: bold;
	line-height: 1.2;
}

.ut-crazy-client-interaction-metric-label {
	opacity: 0.8;
	line-height: 1.2;
}

.ut-crazy-client-interaction-metric-divider {
	width: 1px;
	height: 60%;
	background-color: #5c5e6f;
	flex-shrink: 0;
}

/* ============================================
   レスポンシブデザイン（ビューポートベース）
   ============================================ */

/* 小さいモバイル（max-width: 400px） */
@media only screen and (max-width: 400px) {
	.ut-crazy-client-interaction-metrics-block[data-responsive="mobile"],
	.ut-crazy-client-interaction-metrics-block {
		padding: var(--ut-interaction-metrics-padding-mobile, 16px 24px);
		gap: 16px;
		flex-direction: column;
		height: var(--ut-interaction-metrics-height-mobile, auto);
		min-height: 115px;
	}
	
	.ut-crazy-client-interaction-metrics-content {
		flex-direction: column;
		gap: 16px;
		width: 100%;
	}
	
	.ut-crazy-client-interaction-metric {
		flex-direction: row;
		justify-content: flex-start;
		width: 100%;
		min-width: auto;
		gap: 12px;
	}
	
	.ut-crazy-client-interaction-metrics-block[data-responsive="mobile"] .ut-crazy-client-interaction-metric-icon,
	.ut-crazy-client-interaction-metrics-block .ut-crazy-client-interaction-metric-icon {
		font-size: var(--ut-interaction-metrics-icon-font-size-mobile, 24px);
		width: var(--ut-interaction-metrics-icon-width-mobile, 24px);
		height: var(--ut-interaction-metrics-icon-height-mobile, 24px);
	}
	
	.ut-crazy-client-interaction-metric-info {
		align-items: flex-start;
	}
	
	.ut-crazy-client-interaction-metrics-block[data-responsive="mobile"] .ut-crazy-client-interaction-metric-value,
	.ut-crazy-client-interaction-metrics-block .ut-crazy-client-interaction-metric-value {
		font-size: var(--ut-interaction-metrics-value-font-size-mobile, 12px);
	}
	
	.ut-crazy-client-interaction-metric-divider {
		width: 100%;
		height: 1px;
	}
}

/* タブレット（min-width: 481px） */
@media only screen and (min-width: 481px) {
	.ut-crazy-client-interaction-metrics-block[data-responsive="tablet"],
	.ut-crazy-client-interaction-metrics-block {
		padding: var(--ut-interaction-metrics-padding-tablet, 24px 48px);
		flex-direction: row;
	}
	
	.ut-crazy-client-interaction-metrics-content {
		flex-direction: row;
	}
	
	.ut-crazy-client-interaction-metric {
		flex-direction: column;
	}
	
	.ut-crazy-client-interaction-metric-divider {
		width: 1px;
		height: 60%;
	}
}

/* デスクトップ（min-width: 769px） */
@media only screen and (min-width: 769px) {
	.ut-crazy-client-interaction-metrics-block[data-responsive="desktop"],
	.ut-crazy-client-interaction-metrics-block {
		padding: var(--ut-interaction-metrics-padding-desktop, 24px 48px);
		gap: 24px;
	}
	
	.ut-crazy-client-interaction-metrics-content {
		gap: 24px;
	}
}

/* 大きなデスクトップ（min-width: 1030px） */
@media only screen and (min-width: 1030px) {
	.ut-crazy-client-interaction-metrics-block[data-responsive="large-desktop"],
	.ut-crazy-client-interaction-metrics-block {
		max-width: 1200px;
		margin: 20px auto;
		padding: var(--ut-interaction-metrics-padding-large-desktop, 28px 56px);
	}
}

/* 超大画面（min-width: 1240px） */
@media only screen and (min-width: 1240px) {
	.ut-crazy-client-interaction-metrics-block {
		max-width: 1400px;
	}
}

/* HDサイズ（min-width: 1920px） */
@media only screen and (min-width: 1920px) {
	.ut-crazy-client-interaction-metrics-block[data-responsive="hd"],
	.ut-crazy-client-interaction-metrics-block {
		padding: var(--ut-interaction-metrics-padding-hd, 32px 64px);
		gap: 32px;
	}
	
	.ut-crazy-client-interaction-metrics-content {
		gap: 32px;
	}
	
	.ut-crazy-client-interaction-metrics-block[data-responsive="hd"] .ut-crazy-client-interaction-metric-icon,
	.ut-crazy-client-interaction-metrics-block .ut-crazy-client-interaction-metric-icon {
		font-size: var(--ut-interaction-metrics-icon-font-size-hd, 32px);
		width: var(--ut-interaction-metrics-icon-width-hd, 32px);
		height: var(--ut-interaction-metrics-icon-height-hd, 32px);
	}
	
	.ut-crazy-client-interaction-metrics-block[data-responsive="hd"] .ut-crazy-client-interaction-metric-value,
	.ut-crazy-client-interaction-metrics-block .ut-crazy-client-interaction-metric-value {
		font-size: var(--ut-interaction-metrics-value-font-size-hd, 16px);
	}
}

/* 4Kサイズ（min-width: 3840px） */
@media only screen and (min-width: 3840px) {
	.ut-crazy-client-interaction-metrics-block[data-responsive="4k"],
	.ut-crazy-client-interaction-metrics-block {
		padding: var(--ut-interaction-metrics-padding-4k, 40px 80px);
		gap: 40px;
		max-width: 1600px;
	}
	
	.ut-crazy-client-interaction-metrics-content {
		gap: 40px;
	}
	
	.ut-crazy-client-interaction-metrics-block[data-responsive="4k"] .ut-crazy-client-interaction-metric-icon,
	.ut-crazy-client-interaction-metrics-block .ut-crazy-client-interaction-metric-icon {
		font-size: var(--ut-interaction-metrics-icon-font-size-4k, 40px);
		width: var(--ut-interaction-metrics-icon-width-4k, 40px);
		height: var(--ut-interaction-metrics-icon-height-4k, 40px);
	}
	
	.ut-crazy-client-interaction-metrics-block[data-responsive="4k"] .ut-crazy-client-interaction-metric-value,
	.ut-crazy-client-interaction-metrics-block .ut-crazy-client-interaction-metric-value {
		font-size: var(--ut-interaction-metrics-value-font-size-4k, 18px);
	}
}

/* ============================================
   コンテナクエリ（コラム内など、コンテナ幅が制限される場合）
   ============================================ */

/* 小さいモバイル（コンテナ） */
@container interaction-metrics-block (max-width: 400px) {
	.ut-crazy-client-interaction-metrics-block[data-responsive="mobile"],
	.ut-crazy-client-interaction-metrics-block {
		flex-direction: column;
		height: var(--ut-interaction-metrics-height-mobile, auto);
		padding: var(--ut-interaction-metrics-padding-mobile, 16px 24px);
	}
	
	.ut-crazy-client-interaction-metrics-content {
		flex-direction: column;
	}
	
	.ut-crazy-client-interaction-metric {
		flex-direction: row;
		width: 100%;
	}
	
	.ut-crazy-client-interaction-metric-divider {
		width: 100%;
		height: 1px;
	}
}

/* タブレット（コンテナ） */
@container interaction-metrics-block (min-width: 481px) {
	.ut-crazy-client-interaction-metrics-block[data-responsive="tablet"],
	.ut-crazy-client-interaction-metrics-block {
		flex-direction: row;
		padding: var(--ut-interaction-metrics-padding-tablet, 24px 48px);
	}
	
	.ut-crazy-client-interaction-metrics-content {
		flex-direction: row;
	}
}

/* デスクトップ（コンテナ） */
@container interaction-metrics-block (min-width: 769px) {
	.ut-crazy-client-interaction-metrics-block[data-responsive="desktop"],
	.ut-crazy-client-interaction-metrics-block {
		padding: var(--ut-interaction-metrics-padding-desktop, 24px 48px);
	}
}

/* 大きなデスクトップ（コンテナ） */
@container interaction-metrics-block (min-width: 1030px) {
	.ut-crazy-client-interaction-metrics-block[data-responsive="large-desktop"],
	.ut-crazy-client-interaction-metrics-block {
		padding: var(--ut-interaction-metrics-padding-large-desktop, 28px 56px);
	}
}

/* ============================================
   JavaScriptフォールバック用クラス
   （コンテナクエリがサポートされていない場合）
   ============================================ */
.ut-crazy-client-interaction-metrics-block.ut-mobile-size {
	flex-direction: column;
	height: var(--ut-interaction-metrics-height-mobile, auto);
	padding: var(--ut-interaction-metrics-padding-mobile, 16px 24px);
}

.ut-crazy-client-interaction-metrics-block.ut-mobile-size .ut-crazy-client-interaction-metrics-content {
	flex-direction: column;
}

.ut-crazy-client-interaction-metrics-block.ut-mobile-size .ut-crazy-client-interaction-metric {
	flex-direction: row;
	width: 100%;
}

.ut-crazy-client-interaction-metrics-block.ut-mobile-size .ut-crazy-client-interaction-metric-divider {
	width: 100%;
	height: 1px;
}

.ut-crazy-client-interaction-metrics-block.ut-tablet-size {
	flex-direction: row;
	padding: var(--ut-interaction-metrics-padding-tablet, 24px 48px);
}

.ut-crazy-client-interaction-metrics-block.ut-desktop-size {
	padding: var(--ut-interaction-metrics-padding-desktop, 24px 48px);
}

/* ============================================
   統一アニメーションクラス（ホバー）
   ============================================ */
.ut-block-hover-scale:hover {
	transform: scale(1.05);
	transition: transform var(--animation-duration, 300ms) var(--animation-easing, ease);
}

.ut-block-hover-lift:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	transition: transform var(--animation-duration, 300ms) var(--animation-easing, ease), box-shadow var(--animation-duration, 300ms) var(--animation-easing, ease);
}

.ut-block-hover-glow:hover {
	box-shadow: 0 0 20px rgba(52, 152, 219, 0.5);
	transition: box-shadow var(--animation-duration, 300ms) var(--animation-easing, ease);
}

.ut-block-hover-fade:hover {
	opacity: 0.8;
	transition: opacity var(--animation-duration, 300ms) var(--animation-easing, ease);
}

/* ============================================
   統一アニメーションクラス（クリック）
   ============================================ */
.ut-block-click-scale:active {
	transform: scale(0.95);
	transition: transform var(--animation-duration, 100ms) var(--animation-easing, ease);
}

.ut-block-click-bounce:active {
	animation: bounce var(--animation-duration, 300ms) var(--animation-easing, ease);
}

@keyframes bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

/* ============================================
   統一アニメーションクラス（スクロール）
   ============================================ */
.ut-block-scroll-fade-in {
	opacity: 0;
	transition: opacity var(--animation-duration, 500ms) var(--animation-easing, ease);
}

.ut-block-scroll-fade-in.ut-scroll-visible {
	opacity: 1;
}

.ut-block-scroll-slide-up {
	opacity: 0;
	transform: translateY(30px);
	transition: opacity var(--animation-duration, 500ms) var(--animation-easing, ease), transform var(--animation-duration, 500ms) var(--animation-easing, ease);
}

.ut-block-scroll-slide-up.ut-scroll-visible {
	opacity: 1;
	transform: translateY(0);
}

.ut-block-scroll-slide-left {
	opacity: 0;
	transform: translateX(30px);
	transition: opacity var(--animation-duration, 500ms) var(--animation-easing, ease), transform var(--animation-duration, 500ms) var(--animation-easing, ease);
}

.ut-block-scroll-slide-left.ut-scroll-visible {
	opacity: 1;
	transform: translateX(0);
}

.ut-block-scroll-slide-right {
	opacity: 0;
	transform: translateX(-30px);
	transition: opacity var(--animation-duration, 500ms) var(--animation-easing, ease), transform var(--animation-duration, 500ms) var(--animation-easing, ease);
}

.ut-block-scroll-slide-right.ut-scroll-visible {
	opacity: 1;
	transform: translateX(0);
}

.ut-block-scroll-zoom-in {
	opacity: 0;
	transform: scale(0.8);
	transition: opacity var(--animation-duration, 500ms) var(--animation-easing, ease), transform var(--animation-duration, 500ms) var(--animation-easing, ease);
}

.ut-block-scroll-zoom-in.ut-scroll-visible {
	opacity: 1;
	transform: scale(1);
}