/* ==========================================================================
   The Spot by PanOxyl - homepage banner
   <1100px  : STACKED (navy text over yellow band). Matches the 1080x700 design
              at tablet widths; figures sit either side of a centered logo with
              heads poking up into the navy.
   >=1100px : SIDE-BY-SIDE. Logo + figures are a locked cluster pinned to the
              seam: spacing/sizes match the 1920x350 design and stop growing,
              so very wide screens just add empty yellow (left) and navy (right).
              Figures fill the full banner height; right-side text scales to fit.

   People + logo are positioned (absolute when stacked, flex when wide). The
   section keeps overflow:hidden, which clips only what leaves the section
   (mobile side-crop, top/bottom crop) while the in-section seam overlaps show.

   Tuning knobs are the clamp() values flagged "tune:".
   ========================================================================== */

.spot-banner {
	--spot-navy: #1f234f;
	--spot-yellow: #fac32b;
	--spot-on-dark: #ffffff;
	--spot-radius: 6px;

	position: relative;
	display: flex;
	flex-direction: column;          /* stacked: text over media */
	width: 100%;
	overflow: hidden;
	color: var(--spot-on-dark);
	font-family: inherit;
	line-height: 1.4;
}

/* ---- text panel (navy) ---------------------------------------------------- */
.spot-banner__content {
	order: 1;
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: clamp(0.5rem, 2vw, 1rem);
	padding: clamp(1.75rem, 6vw, 3rem) clamp(1.25rem, 5vw, 3.5rem);
	text-align: center;
	background: var(--spot-navy);
}

.spot-banner__overline {
	margin: 0;
	font-size: clamp(0.7rem, 1.6vw, 1rem);
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.spot-banner__header {
	margin: 0;
	font-size: clamp(1.75rem, 6vw, 2.9rem);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: .2rem;
}

.spot-banner__subtext {
	margin: 0;
	max-width: 46ch;
	font-size: clamp(0.9rem, 2.4vw, 1rem);
	opacity: 0.95;
}

.spot-banner__button {
	display: inline-block;
	margin-top: clamp(0.25rem, 1.5vw, 0.5rem);
	padding: 0.7em 1.6em;
	border: 2px solid var(--spot-on-dark);
	background: var(--spot-on-dark);
	color: var(--spot-navy);
	font-size: clamp(0.72rem, 1.6vw, 0.82rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none !important;
	transition: background-color 0.18s ease, color 0.18s ease;
}

.spot-banner__button:hover,
.spot-banner__button:focus-visible {
	background: transparent;
	color: var(--spot-on-dark);
}

.spot-banner__button:focus-visible {
	outline: 3px solid var(--spot-on-dark);
	outline-offset: 3px;
}

/* ---- media panel (yellow) : STACKED base --------------------------------- */
/* Children are absolutely positioned; the panel defines the yellow band. */
.spot-banner__media {
	order: 2;
	position: relative;
	min-height: clamp(150px, 29vw, 330px);   /* tune: stacked yellow band height */
	background: var(--spot-yellow);
}

.spot-banner__logo {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);        /* stacked: centered, in front */
	z-index: 4;
	width: clamp(118px, 20vw, 215px);         /* tune: stacked logo size (bigger on narrow phones) */
	margin: 0;
}

.spot-banner__logo svg {
	display: block;
	width: 100%;
	height: auto;
}

.spot-banner__person {
	position: absolute;
	bottom: 0;
	z-index: 1;
	width: auto;
	height: clamp(200px, 38vw, 430px);        /* tune: stacked figure size (taller than band = heads poke up) */
}

/* slight inset keeps the figures close to the centered logo (cropped only a touch) */
.spot-banner__person--left  { left:  clamp(-1.5rem, -2vw, 0rem); }
.spot-banner__person--right { right: clamp(-1.5rem, -2vw, 0rem); }

/* ---- wide: side-by-side, locked cluster ---------------------------------- */
@media (min-width: 1100px) {
	.spot-banner {
		flex-direction: row;
		height: clamp(200px, 18.23vw, 350px);  /* locks at 350 (1920x350 ratio) */
	}

	.spot-banner__content {
		order: 2;
		flex: 1 1 50%;
		align-items: flex-start;
		justify-content: center;
		text-align: left;
		gap: clamp(0.4rem, 1vw, 0.85rem);
		padding: clamp(0.75rem, 2vw, 2rem) clamp(2rem, 4vw, 4rem);
	}

	/* right-side type scales down on narrower desktops so it fits the fixed height */
	.spot-banner__header   { font-size: clamp(1.5rem, 2.6vw, 2.9rem); }
	.spot-banner__overline { font-size: clamp(0.66rem, 0.85vw, 1rem); }
	.spot-banner__subtext  { font-size: clamp(0.8rem, 1.15vw, 1rem); max-width: 40ch; }
	.spot-banner__button   { font-size: clamp(0.66rem, 0.8vw, 0.82rem); }

	/* media becomes the cluster container, pinned to the seam (right edge) */
	.spot-banner__media {
		order: 1;
		flex: 1 1 50%;
		display: flex;
		justify-content: flex-end;          /* cluster hugs the seam; empty yellow grows left */
		align-items: flex-end;              /* figures bottom-anchored, fill to top (cropped) */
		min-height: 0;
		padding: 0;
		overflow: visible;
	}

	.spot-banner__logo {
		order: 1;
		position: static;
		transform: none;
		align-self: center;                 /* vertically centered in the band */
		flex: 0 0 auto;
		width: auto;
		height: clamp(116px, 10.63vw, 204px);                  /* tune: ~58% of band height */
		margin: 0 clamp(0.75rem, 0.98vw, 38px) 0 0;            /* tune: logo->figure gap (design = 38px) */
		z-index: 1;
	}

	.spot-banner__person {
		position: static;
		bottom: auto;
		flex: 0 0 auto;
		height: clamp(224px, 20.42vw, 392px);                  /* tune: figure height (fills banner) */
	}

	/* woman: in front, overlapping the man */
	.spot-banner__person--left {
		order: 2;
		left: auto;
		z-index: 3;
		margin-right: clamp(-10.25rem, -9.5vw, -6rem);         /* tune: woman/man overlap */
	}

	/* man: behind woman, shoulder bleeds past the seam into the navy */
	.spot-banner__person--right {
		order: 3;
		right: auto;
		z-index: 2;
		transform: translateX(clamp(0.5rem, 3.56vw, 38px));    /* tune: shoulder bleed into navy */
	}
}

/* respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.spot-banner__button { transition: none; }
}

@media (min-width: 1100px) and (max-width:1699px){
    .spot-banner__logo {
        width: auto;
        height: auto;
        margin: 0 clamp(0.75rem, 1vw, 38px) 0 0;
    }
    .spot-banner__logo svg {
        margin-left: auto;
        max-width: 16vw;
    }
    .spot-banner__content {
        gap: clamp(0.4rem, .65vw, 0.85rem);
        padding: clamp(0.75rem, 2.5vw, 2rem) clamp(2rem, 4vw, 4rem);
    }
}


@media (max-width:540px){
    .spot-banner__logo {
    width: clamp(144px, 20vw, 215px);
    max-width: 36vw;
    }
    .spot-banner__logo svg {
    }
    .spot-banner__content {
        padding: clamp(3.5rem, 6vw, 3rem) clamp(1.25rem, 5vw, 3.5rem);
        gap: clamp(0.5rem, 2.5vw, 1rem);
    }
}
@media (min-width: 1920px) {
    .spot-banner__content {
        padding: clamp(0.75rem, 2vw, 2rem) clamp(3rem, 5vw, 6rem);
    }
}