/**
 * Image Caption Style - Frontend Styles
 *
 * Applies Image Caption Style controls to core Image block captions
 * on the frontend.
 *
 * @package   Image_Caption_Style
 * @author    H.ROMF (Hiromitsu Fujiki)
 * @copyright 2026-Present H.ROMF
 * @license   GPL-2.0-or-later
 */


/*
 * Image block positioning context.
 *
 * Scoped to overlay mode only, so blocks that never use the
 * overlay controls keep the theme's default positioning context.
 */

.wp-block-image.ics-caption-position-overlay,
.wp-block-image.ics-description-position-overlay {
	position: relative !important;

	width: fit-content;
	max-width: 100%;
}


/* Caption size */

.wp-block-image.ics-caption-custom-size figcaption {
	font-size: var(--ics-caption-size) !important;
}


/* Caption alignment */

.wp-block-image.ics-caption-align-left figcaption {
	text-align: left !important;
}

.wp-block-image.ics-caption-align-center figcaption {
	text-align: center !important;
}

.wp-block-image.ics-caption-align-right figcaption {
	text-align: right !important;
}


/* Caption color */

.wp-block-image.ics-caption-custom-color figcaption {
	color: var(--ics-caption-color) !important;
}


/* Caption below */

.wp-block-image.ics-caption-position-below figcaption {
	position: static !important;

	left: auto !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;

	transform: none !important;
}


/*
 * Caption overlay.
 *
 * Keep the anchor itself inside the image.
 */

.wp-block-image.ics-caption-position-overlay figcaption {
	position: absolute !important;

	left:
		calc(var(--ics-img-left, 0px) +
			(var(--ics-img-width, 100%) * var(--ics-caption-x-frac, 0.5)));

	top:
		clamp(calc(var(--ics-img-top, 0px) + .8em),
			calc(var(--ics-img-top, 0px) +
				(var(--ics-img-height, 100%) * var(--ics-caption-y-frac, 0.9))),
			calc(var(--ics-img-top, 0px) + var(--ics-img-height, 100%) - .8em));

	right: auto !important;
	bottom: auto !important;

	width: max-content;
	max-width: calc(100% - 1.6em);

	box-sizing: border-box;

	margin: 0 !important;
	padding: 0 !important;

	transform:
		translate(-50%,
			calc(-100% - (var(--ics-caption-description-gap, 16px) / 2)));

	z-index: 2;
}


/*
 * Description.
 */

.wp-block-image .ics-caption-description {
	box-sizing: border-box;
}


/* Description size */

.wp-block-image.ics-description-custom-size .ics-caption-description {
	font-size:
		var(--ics-description-size) !important;
}


/* Description alignment */

.wp-block-image.ics-description-align-left .ics-caption-description {
	text-align: left !important;
}

.wp-block-image.ics-description-align-center .ics-caption-description {
	text-align: center !important;
}

.wp-block-image.ics-description-align-right .ics-caption-description {
	text-align: right !important;
}


/* Description color */

.wp-block-image.ics-description-custom-color .ics-caption-description {
	color:
		var(--ics-description-color) !important;
}


/*
 * Description below.
 */

.wp-block-image.ics-description-position-below .ics-caption-description {
	position: static;

	width: 100%;

	margin-top: .35em;

	transform: none;
}


/*
 * Description overlay.
 *
 * Description is treated as a text box.
 */

.wp-block-image.ics-description-position-overlay .ics-caption-description {
	position: absolute;

	left:
		calc(var(--ics-img-left, 0px) +
			(var(--ics-img-width, 100%) * var(--ics-caption-x-frac, 0.5)));

	top:
		clamp(calc(var(--ics-img-top, 0px) + 16px),
			calc(var(--ics-img-top, 0px) +
				(var(--ics-img-height, 100%) * var(--ics-caption-y-frac, 0.9))),
			calc(var(--ics-img-top, 0px) + var(--ics-img-height, 100%) - 16px));

	width: max-content;
	max-width: 100%;

	margin: 0;
	padding: 0 !important;

	transform:
		translate(-50%,
			calc(var(--ics-caption-description-gap, 16px) / 2));

	z-index: 3;
}

