/* ============================================================
   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;
	}
}

/* Phones. This hero's phone photograph is landscape 4:3, not the upright crop the slot
   was built for, so the card takes a 4:5 shape rather than the usual 78vh. At 78vh the
   card is nearly two and a half times taller than it is wide and cover would show only
   about 42% of the photograph's width, cutting a third off the vault; at 4:5 roughly
   61% shows and the whole vault stays in frame (user, 2026-10-30). */
@media (max-width: 767px) {
	.wwg-home .wwg-hero--wide,
	.wwg-home .wwg-hero--wide .wwg-hero-inner {
		min-height: 0;
	}
	.wwg-home .wwg-hero--wide {
		aspect-ratio: 4 / 5;
		/* The vault sits left of centre in the photograph, so a centred crop cut its
		   near side off. At 4:5 about 61% of the width shows, and anchoring at 20%
		   puts that window over roughly 8%-68% of the image, which frames the whole
		   vault. Tied to this photograph, so it wants revisiting if the phone art
		   for a wide hero changes. */
		background-position: 20% center;
	}
	/* A floor, so the card can never crush the title, subtitle and button. */
	.wwg-home .wwg-hero--wide .wwg-hero-inner {
		min-height: 100%;
		box-sizing: border-box;
	}
}

/* B of an A/B: a shadow carried by the words themselves rather than a panel behind them.
   Three layers of the same ink — a tight one to give each letter an edge, a mid one to
   lift it off the photograph, and a wide soft one that darkens the area around the text
   without drawing a boundary. All Ivory, so it reads as the photograph falling into
   shadow rather than as a grey fringe. The alternative is on nickg/hero-ab-a-box. */
.wwg-home .wwg-hero-title,
.wwg-home .wwg-hero-sub {
	text-shadow:
		0 1px 3px var(--wwg-ivory),
		0 2px 12px var(--wwg-ivory),
		0 0 30px color-mix(in srgb, var(--wwg-ivory) 88%, transparent);
}