/* ============================================================
   VINCE GRID — 4 columns x 2 rows service card grid
   Add this file to your HTML with:
   <link href="css/vince-grid.css" rel="stylesheet" type="text/css" />
   ============================================================ */

.vince-grid {
	max-width: 1300px;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
	padding: 16px;
	background: rgba(0,0,0,0.4);
	border: 2px solid #FFF;
	margin: 0;
	box-sizing: border-box;
	margin-right: auto;
	margin-left: auto;
}

.vg-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-sizing: border-box;
	box-shadow: 4px 4px 14px rgba(0,0,0,0.8);
	transition: transform .2s ease, box-shadow .2s ease;
}

.vg-card:hover {
	transform: translateY(-5px);
	box-shadow: 4px 14px 30px rgba(0,0,0,0.95);
}

/* title image strip */
.vg-card .vg-title {
	width: 100%;
	height: auto;
	display: block;
}

/* 1:1 square image */
.vg-card .vg-square {
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
}

.vg-card .vg-square img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* text body */
.vg-card .vg-body {
	padding: 11px 13px 15px;
	display: flex;
	flex-direction: column;
	flex: 1;
	border-top: 4px solid;
}

.vg-card .vg-body h4 {
	font-family: 'Muli', sans-serif;
	font-size: 12px;
	font-weight: 700;
	color: #f0c100;
	text-shadow: 1px 1px 2px #000;
	margin: 0 0 7px 0;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .5px;
	display: block;
}

.vg-card .vg-body h4 a {
	color: #f0c100;
	text-decoration: none;
}

.vg-card .vg-body h4 a:hover {
	color: #FFF;
}

.vg-card .vg-body p {
	font-family: 'Muli', sans-serif;
	font-size: 11px;
	color: #ccc;
	line-height: 1.55;
	flex: 1;
	text-shadow: 1px 1px 1px #000;
	margin: 0;
	text-align: left;
}

.vg-card .vg-body p a {
	color: #EC091A;
	font-weight: 700;
	text-decoration: none;
}

.vg-card .vg-body p a:hover {
	text-decoration: underline;
}

/* ============================================================
   8 CARD COLORS
   background tint + left border + body top border
   ============================================================ */

/* 1 · dark crimson · Transmission Repair */
.vg-1 { background: rgba(107,26,26,0.65); border-left: 5px solid #6b1a1a; }
.vg-1 .vg-body { border-top-color: #6b1a1a; }

/* 2 · dark forest green · Transmission Maintenance */
.vg-2 { background: rgba(26,61,26,0.65); border-left: 5px solid #1a3d1a; }
.vg-2 .vg-body { border-top-color: #1a3d1a; }

/* 3 · dark navy · Automatic Transmission Repair */
.vg-3 { background: rgba(26,37,69,0.65); border-left: 5px solid #1a2545; }
.vg-3 .vg-body { border-top-color: #1a2545; }

/* 4 · dark amber · Manual Transmission Repair */
.vg-4 { background: rgba(69,40,0,0.65); border-left: 5px solid #452800; }
.vg-4 .vg-body { border-top-color: #452800; }

/* 5 · dark purple · Fleet Transmission Service */
.vg-5 { background: rgba(53,16,74,0.65); border-left: 5px solid #35104a; }
.vg-5 .vg-body { border-top-color: #35104a; }

/* 6 · dark teal · 24 Hour Emergency Towing */
.vg-6 { background: rgba(10,48,64,0.65); border-left: 5px solid #0a3040; }
.vg-6 .vg-body { border-top-color: #0a3040; }

/* 7 · dark olive · Directions */
.vg-7 { background: rgba(46,48,0,0.65); border-left: 5px solid #2e3000; }
.vg-7 .vg-body { border-top-color: #2e3000; }

/* 8 · dark burgundy · Customer Testimonials */
.vg-8 { background: rgba(64,8,30,0.65); border-left: 5px solid #40081e; }
.vg-8 .vg-body { border-top-color: #40081e; }