/*
 * Marketing Services widget: the card grid. Loads on top of shell.css, which
 * owns the section panel, the header and the header button.
 */

/* Grid, card and image values; the shell sheet owns the header ones. */
.msw {
	--msw-col-gap: 24px;
	--msw-row-gap: 24px;

	--msw-badge-size: 20px;
	--msw-badge-box: 40px;
	--msw-badge-space: 18px;
	--msw-logo-w: 40px;

	--msw-body-ml: 0;
	--msw-body-mr: auto;
	--msw-body-v: flex-start;
	--msw-card-ratio: auto;

	--msw-card-title-space: 10px;
	--msw-card-lift: 6px;
	--msw-card-speed: 0.35s;

	--msw-card-pt: 24px;
	--msw-card-pr: 24px;
	--msw-card-pb: 24px;
	--msw-card-pl: 24px;
	--msw-card-rtl: 20px;
	--msw-card-rtr: 20px;
	--msw-card-rbr: 20px;
	--msw-card-rbl: 20px;

	--msw-blend: 24%;
	--msw-img-w: 100%;
	--msw-img-fit: cover;
	--msw-img-pos: center center;
	--msw-img-space: 24px;
	--msw-img-justify: center;
	--msw-img-bg: transparent;
}

/* -------------------------------------------------------------------- grid */

.msw__grid {
	--msw-cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--msw-cols), minmax(0, 1fr));
	grid-auto-rows: 1fr;
	column-gap: var(--msw-col-gap);
	row-gap: var(--msw-row-gap);
}

/*
 * A featured card is two rows tall, so two compact cards stack into the height
 * of one featured card. Auto-placement does the rest — no card needs to know
 * its own position, which is what keeps the list reorderable in Elementor.
 */
.msw-card--tall {
	grid-row: span 2;
}

/* -------------------------------------------------------------------- card */

.msw-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	--msw-media-h: var(--msw-img-h, 220px);
	padding: var(--msw-card-pt) var(--msw-card-pr) var(--msw-card-pb) var(--msw-card-pl);
	border: 1px solid #e8ecf4;
	border-radius: var(--msw-card-rtl) var(--msw-card-rtr) var(--msw-card-rbr) var(--msw-card-rbl);
	/* Clips a bleeding or covering image to the card's own corners. */
	overflow: hidden;
	background-color: #ffffff;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
	transition: transform var(--msw-card-speed) ease, box-shadow var(--msw-card-speed) ease,
		background-color var(--msw-card-speed) ease, border-color var(--msw-card-speed) ease;
}

.msw-card:hover,
.msw-card:focus-within {
	transform: translateY(calc(var(--msw-card-lift) * -1));
	box-shadow: 0 18px 40px rgba(15, 23, 42, 0.1);
}

/*
 * Width and side are separate from text alignment on purpose: a designed
 * background image leaves a gap for the copy, and the copy has to be held to
 * that gap rather than run the width of the card.
 */
.msw-card__body {
	min-width: 0;
	max-width: var(--msw-body-w, 100%);
	margin-inline: var(--msw-body-ml) var(--msw-body-mr);
}

.msw-card__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--msw-badge-box);
	min-height: var(--msw-badge-box);
	margin-bottom: var(--msw-badge-space);
	border-radius: 14px;
	background-color: #eef3ff;
	color: #2f6bff;
	line-height: 0;
}

.msw-card__badge svg {
	width: var(--msw-badge-size);
	height: var(--msw-badge-size);
	fill: currentColor;
}

.msw-card__badge i {
	font-size: var(--msw-badge-size);
	line-height: 1;
}

.msw-card__badge--logo img {
	display: block;
	width: var(--msw-logo-w);
	height: auto;
	max-width: 100%;
}

.msw-card__title {
	margin: 0 0 var(--msw-card-title-space);
	color: #0d1220;
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.25;
}

.msw-card__text {
	margin: 0;
	color: #5b6474;
	font-size: 14px;
	line-height: 1.6;
}

/*
 * A compact card carries a shorter image, and that height is what sets the
 * height of a grid row — and therefore of the whole section, since a featured
 * card is exactly two rows. Raise it and everything grows together.
 */
.msw-card--compact {
	--msw-media-h: var(--msw-img-h-compact, 120px);
}

/* ------------------------------------------------------------------- media */

