/* CRM blocks inside the post text — see crm/content/content.php. Spacing as the demo post
   (post-584.css: image container 5e4fbb3, quote container 94dd3e3 and its 38px divider),
   the call to action as the demo's CTA card (Games, post-485.css d94c5dd, accent #FFE459).
   Breakpoints 1279 / 767 as the Elementor kit. Colours and fonts — the theme's variables. */

/* ── Image ─────────────────────────────────────────────────────────────── */

figure.crm-image {
	display: block;
	width: 100%;
	margin: 0 0 40px;
}

figure.crm-image img {
	display: block;
	width: 100%;
	height: auto;
}

figure.crm-image figcaption {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 15px 0 0 !important; /* the theme's figcaption sets 10px with !important */
	max-height: none;
	overflow: visible;
}

figure.crm-image figcaption::before {
	content: "";
	flex: 0 0 38px;
	height: 2px;
	background-color: var(--theme-color-link);
}

/* ── Call to action ────────────────────────────────────────────────────── */

.crm-cta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
	margin: 0 0 40px;
	padding: 50px 40px;
	background-color: var(--theme-color-bg_color_2);
}

.crm-cta-body {
	flex: 1 1 auto;
	min-width: 0;
}

.crm-cta p {
	margin: 0;
}

.crm-cta .crm-cta-title {
	font-family: var(--theme-font-h4_font-family);
	font-size: var(--theme-font-h4_font-size);
	font-weight: var(--theme-font-h4_font-weight);
	font-style: var(--theme-font-h4_font-style);
	line-height: var(--theme-font-h4_line-height);
	text-transform: var(--theme-font-h4_text-transform);
	letter-spacing: var(--theme-font-h4_letter-spacing);
	color: var(--theme-color-title);
}

.crm-cta .crm-cta-accent {
	color: #FFE459;
}

.crm-cta .crm-cta-title + .crm-cta-text {
	margin-top: 15px;
}

.crm-cta .crm-cta-text {
	color: var(--theme-color-text);
}

.crm-cta-action {
	flex: 0 0 auto;
}

