/* ==========================================================================
   MakeAdera ABOUT US PAGE Stylesheet
   Template: about-us-template.php (route: /about-us/)

   Page container, hero canvas, eyebrow, section heading, button, card shell
   and section bands are shared components — see page-base.css.
   Author: aderaDev
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.ma-about-hero .ma-page-hero-title {
	max-width: 720px;
}

.ma-about-hero-actions {
	margin-top: 36px;
}

/* --------------------------------------------------------------------------
   Manufacturing capabilities grid
   -------------------------------------------------------------------------- */
.ma-about-cap-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

/* The source SVGs are complete icon tiles (a dark gradient rounded square
   with a white glyph) drawn on an 80x80 canvas, with the tile occupying only
   x 16-64 / y 2-50 — the rest is transparent room for the drop shadow. So no
   wrapper box is needed, and the negative margins crop that padding to sit
   the visible tile flush with the card text. Same approach as the homepage
   overview icons. */
.ma-about-cap-icon {
	display: block;
}

.ma-about-cap-icon-img {
	display: block;
	width: 96px;
	height: 96px;
	margin: -2px 0 -16px -19px;
}

.ma-about-cap-title {
	margin: 0;
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--makeadera-color-black, #17141F);
}

.ma-about-cap-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	width: 100%;
}

.ma-about-cap-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 0;
	margin: 0;
	border-top: 1px solid #F0F1F2;
	font-size: 14px;
	line-height: 1.5;
	color: var(--makeadera-color-slate-dark, #4A4655);
}

.ma-about-cap-list li::before {
	content: none;
}

.ma-about-cap-check {
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--makeadera-color-accent-red, #C3241D);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1280px) {
	.ma-about-cap-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 1024px) {
	.ma-about-cap-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 640px) {
	.ma-about-cap-grid {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	/* Slightly smaller icon tile on phones (see the negative-margin note above) */
	.ma-about-cap-icon-img {
		width: 84px;
		height: 84px;
		margin: -2px 0 -14px -17px;
	}
}