/* =====================================================================
   Game Card Designs (skins)
   -----------------------------------------------------------------------
   Ten selectable Card Skins (Customize > Game Cards > Card Design (Skins)):
   poster (default), minimal, overlay, neon, ribbon, glass, gradient, retro,
   polaroid, cyber. Every card keeps the same required pieces — image,
   title, view count, Like button. 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.

   This file does not change the framework's base .gzf-card rules or the
   Card Layout system (grid/list/compact/featured/horizontal).
   ===================================================================== */

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

/* =====================================================================
   Card Skins 2–10 (restored). Every rule is scoped to
   .gzf-card-design--{skin} and skips .gzf-card--compact, so the sidebar
   widget / Latest Releases strip rows stay the plain compact row.
   Nothing here touches the Like button, badges or card markup.
   ===================================================================== */

/* Category label drawn on the artwork (diagonal corner ribbon). Low specificity on purpose so the Post Card Category Label settings still win. */
.gzfc-card-cat-tag {
	position: absolute;
	top: 14px;
	left: -36px;
	z-index: 3;
	width: 128px;
	box-sizing: border-box;
	padding: 3px 0;
	transform: rotate(-45deg);
	background: var(--gzf-color-primary);
	color: #fff;
	font-size: .66rem;
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: .04em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	pointer-events: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
/* "Image Corner Badge" style: small flat tag instead of the diagonal ribbon. */
body.gzfc-card-cat-style-corner .gzfc-card-cat-tag {
	right: auto;
	width: auto;
	transform: none;
	text-align: left;
	text-transform: none;
	overflow: visible;
}

/* 2) MINIMAL — flat, borderless, clean text under the image. */
.gzf-card-design--minimal:not(.gzf-card--compact) {
	background: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	overflow: visible;
}
.gzf-card-design--minimal:not(.gzf-card--compact) .gzf-card-media {
	border-radius: var(--gzf-card-radius);
}
.gzf-card-design--minimal:not(.gzf-card--compact) .gzf-card-body {
	padding: 12px 2px 4px;
	text-align: start;
}
.gzf-card-design--minimal:not(.gzf-card--compact) .gzf-card-title {
	font-size: .98rem;
	line-height: 1.35;
	margin-bottom: 6px;
}
.gzf-card-design--minimal:not(.gzf-card--compact) .gzfc-card-info {
	margin-bottom: 6px;
}
.gzf-card-design--minimal.gzf-card--grid:hover,
.gzf-card-design--minimal.gzf-card--featured:hover {
	box-shadow: none;
}

/* 3) MAGAZINE OVERLAY — text sits on the artwork (grid / featured layouts). */
.gzf-card-design--overlay.gzf-card--grid,
.gzf-card-design--overlay.gzf-card--featured {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 4 / 5;
	min-height: 0;
}
.gzf-card-design--overlay.gzf-card--grid .gzf-card-media,
.gzf-card-design--overlay.gzf-card--featured .gzf-card-media {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}
.gzf-card-design--overlay.gzf-card--grid .gzf-card-media img,
.gzf-card-design--overlay.gzf-card--grid .gzf-card-media .gzf-card-placeholder,
.gzf-card-design--overlay.gzf-card--featured .gzf-card-media img,
.gzf-card-design--overlay.gzf-card--featured .gzf-card-media .gzf-card-placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.gzf-card-design--overlay.gzf-card--grid .gzf-card-body,
.gzf-card-design--overlay.gzf-card--featured .gzf-card-body {
	position: relative;
	z-index: 2;
	padding: 56px 16px 16px;
	text-align: left;
	background: linear-gradient(to top, rgba(6, 6, 8, .94) 0%, rgba(6, 6, 8, .72) 55%, rgba(6, 6, 8, 0) 100%);
}
.gzf-card-design--overlay.gzf-card--grid .gzf-card-title a,
.gzf-card-design--overlay.gzf-card--featured .gzf-card-title a {
	color: #fff;
}
.gzf-card-design--overlay.gzf-card--grid .gzf-card-title a:hover,
.gzf-card-design--overlay.gzf-card--featured .gzf-card-title a:hover {
	color: var(--gzf-color-accent);
}
.gzf-card-design--overlay.gzf-card--grid .gzfc-card-info,
.gzf-card-design--overlay.gzf-card--grid .gzf-post-meta,
.gzf-card-design--overlay.gzf-card--featured .gzfc-card-info,
.gzf-card-design--overlay.gzf-card--featured .gzf-post-meta {
	color: rgba(255, 255, 255, .78);
}
.gzf-card-design--overlay.gzf-card--grid .gzf-card-excerpt,
.gzf-card-design--overlay.gzf-card--featured .gzf-card-excerpt {
	color: rgba(255, 255, 255, .8);
}
.gzf-post-grid--featured .gzf-card-design--overlay.gzf-card--featured:first-child {
	aspect-ratio: auto;
	min-height: 340px;
}

/* 4) NEON — accent outline with a soft glow. */
.gzf-card-design--neon:not(.gzf-card--compact) {
	border: 1px solid var(--gzf-color-primary);
	box-shadow: 0 0 0 1px rgba(255, 77, 28, .25), 0 0 16px rgba(255, 77, 28, .35);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--gzf-color-primary) 30%, transparent), 0 0 16px color-mix(in srgb, var(--gzf-color-primary) 40%, transparent);
}
.gzf-card-design--neon:not(.gzf-card--compact):hover {
	border-color: var(--gzf-color-secondary);
	box-shadow: 0 0 0 1px var(--gzf-color-secondary), 0 0 26px rgba(255, 77, 28, .55);
	box-shadow: 0 0 0 1px var(--gzf-color-secondary), 0 0 26px color-mix(in srgb, var(--gzf-color-primary) 60%, transparent);
}
.gzf-card-design--neon:not(.gzf-card--compact) .gzf-card-body {
	padding: 14px 16px 18px;
}
.gzf-card-design--neon:not(.gzf-card--compact) .gzfc-card-info-cat {
	color: var(--gzf-color-primary);
	font-weight: 800;
	text-shadow: 0 0 8px rgba(255, 77, 28, .7);
}
.gzf-card-design--neon:not(.gzf-card--compact) .gzf-card-title a:hover {
	text-shadow: 0 0 10px rgba(255, 138, 61, .6);
}

