/**
 * InfoCercle 본문/대표 이미지 반응형 스타일 (프런트엔드 공통).
 *
 * 대상: 글 본문(post_content) 안에 자동 삽입되는
 *   - figure.article-featured-image  (대표 이미지, 본문 최상단)
 *   - figure.article-inline-image    (본문 연관 이미지)
 *   - figcaption.unsplash-credit     (Unsplash 저작자 표기)
 *
 * Query Loop 카드 썸네일(.infocercle-efi-thumb)은 성격이 다르므로
 * 블록 스타일(blocks/external-featured-image/style.css)에서 별도로 16:9 고정 처리한다.
 *
 * 이 파일은 특정 글이 아니라 사이트 전체 프런트엔드에 적용되므로,
 * 이미 발행된 글과 앞으로 작성되는 글 모두에 반영된다.
 * 기존 class 이름(article-featured-image / article-inline-image / unsplash-credit)은 유지한다.
 */

/* --- 1. 본문 이미지: 화면 폭에 맞추고 원본 비율 유지 --- */

.article-featured-image,
.article-inline-image {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
	box-sizing: border-box;
}

.article-inline-image {
	/* 본문 흐름 속 이미지에는 위아래 여백을 조금 준다 (좌우는 0 유지). */
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

.article-featured-image img,
.article-inline-image img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	/* 고정 px 크기·object-fit 크롭 없이 원본 비율을 그대로 유지한다. */
}

/* --- 2. Unsplash 저작자 표기 --- */

.article-featured-image .unsplash-credit,
.article-inline-image .unsplash-credit,
figcaption.unsplash-credit {
	font-size: 0.8125rem; /* 약 13px (데스크톱) */
	line-height: 1.5;
	margin-top: 0.5rem;
	color: #6b7280;
	/* 폭이 부족할 때만 자연스럽게 줄바꿈되도록 한다 (강제 nowrap 없음). */
	white-space: normal;
	overflow-wrap: break-word;
}

.unsplash-credit a {
	color: inherit;
	text-decoration: underline;
}

/* --- 3. 모바일 (<=768px): 넘침 방지 + 캡션 축소 --- */

@media (max-width: 768px) {
	.article-featured-image,
	.article-inline-image {
		width: 100%;
		max-width: 100%;
		/* 테마가 넣는 좌우 여백/음수 마진으로 가로 스크롤이 생기지 않게 0으로 고정 */
		margin-left: 0;
		margin-right: 0;
	}

	.article-featured-image img,
	.article-inline-image img {
		width: 100%;
		max-width: 100%;
		height: auto;
	}

	.article-featured-image .unsplash-credit,
	.article-inline-image .unsplash-credit,
	figcaption.unsplash-credit {
		font-size: 11px;
	}
}