/*
 * **********************************************************************
 * Mahjongg Section Home Styles
 *
 * Styles for the .mah-home wp:html block on page 8 (/mahjongg/, the
 * Mahjongg section's own index page since the /mahjongg/ restructure).
 * Loaded only on is_page(8) via inc/home.php.
 *
 * @version  1.9.0
 * @updated  2026-08-21
 * **********************************************************************
 */

/* =============================================================================
   Outer container — rounded corners
   ============================================================================= */

.mah-home {
	border-radius: var(--mah-radius-xl);
	overflow: hidden; /* clips all child sections to the rounded corners */
}

/* =============================================================================
   Images — rounded corners on all section images except the floating jester
   ============================================================================= */

.mah-home img:not(.hp-jester) {
	border-radius: var(--mah-radius-lg);
}

/* =============================================================================
   Shared section utilities
   ============================================================================= */

.mah-home .hp-section {
	padding: 80px 24px;
}

.mah-home .hp-section--center {
	text-align: center;
}

.mah-home .hp-inner {
	margin-left: auto;
	margin-right: auto;
}

/* =============================================================================
   Hero
   ============================================================================= */

/* ── Shell ────────────────────────────────────────────────────────────────── */

.mah-home .hp-hero {
	background-color: var(--mah-header-bg);
	padding: 100px 24px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

/* ── Floating jester ──────────────────────────────────────────────────────── */

.mah-home .hp-jester {
	position: absolute;
	width: 100px;
	height: auto;
	z-index: 10;
	pointer-events: none;
	transition: left 2.5s cubic-bezier(0.45, 0.05, 0.55, 0.95),
	            top  2.5s cubic-bezier(0.45, 0.05, 0.55, 0.95);
}

@media (max-width: 1024px) {
	.mah-home .hp-jester {
		display: none;
	}
}

.mah-home .hp-hero__inner {
	max-width: 860px;
	margin: 0 auto;
}

/* ── SEO heading (visually hidden, readable by search engines) ────────────── */

.mah-home .hp-hero__seo-title {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ── Heading ──────────────────────────────────────────────────────────────── */

.mah-home .hp-hero__title {
	color: var(--mah-white);
	font-size: clamp(32px, 4.5vw, 54px);
	font-weight: 700;
	line-height: 1.3;
	margin: 0 0 24px;
	/* 3-column grid: left-dash | word | right-dash — aligns hyphens across all rows */
	display: grid !important;
	grid-template-columns: 1fr max-content 1fr;
	column-gap: 0.35em;
	align-items: baseline;
}

/* Left dashes (children 1, 4, 7) right-align into col 1 */
.mah-home .hp-hero__title span:nth-child(3n+1) {
	text-align: right;
	white-space: nowrap;
}

/* Words (children 2, 5, 8) stay centred in col 2 */
.mah-home .hp-hero__title span:nth-child(3n+2) {
	text-align: center;
	white-space: nowrap;
}

/* Right dashes (children 3, 6, 9) left-align into col 3 */
.mah-home .hp-hero__title span:nth-child(3n) {
	text-align: left;
	white-space: nowrap;
}

.mah-home .hp-hero__word--yellow  { color: #FFE566; }
.mah-home .hp-hero__word--pink    { color: #8B0000; }
.mah-home .hp-hero__dash--heart   { color: #8B0000; }

/* ── Sub-heading ──────────────────────────────────────────────────────────── */

.mah-home .hp-hero__lead {
	color: rgba(255, 255, 255, 0.92);
	font-size: 20px;
	line-height: 1.7;
	margin: 0 0 48px;
}

/* ── Button row ───────────────────────────────────────────────────────────── */

.mah-home .hp-btn-row {
	display: flex;
	gap: var(--mah-space-4);
	justify-content: center;
	flex-wrap: wrap;
}

/* ── Buttons ──────────────────────────────────────────────────────────────── */

.mah-home .hp-btn {
	display: inline-block;
	text-decoration: none;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1.5px;
	padding: 14px 36px;
	border-radius: var(--mah-radius-md);
}

.mah-home .hp-btn--primary {
	background: var(--btn-secondary-bg);
	color: var(--btn-secondary-text);
}

.mah-home .hp-btn--primary:hover   { color: var(--btn-secondary-hover-text); }
.mah-home .hp-btn--primary:visited { color: var(--btn-secondary-visited); }

.mah-home .hp-btn--outline {
	background: transparent;
	color: var(--btn-clear-text);
	font-weight: 600;
	border: 2px solid var(--btn-clear-border);
}

.mah-home .hp-btn--outline:hover   { color: var(--btn-clear-hover-text); }
.mah-home .hp-btn--outline:visited { color: var(--btn-clear-visited); }

/* =============================================================================
   Welcome
   ============================================================================= */

.mah-home .hp-welcome {
	background-color: #f8f4ee;
	padding: 80px 24px;
	text-align: center;
}

.mah-home .hp-welcome__inner {
	max-width: 1600px;
	margin: 0 auto;
}

.mah-home .hp-welcome__title {
	color: var(--mah-header-bg);
	font-size: 34px;
	font-weight: 700;
	margin: 0 0 20px;
}

/* ── Banner — live text over the gallery-room photo ─────────────────────────
   Colours are pixel-sampled from the source artwork (same approach as
   MAH_MENU_FORECOLOR in functions.php) so the type reads as part of the
   photo rather than a caption laid on top of it.

   `aspect-ratio` on the photo box (with no in-flow children — the text
   lives in an absolutely-positioned overlay) means its height is *always*
   derived from its width, so `background-size: cover` never has extra
   height to crop into. The whole photo stays visible at every viewport;
   the overlay's padding is in %, so the text sits at the same relative
   spot on the photo regardless of how small the photo itself gets.

   Type is sized in `cqw` (percent of the *photo's own* width) rather than
   `vw` (percent of the viewport) — the two only match when the photo is
   full-bleed. Here it sits inside a padded, max-width-capped column, so a
   vw-based size stayed too large exactly when the photo itself shrank the
   most (e.g. inside a narrower phone viewport), overflowing past the
   photo's short mobile height. cqw keeps text and photo scaling together
   at every width. `container-type` below is what makes cqw resolve. */
.mah-home .hp-welcome__banner {
	/* background-image is set inline from PHP (mah_img()) rather than here,
	   so the URL stays same-origin instead of a hardcoded host. */
	position: relative;
	background-size: cover;
	background-position: center;
	background-color: #d7e4d4;
	aspect-ratio: 2035 / 773;
	border-radius: var(--mah-radius-lg);
	margin: 0 auto 20px;
	container-type: inline-size;
}

.mah-home .hp-welcome__banner-text {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	padding: 6% 8% 6% 15%;
	text-align: left;
}

/* Hebrew page content (dir="rtl" on .mah-home) mirrors the banner text
   block onto the right edge instead of overriding a full layout flip. */
.mah-home[dir="rtl"] .hp-welcome__banner-text {
	align-items: flex-end;
	padding: 6% 15% 6% 8%;
	text-align: right;
}

.mah-home .hp-welcome__banner-title {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin: 0;
	line-height: 1.05;
}

.mah-home[dir="rtl"] .hp-welcome__banner-title {
	align-items: flex-end;
}

/* Nudged up via transform (not margin) so it gains breathing room from
   "Mahjongg" below without shifting "Mahjongg" — a layout-affecting
   change here (margin, padding) would shift every sibling under it too,
   since transform is the one length-changing property that doesn't. */
.mah-home .hp-welcome__eyebrow {
	font-family: var(--mah-font-display);
	font-size: 24px;
	font-size: clamp(11px, 2.2cqw, 34px);
	color: var(--mah-green-darkest);
	transform: translateY(-12px);
	transform: translateY(-0.9cqw);
}

.mah-home .hp-welcome__script {
	font-family: var(--mah-font-script);
	font-weight: 700;
	font-size: 73px;
	font-size: clamp(22px, 7.23cqw, 112px);
	color: var(--mah-green-darkest);
	line-height: 1.1;
}

/* Taller line-height on desktop only — Alex Brush's swashes need more room
   to breathe at the size it renders there; at mobile/tablet sizes 1.1
   already has enough clearance and going taller would only add dead
   space above/below the word. */
@media (min-width: 1025px) {
	.mah-home .hp-welcome__script {
		line-height: 1.3;
	}
}

.mah-home .hp-welcome__word {
	font-family: var(--mah-font-display);
	font-weight: 700;
	font-size: 63px;
	font-size: clamp(20px, 6.14cqw, 95px);
	color: var(--mah-green-darkest);
}

.mah-home .hp-welcome__tagline {
	font-family: var(--mah-font-display);
	font-size: 20px;
	font-size: clamp(10px, 1.73cqw, 27px);
	letter-spacing: 0.02em;
	color: var(--mah-green-darkest);
	margin: 20px 0 6px;
	margin: clamp(9px, 3.61cqw, 56px) 0 6px;
}

.mah-home .hp-welcome__subtagline {
	font-family: var(--mah-font-script);
	font-weight: 400;
	font-size: 22px;
	font-size: clamp(11px, 2.12cqw, 33px);
	color: #7d0c40;
	margin: 0;
}

/* Hidden below desktop — at tablet/mobile widths the photo is short enough
   that a fourth line (on top of the eyebrow/script/word/tagline stack)
   crowds the layout more than the line is worth. */
@media (max-width: 1024px) {
	.mah-home .hp-welcome__subtagline {
		display: none;
	}
}

/* Mobile drops the tagline too — at this width even three lines fill the
   photo's short aspect ratio; a phone screen has no room for a fourth. */
@media (max-width: 640px) {
	.mah-home .hp-welcome__tagline {
		display: none;
	}

	/* With the tagline/subtagline gone, centering the title alone left it
	   sitting in the vertical middle of the (now taglineless) block —
	   pull it up toward the top of the photo instead. */
	.mah-home .hp-welcome__banner-text {
		justify-content: flex-start;
	}
}

.mah-home .hp-welcome__rule {
	border: none;
	border-top: 2px solid var(--mah-header-bg);
	margin: 0 auto 28px;
	width: 80px;
}

.mah-home .hp-welcome__body {
	max-width: 760px;
	font-size: 18px;
	line-height: 1.85;
	color: var(--mah-grey-700);
	margin: 0 auto 20px;
	text-align: left;
}

.mah-home[dir="rtl"] .hp-welcome__body {
	text-align: right;
}

.mah-home .hp-welcome__body:last-child {
	margin-bottom: 0;
}

/* =============================================================================
   Feature cards
   ============================================================================= */

.mah-home .hp-cards {
	background-color: var(--mah-white);
	padding: 80px 24px;
}

.mah-home .hp-cards__inner {
	max-width: 1100px;
	margin: 0 auto;
}

.mah-home .hp-cards__title {
	color: var(--mah-green-dark);
	font-size: 34px;
	font-weight: 700;
	text-align: center;
	margin: 0 0 48px;
}

.mah-home .hp-cards__title-img {
	display: block;
	margin: 0 auto 48px;
	max-width: 960px;
	width: 100%;
	height: auto;
}

@media (max-width: 640px) {
	.mah-home .hp-cards__title-img {
		max-width: 90vw;
	}
}

.mah-home .hp-cards__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 28px;
}

.mah-home .hp-card {
	background: var(--mah-white);
	border-top: 4px solid var(--mah-header-bg);
	border-radius: var(--mah-radius-md);
	padding: 36px 28px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
	display: flex;
	flex-direction: column;
	position: relative;
}

.mah-home .hp-card__icon {
	font-size: 42px;
	margin: 0 0 16px;
	line-height: 1;
}

.mah-home .hp-card__title {
	color: var(--mah-green-dark);
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 12px;
}

.mah-home .hp-card__body {
	font-size: 15px;
	line-height: 1.8;
	color: var(--mah-grey-500);
	margin: 0 0 28px;
	flex: 1;
}

.mah-home .hp-card__btn {
	display: inline-block;
	background: var(--btn-primary-bg);
	color: var(--btn-primary-text);
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	padding: 10px 20px;
	border-radius: var(--mah-radius-md);
	align-self: flex-start;
}

.mah-home .hp-card__btn:hover   { color: var(--btn-primary-hover-text); }
.mah-home .hp-card__btn:visited { color: var(--btn-primary-visited); }

/* ── Card title row (title + Students Only pill) ──────────────────────────── */

.mah-home .hp-card__title-row {
	margin-bottom: 12px;
}

.mah-home .hp-card__title-row .hp-card__title {
	margin-bottom: 0;
}

.mah-home .hp-card__pill {
	background: #7a1a7a;
	border-radius: var(--mah-radius-pill);
	color: var(--mah-white);
	font-size: var(--mah-font-3xs);
	font-weight: 700;
	letter-spacing: 0.07em;
	padding: 3px 9px;
	position: absolute;
	right: 20px;
	text-transform: uppercase;
	top: 20px;
	white-space: nowrap;
}

/* ── Locked (non-member) button state ────────────────────────────────────── */

.mah-home .hp-card__btn--locked {
	background: var(--mah-grey-400);
	cursor: not-allowed;
	opacity: 0.75;
	pointer-events: none;
}

/* =============================================================================
   Why section
   ============================================================================= */

.mah-home .hp-why {
	background-color: var(--mah-green-dark);
	padding: 80px 24px;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.mah-home .hp-why__inner {
	max-width: 960px;
	margin: 0 auto;
}

.mah-home .hp-why__title {
	color: var(--mah-white);
	font-size: 34px;
	font-weight: 700;
	margin: 0 0 28px;
}

.mah-home .hp-why__title-img {
	display: block;
	margin: 0 auto 28px;
	max-width: 100%;
	height: auto;
}

@media (max-width: 640px) {
	.mah-home .hp-why__title-img {
		max-width: 90vw;
	}
}

.mah-home .hp-why__body {
	max-width: 760px;
	color: rgba(255, 255, 255, 0.9);
	font-size: 18px;
	line-height: 1.85;
	margin: 0 auto 20px;
	text-align: left;
}

.mah-home .hp-why__body:last-child {
	margin-bottom: 0;
}

/* =============================================================================
   Resources
   ============================================================================= */

.mah-home .hp-resources {
	background-color: var(--mah-white);
	padding: 80px 24px;
}

.mah-home .hp-resources__inner {
	max-width: 960px;
	margin: 0 auto;
}

.mah-home .hp-resources__title {
	color: var(--mah-header-bg);
	font-size: 34px;
	font-weight: 700;
	text-align: center;
	margin: 0 0 16px;
}

.mah-home .hp-resources__title-img {
	display: block;
	margin: 0 auto 16px;
	max-width: 100%;
	height: auto;
}

@media (max-width: 640px) {
	.mah-home .hp-resources__title-img {
		max-width: 90vw;
	}
}

.mah-home .hp-resources__lead {
	font-size: 17px;
	line-height: 1.7;
	text-align: center;
	color: var(--mah-grey-500);
	margin: 0 0 48px;
}

.mah-home .hp-resources__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 340px));
	gap: var(--mah-space-8);
	justify-content: center;
}

.mah-home .hp-resources__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 28px;
}

.mah-home .hp-resources__item-title {
	display: block;
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 6px;
}

.mah-home .hp-resources__item-title a {
	color: inherit;
}

.mah-home .hp-resources__item-desc {
	margin: 0;
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--mah-grey-500);
	font-weight: 400;
}

