/*
 * Mozhi & Miles — page sections (home patterns, ladder, founder, join).
 * Loaded after theme.css. Logical properties only.
 */

/* ---------- Utilities ---------- */

.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	block-size: 1px;
	inline-size: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	word-wrap: normal !important;
}

.mm-todo-inline {
	background: #fff1cc;
	color: var(--wp--preset--color--ink);
	border: 1.5px dashed var(--wp--preset--color--mustard);
	border-radius: 6px;
	padding: 0 0.3em;
	font-family: var(--wp--preset--font-family--lato);
	font-size: 0.9em;
}

.mm-arrow-link {
	font-weight: 700;
	text-decoration: none;
}

.mm-arrow-link::after {
	content: " →";
}

.mm-arrow-link:hover {
	text-decoration: underline;
}

.mm-chip {
	display: inline-block;
	padding: 0.2rem 0.7rem;
	border-radius: var(--wp--custom--radius--pill);
	background: color-mix(in srgb, var(--wp--preset--color--sage) 70%, #fff);
	color: var(--wp--preset--color--forest);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.5;
}

.mm-chip--soon {
	background: var(--wp--preset--color--mustard);
}

/* ---------- Sections ---------- */

.mm-main--home {
	padding-block: 0;
}

.mm-main--home > * {
	margin-block: 0;
}

.mm-section {
	padding-block: var(--wp--preset--spacing--60);
}

.mm-section--wash {
	background: color-mix(in srgb, var(--wp--preset--color--sage) 32%, var(--wp--preset--color--cream));
}

.mm-section__title {
	margin-block-end: var(--wp--preset--spacing--30);
}

.mm-section__script {
	display: block;
	font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
	font-weight: 600;
	line-height: 1.1;
	margin-block-start: 0.15rem;
}

.mm-section__intro {
	max-inline-size: 38rem;
	margin-inline: auto;
	font-size: var(--wp--preset--font-size--medium);
}

.mm-section .is-style-todo {
	max-inline-size: 46rem;
	margin-inline: auto;
	margin-block-start: var(--wp--preset--spacing--40);
}

/* ---------- Hero ---------- */

.mm-hero {
	position: relative;
	overflow: hidden;
	padding-block: clamp(3.5rem, 9vw, 6.5rem) 0;
	background:
		radial-gradient(ellipse 60% 45% at 18% 30%, color-mix(in srgb, var(--wp--preset--color--mint) 28%, transparent), transparent 70%),
		radial-gradient(ellipse 50% 40% at 85% 22%, color-mix(in srgb, var(--wp--preset--color--sage) 35%, transparent), transparent 70%),
		var(--wp--preset--color--cream);
}

.mm-hero > :not(.mm-hero__decor):not(.mm-hero__ground) {
	position: relative;
	z-index: 1;
}

.mm-hero__title {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 500;
	line-height: 1.08;
	margin-block-end: 0.5rem;
}

/* The banner draws this in coral; coral-deep keeps it readable (coral is 2.95:1 on cream). */
.mm-hero__script {
	display: block;
	margin-block-start: 0.1em;
	font-family: var(--wp--preset--font-family--script);
	font-size: 1.12em;
	font-weight: 600;
	color: var(--wp--preset--color--coral-deep);
}

.mm-hero__signoff {
	font-size: var(--wp--preset--font-size--medium);
	margin-block: 0.75rem 0;
}

.mm-hero .mm-heart-divider {
	margin-block: 1rem;
}

.mm-hero__lead {
	max-inline-size: 34rem;
	margin-inline: auto;
}

.mm-hero__ctas {
	gap: 0.75rem;
	margin-block-start: var(--wp--preset--spacing--40);
}

@media (max-width: 599px) {
	.mm-hero__ctas,
	.mm-hero__ctas .wp-block-button,
	.mm-hero__ctas .wp-block-button__link {
		inline-size: 100%;
	}
}

.mm-hero__decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.mm-hero__decor > * {
	position: absolute;
}

.mm-hero__decor img,
.mm-hero__ground img,
.mm-hero__decor svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.mm-hero__plane-trail {
	inset-block-start: 1.25rem;
	inset-inline-start: 0.5rem;
	inline-size: 110px;
	opacity: 0.85;
}

.mm-hero__clouds {
	inset-block-start: 1.75rem;
	inset-inline-end: -40px;
	inline-size: 150px;
	opacity: 0.8;
}

.mm-hero__jet {
	inset-block-start: 0.5rem;
	inset-inline-end: 0.75rem;
	inline-size: 60px;
}

.mm-hero__leaves {
	display: none;
	inset-block-start: 16%;
}

.mm-hero__leaves--start {
	inset-inline-start: 0;
	inline-size: 96px;
}

.mm-hero__leaves--end {
	inset-inline-end: 0;
	inline-size: 132px;
}

.mm-hero__ground {
	position: relative;
	block-size: clamp(120px, 17vw, 240px);
	margin-block-start: var(--wp--preset--spacing--50);
	pointer-events: none;
}

/* Full-bleed: escape the constrained layout (WordPress sets its margins with !important). */
.mm-hero > .mm-hero__decor {
	max-inline-size: none !important;
	margin: 0 !important;
}

.mm-hero > .mm-hero__ground {
	max-inline-size: none !important;
	margin-inline: calc(var(--wp--style--root--padding-left, 0px) * -1) calc(var(--wp--style--root--padding-right, 0px) * -1) !important;
}

.mm-hero__route {
	position: absolute;
	inset-inline: 5% 28%;
	inset-block-start: 0;
	block-size: 58%;
}

.mm-hero__pin {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: 24px;
}

.mm-hero__path {
	position: absolute;
	inset: 22% 0 0 14px;
}

.mm-hero__path svg {
	inline-size: 100%;
	block-size: 100%;
}

.mm-hero__pin svg {
	inline-size: 100%;
	block-size: auto;
}

.mm-hero__suitcase {
	position: absolute;
	inset-inline-end: 3%;
	inset-block-end: 20%;
	inline-size: clamp(140px, 26vw, 360px);
	z-index: 1;
}

.mm-hero__hills {
	position: absolute;
	inset-inline: 0;
	inset-block-end: -1px;
	block-size: 62%;
}

.mm-hero__hills svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

@media (min-width: 782px) {
	.mm-hero__plane-trail {
		inline-size: 200px;
		inset-block-start: 2.5rem;
		inset-inline-start: 11%;
	}

	.mm-hero__clouds {
		inline-size: 240px;
		inset-inline-end: 12%;
	}

	.mm-hero__jet {
		inline-size: 130px;
		inset-block-start: 4rem;
		inset-inline-end: 6%;
	}

	.mm-hero__leaves {
		display: block;
	}
}

/* ---------- Pillars (sit on the sage the hills settle into) ---------- */

.mm-pillars {
	background: var(--wp--preset--color--sage);
	padding-block-start: var(--wp--preset--spacing--40);
}

.mm-pillars__grid {
	display: grid;
	gap: 2.5rem 1.5rem;
	margin-block-start: var(--wp--preset--spacing--50);
}

@media (min-width: 700px) {
	.mm-pillars__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.mm-pillars__grid > * {
	margin: 0 !important;
}

.mm-pillar {
	text-align: center;
}

.mm-pillar__icon {
	display: flex;
	justify-content: center;
	block-size: 56px;
	margin-block-end: 0.75rem;
}

.mm-pillar__icon .mm-svg,
.mm-pillar__icon svg {
	block-size: 100%;
	inline-size: auto;
}

.mm-pillar__name {
	font-family: var(--wp--preset--font-family--lato);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	margin-block-end: 0.5rem;
}

.mm-pillar__verb {
	display: block;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	color: var(--wp--preset--color--ink);
}

.mm-pillar p {
	font-size: var(--wp--preset--font-size--small);
	margin-block-end: 0;
}

/* ---------- What's in a name ---------- */

.mm-name__map {
	position: relative;
	display: block;
	max-inline-size: 420px;
	margin-inline: auto;
}

/*
 * Places the founders have lived. --x/--y = the pin's tip, as % of the map (set in patterns/home-name.php).
 * Physical left/top on purpose: the map is a picture and doesn't mirror in a right-to-left layout.
 */
.mm-name__pin {
	position: absolute;
	left: var(--x);
	top: var(--y);
	inline-size: 6.5%;
	min-inline-size: 16px;
	transform: translate(-50%, -100%);
	filter: drop-shadow(0 1px 1px rgb(39 43 46 / 0.25));
}

.mm-name__pin svg {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

.mm-name__map img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* ---------- Sample strip ---------- */

.mm-samples__scroller {
	margin-block-start: var(--wp--preset--spacing--50);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--sage) transparent;
	padding-block: 0.75rem 1.25rem;
	padding-inline: 0.25rem;
}

.mm-samples__scroller:focus-visible {
	outline: 3px solid var(--wp--preset--color--forest);
	outline-offset: 2px;
}

.mm-samples__list {
	display: flex;
	gap: 1.25rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.mm-samples__item {
	flex: 0 0 min(66vw, 250px);
	scroll-snap-align: start;
}

@media (min-width: 1100px) {
	.mm-samples__scroller {
		overflow: visible;
	}

	.mm-samples__list {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}
}

.mm-page-card {
	margin: 0;
	background: var(--wp--preset--color--cream);
	padding: 12px;
	border-radius: var(--mm-card-radius);
	box-shadow: var(--wp--preset--shadow--card);
}

.mm-page-card img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: 6px;
}

.mm-page-card figcaption {
	padding: 0.75rem 0.25rem 0.25rem;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.mm-page-card__title {
	display: block;
	color: var(--wp--preset--color--forest);
}

.mm-page-card--tilt {
	max-inline-size: 320px;
	margin-inline: auto;
	rotate: -2deg;
}

.mm-samples__note {
	font-size: var(--wp--preset--font-size--small);
	margin-block-start: var(--wp--preset--spacing--30);
}

/* ---------- Learning ladder ---------- */

.mm-ladder__list {
	display: grid;
	gap: 1.25rem;
	list-style: none;
	margin-block: var(--wp--preset--spacing--50) 0;
	padding: 0;
}

@media (min-width: 640px) {
	.mm-ladder__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.mm-ladder__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1.75rem;
	}
}

.mm-tier {
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--cream);
	border-radius: var(--mm-card-radius);
	box-shadow: var(--wp--preset--shadow--card);
	overflow: hidden;
}

.mm-tier__media {
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 190px;
	padding: 1rem;
	background: color-mix(in srgb, var(--wp--preset--color--mint) 30%, var(--wp--preset--color--cream));
}

.mm-tier__media picture {
	display: contents;
}

.mm-tier__media img {
	display: block;
	block-size: 100%;
	inline-size: auto;
	max-inline-size: 100%;
	object-fit: contain;
	border-radius: 4px;
	box-shadow: var(--wp--preset--shadow--card);
}

.mm-tier__placeholder {
	display: flex;
	opacity: 0.55;
}

.mm-tier__placeholder svg {
	inline-size: 72px;
	block-size: auto;
}

.mm-tier__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.25rem 1.25rem 1.5rem;
}

