/*
 * pws/home-hero on screens 1024px and wider.
 *
 * The approved heading "Beverly Hills' home for refined oral health and wellness."
 * (25 Sep 2026) is longer than the one the design was drawn around. In the 40rem
 * column it ran to five lines, and because the copy sits at the bottom of the hero,
 * it climbed over the model's face on every laptop and desktop size (1280 to 1920
 * wide). A wider column and a size that also follows the screen height keep it to
 * three lines, below her face, from 1024x768 to 1920x1080.
 *
 * On short phones (iPhone SE, 375x667, and 360x640 Androids) the same heading reached
 * her chin, so there the spacing tightens and, under 380px wide, the heading is a
 * little smaller. Other phones and tablets keep the original rules.
 */
@media (min-width: 1024px) {
	.hero .hero-copy[data-pws="index"] {
		max-width: 48rem;
	}

	.hero .hero-title[data-pws="index"] {
		font-size: clamp(2.6rem, min(5.6vw, 8.4vh), 4.6rem);
	}

	.hero .hero-sub[data-pws="index"] {
		max-width: 40rem;
	}

	.hero .hero-inner[data-pws="index"] {
		padding-bottom: clamp(3rem, 8vh, 6rem);
	}
}

@media (max-width: 1023px) and (max-height: 760px) {
	.hero .hero-sub[data-pws="index"] {
		margin-top: 1rem;
	}

	.hero .hero-actions[data-pws="index"] {
		margin-top: 1.4rem;
	}

	.hero .hero-locs[data-pws="index"] {
		margin-top: 1.2rem;
	}

	.hero .hero-inner[data-pws="index"] {
		padding-bottom: 2.5rem;
	}
}

@media (max-width: 380px) {
	.hero .hero-title[data-pws="index"] {
		font-size: 2.25rem;
	}

	.hero .hero-sub[data-pws="index"] {
		font-size: 1rem;
	}
}