/* ============================================================
   PAGE — Login  (Figma node 0:1514, design width 1920)
   One two-column module (Container 0:1562, 1589w, gap 100,
   vertically centred): LEFT = "Students Testimonials" (heading +
   intro + one testimonial card with avatar/name/Read-More + a
   prev/next carousel), RIGHT = a white Login form card (email,
   password w/ eye-toggle, Remember Me, Login, OR divider, Google
   login, Sign Up). All values come from docs/login/figma-audit.json
   (section 0:1562) via docs/login/blueprint-container.txt.
   Prefix: .login-  ·  new tokens in docs/login/token-delta.txt
   (--color-or-text #98989A, --color-divider #E4E4E7, --radius-xs 4px,
   --radius-input 10px) — each used with a literal fallback so this
   file stands alone until Wave B merges them into style.css :root.
   Inter (used for "OR" + Sign Up) is a new webfont for this page —
   Wave B enqueues it; the static preview loads it via <link>.

   REUSE (nothing here redefines a shared class):
   - :root tokens + fonts from style.css; grey-field technique + the
     card/input/#FCFCFD/#F1F1F3 visual language match the siblings.
   - Header (0:1625) / Footer (0:1515) are shared chrome (verbatim).
   ============================================================ */

/* The module sits on the light-grey field (#F7F7F8) between the white
   shared header and white shared footer — same :has() scoping the
   siblings use, so only this page's stack is affected. */
.site-main:has(.login-auth) {
	background: var(--color-surface); /* #F7F7F8 */
}

/* Shared footer carries a 142px top-margin from the home rhythm; cancel it
   here so the module's own 150px bottom margin is the exact block→footer gap. */
.site-main:has(.login-auth) + .site-footer {
	margin-top: 0;
}

/* ---------- Module wrapper (0:1562) ----------
   header-bottom(119) → container-top(274) = 155px (same header→first-section
   gap as the home hero). container-bottom(1172) → footer-top(1322) = 150px.
   Inner row is 1589 wide (169/162 side gutters at 1920), centred; the two
   columns are vertically centred (align-items:center) — the 593-tall left
   column sits centred against the 898-tall login card. */
.login-auth {
	width: 100%;
	margin-top: 155px;
	margin-bottom: 150px;
}

.login-auth__inner {
	width: calc(100% - 48px);
	max-width: 1589px;
	margin-inline: auto;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 100px;
}

/* ============================================================
   LEFT COLUMN — Students Testimonials  (Sub Container 0:1563)
   FILL width, VERTICAL, gap 80. Children are full-width.
   ============================================================ */
.login-testimonials {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 80px;
}

