/*
 * **********************************************************************
 * Landing Page Styles
 *
 * Full editorial redesign of the site root (/): a full-screen intro,
 * three large photo/text panels (Play Mahjongg / Visit the Gallery /
 * Eat & Drink), a Google reviews widget (Trustindex), and a shared
 * visit/hours/events/contact section.
 * Loaded only on is_front_page() via inc/landing.php.
 *
 * Uses CLAUDE.md's standard fixed tiles.webp page background (see
 * .mah-landing-page::before below) everywhere except the hero, which
 * stays fully opaque behind its own art/sculpture photo collage.
 * Otherwise departs from the site's usual bright-green/card-based
 * language — this page's job is to present the physical venue as a
 * considered destination, not to teach the game, so it gets its own
 * quieter, gallery-toned identity layered on top. Reuses the site's
 * existing type families
 * (Playfair Display / Source Sans 3 / Alex Brush — see fonts.css) but
 * with its own color and scale tokens, scoped under .mg-landing so
 * nothing here leaks onto the rest of the site.
 *
 * @version  2.17.0
 * @updated  2026-08-27
 * **********************************************************************
 */

/* =============================================================================
   Tokens — scoped to this page only
   ============================================================================= */

.mg-landing {
	--mg-ink:        #1b1f1a;
	--mg-parchment:  #f4efe4;
	--mg-paper:      #fffdf8;
	--mg-forest:     #24402f;
	--mg-forest-deep:#16281d;
	--mg-clay:       #b5652f;
	--mg-gold:       #c9a54a;
	--mg-line:       rgba(27, 31, 26, 0.14);
	--mg-line-light: rgba(255, 253, 248, 0.28);

	color: var(--mg-ink);
}

/* Standard fixed tiles background (CLAUDE.md convention) — sits behind
   every section. The panels and Visit block below paint their own
   opaque backgrounds over it as usual; the hero has none, so the
   pattern shows through there, dimmed by .mg-hero__scrim. */
.mah-landing-page::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url('https://mahjartspace.com/wp-content/uploads/2026/08/tiles.webp');
	background-repeat: repeat;
	background-size: auto;
	opacity: 0.5;
	z-index: -1;
	pointer-events: none;
}

/* Kadence wraps page content in a boxed, padded, radius'd container —
   this page needs full-bleed sections, so strip all of that. */
.mah-landing-page .content-bg {
	background: transparent;
	padding: 0;
	border-radius: 0;
	max-width: none;
}
.mah-landing-page .entry-content-wrap {
	padding: 0;
	max-width: none;
}
.mah-landing-page .entry-title,
.mah-landing-page .entry-hero-container-inner {
	display: none;
}

/* Kadence's #primary carries a fixed 80px margin-top (its default
   spacing for a title area) whether or not a title actually renders
   there — with the title hidden above, that just leaves an empty gap
   of the tiled page background between the nav and the hero. Zero it
   so the hero sits flush under the header. */
.mah-landing-page #primary {
	margin-top: 0;
}

.mg-landing * {
	box-sizing: border-box;
}

.mg-landing a {
	color: inherit;
}

/* =============================================================================
   Hero — restrained, full-screen introduction
   ============================================================================= */

/* 100vh alone ignores the 80px site nav sitting in normal flow right
   above this section, so the hero (and the collage grid filling it)
   always overflowed the actual viewport by exactly 80px — a small
   sliver at 100% zoom, but a much bigger fraction of the shrunken
   effective viewport at higher browser zoom, cutting off progressively
   more of the grid's bottom row. Subtracting the nav's own (fixed,
   consistent across every breakpoint) height fixes it at any zoom. */
.mg-hero {
	position: relative;
	min-height: calc(100vh - 80px);
	min-height: calc(100svh - 80px);
	display: flex;
	align-items: flex-start;
	overflow: hidden;
	background: var(--mg-ink);
}

/* The WordPress admin bar (logged-in users only) adds its own fixed
   strip above the page that the 80px above doesn't know about —
   account for it too so admins previewing the page see the grid fit
   exactly as well as a logged-out visitor does. Matches WP core's own
   admin-bar breakpoint (46px at <=782px, 32px above it). */
