/* 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-document-caption {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #e6e6e6;
	padding: 10px;
	border-radius: 4px;
	max-width:400px;
}

.af-document-caption-text {
	flex: 1;
	padding-right: 10px;
}

	.af-document-caption-text h4 {
		margin: 0;
		font-size: 1.1em;
	}

	.af-document-caption-text a {
		color: #0056b3;
		text-decoration: none;
		font-weight: bold;
	}

		.af-document-caption-text a:hover {
			text-decoration: underline;
		}

.af-document-caption-meta {
	font-size: 0.9em;
	color: #555;
}

.af-document-caption-thumb img {
	max-height: 80px;
	max-width: 120px;
	object-fit: cover;
	border-radius: 3px;
}