/**
 * Social Media Content page -- new sections only (video showcase, service
 * cards, creator grid). Not measured against production -- this content
 * is net new, built from the client's own mockup screenshots (no live
 * page to compare against, unlike every other page-*.css file in this
 * theme). Accent color deliberately uses the site's existing
 * --color-primary (yellow) rather than the mockup's orange, per the
 * client's explicit call. First real use of --font-heading (Oswald) and
 * the --button-radius/--button-padding tokens -- all three were defined in
 * tokens.css but unused until now. Bare-element rules scoped, same reason
 * as everywhere else in this theme (see footer.css).
 *
 * The eyebrow label, step list, and CTA block this page also uses were
 * moved to assets/css/shared-blocks.css once Podcast/Vodcast & Voice's
 * own redesign reused them on a second page -- see that file.
 */

/* Headings switched from this theme's usual --font-heading (Oswald) to
   Montserrat/uppercase/700, and every card's border to solid yellow --
   Event Coverage's client-supplied mockup became this project's shared
   layout/font template for these 4 net-new-design pages, per the
   client's explicit follow-up instruction. See MIGRATION.md. */

/* ---- Video showcase ("Our Work") ---- */

.cwf-video-showcase {
	padding: 40px 56px 64px; /* top was 60px -- brought down to match .cwf-creator-grid's 40px bottom padding so the divider between them sits symmetrically. Bottom was briefly 40px to symmetrize a divider facing the Inquire strip -- that divider was removed per the client's request (a CTA button already reads as the break on its own), so this reverted back to 64px ("more room beneath the cards", the client's own prior request). See MIGRATION.md. */
	background: var(--color-black);
}
.cwf-video-showcase .cwf-video-showcase__heading {
	max-width: 1328px;
	margin: 0 auto 32px;
	font-family: var(--font-nav-submenu); /* Montserrat -- matches the shared heading template (Event Coverage's mockup), not this theme's usual Oswald. See MIGRATION.md. */
	font-size: 32px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-white);
	text-align: center;
}
.cwf-video-showcase__row {
	display: flex;
	gap: 16px;
	max-width: 1328px;
	margin: 0 auto;
}
.cwf-video-showcase__card {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	aspect-ratio: 9 / 16;
	border-radius: 10px;
	overflow: hidden;
	background: var(--color-bg-dark-1);
}
.cwf-video-showcase .cwf-video-showcase__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Service cards ("What We Do") ---- */

.cwf-service-cards {
	padding: 40px 56px 64px; /* bottom was 40px (even top/bottom) -- more room beneath the cards, per the client's request */
	background: var(--color-black);
}
.cwf-service-cards__row {
	display: flex;
	gap: 20px;
	max-width: 1328px;
	margin: 0 auto;
}
.cwf-service-cards__card {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	padding: 28px 24px;
	background: var(--color-bg-dark-1);
	border: 1px solid var(--color-primary); /* was translucent white -- matches the shared yellow-bordered card template now, see MIGRATION.md */
	border-radius: 10px;
}
.cwf-service-cards__card--highlight {
	border: 2px solid var(--color-primary); /* still thicker than the other 2 cards, keeps the "full package" tier visually emphasized */
}
.cwf-service-cards__badge {
	display: inline-block;
	margin-bottom: 12px;
	padding: 4px 12px;
	background: var(--color-primary);
	color: var(--color-black);
	font-family: var(--font-nav-submenu);
	font-size: 12px;
	font-weight: 600;
	border-radius: 999px;
}
.cwf-service-cards .cwf-service-cards__heading {
	margin: 0 0 10px;
	font-family: var(--font-nav-submenu); /* Montserrat -- matches the shared heading template, see MIGRATION.md */
	font-size: 22px;
	font-weight: 700;
	color: var(--color-white);
}
.cwf-service-cards .cwf-service-cards__text {
	margin: 0;
	font-family: var(--font-body);
	font-size: 24px; /* was 15px, then briefly 18px -- client asked for 24px */
	line-height: 1.5;
	color: var(--color-text);
}

/* ---- Creator grid ("Who We've Worked With") ---- */

