/* Service Category cards (Home page).
   Rendered by an Elementor Loop Grid (Post-Taxonomy skin over `service_category`)
   via the "Service Category — Card" loop-item template. Styling lives here on the
   card's CSS classes (same approach as the Portfolio .cs-card); the template just
   carries structure, classes and dynamic bindings.
   Single shared accent baked in as CSS custom properties.
   Brand tokens: navy #170D3D, body #5a5a72. */

.svc-cat-card{
	--accent:#0aa3d6;
	--accent-soft:rgba(10,163,214,.10);
	--accent-line:rgba(10,163,214,.28);
	position:relative;
	overflow:hidden;
	height:100%;
	display:flex;
	flex-direction:column;
	gap:0;
	background:#fff;
	border:1px solid var(--accent-line);
	border-radius:20px;
	padding:32px 32px 30px;
	box-shadow:0 10px 35px rgba(17,17,51,.06);
	transition:transform .25s ease,box-shadow .25s ease;
}
.svc-cat-card:hover{
	transform:translateY(-5px);
	box-shadow:0 22px 55px rgba(17,17,51,.13);
}

/* Neutralise Elementor's default per-widget spacing; lift every flow child above
   the decorative illustration (the illustration itself is pulled out of flow below). */
.svc-cat-card > *{margin:0;position:relative;z-index:1;}

/* Head: accent icon tile + title (row) */
.svc-cat-card__head{
	display:flex;flex-direction:row;align-items:center;gap:16px;
	margin-bottom:16px;
}
/* Icon tile — SaifTec Term Icon widget.
 *
 * Structure only; the tile colour, glyph colour and both sizes are custom properties written by the
 * widget's Style controls, with per-term overrides applied inline. The var() fallbacks reproduce what
 * the page rendered before the widget existed, so an unconfigured widget still looks right.
 *
 * The glyph is an INLINE svg, not an <img>: currentColor cannot resolve inside an <img>, which is why
 * the icon colour used to be unchangeable. Keep the width/height here specific enough to beat
 * Elementor's own `.elementor-widget-image img{width:100%}`, which stretched each SVG differently. */
.svc-cat-card .svc1-termicon{
	flex:0 0 auto;
	display:flex;align-items:center;justify-content:center;
	width:var(--svc1-ti-size,60px);
	height:var(--svc1-ti-size,60px);
	background:var(--svc1-ti-bg,#EDEFFF);
	border-radius:var(--svc1-ti-radius,15px);
	color:var(--svc1-ti-color,#000);
	overflow:hidden;
}
.svc-cat-card .svc1-termicon .svc1-termicon__glyph,
.svc-cat-card .svc1-termicon :is(img,svg){
	width:var(--svc1-ti-glyph,32px);
	height:var(--svc1-ti-glyph,32px);
	max-width:var(--svc1-ti-glyph,32px);
	object-fit:contain;object-position:center;
	display:block;
}
/* The head row still needs the tile to sit beside the title. */
.svc-cat-card .svc-cat-card__icon{flex:0 0 auto;}
.svc-cat-card .svc-cat-card__icon .elementor-widget-container{
	display:flex;align-items:center;justify-content:center;
}
.svc-cat-card__title{margin:0;}
.svc-cat-card__title .elementor-heading-title{
	margin:0;
	font-size:22px;line-height:1.2;font-weight:700;color:#170D3D;
}

/* Description */
.svc-cat-card__desc{margin-bottom:20px;}
.svc-cat-card__desc,
.svc-cat-card__desc p{color:#5a5a72;font-size:15px;line-height:1.6;}
.svc-cat-card__desc p{margin:0;}

/* Feature checklist — SaifTec Feature List widget, "Checklist" style.
 *
 * This replaced [saiftec_category_features]. Only STRUCTURE lives here; every colour and size is a
 * custom property written by the widget's Style controls, so the card is editable in Elementor
 * without touching this file. The var() fallbacks are the values the shortcode's own CSS used, so a
 * freshly-added widget with no controls set still looks correct.
 *
 * If the Checklist style is ever used outside the home-page cards, this block has to move to
 * service-sections.css — this stylesheet only loads on the front page and in the loop-item preview.
 */
.svc1-checks{
	list-style:none;padding:0;
	margin:0 0 24px;
	display:flex;flex-direction:column;
	gap:var(--svc1-check-gap,12px);
	position:relative;z-index:1;
}
.svc1-checks__item{
	display:flex;align-items:flex-start;margin:0;
	gap:var(--svc1-check-icon-gap,11px);
}
.svc1-checks__icon{
	flex:0 0 auto;margin-top:1px;
	width:var(--svc1-check-size,20px);
	height:var(--svc1-check-size,20px);
	color:var(--svc1-check-color,var(--accent));
}
.svc1-checks__label{
	font-size:15px;line-height:1.4;
	color:var(--svc1-check-label,#42425a);
}
a.svc1-checks__label{text-decoration:none;transition:color .15s ease;}
a.svc1-checks__label:hover,
a.svc1-checks__label:focus-visible{
	color:var(--svc1-check-label-hover,var(--accent));
	text-decoration:underline;text-underline-offset:2px;
}

/* CTA — outline pill, fills accent on hover. Pinned to the card bottom. */
.svc-cat-card__cta{margin-top:auto;}
.svc-cat-card__cta .elementor-button{
	display:inline-flex;align-items:center;gap:8px;
	font-size:14px;font-weight:600;
	color:var(--accent);
	background:transparent;
	border:2px solid var(--accent-line);
	border-radius:999px;
	padding:11px 24px;
	text-decoration:none;
	transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.svc-cat-card__cta .elementor-button .elementor-button-text::after{content:"\00A0\2192";}
.svc-cat-card__cta .elementor-button:hover,
.svc-cat-card__cta .elementor-button:focus-visible{background:var(--accent);border-color:var(--accent);color:#fff;}

/* Optional decorative illustration — center-right, behind the text (all sizes).
   Selector is more specific than the `.svc-cat-card > *` reset above so it stays
   absolutely positioned (out of flow) rather than stacking at the card bottom. */
.svc-cat-card > .svc-cat-card__illustration{
	position:absolute;right:12px;top:50%;
	transform:translateY(-50%);
	width:46%;max-width:240px;
	margin:0;
	pointer-events:none;opacity:.9;z-index:0;
}
.svc-cat-card__illustration .elementor-widget-container{line-height:0;}
.svc-cat-card__illustration img{width:100%;height:auto;display:block;}

/* Card internals responsive (the grid columns are handled by the Loop Grid widget) */
@media (max-width:781px){
	.svc-cat-card{padding:26px 24px;}
	.svc-cat-card > .svc-cat-card__illustration{max-width:200px;opacity:.8;}
}
@media (prefers-reduced-motion:reduce){
	.svc-cat-card{transition:none;}
	.svc-cat-card:hover{transform:none;}
}