/* Hero Layout: Compact Banner (3.4.0, CUSTOM-TEMPLATE.md D9). A short opener for inner pages: copy and buttons share one
   row, a thin panoramic photo strip closes it. Sites restyle it with Branding (colors, fonts) and their css/screen.css. */
.ct2-hero-banner { display: flex; flex-direction: column; }
.ct2-hero-banner.is-full { min-height: 100svh; box-sizing: border-box; }
.ct7-bn { padding-bottom: clamp(40px, 4vw, 64px) !important; }
.ct7-bn--nostrip { padding-bottom: clamp(60px, 6vw, 96px) !important; }
.ct2-hero-banner.is-full .ct7-bn--nostrip { margin-top: auto; }

.ct7-bn-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px clamp(40px, 6vw, 120px); align-items: end; }
.ct7-bn-row--solo { grid-template-columns: minmax(0, 1fr); }
.ct7-bn-copy { min-width: 0; }
.ct2-hero.ct2-hero-banner .ct2-hero-title { font-size: clamp(40px, 4.4vw, 80px); line-height: 1.02; }
.ct7-bn .ct2-hero-eyebrow { margin-bottom: 16px; }
.ct7-bn .ct2-hero-sentence { margin-top: 18px; max-width: 40em; }
.ct7-bn-actions .ct2-hero-buttons { margin-top: 0; justify-content: flex-end; }

.ct7-bn-strip { position: relative; flex: 1 0 auto; height: clamp(180px, 15vw, 220px); overflow: hidden; }
.ct2-hero-banner.is-full .ct7-bn-strip { height: auto; min-height: clamp(180px, 15vw, 220px); }
.ct7-bn-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; display: block; }

@media (prefers-reduced-motion: no-preference) {
	/* the one photo moment: the strip settles from a slight zoom */
	.ct7-bn-img { animation: ct7-bn-settle 1.6s cubic-bezier(.2, .7, 0, 1) both; }
}
@keyframes ct7-bn-settle { from { transform: scale(1.08); } }

@media (max-width: 900px) {
	.ct7-bn-row { grid-template-columns: minmax(0, 1fr); }
	.ct7-bn-actions .ct2-hero-buttons { justify-content: flex-start; }
}
@media (max-width: 767px) {
	.ct2-hero.ct2-hero-banner .ct2-hero-title { font-size: clamp(34px, 9vw, 48px); }
	.ct7-bn { padding-bottom: 32px !important; }
	.ct7-bn--nostrip { padding-bottom: 48px !important; }
	.ct7-bn-strip, .ct2-hero-banner.is-full .ct7-bn-strip { height: auto; min-height: 140px; }
	.ct2-hero-banner:not(.is-full) .ct7-bn-strip { height: 150px; }
}