.mm-tier__step {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--coral-deep);
}

.mm-tier__num {
	display: inline-grid;
	place-items: center;
	inline-size: 1.6rem;
	block-size: 1.6rem;
	border-radius: 50%;
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--white);
	letter-spacing: 0;
}

.mm-tier__title {
	font-size: var(--wp--preset--font-size--medium);
	margin-block: 0.6rem 0.4rem;
}

.mm-tier__text {
	font-size: var(--wp--preset--font-size--small);
	margin: 0;
}

.mm-tier__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-block: 0.9rem 1rem;
}

.mm-tier__link {
	margin-block-start: auto;
	font-weight: 700;
	text-decoration: none;
}

.mm-tier__link::after {
	content: " →";
}

.mm-tier__link:hover {
	text-decoration: underline;
}

/* ---------- Founder ---------- */

/* Portrait in a circle with the logo's mint ring. */
.mm-founder__photo {
	aspect-ratio: 1;
	max-inline-size: 280px;
	margin-inline: auto;
	padding: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--mint);
	box-shadow: var(--wp--preset--shadow--card);
}

.mm-founder__photo img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	border-radius: 50%;
}

.mm-founder__hello {
	font-family: var(--wp--preset--font-family--lora);
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.35;
	color: var(--wp--preset--color--forest);
}

