/*
 * Home B hero 4, Home A's hero (parts/home-b/hero-4.php, the page's hero with
 * no ?hero parameter; owners, 2026-10-20). Ported from home-a.css's hero
 * (section 1) and scoped to .hdc-b-hero4 on body.hdc-home-b; printed right
 * before the hero. The picture comes from hdc_home_b_hero_picture(), whose
 * hdc-b-hero__picture and hdc-b-hero__img classes home-b.css also styles for
 * the original hero, so the image rules here are scoped one level deeper.
 *
 * Phones: the photo 4:3, then the words on ink. 40rem: the photo 16:9. 48rem
 * to 80rem: the title on the left, the words and buttons on the right, so Call
 * stays on the first screen. 80rem: the photo fills the hero (the screen less
 * the header and the Equipment hint) and the words sit on an ink panel over
 * its quiet lower left floor. Square corners, no shadows, yellow only on Call.
 */

@layer components {
	.hdc-home-b .hdc-b-hero4 {
		position: relative;
		background: var(--ink);
		color: var(--white);
		--focus: var(--accent);
	}

	.hdc-home-b .hdc-b-hero4__media {
		position: relative;
		aspect-ratio: 4 / 3;
		overflow: hidden;
		background: var(--graphite);
	}

	.hdc-home-b .hdc-b-hero4 .hdc-b-hero__picture,
	.hdc-home-b .hdc-b-hero4 .hdc-b-hero__img {
		display: block;
		width: 100%;
		height: 100%;
	}

	.hdc-home-b .hdc-b-hero4 .hdc-b-hero__img {
		object-fit: cover;
		object-position: 50% 45%;
	}

	.hdc-home-b .hdc-b-hero4__panel {
		display: grid;
		gap: 1rem;
		padding: 1.5rem var(--gutter) 1.75rem;
	}

	.hdc-home-b .hdc-b-hero4__title {
		color: var(--white);
		font-size: clamp(1.875rem, 8.6vw, 2.75rem);
		font-weight: 780;
		line-height: 1;
		text-wrap: balance;
	}

	.hdc-home-b .hdc-b-hero4__text {
		max-width: 36rem;
		color: var(--fog);
		font-size: 1rem;
		line-height: 1.5;
	}

	.hdc-home-b .hdc-b-hero4__actions {
		display: grid;
		gap: 0.625rem;
		margin-top: 0.25rem;
	}

	.hdc-home-b .hdc-b-hero4__actions .hdc-b-btn {
		width: 100%;
	}

	.hdc-home-b .hdc-b-hero4__person {
		color: var(--mist);
		font-size: 0.9375rem;
	}

	@media (min-width: 40rem) {
		.hdc-home-b .hdc-b-hero4__media {
			width: 100%;
			max-height: 56svh;
			aspect-ratio: 16 / 9;
		}

		.hdc-home-b .hdc-b-hero4__title {
			font-size: clamp(2.75rem, 5.4vw, 3.75rem);
		}

		.hdc-home-b .hdc-b-hero4 .hdc-b-hero__img {
			object-position: 50% 60%;
		}

		.hdc-home-b .hdc-b-hero4__panel {
			padding-block: 2rem 2.25rem;
		}

		.hdc-home-b .hdc-b-hero4__actions {
			grid-template-columns: repeat(2, max-content);
		}

		.hdc-home-b .hdc-b-hero4__actions .hdc-b-btn {
			width: auto;
		}
	}

	/* Tablets and small laptops: the title on the left, the words and buttons on the right, so Call stays on the first screen. */
	@media (min-width: 48rem) and (max-width: 79.99rem) {
		.hdc-home-b .hdc-b-hero4__panel {
			grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
			align-items: start;
			column-gap: 3rem;
		}

		.hdc-home-b .hdc-b-hero4__title {
			grid-row: 1 / span 3;
			font-size: clamp(2.75rem, 5vw, 3.75rem);
			line-height: 0.96;
		}

		.hdc-home-b .hdc-b-hero4__title span {
			display: block;
		}

		.hdc-home-b .hdc-b-hero4__actions {
			grid-template-columns: minmax(0, 1fr);
		}

		.hdc-home-b .hdc-b-hero4__actions .hdc-b-btn {
			width: 100%;
		}
	}

	/* From 80rem the photo fills the hero and the words sit on an ink panel over its quiet lower left floor. */
	@media (min-width: 80rem) {
		.hdc-home-b .hdc-b-hero4 {
			height: calc(100svh - var(--header) - var(--hint));
			min-height: 38rem;
			max-height: 62rem;
			overflow: hidden;
		}

		.hdc-home-b .hdc-b-hero4__media {
			position: absolute;
			inset: 0;
			max-height: none;
			aspect-ratio: auto;
		}

		.hdc-home-b .hdc-b-hero4 .hdc-b-hero__img {
			object-position: 30% 62%;
		}

		.hdc-home-b .hdc-b-hero4__panel {
			position: absolute;
			bottom: 0;
			left: 0;
			gap: 1.125rem;
			width: min(32vw, 40rem);
			padding: 2.5rem 2.5rem 2.75rem max(var(--gutter), calc((100% - var(--wrap)) / 2));
			background: var(--ink);
		}

		.hdc-home-b .hdc-b-hero4__title {
			font-size: min(4.5rem, calc((min(32vw, 40rem) - max(3rem, (100vw - 110rem) / 2) - 2.5rem) / 6.4));
			line-height: 0.94;
		}

		.hdc-home-b .hdc-b-hero4__title span {
			display: block;
		}

		.hdc-home-b .hdc-b-hero4__text {
			font-size: 1.0625rem;
		}

		.hdc-home-b .hdc-b-hero4__actions {
			grid-template-columns: minmax(0, 1fr);
		}

		.hdc-home-b .hdc-b-hero4__actions .hdc-b-btn {
			width: 100%;
		}
	}

	/* Without a photo the panel is the hero. */
	.hdc-home-b .hdc-b-hero4--plain {
		height: auto;
		min-height: 0;
	}

	.hdc-home-b .hdc-b-hero4--plain .hdc-b-hero4__panel {
		position: static;
		width: auto;
	}
}