/* ============================================================
   Showcase / landing-page components (Phase 4 of the Divi removal)
   Reused by front-page.php and the page-{slug}.php landing rebuilds.
   Full-bleed hero sections: bg image, heading + subheading top-center,
   CTA buttons bottom-center (teal primary / cream secondary).
   ============================================================ */

/* Thin page title bar (e.g. "Tabletop Gaming") */
.wwg-page-titlebar {
	background: var(--wwg-bone-xlight);
	text-align: center;
	padding: 16px 20px;
}
.wwg-page-titlebar h1 {
	font-family: var(--wwg-font-display);
	font-size: 26px;
	font-weight: 400;
	color: var(--wwg-ivory);
	margin: 0;
	line-height: 1.2;
}

/* Full-bleed hero showcase section */
.wwg-hero {
	position: relative;
	min-height: 854px;
	background-image: var(--wwg-hero-img);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--wwg-bone-xlight);
}
.wwg-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, color-mix(in srgb, var(--wwg-ivory) 38%, transparent) 0%, color-mix(in srgb, var(--wwg-ivory) 0%, transparent) 20%, color-mix(in srgb, var(--wwg-ivory) 0%, transparent) 78%, color-mix(in srgb, var(--wwg-ivory) 28%, transparent) 100%);
	pointer-events: none;
}
.wwg-hero-inner {
	position: relative;
	z-index: 1;
	min-height: 854px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 72px 20px 44px;
	box-sizing: border-box;
}
.wwg-hero-title {
	font-family: var(--wwg-font-display);
	font-size: 60px;
	line-height: 1.1;
	font-weight: 400;
	color: var(--wwg-bone-xlight);
	margin: 0 0 6px;
}
.wwg-hero-sub {
	font-family: var(--wwg-font-display);
	font-size: var(--wwg-h6-size);
	font-weight: 400;
	color: var(--wwg-bone-xlight);
	margin: 0;
	line-height: var(--wwg-h6-line);
	letter-spacing: var(--wwg-h6-tracking);
}
.wwg-hero-ctas {
	margin-top: auto;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}
.wwg-hero-btn {
	display: inline-block;
	padding: 14px 28px;
	background: var(--wwg-bone-xlight);
	color: var(--wwg-ivory);
	font-family: var(--wwg-font-body);
	font-weight: var(--wwg-btn-weight);
	font-size: var(--wwg-btn-md-size);
	border-radius: 4px;
	text-decoration: none;
	transition: opacity .2s;
	line-height: var(--wwg-btn-md-line);
	letter-spacing: var(--wwg-btn-tracking);
}
.wwg-hero-btn.primary { background: var(--wwg-verdigris-dark); }
.wwg-hero-btn:hover { opacity: .88; color: var(--wwg-ivory); }

/* ── Home page cards — match production exactly ──
   The home page stacks these hero sections as bounded "cards": capped at 1600px
   and centred (side margins appear past 1600px), a 16px gap between them, 16px
   above the first and 64px below the last (white space before the footer). The
   CTA buttons follow prod's et_pb_button (body font, 20px/400 weight, 2px radius,
   wide 8/56 padding, colour-shift hover). On phone they stack full-width + equal,
   staying inset from the screen edges. Scoped to .wwg-home so the full-bleed
   category-page hero variants (--title / --intro) are unaffected. */
.wwg-home .wwg-hero {
	max-width: 1600px;
	margin: 0 auto;
	/* Side inset on each card (kept on narrow/phone screens too), in the page ground so it
	   reads as margin, not a white frame. Spacing-scale values: 16px sides (--space-3),
	   24px between cards and above the first (--space-4), 64px below the last (--space-9). */
	border-left: var(--wwg-space-3) solid var(--wwg-color-bg-primary);
	border-right: var(--wwg-space-3) solid var(--wwg-color-bg-primary);
}
.wwg-home .wwg-hero + .wwg-hero { margin-top: var(--wwg-space-4); }
.wwg-home .wwg-hero:first-child { margin-top: var(--wwg-space-4); }
.wwg-home .wwg-hero:last-child { margin-bottom: var(--wwg-space-9); }
.wwg-home .wwg-hero-btn {
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-btn-lg-size);
	font-weight: var(--wwg-btn-weight);
	padding: 8px 56px;
	border-radius: 2px;
	transition: background-color .3s, color .3s;
	line-height: var(--wwg-btn-lg-line);
	letter-spacing: var(--wwg-btn-tracking);
}
.wwg-home .wwg-hero-btn:hover {
	opacity: 1;
	background: var(--wwg-bone); /* secondary (cream) → tan */
	color: var(--wwg-ivory);
}
.wwg-home .wwg-hero-btn.primary:hover {
	background: var(--wwg-verdigris-xdark); /* primary (teal) → deep teal */
}
/* Below the desktop breakpoint: buttons stack equal-width and stay anchored near
   the bottom of the hero (matches prod). The generic ≤980 rule below sets
   margin-top:28px, which would pull them up under the subtitle — override it. */
