/**
 * Farm Page Hero widget styles.
 *
 * Purpose: Port of style.css "Inner Page Hero" (L648–685) and its responsive rules
 *          (L1357–1475: single column <820, centred stack, 140px portrait cards <560).
 * Dependencies: assets/css/base.css; section background comes from the container class
 *               acfarm_section_page_hero (assets/css/layout.css).
 * Consumers: Widget acfarm_page_hero.
 * Since: 0.1.0 Initial introduction; see CHANGELOG.md.
 */

.acfarm_page_hero {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 40px;
	align-items: center;
}

.acfarm_page_hero_no_media {
	grid-template-columns: 1fr;
}

/* Source has no margin rule for the inner-page h1 (only .hero-copy h1), so none is added here. */

.acfarm_page_hero_buttons {
	margin-top: 20px;
}

.acfarm_portrait_stack {
	display: flex;
	gap: 16px;
	justify-content: flex-end;
}

.acfarm_portrait_card {
	width: 180px;
	border-radius: var(--acfarm_radius_card);
	overflow: hidden;
	box-shadow: var(--acfarm_shadow);
	border: 1px solid var(--acfarm_color_line);
	background: var(--acfarm_color_paper);
}

.acfarm_portrait_card:nth-child(2) {
	margin-top: 24px;
}

@media (max-width: 820px) {
	.acfarm_page_hero {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.acfarm_portrait_stack {
		justify-content: center;
	}
}

@media (max-width: 560px) {
	.acfarm_portrait_card {
		width: 140px;
	}
}