/**
 * setupcompany.eu — Why Gabrovo location page (Screen 8)
 *
 * Self-contained (this is the only page CSS loaded on the template, alongside
 * setupco-core.css) — primitives shared with the Why Bulgaria pillar are
 * duplicated here rather than cross-loaded, matching the site convention.
 */

/* ---- hero ------------------------------------------------- */
.sc-wg-hero__wrap {
	/* No max-width here: .sc-hero__wrap (core.css) already caps this box at
	   var(--maxw) and centers it — matching .sc-rail__inner below it. Capping
	   it again narrower here would center the wrap *itself* inside that box,
	   pulling the H1/lead in far further left than the full-width rail. */
	display: flex;
	flex-direction: column;
	gap: 24px;
	padding-bottom: 56px;
}

.sc-wg-hero__wrap .sc-h1 {
	line-height: 1.02;
}

.sc-wg-kicker {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 9px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	padding: 6px 15px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #c0cde6;
}

.sc-wg-kicker__dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--yellow);
	flex: none;
}

/* ---- the city summary panel -------------------------------- */
.sc-wg-summary {
	background: var(--white);
	border-radius: 20px;
	border-left: 4px solid var(--yellow);
	padding: 32px 34px;
	display: grid;
	grid-template-columns: minmax(240px, 0.9fr) minmax(280px, 1.1fr);
	gap: 40px;
	align-items: center;
	box-shadow: var(--shadow-card);
}

.sc-wg-summary__title {
	font-size: 21px;
	font-weight: 600;
	letter-spacing: -0.025em;
	line-height: 1.35;
}

.sc-wg-summary p:not(.sc-wg-summary__title) {
	font-size: 17px;
	line-height: 1.7;
	color: var(--text-2);
}

/* ---- industrial zone cards ---------------------------------- */
.sc-wg-zones__grid {
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.sc-wg-zone__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	font-size: 14px;
	color: var(--text-3);
}

.sc-wg-zone__facts strong {
	color: var(--eu-blue);
	font-weight: 700;
	margin-right: 4px;
}

/* body-paragraph blocks on the dark "corridor" section — .sc-prose's default
   color (var(--text-2), a dark blue-grey) is unreadable on the ink ground. */
.sc-section--ink .sc-prose {
	color: var(--white);
}

.sc-section--ink .sc-prose h3 {
	color: var(--white);
}

/* ---- tables (shared base — see setupco-core gap note) -------- */
.sc-table-wrap {
	overflow-x: auto;
	border-radius: 20px;
}

/* corridor distances table, on ink */
.sc-wg-corwrap {
	box-shadow: none;
	border: 1px solid rgba(255, 255, 255, 0.14);
}

.sc-wb-cost {
	width: 100%;
	min-width: 560px;
	border-collapse: collapse;
	background: rgba(255, 255, 255, 0.05);
}

.sc-wb-cost th {
	background: rgba(255, 255, 255, 0.06);
	padding: 16px 22px;
	text-align: left;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--on-ink-cap);
}

.sc-wb-cost th.is-hl,
.sc-wb-cost td.is-hl {
	color: var(--yellow);
}

.sc-wb-cost td {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 16px 22px;
	font-size: 15px;
	color: var(--white);
	font-variant-numeric: tabular-nums;
}

.sc-wb-cost td.is-hl {
	font-weight: 700;
}

.sc-wb-cost td:not(.is-hl):not(:first-child) {
	color: var(--on-ink-body);
}

/* cost-advantage table, light (Gabrovo vs Sofia) */
.sc-wg-costwrap {
	border: 1px solid var(--border-2);
}

.sc-wg-cost {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	background: var(--white);
}

.sc-wg-cost th {
	background: var(--warm);
	padding: 16px 22px;
	text-align: left;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--text-3);
}

.sc-wg-cost th.is-hl,
.sc-wg-cost td.is-hl {
	color: var(--eu-blue);
}

.sc-wg-cost td {
	border-top: 1px solid var(--border-2);
	padding: 16px 22px;
	font-size: 15px;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.sc-wg-cost td.is-hl {
	font-weight: 700;
}

.sc-wg-cost td:not(.is-hl):not(:first-child) {
	color: var(--text-2);
}

/* ---- shared footnote row (source + link) --------------------- */
.sc-wb-costfoot {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.sc-wb-costfoot p {
	font-size: 14.5px;
	line-height: 1.6;
	flex: 1;
	min-width: 260px;
	margin: 0;
}

.sc-wb-costfoot a {
	font-size: 15px;
	font-weight: 600;
	color: var(--eu-blue);
	white-space: nowrap;
}

/* ---- workforce tiles (persona.css's .sc-pn-data__*, duplicated) - */
.sc-wg-uni__grid {
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.sc-pn-data__tile {
	background: var(--white);
	border-radius: 18px;
	padding: 30px 28px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	box-shadow: var(--shadow-card);
}

.sc-pn-data__num {
	font-size: clamp(28px, 3.4vw, 34px);
	font-weight: 700;
	letter-spacing: -0.04em;
	line-height: 1;
	color: var(--eu-blue);
	font-variant-numeric: tabular-nums;
}

.sc-pn-data__body {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--text-2);
}

.sc-pn-data__note {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--text-3);
	border-top: 1px solid var(--border-2);
	padding-top: 18px;
	margin-top: 28px;
}

/* ---- location & access cards ---------------------------------- */
.sc-wg-access__grid {
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* .sc-mark (base + route/bars variants) — only in persona.css, not loaded here */
.sc-mark {
	display: flex;
	align-items: flex-end;
	height: 40px;
}

.sc-mark--bars {
	gap: 4px;
}

.sc-mark--bars i {
	width: 9px;
	height: 40px;
	border-radius: 2px;
	background: var(--eu-blue);
}

.sc-mark--bars i:last-child {
	background: var(--eu-blue-tint-bd);
}

.sc-mark--route {
	align-items: center;
	width: 100%;
	max-width: 200px;
	gap: 7px;
	height: 40px;
}

.sc-mark--route i {
	width: 11px;
	height: 11px;
	flex: none;
	border-radius: 999px;
	background: var(--eu-blue);
}

.sc-mark--route b {
	flex: 1;
	max-width: 80px;
	height: 2px;
	background: var(--eu-blue-tint-bd);
}

.sc-mark--plane {
	color: var(--eu-blue);
}

/* ---- CTA deep-dive index (.sc-wb-deep, duplicated) --------------- */
.sc-wb-deep {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.sc-wb-deep a {
	font-size: 15px;
	color: var(--white);
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	padding-bottom: 9px;
}

.sc-wb-deep a:last-child {
	border-bottom: 0;
}

.sc-wb-deep a:hover {
	color: var(--yellow);
}

@media (max-width: 900px) {
	.sc-wg-summary {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}