/* Business-tutorial content blocks + byline (29-STANDARD 2, 4, 6b).
 * Loaded by tmpl/block_byline.php for tutorials and case studies only.
 * Scoped under the community article container so no other page is affected.
 * Doubled-class selectors beat the Tailwind/preflight resets on tables, img, h-tags. */

/* ---- Byline under the H1 (on the dark community banner) ---- */
#banner-ft-comm .cm-byline {
	display: flex; align-items: center; gap: var(--sp-12);
	margin: var(--sp-12) 0 var(--sp-16); padding: 0;
	font-size: var(--fs-14); line-height: 1.5; text-transform: none;
	color: var(--c-community-on-dark-muted, rgba(255, 255, 255, .8));
}
#banner-ft-comm .cm-byline .cm-byline__avatar { flex: 0 0 auto; display: block; line-height: 0; }
#banner-ft-comm .cm-byline .cm-byline__avatar img {
	display: block; width: 36px; height: 36px; max-width: none;
	border-radius: var(--r-circle); object-fit: cover; object-position: center top;
	border: 2px solid rgba(255, 255, 255, .6);
}
#banner-ft-comm .cm-byline .cm-byline__text { font-size: var(--fs-14); }
#banner-ft-comm .cm-byline a { color: var(--c-community-on-dark, #fff); text-decoration: underline; text-underline-offset: 2px; }
#banner-ft-comm .cm-byline .cm-byline__sep { margin: 0 var(--sp-4); opacity: .6; }
@media (max-width: 600px) {
	#banner-ft-comm .cm-byline { align-items: flex-start; }
	#banner-ft-comm .cm-byline .cm-byline__sep { display: none; }
	#banner-ft-comm .cm-byline .cm-byline__text a,
	#banner-ft-comm .cm-byline .cm-byline__text time { display: inline-block; margin-right: var(--sp-8); }
}

/* ---- Answer-first lead paragraph ---- */
.box-con-comm .post-content p.cm-answer,
.box-con-comm .post-content .cm-answer {
	font-size: var(--text-lead); line-height: 1.65; font-weight: var(--fw-medium, 500);
	color: var(--color-heading, var(--c-ink-900));
	margin: var(--sp-16) 0 var(--sp-24);
}

/* ---- Cmsmart insight box ---- */
.box-con-comm .post-content .cm-insight {
	position: relative; margin: var(--sp-24) 0; padding: var(--sp-16) var(--sp-20) var(--sp-16) var(--sp-24);
	background: var(--c-surface-50); border: 1px solid var(--c-line);
	border-left: 5px solid var(--c-navy-500); border-radius: var(--r-8);
	color: var(--c-ink-700);
}
.box-con-comm .post-content .cm-insight::before {
	content: "Cmsmart insight"; display: block; margin-bottom: var(--sp-8);
	font-size: var(--fs-12); font-weight: var(--fw-bold, 700); letter-spacing: .06em; text-transform: uppercase;
	color: var(--c-navy-500);
}
.box-con-comm .post-content .cm-insight > :last-child { margin-bottom: 0; }
.box-con-comm .post-content .cm-insight p { margin: 0 0 var(--sp-8); }

/* ---- Example scenario ---- */
.box-con-comm .post-content .cm-scenario {
	margin: var(--sp-24) 0; padding: var(--sp-16) var(--sp-20);
	background: var(--c-brand-50); border: 1px dashed var(--c-brand-300, var(--c-brand-200)); border-radius: var(--r-8);
	color: var(--c-ink-700);
}
.box-con-comm .post-content .cm-scenario::before {
	content: "Example scenario"; display: inline-block; margin-bottom: var(--sp-8);
	padding: var(--sp-2) var(--sp-8); border-radius: var(--r-pill);
	background: var(--c-surface-0); border: 1px solid var(--c-brand-200);
	font-size: var(--fs-12); font-weight: var(--fw-bold, 700); letter-spacing: .06em; text-transform: uppercase;
	color: var(--c-accent-600);
}
.box-con-comm .post-content .cm-scenario > :last-child { margin-bottom: 0; }

