/* Profile Header Block - Frontend Styles */

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

/* ============================================
   デフォルトスタイル（モバイルファースト）
   ============================================ */
.ut-crazy-client-profile-header-block {
	/* marginはWordPress block supportsで制御 */
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 56px;
}

.ut-crazy-client-profile-header-content {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
}

.ut-crazy-client-profile-header-back-btn {
	background: none;
	border: none;
	color: #ffffff;
	cursor: pointer;
	padding: 4px 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s;
	flex-shrink: 0;
}

.ut-crazy-client-profile-header-back-btn:hover {
	opacity: 0.8;
}

.ut-crazy-client-profile-header-back-btn .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

.ut-crazy-client-profile-header-icon {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	overflow: hidden;
	flex-shrink: 0;
}

.ut-crazy-client-profile-header-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ut-crazy-client-profile-header-name {
	font-weight: 500;
	flex: 1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ut-crazy-client-profile-header-share-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 4px 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: opacity 0.2s;
	flex-shrink: 0;
	margin-left: auto;
}

.ut-crazy-client-profile-header-share-btn:hover {
	opacity: 0.8;
}

.ut-crazy-client-profile-header-share-btn .dashicons {
	font-size: 20px;
	width: 20px;
	height: 20px;
}

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

/* 小さいモバイル（max-width: 400px） */
@media only screen and (max-width: 400px) {
	.ut-crazy-client-profile-header-block[data-responsive="mobile"],
	.ut-crazy-client-profile-header-block {
		padding: var(--ut-profile-header-padding-mobile, 4px 8px);
		gap: 8px;
		min-height: 48px;
	}
	
	.ut-crazy-client-profile-header-content {
		gap: 8px;
	}
	
	.ut-crazy-client-profile-header-back-btn {
		padding: 2px 4px;
	}
	
	.ut-crazy-client-profile-header-back-btn .dashicons {
		font-size: 16px;
		width: 16px;
		height: 16px;
	}
	
	.ut-crazy-client-profile-header-icon {
		width: 32px;
		height: 32px;
	}
	
	.ut-crazy-client-profile-header-block[data-responsive="mobile"] .ut-crazy-client-profile-header-name,
	.ut-crazy-client-profile-header-block .ut-crazy-client-profile-header-name {
		font-size: var(--ut-profile-header-font-size-mobile, 12px);
	}
	
	.ut-crazy-client-profile-header-share-btn {
		padding: 2px 4px;
	}
	
	.ut-crazy-client-profile-header-share-btn .dashicons {
		font-size: 16px;
		width: 16px;
		height: 16px;
	}
}

/* タブレット（min-width: 481px） */
@media only screen and (min-width: 481px) {
	.ut-crazy-client-profile-header-block[data-responsive="tablet"],
	.ut-crazy-client-profile-header-block {
		padding: var(--ut-profile-header-padding-tablet, 8px 16px);
		gap: 12px;
	}
	
	.ut-crazy-client-profile-header-icon {
		width: 40px;
		height: 40px;
	}
}

/* デスクトップ（min-width: 769px） */
@media only screen and (min-width: 769px) {
	.ut-crazy-client-profile-header-block[data-responsive="desktop"],
	.ut-crazy-client-profile-header-block {
		padding: var(--ut-profile-header-padding-desktop, 12px 24px);
		gap: 16px;
		min-height: 64px;
	}
	
	.ut-crazy-client-profile-header-icon {
		width: 48px;
		height: 48px;
	}
	
	.ut-crazy-client-profile-header-back-btn .dashicons,
	.ut-crazy-client-profile-header-share-btn .dashicons {
		font-size: 24px;
		width: 24px;
		height: 24px;
	}
}

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

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

/* HDサイズ（min-width: 1920px） */
@media only screen and (min-width: 1920px) {
	.ut-crazy-client-profile-header-block[data-responsive="hd"],
	.ut-crazy-client-profile-header-block {
		padding: var(--ut-profile-header-padding-hd, 16px 32px);
		gap: 20px;
		min-height: 72px;
	}
	
	.ut-crazy-client-profile-header-icon {
		width: 56px;
		height: 56px;
	}
	
	.ut-crazy-client-profile-header-block[data-responsive="hd"] .ut-crazy-client-profile-header-name,
	.ut-crazy-client-profile-header-block .ut-crazy-client-profile-header-name {
		font-size: var(--ut-profile-header-font-size-hd, 16px);
	}
	
	.ut-crazy-client-profile-header-back-btn .dashicons,
	.ut-crazy-client-profile-header-share-btn .dashicons {
		font-size: 28px;
		width: 28px;
		height: 28px;
	}
}

/* 4Kサイズ（min-width: 3840px） */
@media only screen and (min-width: 3840px) {
	.ut-crazy-client-profile-header-block[data-responsive="4k"],
	.ut-crazy-client-profile-header-block {
		padding: var(--ut-profile-header-padding-4k, 20px 40px);
		gap: 24px;
		min-height: 80px;
	}
	
	.ut-crazy-client-profile-header-icon {
		width: 64px;
		height: 64px;
	}
	
	.ut-crazy-client-profile-header-block[data-responsive="4k"] .ut-crazy-client-profile-header-name,
	.ut-crazy-client-profile-header-block .ut-crazy-client-profile-header-name {
		font-size: var(--ut-profile-header-font-size-4k, 18px);
	}
	
	.ut-crazy-client-profile-header-back-btn .dashicons,
	.ut-crazy-client-profile-header-share-btn .dashicons {
		font-size: 32px;
		width: 32px;
		height: 32px;
	}
}

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

/* 小さいモバイル（コンテナ） */
@container profile-header-block (max-width: 400px) {
	.ut-crazy-client-profile-header-block[data-responsive="mobile"],
	.ut-crazy-client-profile-header-block {
		padding: var(--ut-profile-header-padding-mobile, 4px 8px);
		gap: 8px;
		min-height: 48px;
	}
	
	.ut-crazy-client-profile-header-icon {
		width: 32px;
		height: 32px;
	}
	
	.ut-crazy-client-profile-header-block[data-responsive="mobile"] .ut-crazy-client-profile-header-name,
	.ut-crazy-client-profile-header-block .ut-crazy-client-profile-header-name {
		font-size: var(--ut-profile-header-font-size-mobile, 12px);
	}
}

/* タブレット（コンテナ） */
@container profile-header-block (min-width: 481px) {
	.ut-crazy-client-profile-header-block[data-responsive="tablet"],
	.ut-crazy-client-profile-header-block {
		padding: var(--ut-profile-header-padding-tablet, 8px 16px);
	}
}

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

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

/* ============================================
   JavaScriptフォールバック用クラス
   （コンテナクエリがサポートされていない場合）
   ============================================ */
.ut-crazy-client-profile-header-block.ut-mobile-size {
	padding: var(--ut-profile-header-padding-mobile, 4px 8px);
	gap: 8px;
	min-height: 48px;
}

.ut-crazy-client-profile-header-block.ut-mobile-size .ut-crazy-client-profile-header-icon {
	width: 32px;
	height: 32px;
}

.ut-crazy-client-profile-header-block.ut-mobile-size .ut-crazy-client-profile-header-name {
	font-size: var(--ut-profile-header-font-size-mobile, 12px);
}

.ut-crazy-client-profile-header-block.ut-tablet-size {
	padding: var(--ut-profile-header-padding-tablet, 8px 16px);
}

.ut-crazy-client-profile-header-block.ut-desktop-size {
	padding: var(--ut-profile-header-padding-desktop, 12px 24px);
}

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