@media (max-width: 980px) {
	.wwg-home .wwg-hero-ctas {
		flex-direction: column;
		align-items: center;
		width: 100%;
		margin-top: auto;
	}
	.wwg-home .wwg-hero-btn {
		display: block;
		width: 100%;
		max-width: 280px;
		box-sizing: border-box;
	}
}

@media (max-width: 980px) {
	.wwg-hero, .wwg-hero-inner { min-height: 78vh; }
	.wwg-hero-inner { padding: 44px 16px; }
	.wwg-hero-title { font-size: 34px; }
	.wwg-hero-ctas { margin-top: 28px; }
}

/* Title-only hero (category pages): centered, shorter */
.wwg-hero--title, .wwg-hero--title .wwg-hero-inner { min-height: 60vh; }
.wwg-hero--title .wwg-hero-inner { justify-content: center; }

/* Intro hero (category landing pages): big left-aligned 92px title + short
   description, both anchored to the content column's left edge. */
.wwg-hero--intro { min-height: 640px; }
.wwg-hero--intro .wwg-hero-inner {
	min-height: 640px;
	justify-content: center;
	align-items: flex-start;
	text-align: left;
	padding: 0 10%;
}
.wwg-hero--intro .wwg-hero-title { font-size: 92px; font-weight: 500; margin: 0; }
.wwg-hero--intro .wwg-hero-sub {
	font-size: var(--wwg-text-md-size);
	font-weight: 400;
	max-width: 430px;
	margin: 16px 0 0;
	line-height: var(--wwg-text-md-line);
	font-family: var(--wwg-font-body);
	letter-spacing: 0;
}
@media (max-width: 980px) {
	.wwg-hero--intro, .wwg-hero--intro .wwg-hero-inner { min-height: 60vh; }
	.wwg-hero--intro .wwg-hero-inner { padding: 0 24px; }
	.wwg-hero--intro .wwg-hero-title { font-size: 46px; }
}

/* ------------------------------------------------------------------
   Showcase-panel grid (category landing pages: dice-rolling, dice-storage,
   seating, ...). Asymmetric 2-col grid of product-photo panels; each panel
   carries a heading, short description and a "Shop ›" link at the top.
   Modifiers: --full spans both columns, --tall spans two rows.
   ------------------------------------------------------------------ */
.wwg-panels {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	max-width: 1490px;
	margin: 0 auto;
	padding: 28px 20px;
	background: var(--wwg-bone-xlight);
}
.wwg-panel {
	position: relative;
	min-height: 560px;
	background-color: var(--wwg-bone-light);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 48px 24px 40px;
	box-sizing: border-box;
}
.wwg-panel--full { grid-column: 1 / -1; min-height: 680px; }
.wwg-panel--tall { grid-row: span 2; }
.wwg-panel-title {
	font-family: var(--wwg-font-display);
	font-size: 44px;
	font-weight: 400;
	color: var(--wwg-caput-mortuum-xdark);
	margin: 0 0 10px;
	line-height: 1.1;
}
.wwg-panel-desc { color: var(--wwg-caput-mortuum-xdark); font-size: var(--wwg-text-md-size); margin: 0 0 16px; max-width: 460px; line-height: var(--wwg-text-md-line); }
.wwg-panel-link {
	color: var(--wwg-burnt-sienna-dark);
	font-family: var(--wwg-font-body);
	font-weight: var(--wwg-btn-weight);
	font-size: var(--wwg-btn-md-size);
	text-decoration: none;
	line-height: var(--wwg-btn-md-line);
	letter-spacing: var(--wwg-btn-tracking);
}
.wwg-panel-link::after { content: " \203A"; }
.wwg-panel-link:hover { color: var(--wwg-burnt-sienna-dark); }
@media (max-width: 900px) {
	.wwg-panels { grid-template-columns: 1fr; }
	.wwg-panel, .wwg-panel--full, .wwg-panel--tall {
		grid-column: auto;
		grid-row: auto;
		min-height: 440px;
	}
}

/* ------------------------------------------------------------------
   Text / policy content pages (privacy, terms, about-us, ...): a centered
   page head + a readable single-column prose column.
   ------------------------------------------------------------------ */
.wwg-page-head { background: var(--wwg-bone-xlight); text-align: center; padding: 52px 20px 4px; }
.wwg-page-head h1 {
	font-family: var(--wwg-font-display);
	font-size: 56px;
	font-weight: 400;
	color: var(--wwg-caput-mortuum-xdark);
	margin: 0;
	line-height: 1.1;
}
.wwg-prose {
	max-width: 860px;
	margin: 0 auto;
	padding: 24px 20px 72px;
	color: var(--wwg-caput-mortuum-xdark);
	font-family: var(--wwg-font-body);
	font-size: var(--wwg-text-md-size);
	line-height: var(--wwg-text-md-line);
}
.wwg-prose h2 { font-family: var(--wwg-font-display); font-size: 26px; font-weight: 400; color: var(--wwg-caput-mortuum-xdark); margin: 34px 0 10px; }
.wwg-prose h3 { font-family: var(--wwg-font-display); font-size: 21px; font-weight: 400; color: var(--wwg-caput-mortuum-xdark); margin: 26px 0 8px; }
.wwg-prose p { margin: 0 0 16px; }
.wwg-prose ul, .wwg-prose ol { margin: 0 0 16px; padding-left: 24px; }
.wwg-prose li { margin: 0 0 6px; }
.wwg-prose a { color: var(--wwg-color-link); font-weight: var(--wwg-btn-weight); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 1px; }
.wwg-prose a:hover { color: var(--wwg-color-link-hover); }
@media (max-width: 640px) { .wwg-page-head h1 { font-size: 38px; } }

