/*
 * Copyright (c) 2026 Fuzzelogic Solutions Limited.
 * All rights reserved.
 * This file is part of Fuzzelogic Catalog — proprietary software owned by Fuzzelogic Solutions Limited.
 * Unauthorised copying, modification, distribution, or use is strictly prohibited.
 *
 * Card and grid styles for the catalog blocks. Colours prefer the theme's
 * Global Styles tokens, with fallbacks so the cards still look right without
 * the Fuzzelogic theme. The 1.0.0 class names (--games, --books, --game,
 * --book) are kept alongside the layout names so existing theme CSS and
 * existing pages keep working.
 */

.flx-grid {
	--flx-cols: 3;
	--flx-radius: 22px;
	--flx-radius-sm: 18px;
	--flx-gap: 26px;
	--flx-ink: var(--wp--preset--color--contrast, #1f1b16);
	--flx-ink-soft: #6b6356;
	--flx-ink-faint: #a89e8c;
	--flx-brand: var(--wp--preset--color--brand, #e8572a);
	--flx-brand-dark: var(--wp--preset--color--brand-dark, #d44a1f);
	--flx-line: rgba(31, 27, 22, 0.08);

	display: grid;
	gap: var(--flx-gap);
}

.flx-grid--games,
.flx-grid--grid { grid-template-columns: repeat(var(--flx-cols, 3), minmax(0, 1fr)); }

.flx-grid--books,
.flx-grid--rows { grid-template-columns: minmax(0, 1fr); gap: 22px; }

@media (max-width: 1000px) {
	.flx-grid--games,
	.flx-grid--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
	.flx-grid--games,
	.flx-grid--grid { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Tall card (grid layout) ---------- */
.flx-card--game,
.flx-card--grid {
	display: flex;
	flex-direction: column;
	border-radius: var(--flx-radius, 22px);
	overflow: hidden;
	background: var(--wp--preset--color--card, #ffffff);
	border: 1px solid var(--flx-line, rgba(31, 27, 22, 0.08));
	box-shadow: 0 8px 24px rgba(31, 27, 22, 0.05);
	transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.flx-card--game:hover,
.flx-card--grid:hover {
	transform: translateY(-6px);
	border-color: rgba(232, 87, 42, 0.4);
	box-shadow: 0 24px 50px rgba(31, 27, 22, 0.12);
}
.flx-card__cover {
	position: relative;
	width: 100%;
	height: 200px;
	background: linear-gradient(135deg, #f1ece0, #e7decc);
	overflow: hidden;
}
.flx-card__cover .flx-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flx-card__placeholder {
	position: absolute; inset: 0;
	display: flex; align-items: center; justify-content: center;
	color: var(--flx-ink-faint, #a89e8c); font-size: 13px; letter-spacing: 0.04em; font-weight: 600;
}
.flx-card__body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.flx-chip {
	align-self: flex-start;
	display: inline-block;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
	white-space: nowrap; margin-bottom: 14px;
	background: rgba(110, 79, 207, 0.1); color: #6243be; border: 1px solid rgba(110, 79, 207, 0.22);
}
/* Rotate chip accent colour by position for visual variety. */
.flx-grid--games .flx-card--game:nth-child(3n+2) .flx-chip,
.flx-grid--grid .flx-card--grid:nth-child(3n+2) .flx-chip {
	background: rgba(31, 122, 107, 0.1); color: #176055; border-color: rgba(31, 122, 107, 0.22);
}
.flx-grid--games .flx-card--game:nth-child(3n) .flx-chip,
.flx-grid--grid .flx-card--grid:nth-child(3n) .flx-chip {
	background: rgba(232, 87, 42, 0.1); color: #c0461f; border-color: rgba(232, 87, 42, 0.22);
}
.flx-card__title {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-weight: 700; font-size: 24px; margin: 0 0 8px;
	color: var(--flx-ink, #1f1b16);
}
.flx-card__sub {
	font-family: 'Instrument Serif', serif;
	font-size: 17px; color: var(--flx-ink-soft, #6b6356); margin: 0 0 8px;
}
.flx-card__desc { font-size: 15px; line-height: 1.55; color: var(--flx-ink-soft, #6b6356); margin: 0 0 20px; }
.flx-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; }
.flx-card__price {
	font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 20px;
	color: var(--flx-ink, #1f1b16);
}
.flx-card__price:empty { display: none; }

/* ---------- Buttons ---------- */
.flx-btn {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 11px 20px; border-radius: 999px;
	font-weight: 700; font-size: 14px; text-decoration: none; cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease;
}
.flx-btn--brand { background: var(--flx-brand, #e8572a); color: #fff; }
.flx-btn--brand:hover { background: var(--flx-brand-dark, #d44a1f); color: #fff; }
.flx-btn--ink { background: #2a2218; color: #f7f1e5; white-space: nowrap; }
.flx-btn--ink:hover { background: var(--flx-brand, #e8572a); color: #fff; }

/* ---------- Wide card (rows layout) ---------- */
.flx-card--book,
.flx-card--rows {
	display: grid; grid-template-columns: 152px minmax(0, 1fr) auto; gap: 30px; align-items: center;
	background: var(--wp--preset--color--paper-card, #fbf5ea);
	border: 1px solid rgba(42, 34, 24, 0.08);
	border-radius: var(--flx-radius-sm, 18px); padding: 24px;
	box-shadow: 0 6px 18px rgba(42, 34, 24, 0.04);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.flx-card--book:hover,
.flx-card--rows:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(42, 34, 24, 0.12); }
.flx-book__cover {
	position: relative;
	width: 152px; height: 210px; border-radius: 8px; overflow: hidden;
	background: linear-gradient(135deg, #efe7d6, #e2d7c2);
	box-shadow: 0 14px 30px rgba(42, 34, 24, 0.18);
	display: flex; align-items: center; justify-content: center;
}
.flx-book__cover .flx-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flx-book__chip {
	display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--wp--preset--color--teal, #1f7a6b); margin-bottom: 10px;
}
.flx-book__title {
	font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 28px;
	margin: 0 0 8px; color: #2a2218;
}
.flx-book__author { font-family: 'Instrument Serif', serif; font-size: 19px; color: #6b6152; margin: 0 0 8px; }
.flx-book__desc { font-size: 15px; line-height: 1.55; color: #7a7062; margin: 0; max-width: 440px; }
.flx-book__aside { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; }
.flx-book__price {
	font-family: 'Bricolage Grotesque', sans-serif; font-weight: 700; font-size: 22px; color: #2a2218;
}
.flx-book__price:empty { display: none; }
@media (max-width: 720px) {
	.flx-card--book,
	.flx-card--rows { grid-template-columns: 110px minmax(0, 1fr); }
	.flx-book__cover { width: 110px; height: 152px; }
	.flx-book__aside { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; }
}

/* ---------- Corner badge ---------- */
.flx-badge {
	position: absolute; left: 14px; top: 14px; z-index: 2;
	background: #fff; color: var(--flx-brand, #e8572a);
	font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	padding: 6px 12px; border-radius: 999px; box-shadow: 0 6px 16px rgba(31, 27, 22, 0.12);
}

/* ---------- Empty and misconfigured states ---------- */
.flx-empty {
	grid-column: 1 / -1;
	border: 2px dashed rgba(31, 27, 22, 0.2); border-radius: var(--flx-radius-sm, 18px);
	padding: 48px; text-align: center; color: #8a8276; font-size: 16px;
}
.flx-empty a { color: var(--flx-brand, #e8572a); font-weight: 700; text-decoration: none; }
.flx-empty--warn { border-color: rgba(232, 87, 42, 0.55); color: #a8452a; }

/* ---------- Section wrapper used by the ready-made patterns ---------- */
.flx-section {
	--flx-section-space: clamp(48px, 8vw, 110px);
	padding-top: var(--flx-section-space);
	padding-bottom: var(--flx-section-space);
}
.flx-section__eyebrow {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: 13px; font-weight: 700; letter-spacing: 0.18em;
	color: var(--wp--preset--color--brand, #e8572a);
	margin: 0 0 10px;
}
.flx-section__title {
	font-family: 'Bricolage Grotesque', sans-serif;
	font-size: clamp(30px, 4.4vw, 52px); font-weight: 700; line-height: 1.08;
	margin: 0 0 12px;
	color: var(--wp--preset--color--contrast, #1f1b16);
}
.flx-section__lead {
	font-size: 18px; line-height: 1.6; color: #6b6356;
	margin: 0 0 36px; max-width: 60ch;
}

/* ---------- Single-page details strip ---------- */
.flx-details { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin: 18px 0 28px; }
.flx-details__item { font-size: 15px; color: #6b6356; }
.flx-details__item em { font-style: normal; font-weight: 700; color: #2a2218; }
.flx-details__badge {
	background: var(--flx-brand, #e8572a); color: #fff;
	font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
	padding: 6px 12px; border-radius: 999px;
}