/* ==========================================================================
   The Capital — Services Grid Section
   Black background, 5-per-row icon + label grid.
   Hover: gold SVG tint + gold-tinted background.
   ========================================================================== */

/* ------------------------------------------------------------------
   1. Outer Section
   ------------------------------------------------------------------ */
.tc-services-grid {
	background: #000;
}


.tc-services-grid .elementor-container {
	max-width: 1400px !important;
}

/* Remove default Elementor column padding from the wrapper column */
.tc-sg-wrapper > .elementor-element-populated {
	padding: 0 !important;
}

/* ------------------------------------------------------------------
   2. Header Row — title left, body + button right
   ------------------------------------------------------------------ */
.tc-sg-header {
	/* Padding is set per-column in the template (120px sides) */
	padding-top: 0 !important;
}

.tc-sg-title .elementor-heading-title {
	/* Preserve the \n line break written in the title */
	white-space: pre-line;
}

/* ------------------------------------------------------------------
   3. Grid — force flex-wrap so 13 items tile across rows
   ------------------------------------------------------------------ */

.tc-sg-grid {
	padding-bottom: 50px !important;
}

.tc-sg-grid .elementor-container,
.tc-sg-grid .elementor-row {
	flex-wrap: wrap !important;
	align-items: stretch;
	gap: 15px !important;
	padding: 0 !important;
	justify-content: center;
}

/* ------------------------------------------------------------------
   4. Service Item (each column / cell)
   ------------------------------------------------------------------ */
.tc-service-item {
	/* 5 per row with 15px gaps: (100% - 4×15px) / 5 = calc(20% - 12px) */
	flex: 0 0 calc(20% - 12px) !important;
	max-width: calc(20% - 12px) !important;
	width: calc(20% - 12px) !important;
	box-sizing: border-box;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 5px !important;
	padding: 24px 24px !important;
	display: flex;
	flex-direction: column;
	transition: background 0.3s ease, border-color 0.3s ease;
	cursor: default;
	aspect-ratio: 9 / 8;
}

.tc-service-item .elementor-widget-heading {margin-top: auto}

.tc-service-item .elementor-heading-title {
	@media (min-width: 767px) {
		font-size: 16px !important;
	}
}

.tc-service-item .elementor-heading-title i {
	font-size: 13px;
	display: block;
}

.tc-service-item .elementor-widget-image {
	text-align: left;
}

.tc-service-item .elementor-element-populated {
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 20px;
	height: 100%;
}

/* ------------------------------------------------------------------
   5. Hover State
   ------------------------------------------------------------------ */
.tc-service-item:hover {
	background: rgba(235, 163, 24, 0.15) !important;
	border-color: rgba(235, 163, 24, 0.35);
	position: relative;
	z-index: 1;
}

/* ------------------------------------------------------------------
   6. Service Icon (SVG displayed via <img>)
   Default: white  |  Hover: gold #EBA318
   ------------------------------------------------------------------ */
.tc-service-icon .elementor-image img,
.tc-service-icon img {
	width: 40px;
	height: 40px;
	object-fit: contain;
	display: block;
	/* Black SVGs → white */
	filter: brightness(0) invert(1);
	transition: filter 0.3s ease;
}

.tc-service-item:hover .tc-service-icon .elementor-image img,
.tc-service-item:hover .tc-service-icon img {
	/* White → #EBA318 gold */
	filter: brightness(0) saturate(100%)
	        invert(67%) sepia(67%) saturate(700%)
	        hue-rotate(6deg) brightness(100%) contrast(96%);
}

/* Remove default Elementor image widget bottom margin */
.tc-service-icon .elementor-widget-container {
	margin-bottom: 0 !important;
}

/* ------------------------------------------------------------------
   7. Service Label
   ------------------------------------------------------------------ */
.tc-service-label .elementor-heading-title {
	font-family: 'DM Sans', sans-serif !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	line-height: 24px !important;
	color: #ffffff !important;
	text-align: left !important;
	margin: 0 !important;
}

/* ------------------------------------------------------------------
   8. Responsive
   ------------------------------------------------------------------ */

@media (max-width: 1440px) {
	.tc-services-grid {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
}

/* Tablet — 3 per row: (100% - 2×15px) / 3 = calc(33.333% - 10px) */
@media (max-width: 1024px) {
	.tc-service-item {
		flex: 0 0 calc(33.333% - 10px) !important;
		max-width: calc(33.333% - 10px) !important;
		width: calc(33.333% - 10px) !important;
		padding: 28px 22px !important;
	}

	.tc-sg-title .elementor-heading-title {
		font-size: 36px !important;
	}
}

/* Mobile — 2 per row: (100% - 1×15px) / 2 = calc(50% - 7.5px) */
@media (max-width: 767px) {
	.tc-sg-grid {
		padding-bottom: 80px !important;
	}

	.tc-sg-grid > .e-child {
		padding-bottom: 0px;
	}

	.tc-sg-title-col h2 {
		font-size: 40px !important;
		line-height: 1 !important;
	}

	.tc-service-item {
		flex: 0 0 calc(50% - 7.5px) !important;
		max-width: calc(50% - 7.5px) !important;
		width: calc(50% - 7.5px) !important;
		padding: 24px 18px !important;
		aspect-ratio: unset;
	}

	.tc-sg-title .elementor-heading-title {
		font-size: 30px !important;
		white-space: normal;
	}

	/* Stack header columns vertically on mobile */
	.tc-sg-header .elementor-container,
	.tc-sg-header .elementor-row {
		flex-direction: column;
	}

	.tc-sg-header .elementor-column {
		width: 100% !important;
		max-width: 100% !important;
	}
}