/* =====================================================================
   Game Card Designs (skins)
   -----------------------------------------------------------------------
   Selected in Appearance > Customize > Game Cards > Card Design
   (inc/card-designs.php). Every design keeps the same required pieces on
   every card — image, title, view count, Like button — and only changes
   how they look. The Like button is added by assets/js/live-activity.js
   directly onto .gzf-card and is intentionally NOT touched by any rule
   below, so it keeps working the same way regardless of design.

   10 designs ship: 1-5 (Poster, Minimal, Overlay, Neon, Ribbon) and 6-10
   (Glass, Gradient, Retro, Polaroid, Cyber).

   This file is additive only: it does not change the framework's base
   .gzf-card rules or the existing Card Layout system (grid/list/compact/
   featured/horizontal) — it only skins whichever layout is active via the
   extra .gzf-card-design--{name} class.
   ===================================================================== */

/* Shared bits used by more than one design. */
.gzfc-card-info {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .78rem;
	color: var(--gzf-color-muted);
	text-transform: uppercase;
	letter-spacing: .03em;
	margin-bottom: 10px;
}
.gzfc-card-info-sep { opacity: .55; }

/* .gzfc-card-info-cat / .gzf-card-cat (the category label printed inside
   a Post Card) intentionally has no styling rules of its own here beyond
   what it inherits from .gzfc-card-info above — the "Post Card Category"
   Customizer section that used to add font/badge/hover controls for it
   has been removed. Each card design below still styles it directly
   where needed (see e.g. .gzf-card-design--neon .gzfc-card-info-cat). */

/* ---------------------------------------------------------------------
   1) POSTER — the reference design: poster-style artwork, dark panel
      below with everything centered (title, category · size, views).
   --------------------------------------------------------------------- */
.gzf-card-design--poster .gzf-card-body {
	padding: 16px 18px 20px;
	text-align: center;
}
.gzf-card-design--poster .gzf-card-title {
	font-size: 1rem;
	line-height: 1.35;
	margin-bottom: 10px;
}
.gzf-card-design--poster .gzfc-card-info {
	justify-content: center;
	margin-bottom: 10px;
}
.gzf-card-design--poster .gzf-post-meta {
	justify-content: center;
	gap: 6px;
	padding-top: 10px;
	border-top: 1px solid var(--gzf-color-border);
}
.gzf-card-design--poster .gzf-meta-date,
.gzf-card-design--poster .gzf-meta-comments {
	display: none;
}

/* ---------------------------------------------------------------------
   2) MINIMAL — clean, modern, understated: thin border, no heavy shadow,
      left-aligned text, small muted meta row with date/views/comments.
   --------------------------------------------------------------------- */
.gzf-card-design--minimal {
	box-shadow: none;
	border: 1px solid var(--gzf-color-border);
}
.gzf-card-design--minimal.gzf-hover--lift:hover,
.gzf-card-design--minimal.gzf-hover--glow:hover {
	box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}
.gzf-card-design--minimal .gzf-card-body {
	padding: 14px 16px 16px;
	text-align: left;
}
.gzf-card-design--minimal .gzf-card-title {
	font-size: 1rem;
	font-weight: 600;
}
.gzf-card-design--minimal .gzfc-card-info {
	color: var(--gzf-color-primary);
	font-weight: 600;
}
.gzf-card-design--minimal .gzf-post-meta {
	margin-top: 8px;
}

/* ---------------------------------------------------------------------
   3) OVERLAY — magazine cover style: no separate body panel, the title
      and info sit directly over the artwork on a gradient scrim.
   --------------------------------------------------------------------- */
