/**
 * Alina Reis — listings hero (.properties-listing-main)
 *
 * Presentation only. No markup, routing, SEO output, schema or content is
 * affected. Loaded after the child theme's custom-style.css so these rules win
 * on source order where specificity ties.
 *
 * The hero renders from one template only —
 * themes/realestate/casafari/main-section.php — so this applies consistently to
 * the listings index, the migrated location entities and every dynamic filter
 * URL.
 *
 * ---------------------------------------------------------------------------
 * What was wrong
 *
 * 1. A `position: fixed` site header (.dng-header-menu, 91px) overlays the top
 *    of the page, and the hero is the first element beneath it. With a fixed
 *    290px height only ~199px of hero was genuinely visible, and because the H1
 *    is vertically centred in the full box, taller headings slid up behind the
 *    header — the worst-case dynamic H1 lost 39px off its first line.
 *
 * 2. `height` was fixed rather than minimum, so a long H1 overflowed the box
 *    instead of expanding it.
 *
 * 3. The theme's own `.properties-listing-main h1 {font-size:42px}` never took
 *    effect: GeneratePress's global `h1` (3.375rem/3.875rem) was winning on
 *    source order, so the hero had no typography of its own.
 *
 * 4. `object-position` sat at dead centre, showing a thin mid-band of a 4:3
 *    image in what was effectively a 5:1 letterbox.
 * ---------------------------------------------------------------------------
 */

.properties-listing-main {
	/* Grow with the content instead of clipping it. */
	height: auto;
	min-height: clamp(360px, 34vw, 520px);

	/* Clears the 91px fixed header with room to breathe, so the heading is
	   optically centred in the VISIBLE area rather than the full box. */
	padding-top: clamp(120px, 11vw, 150px);
	padding-bottom: clamp(48px, 5vw, 72px);

	margin-bottom: 55px; /* unchanged */
}

/* Favour the upper-middle of the frame: on this imagery the horizon and
   architecture sit above centre, and the taller hero now reveals more of it. */
.properties-listing-main img {
	object-position: 50% 42%;
}

/* Give the hero heading its own typography at the same sizes GeneratePress was
   already producing (54 / 40 / 32), so short headings look exactly as they do
   today — but attached to the hero, and with tracking that scales. */
.properties-listing-main h1 {
	font-size: 54px;
	line-height: 1.16;
	letter-spacing: -0.02em; /* was a fixed -1.5px, far too tight once scaled */
	text-wrap: balance;      /* evens out multi-line headings; ignored if unsupported */

	/* A soft local scrim, not a visible drop shadow.
	   The flat rgba(0,0,0,.4) overlay is left untouched, but the taller hero now
	   places the heading over brighter parts of the photography. Measured on the
	   worst-case heading: mean background contrast is 3.64:1 (passes WCAG AA for
	   large text) but the brightest deck pixels fall to 1.73:1. Raising the
	   overlay cannot fix that without crushing the image — at 0.55 alpha the
	   worst case still only reaches 2.24:1 — so the lift is applied to the type
	   instead, where it costs nothing visually. */
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 2px 28px rgba(0, 0, 0, 0.42);
}

@media (max-width: 1024px) {
	.properties-listing-main h1 {
		font-size: 40px;
	}
}

@media (max-width: 767px) {
	.properties-listing-main h1 {
		font-size: 32px;
	}
}