/*
 * Media kit (not in Figma; modelled on buddyboss.com/media-kit, on request 2026-10-02). Patterns mk-hero,
 * mk-assets, mk-colors, mk-usage. Made from the site's own parts: the blog / feature request page (#f6f6f6
 * with a 300px purple-20 band behind the title), white 16px-radius cards with a 1px #ccc border like the
 * blog cards, centred H2 (36) + lead heads 40px above their content, and the 104px section gap.
 * Logos, guide and tiles come from the brand Figma file f6NH1gwM15PnLKiJPdKvaz (bin/build-media-kit.py).
 */

body:has(.rs-mk-hero) {
	background-color: #f6f6f6;
}

/* Full width for the band; the root padding keeps the text off the screen edges on phones. */
.rs-mk-hero {
	padding-right: var(--wp--style--root--padding-right);
	padding-left: var(--wp--style--root--padding-left);
	background: linear-gradient(to bottom, var(--wp--preset--color--purple-20) 0, #f6f6f6 300px) no-repeat;
}

.rs-mk-hero > *,
.rs-mk-head > *,
.rs-mk-card > *,
.rs-mk-card__body > *,
.rs-mk-swatch > *,
.rs-mk-dont > * {
	margin: 0;
}

.rs-mk-hero__lead,
.rs-mk-head__lead {
	max-width: 640px;
}

/* Section heads: title and lead 16 apart, the Download all button 24 below the lead. */
.rs-mk-head > .rs-mk-head__actions {
	margin-top: 8px;
}

/* ---- Brand assets: 3 cards per row, 24 apart ---- */

.rs-mk-card {
	box-sizing: border-box;
	padding: 15px;
	border: 1px solid var(--wp--preset--color--gray-20);
	border-radius: 16px;
	background: var(--wp--preset--color--white);
}

/* Preview: 16:9, logo on #f6f6f6 or (white versions) on black, as on the brand file's logo frames. */
.rs-mk-card__preview {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
	background: #f6f6f6;
}

.rs-mk-card__preview.is-dark {
	background: var(--wp--preset--color--black);
}

.rs-mk-card__preview > * {
	margin: 0;
	max-width: 100%;
}

.rs-mk-card__preview img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Brand guide: the cover fills the preview. */
.rs-mk-card__preview > .rs-mk-card__cover {
	flex: 1 1 auto;
	align-self: stretch;
	width: 100%;
	min-height: 0;
}

.rs-mk-card__cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.rs-mk-card__body {
	padding: 0 1px 1px;
}

/* ---- Brand colors: 3 swatches, name at the top, values at the bottom ---- */

.rs-mk-swatch {
	box-sizing: border-box;
	min-height: 200px;
	border-radius: 16px;
}

.rs-mk-swatch > .rs-mk-swatch__name {
	margin-bottom: auto;
}

.rs-mk-swatch__value {
	font-variant-numeric: tabular-nums;
	line-height: 24px;
}

/* ---- Logo usage: 4 per row, image with the caption under it ---- */

.rs-mk-dont__image img {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--gray-20);
	border-radius: 12px;
}

.rs-mk-dont__text {
	position: relative;
	padding-left: 28px;
	line-height: 24px;
}

.rs-mk-dont__text::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	width: 20px;
	height: 20px;
	background: url("../../images/media-kit/x-circle.svg") center / contain no-repeat;
}

/* ---- Smaller screens ---- */

/* Asset cards go to two per row while "Logo in white" and its SVG / PNG buttons still fit on one line. */
@media (max-width: 1199px) {
	.rs-mk-grid.rs-mk-grid:not(.is-colors, .is-usage) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1023px) {
	.rs-mk-grid.is-usage {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 781px) {
	.rs-mk-hero {
		padding-top: 112px !important;
		padding-bottom: 40px !important;
	}

	.rs-mk-grid.is-colors {
		grid-template-columns: minmax(0, 1fr);
	}

	.rs-mk-swatch {
		min-height: 160px;
	}

	.rs-mk-grid.is-usage {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.rs-mk-grid.rs-mk-grid:not(.is-colors, .is-usage) {
		grid-template-columns: minmax(0, 1fr);
	}
}