/**
 * /ru/olympiad-call/ — the Telegram request page.
 *
 * Loads on top of schools.css for the design tokens and the button; everything
 * else here, because this page shares no section with the landings and pulling
 * their sheets in would cost more than it saves. The page renders no site header
 * and no footer, so the logo is placed by the template itself.
 *
 * The brief that shapes every rule below: the form is visible on the first
 * screen of a phone without scrolling. So the offer above it is short, the type
 * scale is restrained on small screens, and nothing decorative competes for
 * vertical space.
 *
 * @package Robo9
 */

.oc-page {
	margin: 0;
	background: var(--sl-white, #fff);
	color: var(--sl-black, #101014);
	font-family: "Manrope", system-ui, sans-serif;
}

.oc-wrap {
	width: 100%;
	max-width: 1120px;
	margin: 0 auto;
	padding-inline: 20px;
}

/* ---- Screen 1 -------------------------------------------------------------- */

/* The page is shorter than a screen, so it is centred in one rather than left
   hanging under the top edge with the fold empty beneath it. The hero takes the
   free height and centres inside it; the seller line stays pinned at the bottom,
   where a footer would be. svh, not vh: on a phone vh is the tallest the
   viewport ever gets, which puts the form under the browser chrome. */
.oc-main {
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	flex-direction: column;
}

.oc-hero {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	padding: 28px 0 24px;
}

.oc-hero > .oc-wrap {
	width: 100%;
}

.oc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: start;
}

.oc-brand {
	display: inline-block;
	margin-bottom: 20px;
}

.oc-brand img {
	display: block;
	height: 34px;
	width: auto;
}

.oc-h1 {
	font-family: "Space Grotesk", "Manrope", sans-serif;
	font-size: clamp(1.6rem, 3.4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.12;
	margin: 0 0 12px;
}

.oc-sub {
	font-size: 1.02rem;
	color: var(--sl-muted, #6b7280);
	margin: 0 0 20px;
}

/* The qualifier. Carries a little more weight than the subtitle above it —
   it is the line that decides whether the reader should fill the form in. */
.oc-scope {
	margin: -10px 0 18px;
	font-size: 0.93rem;
	font-weight: 600;
	line-height: 1.45;
	color: var(--sl-black, #101014);
}

.oc-gets {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: grid;
	gap: 10px;
}

.oc-gets li {
	position: relative;
	padding-left: 22px;
	font-size: 0.97rem;
	line-height: 1.45;
}

.oc-gets li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 8px;
	height: 8px;
	background: var(--sl-black, #101014);
}

.oc-who {
	margin: 0 0 8px;
	font-size: 0.97rem;
	font-weight: 600;
}

.oc-fine {
	margin: 0;
	font-size: 0.87rem;
	color: var(--sl-muted, #6b7280);
}

/* ---- The form -------------------------------------------------------------- */

.oc-form__note {
	margin: 12px 0 0;
	font-size: 0.85rem;
	color: var(--sl-muted, #6b7280);
}

/* The seeded markup carries the site's form classes; only the shell needs
   adjusting, so the fields keep looking like every other form on the site. */
.oc-form .wpcf7 form > div:first-child {
	max-width: none;
}

/* CF7 prints its verdict box on every render and fills it only on submit; the
   site's form styles give it a background, so an empty one reads as a broken
   element sitting under the button. */
.oc-form .wpcf7-response-output:empty {
	display: none;
}

.oc-more {
	margin: 0;
	font-size: 0.93rem;
}

.oc-more a {
	color: var(--sl-black, #101014);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Seller details -------------------------------------------------------- */

/* Stands in for the footer this page does not render. Quiet by design: it is
   there to satisfy the disclosure rule and to be findable, not to be read. */
.oc-legal {
	padding: 0 0 32px;
}

.oc-legal p {
	margin: 0;
	font-size: 0.82rem;
	color: var(--sl-muted, #6b7280);
}

.oc-legal a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Thanks ---------------------------------------------------------------- */

.oc-thanks {
	max-width: 640px;
}

/* ---- Mobile: the whole point ----------------------------------------------- */

@media (max-width: 860px) {
	.oc-grid {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	/* Once the form is taller than the screen, centring would push its first
	   field under the fold — the one thing the layout must never do. */
	.oc-main {
		min-height: 0;
	}

	.oc-hero {
		display: block;
		padding: 18px 0 20px;
	}

	/* Trimmed so the form's first field clears the fold on a phone: the three
	   promises stay (they are the offer) but everything around them tightens. */
	.oc-brand {
		margin-bottom: 12px;
	}

	.oc-brand img {
		height: 28px;
	}

	.oc-sub {
		margin-bottom: 14px;
		font-size: 0.95rem;
	}

	.oc-gets {
		margin-bottom: 14px;
		gap: 8px;
	}

	.oc-gets li {
		font-size: 0.92rem;
	}

	.oc-who,
	.oc-fine {
		font-size: 0.85rem;
	}
}