/*
 * core/image enhancements — see inc/image-styles.php.
 *
 * Loaded via wp_enqueue_block_style('core/image', …) so it applies on the front
 * end and inside the editor canvas, only on pages/screens that use an image.
 */

/* ---------------------------------------------------------------------------
   Base caption styling.

   Mirrors CKEditor/WordPress' default image-caption look on the front end. The
   --ck-color-image-caption-* vars are only defined inside the editor canvas, so
   we supply CKEditor's default values as fallbacks — same look front + editor.

   NOT `display: table-caption` (as CKEditor uses): that only works because
   CKEditor also makes the wrapper a table (`.ck-content .image{display:table}`).
   A table-caption inside our plain block-level <figure> gets wrapped in an
   anonymous table box that shrink-wraps to the width of one character, printing
   the caption vertically, one letter per line. The look CKEditor gets from this
   rule is the background/size/padding below — none of which needs a table.
--------------------------------------------------------------------------- */
.wp-block-image figcaption,
.wp-element-caption {
	background-color: var(--ck-color-image-caption-background, hsl(0, 0%, 97%));
	color: var(--ck-color-image-caption-text, hsl(0, 0%, 20%));
	width: 100%;
	display: inline-block;
	font-size: 0.75em;
	margin-top: 0 !important; /* override core's .wp-block-image :where(figcaption) top margin */
	outline-offset: -1px;
	padding: 0.6em;
	word-break: break-word;
}

/* Core sets `display: table-caption` on captions of aligned images
   (.wp-block-image .aligncenter > figcaption, etc.) at a higher specificity
   than the base rule above, which shrink-wraps the caption to one character
   wide. Re-assert the flat inline-block caption for the aligned cases too. */
.wp-block-image .aligncenter > figcaption,
.wp-block-image .alignleft > figcaption,
.wp-block-image .alignright > figcaption,
.wp-block-image.aligncenter > figcaption,
.wp-block-image.alignleft > figcaption,
.wp-block-image.alignright > figcaption {
	width: 100%;
	display: inline-block;
}

/* ---------------------------------------------------------------------------
   Golden frame (is-style-golden-frame)

   Ported from Nuxt `.media__image::after`: a 1px secondary-gold rectangle the
   size of the image, translated 0.5rem down-and-right and drawn BEHIND the
   image, so the line peeks out along the bottom + right edges.

   The figure is a 1-cell grid: the image (or its link) and the frame pseudo
   share cell 1/1 (so the frame auto-sizes to the image — no width/height
   guessing), and an optional caption drops to row 2, staying OUTSIDE the frame.
   `width: fit-content` shrinks the figure to the image so the frame lines up.
--------------------------------------------------------------------------- */
.wp-block-image.is-style-golden-frame {
	position: relative;
	z-index: 0; /* own stacking context so the -1 pseudo stays behind the img */
	display: grid;
	width: fit-content;
	max-width: 100%;
}

.wp-block-image.is-style-golden-frame > img,
.wp-block-image.is-style-golden-frame > a {
	grid-area: 1 / 1;
	position: relative;
	z-index: 1;
	display: block;
}

/* A grid item defaults to justify-self: stretch, which would widen the image
   to the cell while a resize-handle's fixed inline height stays put — squishing
   it out of aspect once the pane narrows. Pin it to the start and cap its width
   so it can only shrink proportionally, never stretch. Pair with a Max height
   cap (is-height-*) to also relax the fixed inline height. */
.wp-block-image.is-style-golden-frame > img {
	justify-self: start;
	max-width: 100%;
}

.wp-block-image.is-style-golden-frame > a > img {
	display: block;
	width: 100%;
	height: auto;
}

.wp-block-image.is-style-golden-frame::after {
	content: "";
	grid-area: 1 / 1; /* same cell as the image → matches its box exactly */
	z-index: -1;
	transform: translate(0.5rem, 0.5rem);
	border: 1px solid var(--wp--preset--color--secondary, #a47f55);
	pointer-events: none;
}

.wp-block-image.is-style-golden-frame > figcaption {
	grid-area: 2 / 1;
	display: block; /* a normal grid item, in its own row below the framed image */
}

/* ---------------------------------------------------------------------------
   Responsive max-width caps (utility classes, combinable with any style).

   Add one in the block's Advanced → "Additional CSS class(es)" field. Fluid via
   clamp(): a sensible floor on phones, scales with the viewport, capped on wide
   screens. The image is centered within the cap.
--------------------------------------------------------------------------- */
.wp-block-image.is-width-sm {
	max-width: clamp(16rem, 40vw, 22rem);
	margin-inline: auto;
}

.wp-block-image.is-width-md {
	max-width: clamp(20rem, 60vw, 34rem);
	margin-inline: auto;
}

.wp-block-image.is-width-lg {
	max-width: clamp(24rem, 80vw, 48rem);
	margin-inline: auto;
}

/* Keep the inner image honoring the cap regardless of any inline width. */
.wp-block-image.is-width-sm img,
.wp-block-image.is-width-md img,
.wp-block-image.is-width-lg img {
	width: 100%;
	height: auto;
}

/* When a width cap meets the golden frame, fit-content would fight the cap —
   let the cap win and keep the frame flush to the (now narrower) image. */
.wp-block-image.is-style-golden-frame.is-width-sm,
.wp-block-image.is-style-golden-frame.is-width-md,
.wp-block-image.is-style-golden-frame.is-width-lg {
	width: 100%;
}

/* ---------------------------------------------------------------------------
   Responsive max-HEIGHT caps (utility classes, combinable with any style).

   The block's resize handle writes a *fixed* inline height (e.g. height:450px)
   with width:auto. A fixed height can't follow the width, so once a container
   (a split pane, a narrow viewport) forces the width down, the image distorts.

   These caps fix that: they neutralise the inline width/height (both back to
   auto, so the intrinsic aspect ratio drives sizing) and instead impose a fluid
   max-height plus max-width:100%. The image then scales down proportionally to
   fit inside whichever cap bites first — never distorted. Fluid via clamp():
   a floor on short screens, scales with viewport height, capped on tall ones.

   !important is required only because it must beat the resize handle's inline
   style; it owns nothing an editor would set by hand. --------------------- */
.wp-block-image.is-height-sm img,
.wp-block-image.is-height-md img,
.wp-block-image.is-height-lg img {
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	object-fit: contain;
}

.wp-block-image.is-height-sm img {
	max-height: clamp(12rem, 30vh, 18rem);
}

.wp-block-image.is-height-md img {
	max-height: clamp(16rem, 45vh, 28rem);
}

.wp-block-image.is-height-lg img {
	max-height: clamp(20rem, 60vh, 40rem);
}