/**
 * TGJ Image Block Styles
 * Mobile-first responsive design
 *
 * Uses shared variables from journal-blocks-variables.css
 */

@import url('journal-blocks-variables.css');

/* Base styles - Mobile first */
.jc-block.tgj-image {
	display: block;
	/* No colour here: the render sets the default inline, so a stylesheet
	   fallback only shows when an author clears the colour, and brings back
	   the green they removed. */
}

/* The container is the wrap: width, max-width and the gutter come from
   .tgj-wrap in the theme (tgj-block-layout.md §2), and the vertical spacing from
   the band around it. */
.jc-block.tgj-image .tgj-image__container {
	box-sizing: border-box;
}

.jc-block.tgj-image .tgj-image__container img {
	display: block;
	width: 100%;
	height: auto;
}

/* Padding Style: Default — the image fills the wrap, so nothing to add. The
   gutter is already the wrap's. */

/* Padding Style: Framed — a visible band of background around the image. A frame
   is uniform by definition, so it sets all four sides and replaces the gutter
   rather than stacking on it: here the frame IS the edge spacing, and adding it
   to the gutter gave sides twice the thickness of the top and bottom. 20px moves
   to --space-24 (§9.1). The band's spacing stays out of it, so the frame holds
   at every viewport whatever an author sets above and below the block. */
.jc-block.tgj-image.tgj-image--framed .tgj-image__container {
	padding: var(--space-24);
}

/* Rounded corners, framed only ('inset' is retired — see tgj-image.php) */
.jc-block.tgj-image.tgj-image--rounded.tgj-image--framed .tgj-image__container img {
	border-radius: 8px;
}

/* Medium screens */
@media (min-width: 640px) {
	/* No specific changes for tablet */
}

/* Large screens */
@media (min-width: 1024px) {
	/* Nothing width-related left here: the wrap caps, the band spaces. */
}

/* Editor-specific styles */
.wp-block[data-type="journal-blocks/tgj-image"] .tgj-image__container {
	min-height: 200px;
}

.wp-block[data-type="journal-blocks/tgj-image"] img {
	max-width: 100%;
	height: auto;
}