/* Product-card grid (dice / seating landing pages) */
.wwg-product-section { background: var(--wwg-bone-xlight); padding: 64px 20px; }
.wwg-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px 32px; max-width: 1200px; margin: 0 auto; }
.wwg-product-card { text-align: center; }
.wwg-product-card-media img { width: 100%; height: auto; display: block; border-radius: 6px; }
.wwg-product-card-title { font-family: var(--wwg-font-body); font-size: 24px; font-weight: 600; margin: 18px 0 14px; }
.wwg-product-card-title a { color: var(--wwg-ivory); text-decoration: none; }
.wwg-product-card-btn { display: inline-block; padding: 10px 30px; border: 2px solid var(--wwg-ivory); border-radius: 4px; color: var(--wwg-ivory); font-family: var(--wwg-font-body); font-weight: 600; text-decoration: none; transition: all .2s; }
.wwg-product-card-btn:hover { background: var(--wwg-ivory); color: var(--wwg-bone-xlight); }
@media (max-width: 980px) { .wwg-product-grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; } }
@media (max-width: 600px) { .wwg-product-grid { grid-template-columns: 1fr; } }

/* "You may also like" upsells — image + name + price only (no ATC / variation
   form). Shared by the native single-product template and the table-builder
   configurator (wwg_render_upsells()). Heading kept modest — a bare theme <h2>
   would render at the ~75px hero size otherwise. */
.wwg-upsells-title {
	font-family: var(--wwg-font-display);
	font-size: 32px;
	font-weight: 400;
	color: var(--wwg-ivory);
	margin: 0 0 26px;
	line-height: 1.1;
}
.wwg-upsell-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 28px;
}
.wwg-upsell-card { text-align: center; text-decoration: none; display: block; }
.wwg-upsell-card img { width: 100%; height: auto; display: block; border-radius: 4px; margin-bottom: 14px; }
.wwg-upsell-name { display: block; font-family: var(--wwg-font-body); font-size: 18px; font-weight: 500; color: var(--wwg-color-text-strong); margin-bottom: 4px; }
.wwg-upsell-card:hover .wwg-upsell-name { color: var(--wwg-color-text-strong-hover); }
.wwg-upsell-price { display: block; color: var(--wwg-color-text-primary); font-size: 16px; }

/* ---- Mobile type (Figma "Typogrophy" Mobile mode, <=767px like wwg-base.css) ---- */
@media (max-width: 767px) {
	.wwg-hero-sub { font-size: var(--wwg-h6-size-mobile); line-height: var(--wwg-h6-line-mobile); }
	.wwg-hero--intro .wwg-hero-sub,
	.wwg-panel-desc,
	.wwg-prose { font-size: var(--wwg-text-md-size-mobile); line-height: var(--wwg-text-md-line-mobile); }
	.wwg-hero-btn,
	.wwg-panel-link { font-size: var(--wwg-btn-md-size-mobile); line-height: var(--wwg-btn-md-line-mobile); }
	.wwg-home .wwg-hero-btn { font-size: var(--wwg-btn-lg-size-mobile); line-height: var(--wwg-btn-lg-line-mobile); }
}

/* The home heroes carry an upright phone photograph as well as the landscape one, the
   pair the Divi page served. 767px is Divi's phone breakpoint, so the crop changes where
   it always did. A hero without a phone image falls back to its desktop one. */
@media (max-width: 767px) {
	.wwg-home .wwg-hero {
		background-image: var(--wwg-hero-img-phone, var(--wwg-hero-img));
	}
}

/* A hero whose photograph is a wide banner rather than the usual 1.69:1 — the Halloween
   strip is 2048x547. In an 854px card, cover would hide more than half its width and show
   one coffin of three. This card takes the photograph's own shape instead, so the whole
   picture is visible; the copy still sets a floor, so the card never collapses below what
   the title, subtitle and button need. Phones keep the normal card: they are served the
   upright crop, which suits it. */
@media (min-width: 768px) {
	.wwg-home .wwg-hero--wide {
		min-height: 0;
	}
	/* The copy still spreads over the whole card — title at the top, button at the foot —
	   rather than bunching in the first half of it. */
	.wwg-home .wwg-hero--wide .wwg-hero-inner {
		min-height: 100%;
	}
	.wwg-home .wwg-hero--wide {
		aspect-ratio: 2048 / 547;
	}
}