/* The theme's .theme_button, repeated: the CRM's HTML carries only crm-* classes. */
.crm-cta a.crm-cta-button {
	display: inline-block;
	box-sizing: border-box;
	max-width: 100%;
	font-family: var(--theme-font-button_font-family);
	font-size: var(--theme-font-button_font-size);
	font-weight: var(--theme-font-button_font-weight);
	font-style: var(--theme-font-button_font-style);
	line-height: var(--theme-font-button_line-height);
	text-transform: var(--theme-font-button_text-transform);
	letter-spacing: var(--theme-font-button_letter-spacing);
	text-decoration: none;
	text-align: center;
	padding: var(--theme-font-button_padding);
	border: var(--theme-font-button_border-width) solid var(--theme-font-button_border-color, var(--theme-color-link));
	border-radius: var(--theme-font-button_border-radius);
	color: var(--theme-font-button_color, var(--theme-color-bg_color));
	background-color: var(--theme-font-button_background-color, var(--theme-color-link));
	transition: color 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.crm-cta a.crm-cta-button:hover,
.crm-cta a.crm-cta-button:focus {
	color: var(--theme-font-button_color-hover, var(--theme-color-bg_color));
	border-color: var(--theme-font-button_border-color-hover, var(--theme-color-hover));
	background-color: var(--theme-font-button_background-color-hover, var(--theme-color-hover));
}

/* ── Quote ───────────────────────────────────────────────────────────────
   The theme already paints a quote in the text (style.css "Blockquotes": bg_color_2, title
   colour, cite in the h6 font); sizes and the author line here are the demo's (94dd3e3,
   5d3ea83, 94c3e3d). Gutenberg's plain and large styles keep the theme's look. */

.entry-content > blockquote:not(.is-style-plain):not(.is-large):not(.is-style-large) {
	margin: 0 0 40px;
	padding: 50px 40px;
}

.entry-content > blockquote:not(.is-style-plain):not(.is-large):not(.is-style-large) > :is(cite, footer, .wp-block-quote__citation) {
	display: flex;
	align-items: center;
	gap: 13px;
	margin-top: 23px;
	font-family: var(--theme-font-h6_font-family);
	font-size: var(--theme-font-h6_font-size);
	font-weight: var(--theme-font-h6_font-weight);
	font-style: normal;
	line-height: var(--theme-font-h6_line-height);
	text-transform: var(--theme-font-h6_text-transform);
	letter-spacing: var(--theme-font-h6_letter-spacing);
	color: var(--theme-color-title);
}

.entry-content > blockquote:not(.is-style-plain):not(.is-large):not(.is-style-large) > :is(cite, footer, .wp-block-quote__citation)::before {
	content: "";
	flex: 0 0 38px;
	height: 2px;
	background-color: var(--theme-color-link);
}

/* ── Table ───────────────────────────────────────────────────────────────
   The theme's look stays (skins/default/css/style.css "Tables": header row on alt_bg_color
   in the h6 font, zebra rows bg_color_2 / bg_color, no borders); tuned here for long text. */

.crm-table-wrap {
	margin: 0 0 40px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	scrollbar-color: var(--theme-color-bd_color) var(--theme-color-bg_color_2);
}

.crm-table-wrap > table.crm-table {
	margin: 0;
}

/* A table from the block editor: the figure keeps the spacing, the wrapper takes the width. */
figure.wp-block-table:has(> .crm-table-wrap) {
	display: block;
	width: 100%;
}

figure.wp-block-table > .crm-table-wrap {
	margin-bottom: 0 !important;
}

table.crm-table th,
table.crm-table td {
	vertical-align: top;
	text-align: left;
	min-width: 8em; /* below it the wrapper scrolls instead of one word a line */
	overflow-wrap: break-word;
	word-break: normal;
	hyphens: auto;
}

table.crm-table td {
	font-size: 0.9375em;
	line-height: var(--theme-font-p_line-height);
	color: var(--theme-color-text);
}

table.crm-table thead th {
	font-size: 16px;
	line-height: 1.3em;
	vertical-align: bottom;
}

/* A <th> opening a body row: the theme would paint it as the header row. */
table.crm-table tbody th.crm-table-rowhead {
	color: var(--theme-color-title);
	background-color: transparent;
	font-size: 16px;
	line-height: 1.3em;
}

table.crm-table td > :first-child {
	margin-top: 0;
}

table.crm-table td > :last-child {
	margin-bottom: 0;
}

table.crm-table td p,
table.crm-table td ul,
table.crm-table td ol {
	margin-bottom: 0.6em;
}

table.crm-table caption {
	text-align: left;
	margin-bottom: 15px;
}

@media (max-width: 1279px) {
	figure.crm-image,
	.crm-cta,
	.crm-table-wrap,
	.entry-content > blockquote:not(.is-style-plain):not(.is-large):not(.is-style-large) {
		margin-bottom: 35px;
	}
	.entry-content > blockquote:not(.is-style-plain):not(.is-large):not(.is-style-large) {
		padding: 40px 35px;
	}
	.entry-content > blockquote:not(.is-style-plain):not(.is-large):not(.is-style-large) > :is(cite, footer, .wp-block-quote__citation) {
		margin-top: 15px;
	}
	.crm-cta {
		padding: 40px 35px;
	}
}

@media (max-width: 767px) {
	figure.crm-image,
	.crm-cta,
	.crm-table-wrap,
	.entry-content > blockquote:not(.is-style-plain):not(.is-large):not(.is-style-large) {
		margin-bottom: 25px;
	}
	.entry-content > blockquote:not(.is-style-plain):not(.is-large):not(.is-style-large) {
		padding: 30px 25px;
	}
	.entry-content > blockquote:not(.is-style-plain):not(.is-large):not(.is-style-large) > :is(cite, footer, .wp-block-quote__citation) {
		margin-top: 12px;
		gap: 10px;
	}
	.crm-cta {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
		padding: 30px 25px;
	}
	.crm-cta .crm-cta-title + .crm-cta-text {
		margin-top: 12px;
	}

	/* Cards: a row per card, a cell per line, its column header above it. */
	.crm-table-wrap:has(> .crm-table-stack) {
		overflow-x: visible;
	}
	table.crm-table-stack,
	table.crm-table-stack > tbody,
	table.crm-table-stack > tfoot,
	table.crm-table-stack tr,
	table.crm-table-stack th,
	table.crm-table-stack td {
		display: block;
		width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}
	table.crm-table-stack caption {
		display: block;
	}
	/* The header row stays for screen readers only. */
	table.crm-table-stack > thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	table.crm-table-stack tr {
		margin: 0 0 15px;
		padding: 20px;
		background-color: var(--theme-color-bg_color_2);
	}
	table.crm-table-stack tr:last-child {
		margin-bottom: 0;
	}
	table.crm-table-stack > tbody > tr > td,
	table.crm-table-stack > tbody > tr > th {
		padding: 0;
		background-color: transparent;
	}
	table.crm-table-stack > tbody > tr > * + * {
		margin-top: 12px;
		padding-top: 12px;
		border-top: 1px solid var(--theme-color-bd_color);
	}
	table.crm-table-stack td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 4px;
		font-family: var(--theme-font-h6_font-family);
		font-size: 14px;
		font-weight: var(--theme-font-h6_font-weight);
		line-height: 1.3em;
		text-transform: var(--theme-font-h6_text-transform);
		letter-spacing: var(--theme-font-h6_letter-spacing);
		color: var(--theme-color-meta);
	}
	table.crm-table-stack th.crm-table-rowhead {
		font-size: var(--theme-font-h6_font-size);
		color: var(--theme-color-link);
	}
}