/* Task Trades Mini Gallery - structure only. Colours come from Elementor controls. */
.ttmg-card{
	position:relative;
	display:flex;
	flex-direction:column;
	height:100%;
	overflow:hidden;
	text-decoration:none;
	background:#182333;
	border-radius:14px;
	transition:transform .22s ease;
}
.ttmg-card:hover{transform:translateY(-4px)}
.ttmg-media{
	display:block;
	width:100%;
	height:auto;
	aspect-ratio:4/3;
	object-fit:cover;
	transition:transform .4s ease;
}
.ttmg-card:hover .ttmg-media{transform:scale(1.03)}
.ttmg-body{
	flex:1 1 auto;
	display:flex;
	flex-direction:column;
	align-items:flex-start;
	gap:10px;
	padding:20px 20px 22px;
}
.ttmg-title{margin:0;font-size:20px;font-weight:700;line-height:1.2;color:#F4F1EA}
.ttmg-desc{margin:0;font-size:15px;line-height:1.6;color:#B9B3A8}
.ttmg-badge{
	display:inline-flex;
	align-items:center;
	gap:7px;
	border-radius:999px;
	padding:8px 16px;
	font-size:13px;
	font-weight:700;
	letter-spacing:.04em;
	background:#E1121C;
	color:#ffffff;
}
.ttmg-empty{padding:18px;color:#B9B3A8;font-size:14px}
@media(max-width:767px){
	.ttmg-badge{min-height:44px}
	.ttmg-title{font-size:19px}
}

/* The widget wrapper behaves as a card in any flex or grid container. */
.elementor-widget-tt-mini-gallery{flex:1 1 320px;min-width:0;align-self:stretch}
@media(max-width:1024px){.elementor-widget-tt-mini-gallery{flex:1 1 46%;max-width:calc(50% - 14px)}}
@media(max-width:767px){.elementor-widget-tt-mini-gallery{flex:1 1 100%;max-width:100%}}

/* Desktop: cap each card at the normal three column width so an incomplete final row
   keeps that width and stays left aligned instead of stretching across the row.
   Container gaps differ, so the gap is declared per container and used in the sum. */
@media(min-width:1025px){
	.tt-job-cards{--ttmg-col-gap:28px}
	.elementor.elementor .e-con > .elementor-widget.elementor-widget-tt-mini-gallery{max-width:calc((100% - 2 * var(--ttmg-col-gap,12px)) / 3)}
}

/* Tablet: same idea for the two column layout, so a single card in the final row keeps half width
   and stays left aligned. The plugin's own tablet max-width above is overridden by Elementor. */
@media(min-width:768px) and (max-width:1024px){
	.tt-job-cards{--ttmg-col-gap:28px}
	.elementor.elementor .e-con > .elementor-widget.elementor-widget-tt-mini-gallery{max-width:calc((100% - var(--ttmg-col-gap,12px)) / 2)}
}

.ttmg-eyebrow{display:block;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#B9B3A8;margin:0 0 2px}