/*
 * Shared text/group alignment.
 * The same Align control sets text-align and also which edge of both
 * Caption and Description is attached to the common overlay point.
 */
.wp-block-image.ics-caption-position-overlay.ics-caption-align-left figcaption,
.wp-block-image.ics-description-position-overlay.ics-caption-align-left .ics-caption-description {
	transform:
		translate(0,
			var(--ics-shared-translate-y, 0)) !important;
}

.wp-block-image.ics-caption-position-overlay.ics-caption-align-center figcaption,
.wp-block-image.ics-description-position-overlay.ics-caption-align-center .ics-caption-description {
	transform:
		translate(-50%,
			var(--ics-shared-translate-y, 0)) !important;
}

.wp-block-image.ics-caption-position-overlay.ics-caption-align-right figcaption,
.wp-block-image.ics-description-position-overlay.ics-caption-align-right .ics-caption-description {
	transform:
		translate(-100%,
			var(--ics-shared-translate-y, 0)) !important;
}

/* Preserve the separate vertical placement around the shared anchor. */
.wp-block-image.ics-caption-position-overlay figcaption {
	--ics-shared-translate-y:
		calc(-100% - (var(--ics-caption-description-gap, 16px) / 2));
}

.wp-block-image.ics-description-position-overlay .ics-caption-description {
	--ics-shared-translate-y:
		calc(var(--ics-caption-description-gap, 16px) / 2);
}


/* Shared Caption / Description width in Overlay mode. */
.wp-block-image.ics-caption-position-overlay figcaption,
.wp-block-image.ics-description-position-overlay .ics-caption-description {
	width: var(--ics-text-width, 60%) !important;
	max-width: 100% !important;
	box-sizing: border-box;
}

/*
 * Mobile overlay layout.
 *
 * On small screens, keep text-align and safe margins
 * while preventing horizontal overflow.
 */
@media (max-width: 1024px) {

	.wp-block-image.ics-caption-position-overlay figcaption,
	.wp-block-image.ics-description-position-overlay .ics-caption-description {
		left: 50px !important;
		right: 50px !important;
		width: auto !important;
		max-width: calc(100% - 100px) !important;
		box-sizing: border-box !important;
	}

	/* Center aligned on mobile */
	.wp-block-image.ics-caption-position-overlay.ics-caption-align-center figcaption,
	.wp-block-image.ics-description-position-overlay.ics-caption-align-center .ics-caption-description {
		transform:
			translate(0,
				var(--ics-shared-translate-y, 0)) !important;
		text-align: center !important;
	}

	/* Right aligned on mobile */
	.wp-block-image.ics-caption-position-overlay.ics-caption-align-right figcaption,
	.wp-block-image.ics-description-position-overlay.ics-caption-align-right .ics-caption-description {
		transform:
			translate(0,
				var(--ics-shared-translate-y, 0)) !important;
		text-align: right !important;
	}

	/* Left aligned on mobile */
	.wp-block-image.ics-caption-position-overlay.ics-caption-align-left figcaption,
	.wp-block-image.ics-description-position-overlay.ics-caption-align-left .ics-caption-description {
		transform:
			translate(0,
				var(--ics-shared-translate-y, 0)) !important;
		text-align: left !important;
	}

	.wp-block-image.ics-caption-custom-size figcaption {
		font-size: min(var(--ics-caption-size), 3.5rem) !important;
	}

	.wp-block-image.ics-description-custom-size .ics-caption-description {
		font-size: min(var(--ics-description-size), 2rem) !important;
	}

}

@media (max-width: 768px) {
	.wp-block-image.ics-caption-custom-size figcaption {
		font-size: min(var(--ics-caption-size), 2.5rem) !important;
	}

	.wp-block-image.ics-description-custom-size .ics-caption-description {
		font-size: min(var(--ics-description-size), 2rem) !important;
	}
}

@media (max-width: 480px) {
	.wp-block-image.ics-caption-custom-size figcaption {
		font-size: min(var(--ics-caption-size), 1.5rem) !important;
	}

	.wp-block-image.ics-description-custom-size .ics-caption-description {
		font-size: min(var(--ics-description-size), 1rem) !important;
	}
}