/* ==========================================================================
   Roamlore Home Tiles — 추가 CSS(테마 "추가 CSS")에 없는 규칙만 보충한다.
   타일 본체(.tiles / .tile / .tile__*)와 반응형은 이미 Kadence 추가 CSS 3·9절에 있다.
   ========================================================================== */

/* 숏코드가 Kadence 본문 컨테이너 안에 들어가므로, .wrap 의 자체 여백은 없앤다 */
.rl-home .wrap { max-width: none; margin: 0; padding: 0; }
.rl-home .home-top { padding-top: 8px; }

/* 정적 홈에서 페이지 제목/여백 제거 — 사진이 페이지를 이끈다 */
.home .rl-home { margin-top: 0; }
.page-template-default .rl-home .entry-title { display: none; }

/* 타일 이미지가 링크 안에서 높이를 잃지 않도록(테마가 img에 height:auto 를 거는 경우) */
.rl-home .tile img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 구독 타일 버튼 — 추가 CSS에는 .btn 계열이 없어서 여기서 정의한다 */
.rl-home .rl-home__cta {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 36px; padding: 0 20px; margin-top: 4px;
	font-family: var(--rl-head, sans-serif); font-weight: 600; font-size: 14px;
	letter-spacing: .01em; text-decoration: none; border-radius: var(--rl-r, 8px);
	background: #FFFFFF; color: var(--rl-teal-deep, #0B3B37);
	transition: background .2s ease;
}
.rl-home .rl-home__cta:hover,
.rl-home .rl-home__cta:focus { background: var(--rl-sand, #F5F1EA); color: var(--rl-teal-deep, #0B3B37); }

/* 타일 제목 여백 — Kadence 본문 규칙 '.single-content h2 { margin: 1.5em 0 0.5em }' 이 타일 제목에도 걸려
   작은 글씨와 제목 사이가 32~55px 벌어졌다(설계 8px). 선택자 우선순위를 올려 되돌린다. (1.0.3) */
.rl-home .tile .tile__title { margin: 0; }

/* 구독 타일 — 3열 구간(1025px~)에서 타일 높이가 189~225px 인데 내용이 235px 이라 위아래가 잘렸다.
   타일 높이는 옆 타일과 맞춘 채 내용을 줄여 184px 이하로 맞춘다. 1025~1920px 9개 폭에서 검증. (1.0.3) */
.rl-home .tile--subscribe .tile__body { padding: 14px 20px; gap: 6px; }
.rl-home .tile--subscribe .tile__eyebrow { margin-bottom: 0; }
.rl-home .tile--subscribe .tile__title { font-size: 22px; line-height: 1.15; }
.rl-home .tile--subscribe p { font-size: 13px; line-height: 1.4; max-width: 32ch; }

/* 키보드 포커스 표시 — 타일은 전부 링크다 */
.rl-home .tile:focus-visible { outline: 3px solid var(--rl-teal, #0F766E); outline-offset: 2px; }

@media (max-width: 768px) {
	.rl-home .home-top { padding-top: 0; }
}