/* poppsee-category-hero.css
 * The two-panel hero band under a category title bar.
 * Rendered by inc/poppsee-category-hero.php — read the notes there first.
 *
 * Split and panel colour come in as --phero-split and --phero-panel on the
 * element, so a page needs no stylesheet of its own to have a hero.
 */

.phero-wrap {
	max-width: 1180px;
	margin: 30px auto 0;
	padding: 0 20px;
}

.phero {
	display: flex;
	align-items: stretch;
	min-height: 380px;
	border-radius: 8px;
	overflow: hidden;
}

.phero__photo {
	flex: 0 0 var(--phero-split, 55%);
	max-width: var(--phero-split, 55%);
	overflow: hidden;
}

/* height:100% + cover is what makes both panels one band. It renders whatever
   the file contains, so a photo that does not fill its half is a padded asset,
   not a CSS fault — see tests/blankets-hero-not-padded.test.js. */
.phero__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.phero__copy {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--phero-panel, #f6f1ec);
	padding: 44px 40px;
}

.phero--align-center .phero__copy { align-items: center; text-align: center; }
.phero--align-left   .phero__copy { align-items: flex-start; text-align: left; }

/* Curtains puts the copy on the left. Reordering visually keeps the photo
   first in the DOM, so a screen reader still meets the image with its alt
   text before the copy that describes it. */
.phero--copy-first .phero__photo { order: 2; }
.phero--copy-first .phero__copy  { order: 1; }

.phero__heading {
	font-family: Quicksand, sans-serif;
	font-weight: 500;
	font-size: clamp(22px, 2.4vw, 34px);
	line-height: 1.28;
	color: #2e2a26;
	margin: 0;
}

.phero__body {
	font-family: Quicksand, sans-serif;
	font-weight: 400;
	font-size: clamp(13px, 1.2vw, 16px);
	line-height: 1.65;
	color: #5a5550;
	margin: 18px 0 0;
	max-width: 42ch;
}

/* Sage and other mid-tone panels need white type to stay readable. */
.phero--ink-light .phero__heading { color: #fff; }
.phero--ink-light .phero__body    { color: rgba(255, 255, 255, .92); }

/* A copy panel with no heading and no body would collapse to a colour block. */
.phero__copy:empty { display: none; }
.phero__copy:empty + .phero__photo,
.phero__photo:only-child {
	flex: 0 0 100%;
	max-width: 100%;
}

@media (max-width: 768px) {
	.phero-wrap { margin-top: 22px; }
	.phero {
		flex-direction: column;
		min-height: 0;
	}
	.phero__photo,
	.phero__copy {
		flex: none;
		max-width: 100%;
	}
	/* Photo above the copy on every page, including the copy-first one. */
	.phero--copy-first .phero__photo { order: 1; }
	.phero--copy-first .phero__copy  { order: 2; }
	.phero__photo img { height: auto; aspect-ratio: 1.6; }
	.phero__copy { padding: 32px 24px; }
}

@media (max-width: 480px) {
	.phero-wrap { margin-top: 18px; }
	.phero__copy { padding: 26px 20px; }
	.phero__body { font-size: 14px; }
}