body.admin-bar .mg-hero {
	min-height: calc(100vh - 80px - 32px);
	min-height: calc(100svh - 80px - 32px);
}
@media (max-width: 782px) {
	body.admin-bar .mg-hero {
		min-height: calc(100vh - 80px - 46px);
		min-height: calc(100svh - 80px - 46px);
	}
}

/* A random sample of gallery art/sculpture photos, tiled as one collage —
   stands in for a single hero photo so the intro reads as "the gallery"
   rather than any one piece. Fully opaque — this is the one section that
   does NOT show the page's fixed tiles background through it.
   Grid shape (columns/rows for desktop/tablet/phone) below is just the
   factory default — Appearance -> Site Configuration -> Landing Page
   overrides all three via inline CSS injected at wp_head. */
.mg-hero__collage {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 2px;
	background: var(--mg-ink);
}

.mg-hero__collage img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Grid items default to min-width/min-height:auto, which lets a
	   tall/narrow photo's intrinsic aspect ratio refuse to shrink below
	   its own content size — blowing its row/column out past its fair
	   1fr share (clipped from view by .mg-hero's overflow:hidden, so it
	   reads as the grid not "fitting" the hero, worse with fewer rows/
	   columns since each one's fair share is bigger relative to any one
	   photo's intrinsic size). Zero both so every image actually shrinks
	   to its assigned cell instead of the reverse. */
	min-width: 0;
	min-height: 0;
}

/* 3 columns x 2 rows is tuned for landscape/wide viewports. On a
   portrait viewport that same grid makes each cell far taller than
   wide, so object-fit: cover crops in hard and every tile reads as an
   overzoomed detail — so every non-landscape case below switches to 2
   columns. The 2-column switch is written as one shared rule so it
   isn't repeated per breakpoint; only row count and image count vary
   below. min-width:1025px on the portrait leg keeps it mutually
   exclusive with the <=1024px tablet/phone rule beneath it (a portrait
   monitor wider than 1024px is the only case that still lands here —
   every real tablet/phone is <=1024px and gets that rule instead), so
   there's never a same-specificity tie for the cascade to resolve by
   source order alone. */
@media (max-width: 1024px), (orientation: portrait) and (min-width: 1025px) {
	.mg-hero__collage {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Portrait viewports wider than the tablet/phone breakpoint below (e.g.
   a portrait-oriented monitor): keep 3 rows so cells stay closer to
   square instead of over-cropping. */
@media (orientation: portrait) and (min-width: 1025px) {
	.mg-hero__collage {
		grid-template-rows: repeat(3, 1fr);
	}
}

/* Tablets and phones (<=1024px, either orientation): 6 tiles reads as
   visual noise at this scale, so drop to the first 4 photos in a 2x2
   grid instead of reflowing all 6. */
@media (max-width: 1024px) {
	.mg-hero__collage {
		grid-template-rows: repeat(2, 1fr);
	}
	.mg-hero__collage img:nth-child(n + 5) {
		display: none;
	}
}

.mg-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(27, 31, 26, 0.2) 0%,
		rgba(27, 31, 26, 0.1) 38%,
		rgba(27, 31, 26, 0.55) 100%
	);
}

/* Sits within the collage's first row rather than pinned to the
   hero's bottom — padding-top keeps the title clear of the nav bar
   without pushing it down into row two. */
.mg-hero__content {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
	padding: clamp(72px, 13vh, 140px) 32px 0;
	text-align: center;
	color: var(--mg-paper);
	animation: mg-fade-up 1.1s ease-out both;
}

/* Triple-rule frame around the title — outer/inner lines match, the
   middle line is thicker, classic picture-frame proportions. Only the
   outermost layer paints the darkening fill; the nested layers stay
   transparent so it shows through evenly, including in the gaps
   between rules. Large radius carries through all three, shrinking
   ring to ring so the corners stay concentric.
   Border colors and the fill's color/opacity below are just factory
   defaults — Appearance -> Site Configuration -> Landing Page overrides
   all of them via inline CSS injected at wp_head. */
.mg-hero__frame--outer {
	display: inline-block;
	margin: 0 auto;
	border: 2px solid var(--mg-paper);
	border-radius: 56px;
	padding: 7px;
	background: color-mix(in srgb, var(--mg-forest-deep) 60%, transparent);
}

