/*
 * CEO message (template-parts/ceo-message.php).
 *
 * The section padding and two-column grid are the About Us section's
 * .home-about rules (assets/css/home-about-labs.css); this file is the photo
 * pair and the letter beside it. Plain CSS, outside the frozen Tailwind build,
 * like the files around it.
 */

/* Wider photo column, so the overlapping pair has room. */
@media (min-width: 1024px) {
	.ceo-msg__grid {
		grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
		gap: 4.5rem;
	}
}

/* ---------------------------------------------------------------------------
 * Photos: the institute photo from the top-left corner, the CEO's portrait
 * overlapping its lower-right corner and hanging below it. The box keeps its
 * own proportions so the pair scales as one at every width.
 * ------------------------------------------------------------------------ */

.ceo-msg {
	/* The portrait's frame matches the section ground, so it reads as a cut-out. */
	--ceo-frame: #FFFFFF;
}

.ceo-msg.bg-background-alt {
	--ceo-frame: #F8FAFC;
}

.ceo-msg__media {
	position: relative;
	width: 100%;
	max-width: 36rem;
	aspect-ratio: 26 / 25;
}

@media (min-width: 1024px) {
	.ceo-msg__media {
		max-width: none;
	}
}

.ceo-msg__main,
.ceo-msg__small {
	position: absolute;
	margin: 0;
	overflow: hidden;
	background: #E2E8F0;
}

.ceo-msg__main {
	top: 0;
	left: 0;
	width: 80%;
	height: 80%;
	border-radius: 0.5rem;
}

.ceo-msg__small {
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 39%;
	height: 57%;
	border: 8px solid var(--ceo-frame);
	border-radius: 0.75rem;
	box-shadow: 0 24px 44px -26px rgb(15 23 42 / 0.45);
}

.ceo-msg__main img,
.ceo-msg__small img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A portrait: keep the face in frame. */
.ceo-msg__small img {
	object-position: center top;
}

.ceo-msg__placeholder {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
	color: #94A3B8;
	font-size: 4rem;
}

.ceo-msg__small .ceo-msg__placeholder {
	font-size: 3rem;
}

/* Flipped: photos on the right from lg up, the pair mirrored so the portrait
   overlaps toward the text. Below lg the photos stay on top. */
.ceo-msg--flip .ceo-msg__main {
	right: 0;
	left: auto;
}

.ceo-msg--flip .ceo-msg__small {
	right: auto;
	left: 0;
}

@media (min-width: 1024px) {
	.ceo-msg--flip .ceo-msg__media {
		order: 2;
	}
}

/* ---------------------------------------------------------------------------
 * The letter: small heading over a short rule, title, message, sign-off.
 * ------------------------------------------------------------------------ */

.ceo-msg__tag {
	display: block;
	color: #4F46E5;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}

.ceo-msg__tag::after {
	content: '';
	display: block;
	width: 2.5rem;
	height: 2px;
	margin-top: 0.75rem;
	border-radius: 2px;
	background: linear-gradient(90deg, #4F46E5, #06B6D4);
}

.ceo-msg__title {
	margin: 1.25rem 0 0;
	color: #0F172A;
	font-size: 1.85rem;
	font-weight: 600;
	line-height: 1.25;
	text-wrap: balance;
}

@media (min-width: 768px) {
	.ceo-msg__title {
		font-size: 2.35rem;
	}
}

.ceo-msg__letter {
	margin: 1.4rem 0 0;
}

.ceo-msg__text {
	margin: 0;
}

.ceo-msg__text p {
	margin: 0 0 1rem;
	color: #64748B;
	font-size: 0.975rem;
	line-height: 1.8;
	text-wrap: pretty;
}

.ceo-msg__text p:last-child {
	margin-bottom: 0;
}

/* The line worth remembering: a shade darker and heavier, no box. */
.ceo-msg__text .ceo-msg__highlight {
	color: #334155;
	font-weight: 600;
}

/* Signature, then the name and role under it. */
.ceo-msg__sign-off {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-top: 1.75rem;
}

.ceo-msg__sign {
	display: block;
}

.ceo-msg__sign-img {
	display: block;
	width: auto;
	max-width: 12rem;
	height: 3.25rem;
	object-fit: contain;
	object-position: left bottom;
}

/* Only used without an uploaded signature: the name in a handwriting face,
   loaded with this file on the About page. */
.ceo-msg__sign-text {
	display: block;
	padding: 0 0.75rem 0 0.1rem;
	color: #4F46E5;
	font-family: 'Mrs Saint Delafield', 'Segoe Script', cursive;
	font-size: 3rem;
	font-weight: 400;
	line-height: 1.1;
	white-space: nowrap;
}

.ceo-msg__name {
	margin-top: 0.5rem;
	color: #0F172A;
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.3;
}

.ceo-msg__role {
	margin-top: 0.15rem;
	color: #64748B;
	font-size: 0.85rem;
	font-weight: 500;
}

/*
 * Write-on: the script in the template adds .is-signing (hidden) and then
 * .is-signed once the signature is in view. The ink uncovers left to right
 * like a pen stroke.
 */
/* Both ends reach past the box: script capitals swing out to the left of
   their own line box, and a 100% inset alone would leave that swash showing. */
.ceo-msg.is-signing .ceo-msg__sign {
	clip-path: inset(-15% 125% -15% -25%);
}

.ceo-msg.is-signed .ceo-msg__sign {
	clip-path: inset(-15% -10% -15% -25%);
	transition: clip-path 1.6s cubic-bezier(0.6, 0, 0.3, 1) 0.2s;
}