/*
 * What the partner sections share, over the band and the head they take from
 * the investor sections: the band that fills a window, and the buttons.
 *
 * Read from cp-all-designer css/app.css:304-340 (.btn), 350-352 (.sec),
 * 385-402 (.sec--rhythm, .sec--flow, .sec--close), 2830 (the window's height
 * handed back) and 3084-3096 (.jb .sec__head--wide).
 */

/* app.css:350-352 — one band, one screen: what stands in it is centred.
   min-height, so a band that outgrows the window takes the room it needs.
   app.css:2830 hands the height back at 1024 and below. */
@media (min-width: 1025px) {
	[data-custom-partner-screen] {
		display: flex;
		flex-direction: column;
		justify-content: center;
		min-height: 100vh;
	}
}

/* app.css:903, 3094 — the author's own line breaks close up below the wide tier */
@media (max-width: 1024px) {
	[data-custom-partner-band] [data-custom-investor-title] br,
	[data-custom-partner-band] [data-custom-investor-intro] br {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* A button — app.css:304-320                                          */
/* ------------------------------------------------------------------ */

[data-custom-investor-band] [data-custom-partner-button] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	gap: 12px;                             /* app.css:305 measures 11px */
	margin: 0;
	border-width: 2px;                     /* app.css:307 measures 1.5px */
	border-style: solid;
	font-family: inherit;
	font-style: normal;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	cursor: pointer;
	appearance: none;
	transition: color 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            background-color 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            box-shadow 250ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* words with nowhere to go are not a press */
[data-custom-investor-band] span[data-custom-partner-button] {
	cursor: default;
}

[data-custom-investor-band] [data-custom-partner-button="navy"] {
	--custom-press-ink: var(--custom-partner-navy-ink, #FFFFFF);
	--custom-press-ground: var(--custom-partner-navy-ground, #16418C);
	--custom-press-edge: var(--custom-partner-navy-edge, #16418C);
}

[data-custom-investor-band] [data-custom-partner-button="white"] {
	--custom-press-ink: var(--custom-partner-white-ink, #16418C);
	--custom-press-ground: var(--custom-partner-white-ground, #FFFFFF);
	--custom-press-edge: var(--custom-partner-white-edge, #FFFFFF);
}

[data-custom-investor-band] [data-custom-partner-button="ghost"] {
	--custom-press-ink: var(--custom-partner-ghost-ink, #FFFFFF);
	--custom-press-ground: var(--custom-partner-ghost-ground, rgba(255, 255, 255, 0.06));
	--custom-press-edge: var(--custom-partner-ghost-edge, rgba(255, 255, 255, 0.42));
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);           /* app.css:317 */
}

[data-custom-investor-band] [data-custom-partner-button="outline"] {
	--custom-press-ink: var(--custom-partner-outline-ink, #16418C);
	--custom-press-ground: var(--custom-partner-outline-ground, rgba(255, 255, 255, 0));
	--custom-press-edge: var(--custom-partner-outline-edge, #E2E8F0);
}

[data-custom-investor-band] [data-custom-partner-button="red"] {
	--custom-press-ink: var(--custom-partner-red-ink, #FFFFFF);
	--custom-press-ground: var(--custom-partner-red-ground, #CE2929);
	--custom-press-edge: var(--custom-partner-red-edge, #CE2929);
}

/* reached: each kind takes its own second set — heavy enough to outweigh the
   one answer the base gives every state */
[data-custom-investor-band] a[data-custom-partner-button="navy"]:hover,
[data-custom-investor-band] button[data-custom-partner-button="navy"]:hover {
	--custom-press-ink: var(--custom-partner-navy-ink-on, #FFFFFF);
	--custom-press-ground: var(--custom-partner-navy-ground-on, #50A3D5);
	--custom-press-edge: var(--custom-partner-navy-edge-on, #50A3D5);
	--custom-press-shadow: 0 14px 30px rgba(80, 163, 213, 0.3);   /* app.css:312 */
	transform: translateY(-2px);
}

[data-custom-investor-band] a[data-custom-partner-button="white"]:hover,
[data-custom-investor-band] button[data-custom-partner-button="white"]:hover {
	--custom-press-ink: var(--custom-partner-white-ink-on, #50A3D5);
	--custom-press-ground: var(--custom-partner-white-ground-on, #FFFFFF);
	--custom-press-edge: var(--custom-partner-white-edge-on, #FFFFFF);
	--custom-press-shadow: 0 34px 80px -20px rgba(22, 65, 140, 0.3);   /* --sh-lg, app.css:147 */
	transform: translateY(-2px);
}

[data-custom-investor-band] a[data-custom-partner-button="red"]:hover,
[data-custom-investor-band] button[data-custom-partner-button="red"]:hover {
	--custom-press-ink: var(--custom-partner-red-ink-on, #FFFFFF);
	--custom-press-ground: var(--custom-partner-red-ground-on, #6B170C);
	--custom-press-edge: var(--custom-partner-red-edge-on, #6B170C);
	--custom-press-shadow: 0 14px 30px rgba(206, 41, 41, 0.34);   /* app.css:329 */
	transform: translateY(-2px);
}

[data-custom-investor-band] a[data-custom-partner-button="ghost"]:hover,
[data-custom-investor-band] button[data-custom-partner-button="ghost"]:hover {
	--custom-press-ink: var(--custom-partner-ghost-ink-on, #FFFFFF);
	--custom-press-ground: var(--custom-partner-ghost-ground-on, rgba(255, 255, 255, 0.18));
	--custom-press-edge: var(--custom-partner-ghost-edge-on, #FFFFFF);
}

[data-custom-investor-band] a[data-custom-partner-button="outline"]:hover,
[data-custom-investor-band] button[data-custom-partner-button="outline"]:hover {
	--custom-press-ink: var(--custom-partner-outline-ink-on, #FFFFFF);
	--custom-press-ground: var(--custom-partner-outline-ground-on, #16418C);
	--custom-press-edge: var(--custom-partner-outline-edge-on, #16418C);
}

/* On a phone a button is as wide as what it stands in, and words longer than
   that take a second line: the design's own longest label overruns its padding
   at this width, which is a repair and not a change of design. */
@media (max-width: 767px) {
	[data-custom-investor-band] [data-custom-partner-button] {
		min-width: 0;
		max-width: 100%;
		text-align: center;
		white-space: normal;
	}
}

[data-custom-investor-band] [data-custom-partner-button]:focus-visible {
	outline: 2px solid #50A3D5;
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	[data-custom-investor-band] [data-custom-partner-button] {
		transition: none;
	}
	[data-custom-investor-band] a[data-custom-partner-button]:hover,
	[data-custom-investor-band] button[data-custom-partner-button]:hover {
		transform: none;
	}
}