/**
 * Difficult Conversations landing page.
 *
 * Scoped under .sc-dc. Only the hero, the grid and the section spacing live
 * here — the article cards come from archive.css and the comment block from
 * single.css, both loaded by inc/difficult-conversations.php. One card design
 * across the site, one place to change it.
 */

/* ------------------------------------------------------------- foundation */
.sc-dc {
	font-family: var(--sc-font-body);
	font-size: var(--sc-fs-base);
	line-height: var(--sc-lh-normal);
	color: var(--sc-text-body);
	background: var(--sc-surface);
	-webkit-font-smoothing: antialiased;
}

.sc-dc *,
.sc-dc *::before,
.sc-dc *::after {
	box-sizing: border-box;
}

/* :where() contributes zero specificity, so the component rules below win by
   source order. Written plainly this would silently flatten every heading
   margin on the page — the trap that has now caught four stylesheets here. */
.sc-dc :where(h1, h2) {
	margin: 0;
	font-family: var(--sc-font-heading);
	font-weight: var(--sc-fw-bold);
	line-height: var(--sc-lh-heading);
	color: var(--sc-navy-deep);
}

.sc-dc :where(p) {
	margin: 0;
}

.sc-dc :where(a) {
	text-decoration: none;
}

.sc-dc :focus-visible {
	outline: 2px solid var(--sc-focus);
	outline-offset: 3px;
	border-radius: var(--sc-radius-sm);
}

/* The BuddyBoss page wrappers constrain and pad their content, and
   css/wordpress.css caps "body .site" at 1040px — 200px narrower than the
   header. Lifted the same way every other redesigned template lifts it.
   Class comes from inc/difficult-conversations.php. */
.sc-dc-page #main-wrap,
.sc-dc-page #inner-wrap,
.sc-dc-page #page,
.sc-dc-page #main {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

/* ------------------------------------------------------------------- hero */
.sc-dc__hero {
	background: var(--sc-surface-cream);
}

.sc-dc__hero-inner {
	padding-block: 84px 78px;
	text-align: center;
}

.sc-dc__eyebrow {
	margin-bottom: 14px;
	color: var(--sc-orange);
	font-size: var(--sc-fs-eyebrow);
	font-weight: var(--sc-fw-semibold);
	letter-spacing: var(--sc-track-eyebrow);
	text-transform: uppercase;
}

.sc-dc .sc-dc__title {
	margin-bottom: 20px;
	font-size: 46px;
	letter-spacing: -0.01em;
}

/*
 * The introduction. Capped at 62ch rather than a pixel width — this is the
 * one block of real prose on the page and it is centred, so a comfortable
 * line length matters more than matching a grid.
 */
.sc-dc__lead {
	max-width: 62ch;
	margin-inline: auto;
	color: var(--sc-text-body);
	font-size: 18px;
	line-height: 1.7;
}

/* Two classes, (0,2,0), so this beats the ":where(p) { margin: 0 }" reset
   above it. Verified with getComputedStyle, not by reading the CSS. */
.sc-dc .sc-dc__lead p {
	margin: 0 0 14px;
}

.sc-dc .sc-dc__lead p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------- articles */
.sc-dc__articles {
	padding-block: 72px;
}

.sc-dc .sc-dc__h2 {
	margin-bottom: 28px;
	font-size: 32px;
}

/*
 * Three across at full width, against the blog listing's two — this page has
 * no sidebar, so the same 1176px band fits another column. The cards
 * themselves are unchanged.
 */
.sc-dc__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

/* .sc-blog carries the card styles but also its own page padding, which is
   not wanted inside a section that already has its own. */
.sc-dc .sc-blog {
	padding-block: 0;
	background: none;
}

.sc-dc__more {
	margin-top: 34px;
}

.sc-dc__morelink {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--sc-navy);
	font-size: 16px;
	font-weight: var(--sc-fw-semibold);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sc-dc__morelink:hover,
.sc-dc__morelink:focus-visible {
	color: var(--sc-orange-dark);
}

/* ------------------------------------------------------------ empty state */
.sc-dc__empty {
	padding: 44px 34px;
	background: var(--sc-surface-blue);
	border: 1px solid var(--sc-border);
	border-radius: 14px;
	text-align: center;
}

.sc-dc .sc-dc__empty-title {
	margin-bottom: 8px;
	color: var(--sc-text);
	font-size: 19px;
	font-weight: var(--sc-fw-semibold);
}

.sc-dc__empty-text {
	color: var(--sc-text-body);
	font-size: 16px;
	line-height: 1.7;
}

.sc-dc__empty-text a {
	color: var(--sc-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------- comments */
.sc-dc__comments {
	padding-block: 0 80px;
}

/* single.css scopes the comment card under .sc-post, which is why the block is
   wrapped in it. That wrapper brings its own page padding; this page supplies
   its own. */
.sc-dc .sc-post {
	padding-block: 0;
}

/* The comment card is the full 1176px here — there is no article column to
   align to, but a 1176px-wide comment box reads badly, so it keeps the
   article page's measure. */
.sc-dc__cwrap {
	max-width: 832px;
}

/* ============================================================ responsive */
@media (max-width: 1024px) {
	.sc-dc__hero-inner {
		padding-block: 64px 58px;
	}

	.sc-dc .sc-dc__title {
		font-size: 38px;
	}

	.sc-dc__articles {
		padding-block: 56px;
	}

	.sc-dc .sc-dc__h2 {
		font-size: 28px;
	}

	/* Two across: three columns inside 1024 leaves each card too narrow for a
	   16:10 image and a two-line title. */
	.sc-dc__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 24px;
	}
}

@media (max-width: 768px) {
	.sc-dc__hero-inner {
		padding-block: 52px 46px;
	}

	.sc-dc .sc-dc__title {
		font-size: 31px;
	}

	.sc-dc__lead {
		font-size: 16px;
	}

	.sc-dc__articles {
		padding-block: 44px;
	}

	.sc-dc .sc-dc__h2 {
		font-size: 25px;
	}

	.sc-dc__comments {
		padding-block: 0 56px;
	}
}

@media (max-width: 640px) {
	.sc-dc__grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 575px) {
	.sc-dc .sc-dc__title {
		font-size: 27px;
	}

	.sc-dc__empty {
		padding: 30px 20px;
	}
}