.mm-founder .is-style-todo,
.mm-why .is-style-todo {
	margin-inline: 0;
}

/* ---------- Watch ---------- */

.mm-watch .mm-video {
	max-inline-size: 900px;
	margin-inline: auto;
}

.mm-watch .mm-video__poster {
	box-shadow: var(--wp--preset--shadow--lift);
}

/* ---------- Join the journey ---------- */

.mm-join__card {
	position: relative;
	background: color-mix(in srgb, var(--wp--preset--color--mint) 45%, var(--wp--preset--color--cream));
	border-radius: 24px;
	padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
}

.mm-join__pin {
	position: absolute;
	inset-block-start: -18px;
	inset-inline-start: 50%;
	translate: -50% 0;
	inline-size: 30px;
}

.mm-join__pin svg {
	inline-size: 100%;
	block-size: auto;
}

.mm-join .mm-form {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* ---------- Tamil word + "why it works" tips ---------- */

.mm-tamil {
	font-family: var(--wp--preset--font-family--tamil);
	color: var(--wp--preset--color--forest);
}

.mm-why__lead {
	font-size: var(--wp--preset--font-size--medium);
}

.mm-why__tips {
	padding-inline-start: 1.25rem;
}

.mm-why__tips li::marker {
	color: var(--wp--preset--color--coral);
}

/* Links on the mint "Join the journey" card: forest, not coral-deep (contrast). */
.mm-join__card a,
.mm-product-cta a:not(.wp-element-button) {
	color: var(--wp--preset--color--forest);
}