.msw-card__media {
	display: flex;
	flex: 0 0 auto;
	align-items: stretch;
	justify-content: var(--msw-img-justify);
	height: var(--msw-media-h);
	overflow: hidden;
	border-radius: 14px;
	background-color: var(--msw-img-bg);
}

.msw--media-bottom .msw-card__media {
	margin-top: var(--msw-img-space);
}

.msw--media-top .msw-card__media {
	order: -1;
	margin-bottom: var(--msw-img-space);
}

/* The image takes the slack, so cards with different text lengths still align. */
.msw-card--fill .msw-card__media {
	flex: 1 1 auto;
	height: auto;
	min-height: var(--msw-media-h);
}

/*
 * Bleed: the image is part of the card surface rather than a cropped rectangle
 * sitting on it. Negative margins cancel the card's padding so it reaches the
 * edges, the outer corners pick up the card's own radius, and the leading edge
 * is masked to transparent — masking the image rather than painting a fade over
 * it means it blends into whatever the card background actually is, including a
 * gradient or a per-card colour, with nothing to keep in sync.
 */
.msw-card--style-bleed .msw-card__media {
	margin-left: calc(var(--msw-card-pl) * -1);
	margin-right: calc(var(--msw-card-pr) * -1);
	background-color: transparent;
}

.msw--media-bottom .msw-card--style-bleed .msw-card__media {
	margin-bottom: calc(var(--msw-card-pb) * -1);
	border-radius: 0 0 var(--msw-card-rbr) var(--msw-card-rbl);
	-webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--msw-blend));
	mask-image: linear-gradient(to bottom, transparent 0%, #000 var(--msw-blend));
}

.msw--media-top .msw-card--style-bleed .msw-card__media {
	margin-top: calc(var(--msw-card-pt) * -1);
	border-radius: var(--msw-card-rtl) var(--msw-card-rtr) 0 0;
	-webkit-mask-image: linear-gradient(to top, transparent 0%, #000 var(--msw-blend));
	mask-image: linear-gradient(to top, transparent 0%, #000 var(--msw-blend));
}

/* Background: the image is the card, with the text riding on top of it. */
.msw-card--style-bg {
	min-height: var(--msw-media-h);
	justify-content: var(--msw-body-v);
}

/*
 * The artwork preset: the image was drawn as a card, with a gap left in it for
 * the copy. Holding the content block to part of the width is what puts the
 * copy in that gap, and a filled card needs more height than a strip of image
 * below some text did. Both are starting points only — they are var() fallbacks
 * rather than declarations, so the Style tab's controls replace them.
 */
.msw-card--style-artwork {
	--msw-media-h: var(--msw-img-h, 420px);
}

.msw-card--style-artwork.msw-card--compact {
	--msw-media-h: var(--msw-img-h-compact, 260px);
}

.msw-card--style-artwork .msw-card__body {
	max-width: var(--msw-body-w, 58%);
}

/*
 * An aspect ratio makes the card the same shape as the image, which is the
 * only way a "cover" background keeps the space its designer left for the
 * copy. align-self stops the grid row stretching the card back out of shape.
 */
.msw-card--style-bg.msw-card--ratio {
	aspect-ratio: var(--msw-card-ratio);
	align-self: start;
	min-height: 0;
}

.msw-card--style-bg .msw-card__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
	height: auto;
	min-height: 0;
	border-radius: inherit;
	background-color: transparent;
}

.msw-card--style-bg .msw-card__body {
	position: relative;
	z-index: 2;
}

/*
 * Copy colour is a scheme, not a hard-coded value: Light for a photograph,
 * Dark for a designed image that is already pale where the copy sits. The
 * declarations below stay at the same specificity as Elementor's own colour
 * controls, which load later, so setting a colour by hand still wins.
 */
.msw-card--style-bg {
	--msw-bg-title: #ffffff;
	--msw-bg-text: rgba(255, 255, 255, 0.85);
	--msw-bg-badge-bg: rgba(255, 255, 255, 0.18);
	--msw-bg-badge: #ffffff;
}

.msw-card--copy-dark {
	--msw-bg-title: #0d1220;
	--msw-bg-text: #5b6474;
	--msw-bg-badge-bg: rgba(15, 23, 42, 0.06);
	--msw-bg-badge: #2f6bff;
}

.msw-card--style-bg .msw-card__title {
	color: var(--msw-bg-title);
}

.msw-card--style-bg .msw-card__text {
	color: var(--msw-bg-text);
}

.msw-card--style-bg .msw-card__badge {
	background-color: var(--msw-bg-badge-bg);
	color: var(--msw-bg-badge);
}

/* Keeps the copy legible over a photograph. */
.msw-card--style-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
	background-image: linear-gradient(to bottom, var(--msw-scrim, rgba(8, 12, 22, 0.72)) 0%, transparent var(--msw-scrim-size, 78%));
	pointer-events: none;
}