/* ---- Business value table: benefit / how it shows up / KPI ---- */
.box-con-comm .post-content table.cm-value {
	display: table; width: 100%; max-width: 100%; margin: var(--sp-24) 0;
	border-collapse: separate; border-spacing: 0;
	border: 1px solid var(--c-line); border-radius: var(--r-8); overflow: hidden;
	font-size: var(--fs-15); background: var(--c-surface-0);
}
.box-con-comm .post-content table.cm-value th,
.box-con-comm .post-content table.cm-value td {
	padding: var(--sp-12) var(--sp-16); text-align: left; vertical-align: top;
	border: 0; border-bottom: 1px solid var(--c-line); color: var(--c-ink-700);
}
.box-con-comm .post-content table.cm-value thead th {
	background: var(--c-navy-500); color: var(--c-surface-0);
	font-size: var(--fs-13); font-weight: var(--fw-bold, 700); letter-spacing: .04em; text-transform: uppercase;
}
.box-con-comm .post-content table.cm-value tbody tr:last-child td,
.box-con-comm .post-content table.cm-value tbody tr:last-child th { border-bottom: 0; }
.box-con-comm .post-content table.cm-value tbody th { font-weight: var(--fw-semibold, 600); color: var(--c-ink-900); }
.box-con-comm .post-content table.cm-value tbody tr:nth-child(even) { background: var(--c-surface-50); }
@media (max-width: 640px) {
	.box-con-comm .post-content table.cm-value,
	.box-con-comm .post-content table.cm-value tbody { display: block; }
	.box-con-comm .post-content table.cm-value thead { display: none; }
	.box-con-comm .post-content table.cm-value tr { display: block; border-bottom: 1px solid var(--c-line); padding: var(--sp-8) 0; }
	.box-con-comm .post-content table.cm-value tbody tr:last-child { border-bottom: 0; }
	.box-con-comm .post-content table.cm-value th,
	.box-con-comm .post-content table.cm-value td { display: block; border: 0; padding: var(--sp-4) var(--sp-16); }
	.box-con-comm .post-content table.cm-value td:nth-child(2)::before { content: "How it shows up: "; font-weight: var(--fw-semibold, 600); color: var(--c-ink-900); }
	.box-con-comm .post-content table.cm-value td:nth-child(3)::before { content: "KPI: "; font-weight: var(--fw-semibold, 600); color: var(--c-ink-900); }
}

/* ---- CTA banner: navy panel, optional image, one primary + one secondary link ---- */
.box-con-comm .post-content .cm-cta-banner {
	display: flex; align-items: center; gap: var(--sp-24); flex-wrap: wrap;
	margin: var(--sp-40) 0; padding: var(--sp-32);
	background: var(--c-navy-500); color: var(--c-surface-0); border-radius: var(--r-12);
}
.box-con-comm .post-content .cm-cta-banner img {
	display: block; flex: 0 0 auto; width: 180px; max-width: 100%; height: auto;
	border-radius: var(--r-8); object-fit: cover; margin: 0;
}
.box-con-comm .post-content .cm-cta-banner .cm-cta-banner__body { flex: 1 1 280px; min-width: 0; }
.box-con-comm .post-content .cm-cta-banner h2,
.box-con-comm .post-content .cm-cta-banner h3 {
	margin: 0 0 var(--sp-8); padding: 0; border: 0;
	font-size: var(--text-h3); line-height: 1.25; color: var(--c-surface-0); text-transform: none;
}
.box-con-comm .post-content .cm-cta-banner p { margin: 0 0 var(--sp-16); color: rgba(255, 255, 255, .85); }
.box-con-comm .post-content .cm-cta-banner .cm-cta-banner__actions { display: flex; align-items: center; gap: var(--sp-16); flex-wrap: wrap; }
.box-con-comm .post-content .cm-cta-banner a.cm-btn--primary { text-decoration: none; color: var(--btn-primary-text) !important; }
.box-con-comm .post-content .cm-cta-banner a.cm-cta-banner__link {
	color: var(--c-surface-0); text-decoration: underline; text-underline-offset: 3px; font-weight: var(--fw-semibold, 600);
}
@media (max-width: 600px) {
	.box-con-comm .post-content .cm-cta-banner { padding: var(--sp-24) var(--sp-20); }
	.box-con-comm .post-content .cm-cta-banner img { width: 100%; }
	.box-con-comm .post-content .cm-cta-banner a.cm-btn--primary { width: 100%; }
}

/* The team byline replaces the legacy single-author "By <name>" item in the banner info row. */
#banner-ft-comm .cm-byline ~ ul.info > li:first-child { display: none; }