/* ============================================================
   Member Portal hero — templates/registration/member_portal.html
   Direction: institutional editorial. One deep maroon→navy field,
   large Thai display type, three entry cards in an asymmetric grid
   that straddle the field edge: sign-up cards stacked on the left,
   the KT30 registration card spanning both rows on the right.
   Selectors are scoped under .mp-; the custom properties below are
   --mp- prefixed and this sheet loads only on the member portal page.
   ============================================================ */

:root {
	--mp-maroon: #56282d;        /* brand (topbar top border) */
	--mp-maroon-deep: #2e1215;
	--mp-navy: #0f1f3e;
	--mp-blue: #066da8;
	--mp-sky: #1780dd;           /* existing .link-color */
	--mp-gold: #ffbe49;
	--mp-gold-ink: #7a5410;      /* gold for small text on light surfaces (≈6.5:1 on white) */
	--mp-card: #ffffff;
	--mp-ink: #1c1c1e;
	--mp-ink-soft: #585f69;
	--mp-line: rgba(255, 255, 255, 0.14);

	--mp-radius: 18px;
	--mp-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--mp-dur: 640ms;

	--mp-display: 'thaisanslite', 'Prompt', 'Sarabun', sans-serif;
}

/* ---------- field ----------
   The topbar is in normal flow at load (customjs.js only pins it with
   .sticky after scrolling), so the hero butts against it like the
   slider on home_member.html does. No clearance offset here. */
.mp-hero {
	position: relative;
	color: #fff;
	background:
		radial-gradient(60rem 28rem at 88% -10%, rgba(255, 190, 73, 0.22), transparent 60%),
		radial-gradient(40rem 24rem at -10% 110%, rgba(6, 109, 168, 0.35), transparent 65%),
		linear-gradient(118deg, var(--mp-maroon-deep) 0%, var(--mp-maroon) 42%, var(--mp-navy) 100%);
	padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) 0 8.5rem;
	overflow: hidden;
}
.mp-hero::before {
	/* fine diagonal ruling: texture without imagery */
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(
		-32deg,
		rgba(255, 255, 255, 0.045) 0 1px,
		transparent 1px 22px
	);
	pointer-events: none;
}
.mp-hero::after {
	/* thin gold rule that anchors the composition */
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--mp-gold), transparent 70%);
}

.mp-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: 1.5rem;
	align-items: end;
}
.mp-hero__copy { grid-column: 1 / span 8; }
.mp-hero__meta {
	grid-column: 10 / span 3;
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.72);
	border-left: 1px solid var(--mp-line);
	padding-left: 1.25rem;
}
.mp-hero__meta strong { color: #fff; display: block; font-weight: 600; }

/* Latin-only label: tracking is safe here, never on Thai text */
.mp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-size: 0.85rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mp-gold);
	margin-bottom: 1rem;
}
.mp-eyebrow::before {
	content: "";
	width: 2.25rem;
	height: 1px;
	background: var(--mp-gold);
}

.mp-hero__title {
	font-family: var(--mp-display);
	font-weight: 700;
	font-size: clamp(2.4rem, 1.2rem + 4.2vw, 4.6rem);
	line-height: 1.02;
	letter-spacing: -0.01em;
	margin: 0 0 1rem;
	text-wrap: balance;
	overflow-wrap: anywhere;
	line-break: loose;
}
.mp-hero__accent { color: var(--mp-gold); }
.mp-hero__lede {
	max-width: 44rem;
	font-size: clamp(1rem, 0.9rem + 0.45vw, 1.2rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.82);
	margin: 0;
	overflow-wrap: anywhere;
}

/* ---------- entry cards ----------
   Each card is an <article>; the heading holds the only <a>, whose
   ::after is stretched over the card so the whole surface is the
   click target while the accessible name stays short. */
