/**
 * 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;
	background-color: var(--jb-forest-green);
}

.jc-block.tgj-image .tgj-image__container {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	box-sizing: border-box;
}

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

/* Padding Style: Default (no padding) */
.jc-block.tgj-image.tgj-image--default .tgj-image__container {
	padding: 0;
}

/* Padding Style: Framed (20px all around) */
.jc-block.tgj-image.tgj-image--framed .tgj-image__container {
	padding: 20px;
}

/* Padding Style: Inset (20px top/bottom, 40px left/right on mobile) */
.jc-block.tgj-image.tgj-image--inset .tgj-image__container {
	padding: 20px 40px;
}

/* Rounded Corners (only for framed and inset styles) */
.jc-block.tgj-image.tgj-image--rounded.tgj-image--framed .tgj-image__container img,
.jc-block.tgj-image.tgj-image--rounded.tgj-image--inset .tgj-image__container img {
	border-radius: 8px;
}

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

/* Large screens */
@media (min-width: 1024px) {
	/* Padding Style: Inset increases to 80px left/right on desktop */
	.jc-block.tgj-image.tgj-image--inset .tgj-image__container {
		padding: 20px 80px;
	}
}

/* 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;
}