.mg-hero__frame--middle {
	border: 6px solid var(--mg-paper);
	border-radius: 48px;
	padding: 7px;
}

.mg-hero__frame--inner {
	border: 2px solid var(--mg-paper);
	border-radius: 40px;
	padding: clamp(32px, 5vw, 56px) clamp(40px, 7vw, 84px);
}

.mg-hero__title {
	font-family: var(--mah-font-display);
	font-weight: 500;
	/* Floor matches the narrow-phone value once used only in the 560px
	   override below — using one clamp() everywhere keeps the curve
	   monotonic, so narrowing the viewport never makes the title jump
	   larger the way two different clamp() floors did at their
	   boundary. */
	font-size: clamp(2.35rem, 8vw, 6.75rem);
	line-height: 1.02;
	letter-spacing: -0.01em;
	margin: 0;
	color: var(--mg-paper);
	/* Layered shadow — a tight pass for edge definition against the busy
	   collage, then two softer, larger passes so the title reads as
	   lifted off the image rather than flat on top of it. */
	text-shadow:
		0 2px 4px rgba(27, 31, 26, 0.5),
		0 8px 20px rgba(27, 31, 26, 0.4),
		0 22px 48px rgba(16, 26, 19, 0.45);
}

.mg-hero__title .mg-lead {
	display: block;
	font-size: 0.65em;
	letter-spacing: 0.04em;
}

.mg-hero__title .mg-script {
	font-family: var(--mah-font-script);
	/* Alex Brush ships in a single 400 weight, so this is browser
	   faux-bold — accepted trade-off for the requested gold/bold accent. */
	font-weight: 700;
	color: var(--mg-gold);
	font-size: 1.12em;
	line-height: 1;
	/* Block (not inline-block) so "The" and "Gallery" each fall onto
	   their own anonymous line box around it — the title reads as a
	   fixed 3-line "The / Mahjongg / Gallery" stack at every width,
	   instead of wrapping differently depending on how much of "The
	   Mahjongg" happens to fit on one line. */
	display: block;
	padding: 0.04em 0;
}

.mg-hero__cue {
	position: absolute;
	left: 50%;
	bottom: 28px;
	transform: translateX(-50%);
	z-index: 1;
	width: 1px;
	height: 44px;
	background: var(--mg-line-light);
	overflow: hidden;
}

.mg-hero__cue span {
	display: block;
	width: 100%;
	height: 40%;
	background: var(--mg-paper);
	animation: mg-cue-fall 2.4s ease-in-out infinite;
}