.mp-entries {
	position: relative;
	z-index: 2;
	margin-top: -6.5rem;            /* overlap the field edge */
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-template-rows: auto auto;
	gap: 1.25rem;
}
.mp-card {
	/* heading link + eyebrow size, fluid and identical on all three cards */
	--mp-card-title-size: clamp(1.45rem, 1.05rem + 1.1vw, 2.05rem);
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	border-radius: var(--mp-radius);
	background: var(--mp-card);
	color: var(--mp-ink);
	padding: 1.75rem 1.75rem 1.5rem;
	box-shadow:
		0 1px 0 rgba(15, 31, 62, 0.06),
		0 18px 40px -22px rgba(15, 31, 62, 0.45);
	overflow: hidden;
	transition:
		transform 260ms var(--mp-ease),
		box-shadow 260ms var(--mp-ease);
}
/* The card is the only positioned ancestor of the stretched link overlay, so the
   whole card is the hit area. Decorative layers sit at z-index -1: inside the
   card's isolated stacking context that is above its background, below all text. */

.mp-card:hover,
.mp-card:focus-within {
	transform: translateY(-5px);
	box-shadow:
		0 1px 0 rgba(15, 31, 62, 0.06),
		0 30px 56px -24px rgba(15, 31, 62, 0.55);
}
.mp-card:focus-within {
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--mp-sky);
}
.mp-card::after {
	/* accent bar that grows on hover */
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 5px;
	height: 100%;
	z-index: -1;
	background: var(--mp-accent, var(--mp-blue));
	transition: width 260ms var(--mp-ease);
}
.mp-card:hover::after,
.mp-card:focus-within::after { width: 9px; }

.mp-card__link {
	color: inherit;
	text-decoration: none;
}
.mp-card__link:hover,
.mp-card__link:focus { color: inherit; text-decoration: none; }
.mp-card__link::after {
	/* stretched link: covers the card (nearest positioned ancestor), so the
	   whole surface is the click target; the anchor's cursor applies to it */
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.mp-card--primary {
	grid-column: 6 / span 7;
	grid-row: 1 / span 2;
	--mp-accent: var(--mp-gold);
	background:
		radial-gradient(28rem 18rem at 100% 100%, rgba(255, 190, 73, 0.16), transparent 60%),
		linear-gradient(160deg, #fff 0%, #fbf7f3 100%);
	min-height: 22rem;
	padding: 2.25rem 2.25rem 2rem;
}
.mp-card--primary .mp-card__eyebrow { color: var(--mp-gold-ink); }
.mp-card--primary .mp-card__title { text-wrap: balance; }
.mp-card--primary .mp-card__mark {
	position: absolute;
	z-index: -1;
	right: -3.5rem;
	bottom: -3.5rem;
	width: 19rem;
	height: 19rem;
	object-fit: contain;
	opacity: 0.09;
	filter: grayscale(1);
	transform: rotate(-8deg);
	transition: transform 700ms var(--mp-ease), opacity 400ms;
	pointer-events: none;
}
.mp-card--primary:hover .mp-card__mark {
	transform: rotate(-2deg) translate(-0.5rem, -0.5rem);
	opacity: 0.14;
}

.mp-card--thai      { grid-column: 1 / span 5; grid-row: 1; --mp-accent: var(--mp-blue); }
.mp-card--foreigner { grid-column: 1 / span 5; grid-row: 2; --mp-accent: var(--mp-maroon); }

/* bilingual Thai/Latin label: no tracking, no case transform; same size as the heading link */
.mp-card__eyebrow {
	font-family: var(--mp-display);
	font-size: var(--mp-card-title-size);
	line-height: 1.15;
	color: var(--mp-accent, var(--mp-blue));
	margin-bottom: 0.35rem;
	font-weight: 600;
	overflow-wrap: anywhere;
}
.mp-card__title {
	font-family: var(--mp-display);
	font-weight: 700;
	font-size: var(--mp-card-title-size);
	line-height: 1.12;
	margin: 0 0 0.25rem;
	color: var(--mp-navy);
	overflow-wrap: anywhere;
	line-break: loose;
}
.mp-card__sub {
	color: var(--mp-ink-soft);
	font-size: 0.95rem;
	margin: 0 0 1rem;
}
.mp-card__body {
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--mp-ink-soft);
	margin: 0 0 1.25rem;
	max-width: 30rem;
	overflow-wrap: anywhere;
}

.mp-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.4rem;
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	counter-reset: mp-step;
}
.mp-steps li {
	counter-increment: mp-step;
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.92rem;
	color: var(--mp-ink);
}
.mp-steps li::before {
	content: counter(mp-step);
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 999px;
	display: inline-grid;
	place-items: center;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--mp-navy);
	background: rgba(255, 190, 73, 0.35);
}