/* 5) RIBBON BADGE — bold gradient ribbon, accent top edge, left-aligned text. */
.gzf-card-design--ribbon:not(.gzf-card--compact) {
	border-top: 3px solid var(--gzf-color-primary);
}
.gzf-card-design--ribbon:not(.gzf-card--compact) .gzfc-card-cat-tag {
	width: 150px;
	top: 18px;
	left: -42px;
	padding: 4px 0;
	background: linear-gradient(90deg, var(--gzf-color-primary), var(--gzf-color-secondary));
	font-size: .7rem;
	box-shadow: 0 3px 8px rgba(0, 0, 0, .45);
}
.gzf-card-design--ribbon:not(.gzf-card--compact) .gzf-card-body {
	padding: 14px 18px 18px;
	text-align: start;
}
.gzf-card-design--ribbon:not(.gzf-card--compact) .gzf-card-title {
	font-size: 1rem;
	margin-bottom: 6px;
}
body.gzfc-card-cat-style-corner .gzf-card-design--ribbon .gzfc-card-cat-tag {
	left: 12px;
	top: 12px;
	padding: 3px 9px;
	background-image: none;
}

/* 6) GLASS FLOAT — frosted panel floating over the lower edge of the artwork. */
.gzf-card-design--glass:not(.gzf-card--compact) {
	border: 1px solid var(--gzf-color-border);
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18);
}
.gzf-card-design--glass:not(.gzf-card--compact):hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 26px rgba(0, 0, 0, .3);
}
.gzf-card-design--glass.gzf-card--grid .gzf-card-media,
.gzf-card-design--glass.gzf-card--featured .gzf-card-media {
	aspect-ratio: 4 / 5;
}
.gzf-card-design--glass.gzf-card--grid .gzf-card-body,
.gzf-card-design--glass.gzf-card--featured .gzf-card-body {
	position: relative;
	z-index: 2;
	margin: -46px 8px 8px;
	padding: 10px 12px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: calc(var(--gzf-card-radius, 10px) - 2px);
	background: rgba(20, 20, 23, .74);
	background: color-mix(in srgb, var(--gzf-color-card-bg) 74%, transparent);
	-webkit-backdrop-filter: blur(12px) saturate(150%);
	backdrop-filter: blur(12px) saturate(150%);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .35);
}
.gzf-card-design--glass:not(.gzf-card--compact) .gzfc-card-info {
	color: var(--gzf-color-primary);
	font-weight: 700;
}