@keyframes mg-fade-up {
	from { opacity: 0; transform: translateY(18px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes mg-cue-fall {
	0%   { transform: translateY(-100%); }
	60%  { transform: translateY(160%); }
	100% { transform: translateY(160%); }
}

/* =============================================================================
   Panels — Play Mahjongg / Visit the Gallery / Eat & Drink
   ============================================================================= */

.mg-panel {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	align-items: center;
	gap: clamp(32px, 6vw, 96px);
	max-width: 1360px;
	margin: 0 auto;
	padding: clamp(72px, 12vh, 140px) clamp(24px, 5vw, 64px);
}

.mg-panel--reverse {
	grid-template-columns: 0.9fr 1.1fr;
}
.mg-panel--reverse .mg-panel__figure {
	order: 2;
}
.mg-panel--reverse .mg-panel__body {
	order: 1;
}

.mg-panel__figure {
	position: relative;
	margin: 0;
	border: 1px solid var(--mg-line);
	padding: 14px;
	background: var(--mg-paper);
}

.mg-panel__frame {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 5;
	text-decoration: none;
}

.mg-panel__frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transform: scale(1);
	transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}

.mg-panel__figure:hover .mg-panel__frame img {
	transform: scale(1.045);
}

.mg-panel__body {
	max-width: 34em;
}

.mg-panel__title {
	font-family: var(--mah-font-display);
	font-weight: 500;
	font-size: clamp(2.1rem, 3.6vw, 3.4rem);
	line-height: 1.05;
	margin: 0 0 20px;
	color: var(--mg-forest-deep);
}

.mg-panel__text {
	font-family: var(--mah-font-body);
	font-size: 1.08rem;
	line-height: 1.7;
	margin: 0 0 30px;
	color: var(--mg-ink);
}

.mg-panel__link {
	position: relative;
	display: inline-block;
	font-family: var(--mah-font-body);
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-decoration: none;
	color: var(--mg-forest-deep);
	padding-bottom: 4px;
	background-image: linear-gradient(var(--mg-clay), var(--mg-clay));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1px;
	transition: background-size 0.35s ease, color 0.35s ease;
}

.mg-panel__link::after {
	content: '→';
	margin-left: 0.5em;
	display: inline-block;
	transition: transform 0.35s ease;
}

.mg-panel__link:hover,
.mg-panel__link:focus-visible {
	color: var(--mg-clay);
}

.mg-panel__link:hover::after,
.mg-panel__link:focus-visible::after {
	transform: translateX(4px);
}

/* Alternating tone per panel — each experience keeps its own register
   rather than one filter forced over all three. */
.mg-panel--play    { background: var(--mg-parchment); }
.mg-panel--gallery { background: var(--mg-paper); }
.mg-panel--cafe     { background: var(--mg-parchment); }

/* =============================================================================
   Reviews — Google reviews widget (Trustindex), between the panels and Visit
   ============================================================================= */

.mg-reviews {
	background: var(--mg-paper);
	padding: clamp(56px, 9vh, 96px) clamp(24px, 5vw, 64px);
}

.mg-reviews__inner {
	max-width: 720px;
	margin: 0 auto;
	text-align: center;
}

.mg-reviews__heading {
	font-family: var(--mah-font-display);
	font-weight: 500;
	font-size: clamp(1.7rem, 2.6vw, 2.3rem);
	margin: 0 0 28px;
	color: var(--mg-forest-deep);
}

/* =============================================================================
   Visit — shared location / hours / events / contact section
   ============================================================================= */

.mg-visit {
	background: var(--mg-forest-deep);
	color: var(--mg-paper);
	padding: clamp(72px, 10vh, 120px) clamp(24px, 5vw, 64px);
}

.mg-visit__inner {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: clamp(48px, 6vw, 96px);
}

.mg-visit__heading {
	font-family: var(--mah-font-display);
	font-weight: 500;
	font-size: clamp(1.7rem, 2.6vw, 2.3rem);
	margin: 0 0 28px;
	color: var(--mg-paper);
}

.mg-visit__list {
	margin: 0;
	border-top: 1px solid var(--mg-line-light);
}

.mg-visit__row {
	display: grid;
	grid-template-columns: 9em 1fr;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--mg-line-light);
}

.mg-visit__row dt {
	font-family: var(--mah-font-body);
	font-size: 0.72rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	font-weight: 600;
	opacity: 0.68;
}

.mg-visit__row dd {
	margin: 0;
	font-family: var(--mah-font-body);
	font-size: 1rem;
	line-height: 1.6;
}

.mg-visit__row dd a {
	text-decoration: underline;
	text-decoration-color: rgba(255, 253, 248, 0.4);
	text-underline-offset: 3px;
}

.mg-visit__row dd a:hover,
.mg-visit__row dd a:focus-visible {
	text-decoration-color: var(--mg-paper);
}

.mg-events {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	border-top: 1px solid var(--mg-line-light);
}

.mg-events__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	padding: 16px 0;
	border-bottom: 1px solid var(--mg-line-light);
	font-family: var(--mah-font-body);
}

.mg-events__when {
	font-size: 0.78rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.68;
	white-space: nowrap;
}

.mg-events__name {
	font-size: 1rem;
	flex: 1;
	padding: 0 16px;
}

.mg-events__empty {
	font-family: var(--mah-font-body);
	font-size: 0.98rem;
	opacity: 0.78;
	padding: 20px 0;
	border-top: 1px solid var(--mg-line-light);
	border-bottom: 1px solid var(--mg-line-light);
	margin: 0 0 24px;
}

.mg-visit__more {
	display: inline-block;
	font-family: var(--mah-font-body);
	font-size: 0.92rem;
	font-weight: 600;
	text-decoration: none;
	color: var(--mg-paper);
	padding-bottom: 3px;
	background-image: linear-gradient(var(--mg-paper), var(--mg-paper));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 100% 1px;
}

.mg-visit__more:hover,
.mg-visit__more:focus-visible {
	color: var(--mg-clay);
	background-image: linear-gradient(var(--mg-clay), var(--mg-clay));
}

