/* Janamax — About page (ported from the "Janamax About" design). Builds on home.css. */

body.jm { background: #050e14; }

.jm-about__intro {
	background: radial-gradient(100% 140% at 62% 0%, #10293a 0%, rgba(8, 25, 34, 0) 60%), #061219;
	border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* ---------- Founder section under the page head (template-parts/about-founder.php) ---------- */
.jm-founder__inner {
	display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 680px); justify-content: center; align-items: center;
	gap: clamp(32px, 5vw, 72px);
}
.jm-founder__photo { aspect-ratio: 791 / 753; border-radius: 14px; overflow: hidden; border-right: 1px solid var(--jm-accent); background: #0a1620; }
.jm .jm-founder__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jm-founder__body p { margin: 0 0 16px; font-size: 18px; line-height: 1.6; color: #93a7b1; text-wrap: pretty; }
.jm-founder__body p:first-child { color: #e6eef3; }
.jm .jm-founder__link {
	display: inline-flex; align-items: center; gap: 10px; margin-top: 8px;
	font-family: var(--jm-display); font-size: 16px; letter-spacing: 0.16em; color: #eef4f8; transition: color 0.2s ease;
}
.jm .jm-founder__link:hover { color: var(--jm-accent); }
.jm-founder__link svg { width: 24px; height: 24px; flex: none; }

/* Below 900px: photo on top of the text. */
@media (max-width: 899px) {
	.jm-founder__inner { grid-template-columns: minmax(0, 1fr); justify-items: start; }
	.jm-founder__photo { width: 100%; max-width: 440px; }
	.jm-founder__body p { font-size: 16px; }
}
/* Phones: the next section's own top padding is enough space below. */
@media (max-width: 699px) {
	.jm-founder .jm-section__inner { padding-bottom: 0; }
}

/* ---------- Projects lead ---------- */
.jm-about__lead { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.jm-about__lead .jm-title { margin: 0; }
.jm-about__lead p { margin: 0; max-width: 640px; font-size: 18px; line-height: 1.6; color: #93a7b1; text-wrap: pretty; }

/* ---------- Mindset / experience ---------- */
.jm-about__story { display: flex; flex-direction: column; gap: clamp(48px, 5vw, 72px); }
.jm-about__block { max-width: 1100px; margin: 0 auto; text-align: center; }
.jm-about__h {
	margin: 0; font-family: var(--jm-display); font-weight: 300; font-size: clamp(32px, 4vw, 52px);
	letter-spacing: 0.03em; line-height: 1.1; overflow-wrap: anywhere; text-wrap: balance;
}
.jm-about__text { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; margin-top: clamp(28px, 3vw, 44px); text-align: left; }
.jm-about__text p { margin: 0; max-width: 900px; font-size: 18px; line-height: 1.6; color: #93a7b1; text-wrap: pretty; }

/* Desktop: the two blocks side by side, left-aligned; the values grid spans both columns below. */
@media (min-width: 1100px) {
	.jm-about__story { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(48px, 5vw, 96px); row-gap: clamp(48px, 5vw, 72px); }
	.jm-about__block { max-width: none; margin: 0; text-align: left; }
	.jm-about__story .jm-values { grid-column: 1 / -1; }
}

/* ---------- Values ---------- */
.jm-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 20px; row-gap: 48px; margin-top: 12px; }
.jm-value { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 0 12px; text-align: center; min-width: 0; }
.jm-value .jm-tile { margin-bottom: 8px; }
.jm-tile__icon--value { width: 64px; height: 64px; display: block; overflow: visible; }
.jm-value__title { margin: 0; font-family: var(--jm-display); font-weight: 300; font-size: 20px; letter-spacing: 0.03em; text-transform: uppercase; overflow-wrap: anywhere; }
.jm-value p { margin: 0; max-width: 300px; font-size: 18px; line-height: 1.6; color: #93a7b1; text-wrap: pretty; }

@media (max-width: 1099px) {
	.jm-values { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 699px) {
	.jm-about__h { font-size: 32px; }
	.jm-values { column-gap: 14px; row-gap: 40px; }
	.jm-value { padding: 0; }
	.jm-tile__icon--value { width: 43px; height: 43px; }
	/* Keeps long single words such as "Manufacturability" on one line in the two-column grid. */
	.jm-value__title { font-size: clamp(13px, 4vw, 18px); letter-spacing: 0.01em; overflow-wrap: normal; }
}