/**
 * Gutenberg image/gallery block tweaks (front-end), toggled from
 * Features → Gutenberg blocks → Gutenberg image/gallery blocks.
 *
 * Standalone Image blocks and gallery images are handled: the caption custom
 * design applies to both. The image may be wrapped in an <a> (a manual link, or
 * the post-image lightbox), so the rules stretch that link wrapper and match the
 * <img> whether it is a direct child of the figure or nested inside the link.
 *
 * The actual caption background (solid color or gradient) is injected as inline
 * CSS from the settings; this file provides the layout it sits on.
 */

/* --- Caption custom design ------------------------------------------------
 * Standalone Image block: lay the caption over the image (WordPress core already
 * positions gallery captions this way). The background is added inline, behind
 * the caption text only.
 */
.geeks-caption-design figure.wp-block-image:not(.wp-block-gallery *):has(> figcaption) {
	position: relative;
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	overflow: hidden;
}

.geeks-caption-design figure.wp-block-image:not(.wp-block-gallery *):has(> figcaption) > a {
	display: block;
}

.geeks-caption-design figure.wp-block-image:not(.wp-block-gallery *):has(> figcaption) img {
	display: block;
	width: 100%;
	height: auto;
}

.geeks-caption-design figure.wp-block-image:not(.wp-block-gallery *) > figcaption {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1;
	max-height: 100%;
	margin: 0;
	padding: 1em;
	overflow: auto;
	box-sizing: border-box;
	color: #fff;
	font-size: 13px;
	text-align: center;
	text-shadow: 0 0 1.5px #000;
}

/* Gallery captions: core draws a frosted gradient band via ::before — hide it so
 * the configured background (injected inline on the figcaption) shows instead. */
.geeks-caption-design .wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption)::before {
	display: none;
}

/* --- Truncate long captions -----------------------------------------------
 * Markup (injected server-side): figcaption > .geeks-cap-mask > .geeks-cap-text.
 *   figcaption      — keeps its padding + background (the panel).
 *   .geeks-cap-mask — overflow:hidden window; JS animates its HEIGHT between the
 *                     collapsed N-line height and the full text height.
 *   .geeks-cap-text — -webkit-line-clamp for the collapsed N lines + auto "…";
 *                     JS drops the clamp (.is-open) so the full text exists to
 *                     slide behind the mask.
 * The figcaption is bottom-anchored, so as the mask grows the panel grows upward
 * and the text slides up into it — smooth both ways because the animated target
 * is the exact measured text height (no line-clamp toggling mid-animation). */
.geeks-caption-design.geeks-caption-truncate figure.wp-block-image:not(.wp-block-gallery *) > figcaption,
.geeks-caption-design.geeks-caption-truncate .wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	overflow: hidden;
	cursor: pointer;
	/* The caption is an interactive control (hover / tap / long-press) — stop the
	 * gesture from selecting the text or firing the touch callout. */
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	user-select: none;
}

/* Long-press on the image is our caption gesture, so suppress the linked image's
 * tap-highlight flash and selection/drag (the tap still opens the lightbox). */
.geeks-caption-truncate figure.wp-block-image {
	-webkit-tap-highlight-color: transparent;
}

.geeks-caption-truncate figure.wp-block-image a,
.geeks-caption-truncate figure.wp-block-image img {
	-webkit-user-select: none;
	user-select: none;
	-webkit-user-drag: none;
}

.geeks-caption-truncate figure.wp-block-image figcaption .geeks-cap-mask {
	overflow: hidden;
	height: calc(var(--geeks-cap-lines, 2) * 1.45em);
	transition: height 0.3s ease;
}

/* 'expand' style animates the mask height (above); 'slide' style keeps the mask
 * height fixed and translates the text — its duration is set inline by JS,
 * per hidden line, so different-length captions scroll at a constant pace. */
.geeks-caption-truncate figure.wp-block-image figcaption .geeks-cap-text {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--geeks-cap-lines, 2);
	line-height: 1.45;
	margin: 0;
	transition: transform 0.4s ease;
}

.geeks-caption-truncate figure.wp-block-image figcaption.is-open .geeks-cap-text {
	-webkit-line-clamp: 999;
}

/* --- Full-width single image ----------------------------------------------
 * Make standalone Image block images fill the content width. Left/right floated
 * images are left alone so they keep wrapping text. If the image is wrapped in a
 * link, that link is stretched too so the image can fill it.
 */
.geeks-img-fullwidth figure.wp-block-image:not(.wp-block-gallery *):not(.alignleft):not(.alignright) {
	width: 100%;
	max-width: 100%;
}

.geeks-img-fullwidth figure.wp-block-image:not(.wp-block-gallery *):not(.alignleft):not(.alignright) > a {
	display: block;
	width: 100%;
}

.geeks-img-fullwidth figure.wp-block-image:not(.wp-block-gallery *):not(.alignleft):not(.alignright) img {
	width: 100%;
	height: auto;
}