.gzf-card-design--overlay {
	display: block;
	position: relative;
}
.gzf-card-design--overlay .gzf-card-media {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.gzf-card-design--overlay .gzf-card-body {
	position: relative;
	z-index: 1;
	margin-top: 100%;
	padding: 36px 16px 16px;
	background: linear-gradient(180deg, transparent 0%, rgba(6, 6, 8, .55) 22%, rgba(6, 6, 8, .96) 68%);
}
.gzf-card-design--overlay .gzf-card-title {
	color: #fff;
	font-size: 1.02rem;
	text-shadow: 0 2px 8px rgba(0, 0, 0, .6);
}
.gzf-card-design--overlay .gzfc-card-info {
	color: rgba(255, 255, 255, .75);
}
.gzf-card-design--overlay .gzf-post-meta {
	color: rgba(255, 255, 255, .65);
}
.gzf-card-design--overlay .gzf-meta-date,
.gzf-card-design--overlay .gzf-meta-comments {
	display: none;
}
/* List/compact/featured layouts already position media beside/above the
   body via flex, which conflicts with the absolute overlay trick above —
   fall back to the normal stacked look there so those layouts stay intact. */
.gzf-card-design--overlay.gzf-card--list .gzf-card-media,
.gzf-card-design--overlay.gzf-card--horizontal .gzf-card-media,
.gzf-card-design--overlay.gzf-card--compact .gzf-card-media {
	position: relative;
	inset: auto;
}
.gzf-card-design--overlay.gzf-card--list .gzf-card-body,
.gzf-card-design--overlay.gzf-card--horizontal .gzf-card-body,
.gzf-card-design--overlay.gzf-card--compact .gzf-card-body {
	margin-top: 0;
	background: none;
	padding: 16px 18px 18px;
}
.gzf-card-design--overlay.gzf-card--list .gzf-card-title,
.gzf-card-design--overlay.gzf-card--horizontal .gzf-card-title,
.gzf-card-design--overlay.gzf-card--compact .gzf-card-title {
	color: var(--gzf-color-heading);
	text-shadow: none;
}

/* ---------------------------------------------------------------------
   4) NEON — glowing accent style popular on modern gaming sites: neon
      border glow on hover, glowing category chip, gradient underline.
   --------------------------------------------------------------------- */
.gzf-card-design--neon {
	border: 1px solid rgba(255, 255, 255, .06);
}
.gzf-card-design--neon:hover {
	border-color: var(--gzf-color-primary);
	box-shadow: 0 0 0 1px var(--gzf-color-primary), 0 0 26px rgba(255, 77, 28, .35), 0 16px 34px rgba(0, 0, 0, .4);
}
.gzf-card-design--neon .gzf-card-body {
	padding: 16px 18px 18px;
}
.gzf-card-design--neon .gzf-card-title {
	font-size: 1.02rem;
	margin-bottom: 6px;
}
.gzf-card-design--neon .gzf-card-title::after {
	content: "";
	display: block;
	width: 36px;
	height: 2px;
	margin-top: 8px;
	background: linear-gradient(90deg, var(--gzf-color-primary), var(--gzf-color-accent));
}
.gzf-card-design--neon .gzfc-card-info {
	margin-top: 10px;
}
.gzf-card-design--neon .gzfc-card-info-cat {
	display: inline-flex;
	padding: 2px 9px;
	border-radius: 999px;
	background: rgba(255, 77, 28, .12);
	color: var(--gzf-color-primary);
	font-weight: 700;
}
.gzf-card-design--neon .gzf-meta-views {
	color: var(--gzf-color-primary);
}

/* ---------------------------------------------------------------------
   5) RIBBON — diagonal category ribbon in the corner + a size pill on
      the artwork, clean card body below with an accent underline.
   --------------------------------------------------------------------- */
/* .gzfc-card-cat-tag = the same diagonal ribbon, used to show the category
   on the artwork of every other Card Design (see gzfc_card_cat_on_image()
   in inc/card-designs.php). Shares this rule on purpose — no duplicate CSS. */
.gzfc-card-ribbon,
.gzfc-card-cat-tag {
	position: absolute;
	/* Band centred exactly on the corner's diagonal (centre at 30px,30px
	   from the corner): both ends are then cut at the same angle by the
	   left and top edges, so the ribbon looks balanced and symmetrical. */
	top: 19px;
	left: -40px;
	z-index: 4;
	width: 140px;
	height: 22px;
	padding: 0;
	/* Diagonal corner ribbon (matches the reference): a band rotated -45deg
	   across the top-left corner; the media box's overflow:hidden cuts its
	   ends at an angle. */
	transform: rotate(-45deg);
	background: var(--gzf-color-primary);
	color: #fff;
	font-size: .68rem;
	font-weight: 800;
	line-height: 22px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-align: center;
	box-shadow: 0 4px 10px rgba(0, 0, 0, .35);
	pointer-events: none;
}
.gzfc-card-size-pill {
	position: absolute;
	left: 12px;
	bottom: 12px;
	z-index: 3;
	padding: 4px 10px;
	border-radius: 6px;
	background: rgba(10, 10, 10, .65);
	backdrop-filter: blur(2px);
	color: #fff;
	font-size: .72rem;
	font-weight: 700;
	pointer-events: none;
}
.gzf-card-design--ribbon .gzf-card-media,
.gzf-card-media.gzfc-has-cat-tag { overflow: hidden; }
.gzf-card-design--ribbon .gzf-card-body {
	padding: 16px 18px 18px;
	border-bottom: 3px solid var(--gzf-color-primary);
	border-bottom-left-radius: var(--gzf-card-radius);
	border-bottom-right-radius: var(--gzf-card-radius);
}
.gzf-card-design--ribbon .gzfc-card-info { display: none; }
.gzf-card-design--ribbon .gzf-meta-date,
.gzf-card-design--ribbon .gzf-meta-comments {
	display: none;
}

/* The diagonal category ribbon above already owns the top-left corner, and
   the Like (heart) button already owns the top-right corner (see
   assets/css/live-activity.css). The framework's own New/Hot post badges
   (.gzf-card-badges, "Show Card Badges" in Game Cards settings) default to
   one of those same corners, so for this design only they are moved down
   to the bottom-right — the one corner nothing else uses — instead of
   sitting on top of the category ribbon. !important is used because the
   framework's own position (top/left/right) rules are set on the more
   specific --top-left / --top-right modifier class, which would otherwise
   win over this override. Only .gzf-card-badges' position changes; the
   badges' own look (color, shape, text) is untouched. */
.gzf-card-design--ribbon .gzf-card-badges,
.gzf-card-design--ribbon .gzf-card-badges--top-left,
.gzf-card-design--ribbon .gzf-card-badges--top-right,
body .gzf-card-design--ribbon .gzf-card-badges,
body .gzf-card-design--ribbon .gzf-card-badges--top-left,
body .gzf-card-design--ribbon .gzf-card-badges--top-right {
	top: auto !important;
	left: auto !important;
	right: 12px !important;
	bottom: 12px !important;
}

/* ---------------------------------------------------------------------
   6) GLASS — frosted-glass panel floating over the bottom of the
      artwork. Title + info + views sit on a blurred translucent card, so
      the poster art stays visible behind it. Colors come from the theme
      variables, so it follows the Light/Dark toggle automatically.
   --------------------------------------------------------------------- */
.gzf-card-design--glass {
	border: 1px solid var(--gzf-color-border);
}
.gzf-card-design--glass .gzf-card-body {
	position: relative;
	z-index: 2;
	margin: -54px 12px 12px;
	padding: 14px 16px 14px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: calc(var(--gzf-card-radius) - 2px);
	background: rgba(20, 20, 23, .74);
	background: color-mix(in srgb, var(--gzf-color-card-bg) 74%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	backdrop-filter: blur(14px) saturate(150%);
	box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.gzf-card-design--glass .gzf-card-title {
	font-size: 1rem;
	line-height: 1.3;
	margin-bottom: 6px;
}
.gzf-card-design--glass .gzfc-card-info {
	color: var(--gzf-color-primary);
	font-weight: 700;
	margin-bottom: 8px;
}
.gzf-card-design--glass .gzf-meta-date,
.gzf-card-design--glass .gzf-meta-comments {
	display: none;
}
/* List / horizontal / compact put the artwork beside the text, so the
   floating-panel overlap can't work there — fall back to a plain body. */
.gzf-card-design--glass.gzf-card--list .gzf-card-body,
.gzf-card-design--glass.gzf-card--horizontal .gzf-card-body,
.gzf-card-design--glass.gzf-card--compact .gzf-card-body {
	margin: 0;
	padding: 16px 18px 18px;
	border: 0;
	border-radius: 0;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
}
.gzf-card-design--glass.gzf-card--compact .gzf-card-body { padding: 0 0 0 12px; }

/* ---------------------------------------------------------------------
   7) GRADIENT — a bright primary → secondary → accent gradient border
      wraps the whole card, gradient category pill, soft colored glow on
      hover. Uses the theme's own accent colors, so it re-colors itself
      when the accent colors are changed in the Customizer.
   --------------------------------------------------------------------- */
.gzf-card-design--gradient {
	border: 2px solid transparent;
	background:
		linear-gradient(var(--gzf-color-card-bg), var(--gzf-color-card-bg)) padding-box,
		linear-gradient(135deg, var(--gzf-color-primary), var(--gzf-color-secondary) 50%, var(--gzf-color-accent)) border-box;
}
.gzf-card-design--gradient.gzf-hover--lift:hover,
.gzf-card-design--gradient.gzf-hover--glow:hover,
.gzf-card-design--gradient.gzf-hover--zoom:hover {
	border-color: transparent;
	box-shadow: 0 14px 34px rgba(255, 77, 28, .3), 0 0 0 1px rgba(255, 176, 32, .25);
	box-shadow: 0 14px 34px color-mix(in srgb, var(--gzf-color-primary) 34%, transparent), 0 0 0 1px color-mix(in srgb, var(--gzf-color-accent) 28%, transparent);
}
.gzf-card-design--gradient .gzf-card-body {
	padding: 16px 18px 18px;
}
.gzf-card-design--gradient .gzf-card-title {
	font-size: 1.02rem;
	margin-bottom: 8px;
}
.gzf-card-design--gradient .gzfc-card-info-cat {
	display: inline-flex;
	padding: 2px 10px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--gzf-color-primary), var(--gzf-color-accent));
	color: #1a0f04;
	font-weight: 800;
}
.gzf-card-design--gradient .gzf-meta-views {
	color: var(--gzf-color-secondary);
	font-weight: 600;
}

/* ---------------------------------------------------------------------
   8) RETRO — retro-arcade / neo-brutalist: chunky solid border, hard
      offset "sticker" shadow in the accent color that snaps on hover,
      bold uppercase title, dashed meta divider.
   --------------------------------------------------------------------- */
.gzf-card-design--retro {
	border: 2px solid var(--gzf-color-heading);
	border-radius: 4px;
	box-shadow: 6px 6px 0 var(--gzf-color-primary);
}
.gzf-card-design--retro.gzf-hover--lift:hover,
.gzf-card-design--retro.gzf-hover--glow:hover,
.gzf-card-design--retro.gzf-hover--zoom:hover {
	transform: translate(-3px, -3px);
	border-color: var(--gzf-color-heading);
	box-shadow: 9px 9px 0 var(--gzf-color-primary);
}
.gzf-card-design--retro .gzf-card-media {
	border-bottom: 2px solid var(--gzf-color-heading);
}
.gzf-card-design--retro .gzf-card-body {
	padding: 14px 16px 16px;
}
.gzf-card-design--retro .gzf-card-title {
	font-size: .98rem;
	font-weight: 800;
	line-height: 1.25;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.gzf-card-design--retro .gzfc-card-info {
	color: var(--gzf-color-primary);
	font-weight: 800;
}
.gzf-card-design--retro .gzf-post-meta {
	padding-top: 10px;
	border-top: 2px dashed rgba(152, 151, 159, .4);
	border-top-color: color-mix(in srgb, var(--gzf-color-muted) 45%, transparent);
}
.gzf-card-design--retro .gzf-meta-comments {
	display: none;
}
.gzf-card-design--retro .gzf-meta-views {
	margin-left: auto;
	color: var(--gzf-color-primary);
	font-weight: 800;
}
.gzf-card-design--retro.gzf-card--list .gzf-card-media,
.gzf-card-design--retro.gzf-card--horizontal .gzf-card-media {
	border-bottom: 0;
	border-right: 2px solid var(--gzf-color-heading);
}
@media (max-width: 782px) {
	.gzf-card-design--retro.gzf-card--list .gzf-card-media,
	.gzf-card-design--retro.gzf-card--horizontal .gzf-card-media {
		border-right: 0;
		border-bottom: 2px solid var(--gzf-color-heading);
	}
}

/* ---------------------------------------------------------------------
   9) POLAROID — instant-photo look: a warm paper frame around the
      artwork, centered dark caption underneath, tiny tilt on hover. The
      paper stays light in both Dark and Light mode on purpose.
   --------------------------------------------------------------------- */
.gzf-card-design--polaroid {
	padding: 10px 10px 0;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 4px;
	background: #f5f2ea;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .4);
}
.gzf-card-design--polaroid.gzf-hover--lift:hover {
	transform: translateY(-6px) rotate(-1.2deg);
	box-shadow: 0 18px 36px rgba(0, 0, 0, .5);
}
.gzf-card-design--polaroid.gzf-hover--glow:hover {
	border-color: var(--gzf-color-primary);
	box-shadow: 0 0 0 1px var(--gzf-color-primary), 0 16px 34px rgba(255, 77, 28, .25);
}
.gzf-card-design--polaroid .gzf-card-media {
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.gzf-card-design--polaroid .gzf-card-body {
	padding: 14px 6px 16px;
	text-align: center;
}
.gzf-card-design--polaroid .gzf-card-title {
	font-size: 1rem;
	line-height: 1.3;
	margin-bottom: 6px;
}
.gzf-card-design--polaroid .gzf-card-title a { color: #1b1a17; }
.gzf-card-design--polaroid .gzf-card-title a:hover { color: var(--gzf-color-primary); }
.gzf-card-design--polaroid .gzfc-card-info {
	justify-content: center;
	margin-bottom: 8px;
	color: #6b665c;
}
.gzf-card-design--polaroid .gzf-post-meta {
	justify-content: center;
	color: #6b665c;
}
.gzf-card-design--polaroid .gzf-meta-views {
	color: var(--gzf-color-primary);
	font-weight: 700;
}
.gzf-card-design--polaroid .gzf-card-excerpt { color: #55514a; }
.gzf-card-design--polaroid .gzf-meta-date,
.gzf-card-design--polaroid .gzf-meta-comments {
	display: none;
}
.gzf-card-design--polaroid.gzf-card--list .gzf-card-body,
.gzf-card-design--polaroid.gzf-card--horizontal .gzf-card-body {
	padding: 8px 8px 8px 18px;
	text-align: left;
}
.gzf-card-design--polaroid.gzf-card--list .gzfc-card-info,
.gzf-card-design--polaroid.gzf-card--horizontal .gzfc-card-info,
.gzf-card-design--polaroid.gzf-card--list .gzf-post-meta,
.gzf-card-design--polaroid.gzf-card--horizontal .gzf-post-meta {
	justify-content: flex-start;
}

/* ---------------------------------------------------------------------
   10) CYBER — sci-fi HUD panel: two diagonally cut corners, glowing
       diagonal edge lines, accent bar on the left, monospace "// info"
       line and uppercase title.
   --------------------------------------------------------------------- */
.gzf-card-design--cyber {
	border: 0;
	border-left: 3px solid var(--gzf-color-primary);
	border-radius: 0;
	background: linear-gradient(180deg, rgba(255, 255, 255, .035), transparent 40%), var(--gzf-color-card-bg);
	box-shadow: none;
	clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.gzf-card-design--cyber::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	background:
		linear-gradient(to bottom left, transparent 42%, var(--gzf-color-primary) 42%, var(--gzf-color-primary) 58%, transparent 58%) top right / 22px 22px no-repeat,
		linear-gradient(to bottom left, transparent 42%, var(--gzf-color-primary) 42%, var(--gzf-color-primary) 58%, transparent 58%) bottom left / 22px 22px no-repeat;
}
.gzf-card-design--cyber.gzf-hover--lift:hover,
.gzf-card-design--cyber.gzf-hover--glow:hover,
.gzf-card-design--cyber.gzf-hover--zoom:hover {
	border-left-color: var(--gzf-color-accent);
	box-shadow: none;
}
.gzf-card-design--cyber.gzf-hover--lift:hover { transform: translateY(-4px); }
.gzf-card-design--cyber .gzf-card-media {
	border-bottom: 2px solid var(--gzf-color-primary);
}
.gzf-card-design--cyber .gzf-card-body {
	padding: 14px 18px 18px 16px;
}
.gzf-card-design--cyber .gzf-card-title {
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.gzf-card-design--cyber .gzfc-card-info,
.gzf-card-design--cyber .gzf-post-meta {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
.gzf-card-design--cyber .gzfc-card-info::before {
	content: "//";
	color: var(--gzf-color-primary);
	font-weight: 800;
}
.gzf-card-design--cyber .gzfc-card-info-cat {
	color: var(--gzf-color-primary);
	font-weight: 700;
}
.gzf-card-design--cyber .gzf-meta-comments {
	display: none;
}
.gzf-card-design--cyber .gzf-meta-views {
	color: var(--gzf-color-primary);
	font-weight: 700;
}
.gzf-card-design--cyber.gzf-card--list .gzf-card-media,
.gzf-card-design--cyber.gzf-card--horizontal .gzf-card-media {
	border-bottom: 0;
	border-right: 2px solid var(--gzf-color-primary);
}
@media (max-width: 782px) {
	.gzf-card-design--cyber.gzf-card--list .gzf-card-media,
	.gzf-card-design--cyber.gzf-card--horizontal .gzf-card-media {
		border-right: 0;
		border-bottom: 2px solid var(--gzf-color-primary);
	}
}

/* ---------------------------------------------------------------------
   11) AURORA — premium, calm modern skin: fully rounded card, a soft
       ambient gradient glow tucked in the top corner (always faintly on,
       brighter on hover — no animation, just a static/opacity change),
       and a gradient-OUTLINE (not filled) category pill so it reads
       lighter/less "gamer neon" than the Neon design.
   --------------------------------------------------------------------- */
.gzf-card-design--aurora {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--gzf-color-border);
	border-radius: 18px;
}
.gzf-card-design--aurora::before {
	content: "";
	position: absolute;
	top: -60px;
	right: -60px;
	width: 160px;
	height: 160px;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(closest-side, color-mix(in srgb, var(--gzf-color-primary) 38%, transparent), transparent 72%);
	opacity: .5;
	transition: opacity .25s ease;
}
.gzf-card-design--aurora.gzf-hover--lift:hover,
.gzf-card-design--aurora.gzf-hover--glow:hover,
.gzf-card-design--aurora.gzf-hover--zoom:hover {
	border-color: color-mix(in srgb, var(--gzf-color-primary) 45%, var(--gzf-color-border));
}
.gzf-card-design--aurora:hover::before {
	opacity: .9;
}
.gzf-card-design--aurora .gzf-card-media {
	position: relative;
	z-index: 1;
	border-radius: 14px 14px 0 0;
}
.gzf-card-design--aurora .gzf-card-body {
	position: relative;
	z-index: 1;
	padding: 16px 18px 18px;
}
.gzf-card-design--aurora .gzf-card-title {
	font-size: 1.02rem;
	margin-bottom: 10px;
}
.gzf-card-design--aurora .gzfc-card-info-cat {
	display: inline-flex;
	padding: 2px 10px;
	border-radius: 999px;
	border: 1px solid transparent;
	background:
		linear-gradient(var(--gzf-color-card-bg), var(--gzf-color-card-bg)) padding-box,
		linear-gradient(90deg, var(--gzf-color-primary), var(--gzf-color-accent)) border-box;
	color: var(--gzf-color-primary);
	font-weight: 700;
}
.gzf-card-design--aurora .gzf-post-meta {
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--gzf-color-border);
}
.gzf-card-design--aurora .gzf-meta-views {
	color: var(--gzf-color-primary);
	font-weight: 600;
}
.gzf-card-design--aurora.gzf-card--list .gzf-card-media,
.gzf-card-design--aurora.gzf-card--horizontal .gzf-card-media {
	border-radius: 14px 0 0 14px;
}
@media (max-width: 782px) {
	.gzf-card-design--aurora.gzf-card--list .gzf-card-media,
	.gzf-card-design--aurora.gzf-card--horizontal .gzf-card-media {
		border-radius: 14px 14px 0 0;
	}
}

/* ---------------------------------------------------------------------
   12) EDITORIAL — airy, magazine/editorial-style skin: a small uppercase
       category "kicker" sits above a larger, more confident title; no
       card border at all, just generous spacing and a thin hairline
       under the meta row; a quiet accent underline grows under the
       title on hover (transform only, no motion elsewhere).
   --------------------------------------------------------------------- */
.gzf-card-design--editorial {
	border: 0;
	box-shadow: none;
	background: transparent;
}
.gzf-card-design--editorial .gzf-card-media {
	border-radius: 12px;
}
.gzf-card-design--editorial .gzf-card-body {
	display: flex;
	flex-direction: column;
	padding: 16px 4px 0;
	text-align: left;
}
.gzf-card-design--editorial .gzfc-card-info {
	/* .gzf-card-body is forced to display:flex above (only for this
	   design) specifically so `order` here is reliable regardless of
	   whatever display the parent framework's own .gzf-card-body rule
	   uses — this is what actually puts the category "kicker" above the
	   title in DOM order (title -> info -> meta, per inc/card-designs.php). */
	order: -1;
	margin-bottom: 8px;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .08em;
	color: var(--gzf-color-primary);
}
.gzf-card-design--editorial .gzf-card-title {
	font-size: 1.08rem;
	line-height: 1.32;
	margin-bottom: 10px;
}
.gzf-card-design--editorial .gzf-card-title a {
	background-image: linear-gradient(var(--gzf-color-heading), var(--gzf-color-heading));
	background-position: 0 100%;
	background-repeat: no-repeat;
	background-size: 0 1px;
	transition: background-size .2s ease;
}
.gzf-card-design--editorial .gzf-card-title a:hover {
	background-size: 100% 1px;
}
.gzf-card-design--editorial .gzf-post-meta {
	padding-top: 10px;
	border-top: 1px solid var(--gzf-color-border);
}
.gzf-card-design--editorial.gzf-card--list .gzf-card-body,
.gzf-card-design--editorial.gzf-card--horizontal .gzf-card-body {
	padding: 0 0 0 18px;
}

/* ---------------------------------------------------------------------
   13) SPOTLIGHT — image-forward premium skin: a small frosted-glass chip
       (category · size only) floats over the bottom edge of the artwork;
       the title and meta sit in a plain, unboxed area right below it, so
       the artwork stays the visual focus. Lighter-weight than Glass,
       which floats the whole info panel instead of just this one chip.
   --------------------------------------------------------------------- */
.gzf-card-design--spotlight {
	border: 0;
	box-shadow: none;
	background: transparent;
}
.gzf-card-design--spotlight .gzf-card-media {
	border-radius: 14px;
	overflow: hidden;
}
.gzf-card-design--spotlight.gzf-hover--glow:hover .gzf-card-media {
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--gzf-color-primary) 55%, transparent);
}
.gzf-card-design--spotlight .gzf-card-body {
	position: relative;
	z-index: 2;
	margin-top: -18px;
	padding: 0 6px;
}
.gzf-card-design--spotlight .gzfc-card-info {
	display: inline-flex;
	margin: 0 0 10px;
	padding: 5px 12px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--gzf-color-card-bg) 78%, transparent);
	-webkit-backdrop-filter: blur(10px) saturate(150%);
	backdrop-filter: blur(10px) saturate(150%);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
}
.gzf-card-design--spotlight .gzf-card-title {
	font-size: 1.02rem;
	line-height: 1.32;
	margin-bottom: 6px;
}
.gzf-card-design--spotlight .gzf-meta-views {
	color: var(--gzf-color-primary);
	font-weight: 600;
}
/* List/compact/horizontal put the artwork beside the text, so the
   floating-chip overlap can't work there — fall back to a plain body,
   same approach the Glass design above uses. */
.gzf-card-design--spotlight.gzf-card--list .gzf-card-body,
.gzf-card-design--spotlight.gzf-card--horizontal .gzf-card-body {
	margin: 0;
	padding: 0 0 0 18px;
}
.gzf-card-design--spotlight.gzf-card--list .gzfc-card-info,
.gzf-card-design--spotlight.gzf-card--horizontal .gzfc-card-info {
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
	padding: 0;
	margin-bottom: 6px;
}

/* Compact layout (Featured Games widget / sidebar / Latest Releases
   strip): the 5 designs above all fall back to the plain compact row so
   nothing clips, tilts or overlaps at thumbnail size. */
.gzf-card-design--gradient.gzf-card--compact,
.gzf-card-design--retro.gzf-card--compact,
.gzf-card-design--polaroid.gzf-card--compact,
.gzf-card-design--cyber.gzf-card--compact,
.gzf-card-design--glass.gzf-card--compact,
.gzf-card-design--spotlight.gzf-card--compact {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	clip-path: none;
}
.gzf-card-design--cyber.gzf-card--compact::before { display: none; }
.gzf-card-design--retro.gzf-card--compact .gzf-card-media,
.gzf-card-design--cyber.gzf-card--compact .gzf-card-media { border: 0; }
.gzf-card-design--polaroid.gzf-card--compact .gzf-card-media { border-radius: 8px; box-shadow: none; }
.gzf-card-design--polaroid.gzf-card--compact .gzf-card-body { padding: 0 0 0 12px; text-align: left; }
.gzf-card-design--polaroid.gzf-card--compact .gzf-card-title a { color: var(--gzf-color-heading); }
.gzf-card-design--polaroid.gzf-card--compact .gzf-post-meta,
.gzf-card-design--polaroid.gzf-card--compact .gzfc-card-info { color: var(--gzf-color-muted); justify-content: flex-start; }
.gzf-card-design--gradient.gzf-card--compact .gzf-card-body,
.gzf-card-design--retro.gzf-card--compact .gzf-card-body,
.gzf-card-design--cyber.gzf-card--compact .gzf-card-body { padding: 0 0 0 12px; }
.gzf-card-design--spotlight.gzf-card--compact .gzf-card-body { margin: 0; padding: 0 0 0 12px; }
.gzf-card-design--spotlight.gzf-card--compact .gzfc-card-info { margin: 0 0 2px; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; padding: 0; }
.gzf-card-design--retro.gzf-card--compact .gzf-card-title,
.gzf-card-design--cyber.gzf-card--compact .gzf-card-title { font-size: .88rem; }

/* Compact layout (Featured Games widget / sidebar): keep all designs
   readable at small sizes — no ribbons/ratios that need room to breathe. */
.gzf-card--compact .gzfc-card-ribbon,
.gzf-card--compact .gzfc-card-size-pill {
	display: none;
}
.gzf-card--compact.gzf-card-design--poster .gzf-card-body {
	text-align: left;
}

@media (max-width: 480px) {
	.gzfc-card-ribbon,
	.gzfc-card-cat-tag { top: 17px; left: -38px; width: 130px; height: 20px; line-height: 20px; font-size: .62rem; }
}