/* Profile Image Block - Frontend Styles */

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

/* ============================================
   デフォルトスタイル（モバイルファースト）
   ============================================ */
.ut-crazy-client-profile-image-block {
	/* marginはWordPress block supportsで制御 */
}

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

.ut-crazy-client-profile-image-wrapper {
	position: relative;
	overflow: hidden;
	display: block;
	margin: 0 auto;
}

.ut-crazy-client-profile-image-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.ut-crazy-client-profile-image-wrapper:hover .ut-crazy-client-profile-image-img {
	transform: scale(1.05);
}

.ut-crazy-client-profile-image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transition: opacity 0.3s ease;
}

.ut-crazy-client-profile-image-wrapper:hover .ut-crazy-client-profile-image-overlay {
	opacity: 0.8;
}

/* アスペクト比維持 */
.ut-crazy-client-profile-image-wrapper[style*="padding-bottom"] {
	height: 0;
}

.ut-crazy-client-profile-image-wrapper[style*="padding-bottom"] .ut-crazy-client-profile-image-img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.ut-crazy-client-profile-image-wrapper[style*="padding-bottom"] .ut-crazy-client-profile-image-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ライトボックス用スタイル */
.ut-crazy-client-profile-image-wrapper[data-lightbox="true"] {
	cursor: pointer;
}

.ut-crazy-client-profile-image-lightbox-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	cursor: pointer;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.ut-crazy-client-profile-image-lightbox-overlay img {
	max-width: 90%;
	max-height: 90%;
	object-fit: contain;
	border-radius: 8px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

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

/* 小さいモバイル（max-width: 400px） */
@media only screen and (max-width: 400px) {
	.ut-crazy-client-profile-image-block {
		margin: 15px 0;
	}
	
	.ut-crazy-client-profile-image-block[data-responsive="mobile"] .ut-crazy-client-profile-image-wrapper,
	.ut-crazy-client-profile-image-block .ut-crazy-client-profile-image-wrapper {
		width: var(--ut-profile-image-width-mobile, 100%);
		max-width: 100%;
	}
	
	.ut-crazy-client-profile-image-block[data-responsive="mobile"] .ut-crazy-client-profile-image-wrapper[style*="border-radius"],
	.ut-crazy-client-profile-image-block .ut-crazy-client-profile-image-wrapper[style*="border-radius"] {
		border-radius: var(--ut-profile-image-border-radius-mobile, 4px);
	}
}

/* タブレット（min-width: 481px） */
@media only screen and (min-width: 481px) {
	.ut-crazy-client-profile-image-wrapper {
		max-width: 80%;
	}
}

/* デスクトップ（min-width: 769px） */
@media only screen and (min-width: 769px) {
	.ut-crazy-client-profile-image-block {
		margin: 30px 0;
	}
	
	.ut-crazy-client-profile-image-wrapper {
		max-width: 368px;
	}
}

/* 大きなデスクトップ（min-width: 1030px） */
@media only screen and (min-width: 1030px) {
	.ut-crazy-client-profile-image-wrapper {
		max-width: 400px;
	}
}

/* 超大画面（min-width: 1240px） */
@media only screen and (min-width: 1240px) {
	.ut-crazy-client-profile-image-block {
		max-width: 1200px;
		margin: 30px auto;
	}
}

/* HDサイズ（min-width: 1920px） */
@media only screen and (min-width: 1920px) {
	.ut-crazy-client-profile-image-block {
		margin: 40px auto;
	}
	
	.ut-crazy-client-profile-image-wrapper {
		max-width: 500px;
	}
	
	.ut-crazy-client-profile-image-img {
		transition: transform 0.4s ease;
	}
}

/* 4Kサイズ（min-width: 3840px） */
@media only screen and (min-width: 3840px) {
	.ut-crazy-client-profile-image-block {
		margin: 48px auto;
		max-width: 1400px;
	}
	
	.ut-crazy-client-profile-image-wrapper {
		max-width: 600px;
	}
}

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

/* 小さいモバイル（コンテナ） */
@container profile-image-block (max-width: 400px) {
	.ut-crazy-client-profile-image-block[data-responsive="mobile"] .ut-crazy-client-profile-image-wrapper,
	.ut-crazy-client-profile-image-block .ut-crazy-client-profile-image-wrapper {
		width: var(--ut-profile-image-width-mobile, 100%);
		max-width: 100%;
	}
}

/* タブレット（コンテナ） */
@container profile-image-block (min-width: 481px) {
	.ut-crazy-client-profile-image-wrapper {
		max-width: 80%;
	}
}

/* デスクトップ（コンテナ） */
@container profile-image-block (min-width: 769px) {
	.ut-crazy-client-profile-image-wrapper {
		max-width: 368px;
	}
}

/* 大きなデスクトップ（コンテナ） */
@container profile-image-block (min-width: 1030px) {
	.ut-crazy-client-profile-image-wrapper {
		max-width: 400px;
	}
}

/* ============================================
   JavaScriptフォールバック用クラス
   （コンテナクエリがサポートされていない場合）
   ============================================ */
.ut-crazy-client-profile-image-block.ut-mobile-size .ut-crazy-client-profile-image-wrapper {
	width: var(--ut-profile-image-width-mobile, 100%);
	max-width: 100%;
}

.ut-crazy-client-profile-image-block.ut-tablet-size .ut-crazy-client-profile-image-wrapper {
	max-width: 80%;
}

.ut-crazy-client-profile-image-block.ut-desktop-size .ut-crazy-client-profile-image-wrapper {
	max-width: 368px;
}

/* ============================================
   統一アニメーションクラス（ホバー）
   ============================================ */
.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);
}