.cwf-creator-grid {
	padding: 40px 56px 40px; /* bottom was 84px (before that, 60px) -- combined with the next section's (Our Work) own 60px top padding, the closing line ended up sitting ~144px away from "OUR WORK" -- reduced back down per the client's request to tighten that gap. See MIGRATION.md. */
	background: var(--color-black);
	text-align: center;
}
.cwf-creator-grid .cwf-creator-grid__heading {
	max-width: 800px;
	margin: 0 auto 16px;
	font-family: var(--font-nav-submenu); /* Montserrat -- matches the shared heading template, see MIGRATION.md */
	font-size: 32px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-white);
}
.cwf-creator-grid .cwf-creator-grid__text {
	max-width: 700px;
	margin: 0 auto 40px;
	font-family: var(--font-body);
	font-size: 24px; /* was 15px, then briefly 18px -- client asked for 24px */
	line-height: 1.5;
	color: var(--color-text);
}
.cwf-creator-grid__row {
	display: grid;
	grid-template-columns: repeat(6, 1fr); /* was 5 -- Anna Casey added as a 6th creator, see MIGRATION.md */
	gap: 16px;
	max-width: 1328px;
	margin: 0 auto 40px;
}
/**
 * The card renders as either <a> or <div> (see creator-grid.php) --
 * scoped as `.cwf-creator-grid .cwf-creator-grid__card` so the <a> variant
 * beats Elementor's kit-wide `.elementor-kit-13 a` rule (0,1,1), same
 * collision/fix as `.cwf-eyebrow` above.
 */
.cwf-creator-grid .cwf-creator-grid__card {
	display: block;
	padding: 24px 16px;
	background: var(--color-bg-dark-1);
	border: 1px solid var(--color-primary); /* thin yellow border, per the client's request -- was --color-border-on-dark (translucent white), same as every other card on this page */
	border-radius: 10px;
	text-decoration: none;
}
.cwf-creator-grid a.cwf-creator-grid__card {
	cursor: pointer;
}
.cwf-creator-grid__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto 16px;
	background: var(--color-bg-dark-2);
	border-radius: 50%;
	overflow: hidden;
}
.cwf-creator-grid__avatar span {
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 600;
	color: var(--color-white);
}
.cwf-creator-grid__avatar--photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.cwf-creator-grid .cwf-creator-grid__name {
	margin: 0 0 6px;
	font-family: var(--font-nav-submenu); /* Montserrat -- matches the shared heading template, see MIGRATION.md */
	font-size: 22px; /* was 17px -- sized up per the client's request */
	font-weight: 700;
	color: var(--color-white);
}
.cwf-creator-grid .cwf-creator-grid__stat {
	margin: 0;
	font-family: var(--font-body);
	font-size: 16px; /* was 13px -- sized up per the client's request */
	line-height: 1.4;
	color: var(--color-text);
}
.cwf-creator-grid .cwf-creator-grid__closing {
	max-width: 700px;
	margin: 0 auto;
	font-family: var(--font-body);
	font-size: 24px; /* was 15px, then briefly 18px -- client asked for 24px ("Whether you have 50 million followers...") */
	color: var(--color-text);
}

/* Section divider (between "Trusted By" and "Our Work") -- promoted to
   shared-blocks.css's `.cwf-section-divider` once the client asked for
   it sitewide, see MIGRATION.md. Its own rules now live there. */

@media (max-width: 1024px) {
	.cwf-video-showcase__row,
	.cwf-service-cards__row {
		flex-wrap: wrap;
	}
	.cwf-video-showcase__card {
		flex: 1 1 calc(33.333% - 11px);
		min-width: 140px;
	}
	.cwf-service-cards__card {
		flex: 1 1 calc(50% - 10px);
	}
	.cwf-creator-grid__row {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 900px) {
	.cwf-video-showcase,
	.cwf-service-cards,
	.cwf-creator-grid {
		padding-left: 20px;
		padding-right: 20px;
	}
	.cwf-video-showcase .cwf-video-showcase__heading,
	.cwf-creator-grid .cwf-creator-grid__heading {
		font-size: clamp(22px, 6vw, 32px);
	}
	.cwf-service-cards__row {
		flex-direction: column;
	}
	.cwf-service-cards__card {
		flex: 1 1 auto;
	}
}

@media (max-width: 767px) {
	.cwf-video-showcase__card {
		flex: 1 1 calc(50% - 8px);
	}
	.cwf-creator-grid__row {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---- Section-divider padding symmetry ----
   A template-parts/section-divider.php call sits between "How It Works"
   and "Choose Your Plan" (both solid black) -- see page-social-media-
   content.php and shared-blocks.css's .cwf-section-divider. That
   component has no padding of its own by design: .cwf-service-cards'
   own top padding (40px, the shared default -- unchanged) is left
   alone, and step-list's bottom is matched to it here instead of its
   own shared default (124px). step-list's top is NOT overridden --
   faces the Inquire strip now (order flipped per the client's request:
   "How It Works" moved before "Choose Your Plan", was after), no
   divider there, so it uses its own plain default (90px). No divider
   (and so no override) between "Choose Your Plan" and the closing CTA
   -- removed per the client's request that a CTA button already reads
   as the section break on its own. See MIGRATION.md. */
.cwf-step-list {
	padding-bottom: 40px;
}