/**
 * Front-end fallback CSS for [asb-gallery] and [asb-img width=""].
 *
 * Block themes already style `.wp-block-gallery` and most classic themes do
 * too, but we ship minimal CSS here so the grid layout works even without
 * theme support. Loaded only on singular posts that contain the shortcodes
 * (see ASB_SF_Images::maybe_enqueue_front_css).
 */

.asb-sf-gallery {
	display: grid;
	gap: 8px;
	margin: 1.25em 0;
}

.asb-sf-gallery.columns-2 { grid-template-columns: repeat(2, 1fr); }
.asb-sf-gallery.columns-3 { grid-template-columns: repeat(3, 1fr); }
.asb-sf-gallery.columns-4 { grid-template-columns: repeat(4, 1fr); }

.asb-sf-gallery .asb-sf-gallery-item {
	margin: 0;
}

.asb-sf-gallery .asb-sf-gallery-item img {
	width: 100%;
	height: auto;
	display: block;
}

/* The inline width:N% on <img> needs a small bit of help on aligncenter
 * figures so the figure shrinks with the image instead of leaving a gap. */
.asb-sf-image.aligncenter {
	text-align: center;
}
.asb-sf-image.alignleft  { float: left;  margin-right: 1em; }
.asb-sf-image.alignright { float: right; margin-left:  1em; }

/* v2.4.0: caption shown under an [asb-img caption="1"] image. Block themes
 * style `.wp-element-caption`; this is a minimal fallback for classic themes. */
.asb-sf-image figcaption,
.asb-sf-image .wp-element-caption {
	margin-top: 0.5em;
	font-size: 0.85em;
	line-height: 1.4;
	color: #6b7280;
	text-align: center;
}