/* Dark copy means the image was drawn with room for it, so no wash by default. */
.msw-card--copy-dark::after {
	background-image: linear-gradient(to bottom, var(--msw-scrim, transparent) 0%, transparent var(--msw-scrim-size, 78%));
}

.msw--media-top .msw-card--style-bg::after {
	background-image: linear-gradient(to top, var(--msw-scrim, rgba(8, 12, 22, 0.72)) 0%, transparent var(--msw-scrim-size, 78%));
}

.msw-card__img {
	display: block;
	width: var(--msw-img-w);
	max-width: 100%;
	height: 100%;
	object-fit: var(--msw-img-fit);
	object-position: var(--msw-img-pos);
}

/* ------------------------------------------------------------- placeholder */

.msw-card__media--empty {
	align-items: center;
	justify-content: center;
	background-image: linear-gradient(135deg, #eef2f9 0%, #f7f9fd 100%);
}

/* Only the framed style draws a crop box; the others read as card surface. */
.msw-card--style-framed .msw-card__media--empty {
	border: 1px dashed #c8d2e4;
}

.msw-card--style-bg .msw-card__media--empty {
	align-items: flex-end;
	justify-content: flex-end;
	padding: 14px;
}

.msw--media-top .msw-card--style-bg .msw-card__media--empty {
	align-items: flex-start;
}

.msw-card--style-bg .msw-card__ph {
	flex-direction: row;
	gap: 6px;
	padding: 0;
}

.msw-card--style-bg .msw-card__ph-icon {
	width: 16px;
	height: 16px;
}

.msw-card--style-bg .msw-card__ph-label {
	font-size: 11px;
}

.msw-card--style-bleed .msw-card__media--empty {
	background-image: linear-gradient(
		160deg,
		rgba(47, 107, 255, 0.12) 0%,
		rgba(47, 107, 255, 0.04) 45%,
		rgba(148, 163, 184, 0.14) 100%
	);
}

/*
 * Dark, because this mode ships light copy: the placeholder has to stand in for
 * the photograph that will replace it, not for a blank sheet of paper.
 */
.msw-card--style-bg .msw-card__media--empty {
	background-image: linear-gradient( 160deg, #1e293b 0%, #0f172a 55%, #1e3a8a 100% );
}

.msw-card--style-bg .msw-card__ph {
	color: rgba(255, 255, 255, 0.5);
}

.msw-card--copy-dark .msw-card__media--empty {
	background-image: linear-gradient(
		160deg,
		rgba(47, 107, 255, 0.12) 0%,
		rgba(47, 107, 255, 0.04) 45%,
		rgba(148, 163, 184, 0.14) 100%
	);
}

.msw-card--copy-dark .msw-card__ph {
	color: #93a1ba;
}

.msw-card__ph {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 12px;
	color: #93a1ba;
	text-align: center;
}

.msw-card__ph-icon {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

.msw-card__ph-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.3;
}

/* -------------------------------------------------------------- card link */

.msw-card__link {
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
}

.msw-card__link:focus-visible {
	outline: 2px solid #2f6bff;
	outline-offset: 3px;
}

.msw-card__link-label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* -------------------------------------------------------------- responsive */

@media (max-width: 767px) {
	.msw {
		--msw-img-space: 18px;
		/*
		 * Set through the variables, never as a bare padding: the bleed style
		 * cancels exactly these, so a direct override would leave the image
		 * overhanging the card by the difference.
		 */
		--msw-card-pt: 20px;
		--msw-card-pr: 20px;
		--msw-card-pb: 20px;
		--msw-card-pl: 20px;
	}

	/*
	 * One column on a phone, so a featured card spanning two rows would only
	 * make itself twice as tall as its neighbours. Every card gets one row.
	 */
	.msw-card--tall {
		grid-row: auto;
	}

	.msw-card--compact {
		--msw-media-h: var(--msw-img-h, 220px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.msw-card {
		transition: none;
	}

	.msw-card:hover,
	.msw-card:focus-within {
		transform: none;
	}
}