﻿/* Base container */
.af-caption {
	display: flex;
	align-items: flex-start; /* ✅ top align instead of center */
	gap: 1rem;
	max-width: 100%;
	background-color: #f8f8f8;
}

/* Layout modifiers (map to PositionID) */
.af-caption--top {
	flex-direction: column;
	align-items: center; /* center only for stacked layouts */
}

.af-caption--bottom {
	flex-direction: column-reverse;
	align-items: center; /* center only for stacked layouts */
}

.af-caption--left {
	flex-direction: row;
}

.af-caption--right {
	flex-direction: row-reverse;
}


/* Image styling */
.af-caption img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Text wrapper */
.af-caption-text {
	flex: 1;
	padding: 0px 10px;
}

	/* Normalize rich text inside caption */
	.af-caption-text p {
		margin: 0.5em 0;
	}

.af-caption--left img,
.af-caption--right img {
	max-width: 300px; /* constrain when image is beside text */
	height: auto;
}

.af-caption--top img,
.af-caption--bottom img {
	max-width: 100%; /* allow wider when image is above/below text */
	height: auto;
}

.af-icon-caption {
	padding: 20px 35px;
	box-sizing: border-box;
}

.af-icon-caption-title {
	font-size: 1.1rem;
	font-weight: 600;
	color: #145CAB;
	margin-top: 12px;
	margin-bottom: 12px;
	line-height: 1.3em;
}

.af-icon-caption-text {
	font-size: 1rem;
	line-height: 1.4em;
	color: #444;
	max-width: 320px;
	margin: 0 auto;
}