/* =============================================================================
   Testimonials
   ============================================================================= */

.mah-home .hp-testimonials {
	background: #f8f4ee;
	padding: 80px 24px;
	text-align: center;
}

.mah-home .hp-testimonials__inner {
	max-width: 960px;
	margin: 0 auto;
}

.mah-home .hp-testimonials__heading-img {
	display: block;
	margin: 0 auto 40px;
	max-width: 100%;
	height: auto;
}

@media (max-width: 640px) {
	.mah-home .hp-testimonials__heading-img {
		max-width: 90vw;
	}
}

.mah-home .hp-testimonials__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	text-align: left;
}

.mah-home .hp-quote {
	background: var(--mah-white);
	border-radius: var(--mah-radius-lg);
	box-shadow: 0 2px 16px rgba(0, 0, 0, .07);
	padding: 1.75rem;
	margin: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.mah-home .hp-quote__text {
	font-size: var(--mah-font-base-sm);
	line-height: 1.75;
	color: var(--mah-grey-600);
	font-style: italic;
	margin: 0 0 1.25rem;
}

.mah-home .hp-quote__footer {
	border-top: 1px solid var(--mah-grey-200);
	padding-top: .85rem;
}

.mah-home .hp-quote__name {
	font-size: var(--mah-font-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--mah-header-bg);
	font-style: normal;
}

@media (max-width: 768px) {
	.mah-home .hp-testimonials__grid {
		grid-template-columns: 1fr;
	}
}

/* =============================================================================
   CTA
   ============================================================================= */

.mah-home .hp-cta {
	background-color: var(--mah-header-bg);
	padding: 80px 24px;
	text-align: center;
}

.mah-home .hp-cta__inner {
	max-width: 620px;
	margin: 0 auto;
}

.mah-home .hp-cta__title {
	color: var(--mah-white);
	font-size: 40px;
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 20px;
}

.mah-home .hp-cta__lead {
	color: rgba(255, 255, 255, 0.9);
	font-size: 18px;
	line-height: 1.7;
	margin: 0 0 40px;
}

.mah-home .hp-cta__btn {
	display: inline-block;
	background: var(--btn-secondary-bg);
	color: var(--btn-secondary-text);
	text-decoration: none;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 1.5px;
	padding: 16px 44px;
	border-radius: var(--mah-radius-md);
}

.mah-home .hp-cta__btn:hover   { color: var(--btn-secondary-hover-text); }
.mah-home .hp-cta__btn:visited { color: var(--btn-secondary-visited); }

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width: 640px) {
	.mah-home .hp-resources__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}

	.mah-home .hp-cards__title-img,
	.mah-home .hp-why__title-img,
	.mah-home .hp-resources__title-img,
	.mah-home .hp-testimonials__heading-img {
		padding-right: 20px;
	}
}

/* =============================================================================
   Reduced motion
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
	.mah-home .hp-jester {
		transition: none;
	}
}