/* Text Container 0:1564 (V gap 6) */
.login-testimonials__intro {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.login-testimonials__title {
	font-family: var(--font-body);
	font-size: 38px;
	line-height: 57px;
	font-weight: 500;
	color: var(--color-heading); /* #262626 */
}

.login-testimonials__text {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: var(--color-text-muted); /* #59595A */
}

/* Container 0:1567 (V gap 30) — card + carousel nav */
.login-testimonials__carousel {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* ----- Testimonial card 0:1568 (FILL, #FFF, 1px #F1F1F3, cr12, clipped) ----- */
.login-testimonial {
	width: 100%;
	display: flex;
	flex-direction: column;
	background: var(--color-white); /* #FFFFFF */
	box-shadow: inset 0 0 0 1px var(--color-border); /* #F1F1F3 */
	border-radius: var(--radius-lg); /* 12px */
	overflow: hidden;
}

/* Quote row 0:1569 (H, pad 50, gap 10) */
.login-testimonial__quote-row {
	display: flex;
	flex-direction: row;
	gap: 10px;
	padding: 50px;
}

.login-testimonial__quote {
	flex: 1 1 0;
	min-width: 0;
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: var(--color-text); /* #4C4C4D */
}

/* Line 0:1571 — full-width 1px divider (#F1F1F3) */
.login-testimonial__divider {
	width: 100%;
	height: 1px;
	background: var(--color-border); /* #F1F1F3 */
}

/* Author bar 0:1572 (H, pad 30/50, align center, #FCFCFD) */
.login-testimonial__author {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	padding: 30px 50px;
	background: var(--color-card); /* #FCFCFD */
}

/* Sub Container 0:1573 (FILL, H gap 15, align center) — pushes button right */
.login-testimonial__author-info {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 15px;
}

.login-testimonial__avatar {
	flex: none;
	width: 60px;
	height: 60px;
	border-radius: var(--radius-md); /* 8px */
	object-fit: cover;
}

.login-testimonial__name {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 600;
	color: var(--color-text-dark); /* #333333 */
}

/* Read More button 0:1576 (HUG, pad 18/24, gap 8, #F7F7F8, 1px #F1F1F3, cr8) */
.login-testimonial__more {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 18px 24px;
	background: var(--color-surface); /* #F7F7F8 */
	box-shadow: inset 0 0 0 1px var(--color-border); /* #F1F1F3 */
	border: 0;
	border-radius: var(--radius-md); /* 8px */
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 500;
	color: var(--color-heading); /* #262626 */
	white-space: nowrap;
	cursor: pointer;
	transition: opacity var(--transition-fast);
}

.login-testimonial__more:hover {
	opacity: 0.85;
}

/* Carousel nav 0:1578 (FILL, H, justify flex-end, gap 15) */
.login-testimonial__nav {
	width: 100%;
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	align-items: center;
	gap: 15px;
}

/* Arrow buttons 0:1579 / 0:1582 (62x62, #FFF, 1px #F1F1F3, cr8, pad 14) */
.login-testimonial__arrow {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	padding: 14px;
	background: var(--color-white); /* #FFFFFF */
	box-shadow: inset 0 0 0 1px var(--color-border); /* #F1F1F3 */
	border: 0;
	border-radius: var(--radius-md); /* 8px */
	cursor: pointer;
	transition: opacity var(--transition-fast);
}

.login-testimonial__arrow:hover {
	opacity: 0.85;
}

.login-testimonial__arrow img {
	display: block;
	width: 34px;
	height: 34px;
}

/* ============================================================
   RIGHT COLUMN — Login form card  (Login 0:1585)
   FIXED 660, VERTICAL, pad 50, gap 50, #FFF, cr12. Inner 560.
   ============================================================ */
.login-card {
	flex: none;
	width: 660px;
	display: flex;
	flex-direction: column;
	gap: 50px;
	padding: 50px;
	background: var(--color-white); /* #FFFFFF */
	border-radius: var(--radius-lg); /* 12px */
}

/* Text Container 0:1586 (V gap 12, centred) */
.login-card__head {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: center;
}

.login-card__title {
	font-family: var(--font-body);
	font-size: 48px;
	line-height: 60.72px;
	font-weight: 600;
	color: var(--color-heading); /* #262626 */
}

.login-card__subtitle {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 22.77px;
	font-weight: 400;
	color: var(--color-text); /* #4C4C4D */
}

/* Form 0:1589 (V gap 30) */
.login-form {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* Container 0:1590 (V gap 24) — field stack + Login button */
.login-form__fields {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* Email / Password field 0:1591 / 0:1595 (V gap 14) */
.login-field {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.login-field__label {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 500;
	color: var(--color-heading); /* #262626 */
}

/* Input face 0:1593 (h75, #FCFCFD, 1px #F1F1F3, cr10, pad 24) */
.login-input {
	box-sizing: border-box;
	width: 100%;
	height: 75px;
	padding: 0 24px;
	background: var(--color-card); /* #FCFCFD */
	box-shadow: inset 0 0 0 1px var(--color-border); /* #F1F1F3 */
	border: 0;
	border-radius: var(--radius-input, 10px);
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: var(--color-heading); /* #262626 (typed value) */
}

.login-input::placeholder {
	color: var(--color-text-light); /* #656567 */
	opacity: 1;
}

.login-input:focus {
	outline: none;
	box-shadow: inset 0 0 0 1px var(--color-text-light);
}

/* Password face 0:1597 — same face, holds a bare input + eye toggle (gap 10) */
.login-input-wrap {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 75px;
	padding: 0 24px;
	background: var(--color-card); /* #FCFCFD */
	box-shadow: inset 0 0 0 1px var(--color-border); /* #F1F1F3 */
	border-radius: var(--radius-input, 10px);
}

.login-input-wrap:focus-within {
	box-shadow: inset 0 0 0 1px var(--color-text-light);
}

/* the bare <input> inside the wrap — drops the face styling, keeps type */
.login-input--bare {
	flex: 1 1 0;
	min-width: 0;
	height: auto;
	padding: 0;
	background: transparent;
	box-shadow: none;
	border-radius: 0;
}

.login-input--bare:focus {
	box-shadow: none;
}

/* Eye toggle 0:1599 (24x24, #4C4C4D icon) */
.login-eye {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.login-eye img {
	display: block;
	width: 24px;
	height: 24px;
}

/* Forgot Password 0:1601 (BVP 400 18/27, #4C4C4D, right-aligned) */
.login-field__forgot {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: var(--color-text); /* #4C4C4D */
	text-align: right;
}

/* Remember Me 0:1602 (H gap 10, align center) */
.login-remember {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

/* Checkbox 0:1603 (30x30, #F7F7F8, 1px #F1F1F3, cr4, UNCHECKED) */
.login-remember__box {
	appearance: none;
	-webkit-appearance: none;
	flex: none;
	width: 30px;
	height: 30px;
	margin: 0;
	background: var(--color-surface); /* #F7F7F8 */
	box-shadow: inset 0 0 0 1px var(--color-border); /* #F1F1F3 */
	border: 0;
	border-radius: var(--radius-xs, 4px);
	cursor: pointer;
}

.login-remember__box:checked {
	background: var(--color-primary); /* #FF9500 (functional; design ships unchecked) */
}

.login-remember__label {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: var(--color-text-light); /* #656567 */
	cursor: pointer;
}

/* Login button 0:1607 (FILL, #FF9500, cr10, pad 18/20 -> h63) */
.login-submit {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px 20px;
	background: var(--color-primary); /* #FF9500 */
	border: 0;
	border-radius: var(--radius-input, 10px);
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 500;
	color: var(--color-white); /* #FFFFFF */
	cursor: pointer;
	transition: opacity var(--transition-fast);
}

.login-submit:hover {
	opacity: 0.9;
}

/* OR divider 0:1609 (H gap 12, center) */
.login-or {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

.login-or__line {
	flex: 1 1 0;
	height: 1px;
	background: var(--color-divider, #E4E4E7);
}

.login-or__text {
	font-family: "Inter", system-ui, sans-serif;
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: var(--color-or-text, #98989A);
}

/* Google button 0:1613 (FILL, #F7F7F8, 1px #F1F1F3, cr10, pad 20/24, gap 14 -> h70) */
.login-google {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 20px 24px;
	background: var(--color-surface); /* #F7F7F8 */
	box-shadow: inset 0 0 0 1px var(--color-border); /* #F1F1F3 */
	border: 0;
	border-radius: var(--radius-input, 10px);
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 27px;
	font-weight: 500;
	color: var(--color-heading); /* #262626 */
	cursor: pointer;
	transition: opacity var(--transition-fast);
}

.login-google:hover {
	opacity: 0.9;
}

.login-google img {
	display: block;
	width: 30px;
	height: 30px;
}

/* Sign Up 0:1620 (H center gap 6) */
.login-signup {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 6px;
}

.login-signup__text {
	font-family: "Inter", system-ui, sans-serif;
	font-size: 18px;
	line-height: 27px;
	font-weight: 400;
	color: var(--color-heading); /* #262626 */
}

/* "Sign Up" segment — Medium 500, underlined (0:1621 style override) */
.login-signup__cta {
	font-weight: 500;
	text-decoration: underline;
}

.login-signup__arrow {
	display: block;
	width: 24px;
	height: 24px;
}

/* ============================================================
   RESPONSIVE — page-scoped `.login-` rules only. Breakpoints mirror
   the sibling pages (1024 first shift, 768/480 proportional). Shared
   chrome (nav -> hamburger, footer stacking) is handled by main.css at
   the same breakpoints — nothing here touches it. No Figma frame exists
   below 1920, so narrow values are derived (same scale as siblings).
   The 1920 -> ~1024 desktop zone already flexes: the left column is FILL
   and the inner row is width calc(100% - 48px), so no @media is needed
   until the FIXED 660 card + testimonials no longer share a row.
   ============================================================ */

/* ---------- TABLET  max-width: 1024px ---------- */
@media (max-width: 1024px) {
	/* The FIXED 660 login card + FILL testimonials no longer fit side by
	   side — stack the two columns; each takes the full inner width. */
	.login-auth__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 60px;
	}

	.login-card {
		width: 100%;
	}
}

/* ---------- MOBILE  max-width: 768px ---------- */
@media (max-width: 768px) {
	/* Tighten the section-to-section rhythm for phone height. */
	.login-auth {
		margin-top: 100px;
		margin-bottom: 100px;
	}

	/* Shrink the 50px card padding + 50px inner gap for narrow width. */
	.login-card {
		padding: 40px;
		gap: 40px;
	}

	/* Proportional type scale-down (no Figma mobile frame). */
	.login-card__title {
		font-size: 38px;
		line-height: 48px;
	}

	.login-testimonials {
		gap: 60px;
	}

	.login-testimonials__title {
		font-size: 30px;
		line-height: 44px;
	}

	/* Card quote/author padding eases in from 50 -> 30. */
	.login-testimonial__quote-row {
		padding: 30px;
	}

	.login-testimonial__author {
		padding: 24px 30px;
	}
}

/* ---------- SMALL MOBILE  max-width: 480px ---------- */
@media (max-width: 480px) {
	.login-auth {
		margin-top: 80px;
		margin-bottom: 80px;
	}

	.login-card {
		padding: 24px;
		gap: 32px;
	}

	.login-card__title {
		font-size: 32px;
		line-height: 40px;
	}

	.login-input,
	.login-input-wrap {
		height: 64px;
		padding-inline: 18px;
	}

	/* Author bar: the avatar + name + Read More get tight — stack the
	   Read More button below the avatar/name row so nothing gets squeezed. */
	.login-testimonial__author {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.login-testimonial__author-info {
		flex: 0 1 auto;
		width: 100%;
	}

	.login-testimonial__quote-row {
		padding: 24px;
	}
}