/* =====================================================================
 components/media-badge.css — an image with an overlapping badge card, plus
 the amber tick checklist that sits beside it.

 Shared by the About page's story/commitment sections and the Solar Services
 detail sections.
 ===================================================================== */

/* -- Image with an overlapping badge card -- */
.media-badge {
	position: relative;
}

.media-badge__frame {
	overflow: hidden;
	border-radius: var(--radius-lg);
	aspect-ratio: 793 / 480;
}

.media-badge__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * Card overhangs the bottom-right of the image (bottom-left when reversed).
 * The offsets are measured from the exports, which agree closely: right overhang
 * 21/15.5/21px and bottom overhang 18.5/21/18px on the Solar single, the Solar
 * listing and About respectively. Note the export's frame ends where the photo
 * does — the pale band below it is a drop shadow, not image.
 */
.media-badge__card {
	position: absolute;
	right: -1.3125rem;
	bottom: -1.1875rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	min-width: 12rem;
	padding: 1.5rem 1.75rem;
	background: var(--surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
}

.media-badge--start .media-badge__card {
	right: auto;
	left: -1.3125rem;
}

.media-badge__card .icon-tile {
	margin-bottom: .25rem;
}

.media-badge__title {
	font-family: var(--font-secondary);
	font-size: 1.1875rem;
	font-weight: 700;
	line-height: 1.3;
	color: var(--heading-color);
}

.media-badge__text {
	font-size: 1.0625rem;
	line-height: 1.3;
	color: var(--text-color);
}

/* -- Amber tick checklist -- */
.check-list {
	padding: 0;
	margin: 1.25rem 0 0;
	list-style: none;
}

.check-list li {
	display: flex;
	align-items: flex-start;
	gap: 1.125rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--heading-color);
}

.check-list li + li {
	margin-top: .8125rem;
}

.check-list__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: .1875rem;
	color: var(--heading-color);
	background-image: var(--gradient-gold);
	border-radius: 50%;
}

.check-list__mark svg {
	width: .8125rem;
	height: .8125rem;
	stroke-width: 2.6;
}