/**
 * Services hub (/services/) — the `service` post-type archive, template "SVCHUB — Services Archive".
 *
 * The hub is assembled entirely from sections that already ship elsewhere, so almost all of its skin
 * comes from stylesheets those sections already depend on:
 *
 *   .svc-hero*                        service-sections.css
 *   .svc-cat-card* / .svc1-*          service-cards.css
 *   .cs-card*                         case-study.css
 *   .gc-connect*                      contact-cta.css
 *   .loc-tile*                        service-sections.css
 *
 * The one gap is the Industries band. It was lifted from /about/, whose rules live in about.css
 * behind an `is_page('about')` enqueue guard, and whose grid rules are additionally scoped to the
 * `.saiftec-about` body class. Neither reaches an archive. Rather than loosen about.css — which
 * would put About's page-specific overrides on this page too — the handful of rules that band needs
 * are restated here against `.svch-industries`, the extra class the hub's copy carries.
 */

/* ---------------------------------------------------------------------------
 * Section shell. Mirrors about.css's unscoped `.ab-industries` rules.
 * ------------------------------------------------------------------------- */
.svch-industries {
	background: #ffffff;
}
.svch-industries .ab-industries__inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 74px 24px;
}
.svch-industries .ab-industries__head {
	text-align: center;
	margin-bottom: 34px;
}

/* ---------------------------------------------------------------------------
 * Heading stack.
 *
 * These match about.css:23-33 — the eyebrow is the small purple label and the heading is the 34px
 * section title. Note about.css ALSO carries `.saiftec-about .ab-industries .ab-heading` at :318,
 * which re-styles the heading down to a 13px label; that exists because on /about/ the heading
 * widget holds "Industries We Serve" and the eyebrow is blank. The hub fills both fields properly,
 * so that override is deliberately not reproduced.
 * ------------------------------------------------------------------------- */
.svch-industries .ab-eyebrow .elementor-heading-title {
	margin: 0 0 10px;
	font-family: "Heebo", sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #3A0CA3;
}
.svch-industries .ab-heading .elementor-heading-title {
	margin: 0;
	font-family: "Heebo", sans-serif;
	font-weight: 700;
	font-size: 34px;
	line-height: 1.22;
	color: #170D3D;
}
.svch-industries .ab-intro,
.svch-industries .ab-intro p {
	margin: 14px auto 0;
	max-width: 760px;
	font-size: 16px;
	line-height: 1.7;
	color: #5A5A72;
}

/* ---------------------------------------------------------------------------
 * Tile grid.
 *
 * Restated at (0,3,0) for the same reason about.css does it: Elementor writes the column count as
 * `.e-con` custom properties from its own stylesheet, which loads after the theme's and wins at
 * equal specificity. Scoping to `.svch-industries` gets the extra class needed to beat it.
 * ------------------------------------------------------------------------- */
.svch-industries .svch-industries .elementor-grid,
.svch-industries.ab-industries .elementor-grid {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 14px;
}
/* The shared `.loc-tile` skin declares padding and radius at (0,1,0) and loses to Elementor's later
   `.e-con` rules, so the tile would otherwise render flat and square. Same restatement about.css
   makes, scoped to this page only — the location pages have shipped with the flat tile for months
   and changing them is not this page's business. */
.svch-industries.ab-industries .loc-tile {
	padding: 18px 10px;
	border-radius: 10px;
}

@media (max-width: 1000px) {
	.svch-industries.ab-industries .elementor-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}
@media (max-width: 700px) {
	.svch-industries .ab-industries__inner {
		padding: 56px 20px;
	}
	.svch-industries.ab-industries .elementor-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
	}
	.svch-industries .ab-heading .elementor-heading-title {
		font-size: 27px;
	}
}
@media (max-width: 440px) {
	.svch-industries.ab-industries .elementor-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------------------------------------------------------------------------
 * Empty-field collapse.
 *
 * The eyebrow and intro are optional. Elementor's heading widget returns before printing anything
 * when its title is blank, so the tell is an EMPTY `.elementor-widget-container`, not an empty
 * `.elementor-heading-title` — matching only the latter leaves the widget's own margin behind.
 * Same approach as about.css:39-41.
 * ------------------------------------------------------------------------- */
.svch-industries .elementor-widget-heading:has(.elementor-widget-container:empty),
.svch-industries .elementor-widget-text-editor:has(.elementor-widget-container:empty) {
	display: none;
}