/* 7) GRADIENT BORDER — gradient outline and gradient category pill. */
.gzf-card-design--gradient:not(.gzf-card--compact) {
	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;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
}
.gzf-card-design--gradient:not(.gzf-card--compact):hover {
	border-color: transparent;
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(255, 77, 28, .3);
	box-shadow: 0 12px 28px color-mix(in srgb, var(--gzf-color-primary) 34%, transparent);
}
.gzf-card-design--gradient:not(.gzf-card--compact) .gzf-card-body {
	padding: 12px 14px 14px;
	background: transparent;
}
.gzf-card-design--gradient:not(.gzf-card--compact) .gzfc-card-info-cat {
	display: inline-flex;
	padding: 1px 9px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--gzf-color-primary), var(--gzf-color-accent));
	color: #1a0f04;
	font-weight: 800;
}
.gzf-card-design--gradient:not(.gzf-card--compact) .gzf-meta-views {
	color: var(--gzf-color-secondary);
	font-weight: 600;
}

/* 8) RETRO ARCADE — chunky border with a hard offset accent shadow. */
.gzf-card-design--retro:not(.gzf-card--compact) {
	border: 2px solid var(--gzf-color-heading);
	border-radius: 4px;
	box-shadow: 5px 5px 0 var(--gzf-color-primary);
}
.gzf-card-design--retro:not(.gzf-card--compact):hover {
	transform: translate(-2px, -2px);
	border-color: var(--gzf-color-heading);
	box-shadow: 7px 7px 0 var(--gzf-color-primary);
}
.gzf-card-design--retro:not(.gzf-card--compact) .gzf-card-media {
	border-radius: 0;
	border-bottom: 2px solid var(--gzf-color-heading);
}
.gzf-card-design--retro:not(.gzf-card--compact) .gzf-card-body {
	padding: 12px 14px 14px;
}
.gzf-card-design--retro:not(.gzf-card--compact) .gzf-card-title {
	font-size: .9rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.gzf-card-design--retro:not(.gzf-card--compact) .gzfc-card-info {
	color: var(--gzf-color-primary);
	font-weight: 800;
}
.gzf-card-design--retro:not(.gzf-card--compact) .gzf-post-meta {
	padding-top: 8px;
	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:not(.gzf-card--compact) .gzf-meta-views {
	color: var(--gzf-color-primary);
	font-weight: 800;
}

/* 9) POLAROID FRAME — warm paper frame, centered caption (keeps light paper in dark mode on purpose). */
.gzf-card-design--polaroid:not(.gzf-card--compact) {
	padding: 8px 8px 0;
	background: #f5f2ea;
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 4px;
	box-shadow: 0 8px 18px rgba(0, 0, 0, .4);
}
.gzf-card-design--polaroid:not(.gzf-card--compact):hover {
	transform: translateY(-4px) rotate(-1.2deg);
	box-shadow: 0 14px 28px rgba(0, 0, 0, .5);
}
.gzf-card-design--polaroid:not(.gzf-card--compact) .gzf-card-media {
	border-radius: 2px;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.gzf-card-design--polaroid.gzf-card--grid .gzf-card-media,
.gzf-card-design--polaroid.gzf-card--featured .gzf-card-media {
	aspect-ratio: 1 / 1;
}
.gzf-card-design--polaroid:not(.gzf-card--compact) .gzf-card-body {
	padding: 12px 6px 14px;
	text-align: center;
}
.gzf-card-design--polaroid:not(.gzf-card--compact) .gzf-card-title a {
	color: #1b1a17;
}
.gzf-card-design--polaroid:not(.gzf-card--compact) .gzf-card-title a:hover {
	color: var(--gzf-color-primary);
}
.gzf-card-design--polaroid:not(.gzf-card--compact) .gzfc-card-info,
.gzf-card-design--polaroid:not(.gzf-card--compact) .gzf-post-meta {
	justify-content: center;
	color: #6b665c;
}
.gzf-card-design--polaroid:not(.gzf-card--compact) .gzf-post-meta {
	border-color: rgba(0, 0, 0, .1);
}
.gzf-card-design--polaroid:not(.gzf-card--compact) .gzf-card-excerpt {
	color: #6b665c;
}
.gzf-card-design--polaroid:not(.gzf-card--compact) .gzf-meta-views {
	color: var(--gzf-color-primary);
	font-weight: 700;
}

/* 10) CYBER HUD — diagonal cut corners, accent edge lines, monospace info. */
.gzf-card-design--cyber:not(.gzf-card--compact) {
	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% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.gzf-card-design--cyber:not(.gzf-card--compact)::before {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	background:
		linear-gradient(to bottom left, transparent 40%, var(--gzf-color-primary) 40%, var(--gzf-color-primary) 60%, transparent 60%) top right / 16px 16px no-repeat,
		linear-gradient(to bottom left, transparent 40%, var(--gzf-color-primary) 40%, var(--gzf-color-primary) 60%, transparent 60%) bottom left / 16px 16px no-repeat;
}
.gzf-card-design--cyber:not(.gzf-card--compact):hover {
	transform: translateY(-3px);
	border-left-color: var(--gzf-color-accent);
	box-shadow: none;
}
.gzf-card-design--cyber:not(.gzf-card--compact) .gzf-card-media {
	border-bottom: 2px solid var(--gzf-color-primary);
}
.gzf-card-design--cyber:not(.gzf-card--compact) .gzf-card-body {
	padding: 12px 14px 16px;
}
.gzf-card-design--cyber:not(.gzf-card--compact) .gzf-card-title {
	font-size: .9rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.gzf-card-design--cyber:not(.gzf-card--compact) .gzfc-card-info,
.gzf-card-design--cyber:not(.gzf-card--compact) .gzf-post-meta {
	font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;
}
.gzf-card-design--cyber:not(.gzf-card--compact) .gzfc-card-info::before {
	content: "//";
	color: var(--gzf-color-primary);
	font-weight: 700;
}

/* Responsive: same skins, tuned for phones and tablets. */
@media (max-width: 767px) {
	.gzf-card-design--overlay.gzf-card--grid .gzf-card-body,
	.gzf-card-design--overlay.gzf-card--featured .gzf-card-body { padding: 44px 12px 12px; }
	.gzf-card-design--retro:not(.gzf-card--compact) { box-shadow: 4px 4px 0 var(--gzf-color-primary); }
	.gzf-card-design--retro:not(.gzf-card--compact):hover { transform: none; box-shadow: 4px 4px 0 var(--gzf-color-primary); }
	.gzf-card-design--polaroid:not(.gzf-card--compact):hover { transform: none; }
	.gzf-card-design--cyber:not(.gzf-card--compact) .gzf-card-title { font-size: .84rem; }
	.gzf-card-design--glass.gzf-card--grid .gzf-card-body,
	.gzf-card-design--glass.gzf-card--featured .gzf-card-body { margin: -40px 6px 6px; padding: 8px 10px; }
	.gzfc-card-cat-tag { font-size: .6rem; }
}