/* =============================================================================
   Footer — hide all footer menus on the landing page only
   ============================================================================= */

/* footer-widget1/2/3/4/6 each hold nothing but one Custom Menu widget
   (Legal Information, Site Navigation, Services, Main Footer col 2, Learn)
   — hide the whole column so no empty box is left behind. footer-widget5
   holds the CONTACT menu and the address block (#block-8) alongside a few
   still-empty text-widget slots (#block-9/10/12) — with both the menu and
   the address hidden, nothing visible is left in it either, so its whole
   section is hidden too rather than leaving a blank column.

   !important is required here: the Kadence parent theme's footer.min.css
   sets `.site-footer-section{display:flex}` and
   `.footer-widget-area{display:flex}`, and it loads AFTER this child
   stylesheet (see kadence-footer-css vs kadence-child-landing-css in
   wp_head) — at equal specificity the later rule wins, so a plain
   `display:none` here is silently overridden without it. */
/* Sitewide floating "Upcoming events" drawer (inc/upcoming-events.php) —
   redundant with this page's own dedicated "Upcoming" section below, and
   at odds with the restrained, uncluttered direction of this redesign. */
.mah-landing-page .hp-classes {
	display: none !important;
}

.mah-landing-page .footer-widget1,
.mah-landing-page .footer-widget2,
.mah-landing-page .footer-widget3,
.mah-landing-page .footer-widget4,
.mah-landing-page .footer-widget6,
.mah-landing-page .site-footer-middle-section-1,
.mah-landing-page .site-footer-middle-section-2,
.mah-landing-page .site-footer-middle-section-3 {
	display: none !important;
}

/* =============================================================================
   Motion & accessibility
   ============================================================================= */

.mg-landing a:focus-visible,
.mg-landing button:focus-visible {
	outline: 2px solid var(--mg-clay);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.mg-hero__content {
		animation: none;
	}
	.mg-hero__cue span {
		animation: none;
	}
	.mg-panel__frame img {
		transition: none;
	}
}

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

@media (max-width: 900px) {
	.mg-panel,
	.mg-panel--reverse {
		grid-template-columns: 1fr;
		padding: 56px 24px;
		gap: 32px;
	}
	.mg-panel--reverse .mg-panel__figure,
	.mg-panel--reverse .mg-panel__body {
		order: initial;
	}
	.mg-panel__figure {
		padding: 10px;
	}
	.mg-panel__frame {
		aspect-ratio: 4 / 3;
	}

	.mg-visit__inner {
		grid-template-columns: 1fr;
		gap: 56px;
	}
}

@media (max-width: 560px) {
	.mg-hero__content {
		padding: clamp(56px, 11vh, 96px) 20px 0;
	}
	/* Phones: even the tablet/phone 2x2 collage (above) is still too
	   busy at this width — drop to a single row of the first 2 photos. */
	.mg-hero__collage {
		grid-template-rows: 1fr;
	}
	.mg-hero__collage img:nth-child(n + 3) {
		display: none;
	}
	/* Below this width the triple-rule frame's fixed borders + ring
	   padding + inner padding leave too little room for "Mahjongg" at
	   its desktop-tuned minimum size, forcing a two-line wrap. Tighten
	   the frame's fixed overhead so it reliably stays on one line down
	   to ~375px phones (the title's own font-size floor is handled by
	   the single clamp() on .mg-hero__title itself, not here). */
	.mg-hero__frame--outer {
		border-radius: 36px;
		padding: 4px;
	}
	.mg-hero__frame--middle {
		/* border-width + padding must sum to the 6px gap between this
		   ring's radius (30px) and --inner's (24px) below, or the two
		   rings stop being concentric in the corners. */
		border-width: 3px;
		border-radius: 30px;
		padding: 3px;
	}
	.mg-hero__frame--inner {
		border-radius: 24px;
		padding: clamp(24px, 5vw, 56px) clamp(16px, 5vw, 84px);
	}
	.mg-hero__title {
		letter-spacing: -0.02em;
	}
	.mg-hero__title .mg-script {
		padding: 0.02em 0;
	}
	.mg-visit__row {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	.mg-events__row {
		flex-direction: column;
		gap: 4px;
	}
}