.mp-cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 700;
	color: var(--mp-navy);
}
.mp-cta .bi {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 999px;
	background: var(--mp-navy);
	color: #fff;
	font-size: 1.1rem;
	transition: transform 260ms var(--mp-ease), background 200ms;
}
.mp-card:hover .mp-cta .bi,
.mp-card:focus-within .mp-cta .bi {
	transform: translateX(4px);
	background: var(--mp-accent, var(--mp-blue));
}
.mp-card--primary .mp-cta {
	padding: 0.7rem 1.1rem 0.7rem 1.25rem;
	border-radius: 999px;
	background: var(--mp-navy);
	color: #fff;
	width: max-content;
}
.mp-card--primary .mp-cta .bi { background: var(--mp-gold); color: var(--mp-navy); }

.mp-card__signed {
	font-size: 0.85rem;
	color: var(--mp-ink-soft);
	margin: -0.5rem 0 1rem;
}

/* ---------- staged entrance ----------
   fill-mode "backwards" only: a "forwards"/"both" fill would keep
   transform:none applied after the run and defeat the hover lift. */
@keyframes mp-rise {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: none; }
}
.mp-hero__copy > *,
.mp-hero__meta,
.mp-card {
	animation: mp-rise var(--mp-dur) var(--mp-ease) backwards;
}
.mp-hero__copy > :nth-child(1) { animation-delay: 40ms; }
.mp-hero__copy > :nth-child(2) { animation-delay: 110ms; }
.mp-hero__copy > :nth-child(3) { animation-delay: 180ms; }
.mp-hero__meta                 { animation-delay: 240ms; }
.mp-card--thai                 { animation-delay: 300ms; }
.mp-card--foreigner            { animation-delay: 380ms; }
.mp-card--primary              { animation-delay: 460ms; }

@media (prefers-reduced-motion: reduce) {
	.mp-hero__copy > *, .mp-hero__meta, .mp-card { animation: none; }
	.mp-card, .mp-card::after, .mp-cta .bi, .mp-card--primary .mp-card__mark { transition: none; }
}

/* ---------- section below the cards ---------- */
.mp-news { margin-top: 3rem; }

/* ---------- responsive ---------- */
@media (max-width: 991.98px) {
	.mp-hero { padding-bottom: 7rem; }
	.mp-hero__copy { grid-column: 1 / -1; }
	.mp-hero__meta {
		grid-column: 1 / -1;
		border-left: 0;
		padding-left: 0;
		margin-top: 1.25rem;
		border-top: 1px solid var(--mp-line);
		padding-top: 1rem;
	}
	.mp-entries { grid-template-rows: none; margin-top: -5rem; }
	.mp-card--thai      { grid-column: 1 / span 6; grid-row: auto; }
	.mp-card--foreigner { grid-column: 7 / span 6; grid-row: auto; }
	.mp-card--primary   { grid-column: 1 / -1; grid-row: auto; min-height: 0; }
}
@media (max-width: 575.98px) {
	.mp-entries { gap: 0.9rem; margin-top: -4rem; }
	.mp-card { padding: 1.35rem 1.25rem 1.2rem; }
	.mp-card--primary { padding: 1.6rem 1.35rem 1.4rem; }
	.mp-card--thai, .mp-card--foreigner { grid-column: 1 / -1; }
	.mp-card--primary .mp-card__mark { width: 11rem; height: 11rem; right: -3rem; bottom: -3rem; opacity: 0.06; }
	.mp-steps { flex-direction: column; gap: 0.45rem; }
}