/* ══════════════════════════════════════════════
   ENCIRCLE COLUMNS BLOCK
   ══════════════════════════════════════════════ */

/* ── SECTION ── */
.ec-section {
	padding: 58px 0;
	overflow: hidden;
}

/* ══════════════════════════════════════════════
   HEADER (eyebrow + heading + separator)
   ══════════════════════════════════════════════ */

.ec-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 26px;
	margin-bottom: 53px;
	text-align: center;
}

.ec-eyebrow {
	font-family: var(--font-body);
	font-size: 12px;
	font-weight: 700;
	line-height: 19.2px;
	letter-spacing: 0.96px;
	text-transform: uppercase;
	color: var(--clr-primary);
	display: block;
}

/* ══════════════════════════════════════════════
   HEADING VARIANTS
   ══════════════════════════════════════════════ */

/* Shared resets */
.ec-heading {
	margin-bottom: 0;
	text-align: center;
}

/* H2 — Source Sans Pro Bold 50 px, white */
.ec-heading--h2 {
	font-family: var(--font-main);
	font-size: 50px;
	font-weight: 700;
	line-height: 57px;
	letter-spacing: -1.86px;
	color: var(--clr-white);
}

/* H3 — Aptos Bold 30 px, cyan */
.ec-heading--h3 {
	font-family: var(--font-body);
	font-size: 30px;
	font-weight: 700;
	line-height: 28.9px;
	letter-spacing: 0;
	color: var(--clr-primary);
}

/* ══════════════════════════════════════════════
   CIRCLES GRID
   ══════════════════════════════════════════════ */

/* Base (4-column) */
.ec-circles-row {
	--circle-size: 268px;
	/* 521 / 268 ≈ 1.944 — SVG viewBox fills exactly at this ratio */
	--dot-ratio: 1.944;
	--bs-gutter-x: 24px;
	--bs-gutter-y: 32px;
}

/* 2-column — !important overrides Bootstrap's display:flex on .row.
   420 px circles match the Figma spec; 2×420+82=922 px fits the 1140 px container. */
.ec-circles-row--2 {
	--circle-size: 420px;
	--dot-ratio: 1.421;
	--bs-gutter-x: 0px;
	--bs-gutter-y: 0px;
	display: grid !important;
	grid-template-columns: repeat(2, var(--circle-size));
	column-gap: 82px;
	row-gap: 40px;
	justify-content: center;
}

.ec-circles-row--2 > .ec-circle-col {
	width: auto;
}

/* 3-column */
.ec-circles-row--3 {
	--circle-size: 326px;
	/* 597 / 326 ≈ 1.831 — separate SVG sized for this circle */
	--dot-ratio: 1.831;
	--bs-gutter-x: 15px;
	--bs-gutter-y: 15px;
}

/* 5-column override */
.ec-circles-row--5 {
	--circle-size: 230px;
	/* 475 / 230 ≈ 2.065 — separate SVG sized for this circle */
	--dot-ratio: 2.065;
	--bs-gutter-y: 28px;
}

/* Centre the circle inside its Bootstrap column */
.ec-circle-col {
	display: flex;
	justify-content: center;
}

/* ── CIRCLE WRAPPER ── */
.ec-circle-wrap {
	position: relative;
	width: var(--circle-size);
	height: var(--circle-size);
	flex-shrink: 0;
	cursor: pointer;
}

a.ec-circle-wrap {
	display: block;
	text-decoration: none;
}

/* ── DOT PATTERN BACKGROUND ── */
.ec-dot-bg {
	position: absolute;
	width: calc(var(--circle-size) * var(--dot-ratio));
	height: calc(var(--circle-size) * var(--dot-ratio));
	top: 50%;
	left: 50%;
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.82);
	transition:
		opacity   0.65s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
	will-change: opacity, transform;
	pointer-events: none;
	z-index: 0;
}

.ec-dot-bg img {
	display: block;
	width: 100%;
	height: 100%;
}

.ec-circle-wrap:hover .ec-dot-bg {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* ── CIRCLE ── */
.ec-circle {
	background: rgba(0, 0, 0, 0.5);
  	backdrop-filter: blur(5px);
	position: relative;
	z-index: 1;
	width: var(--circle-size);
	height: var(--circle-size);
	border-radius: 50%;
	border: 2px solid var(--clr-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	transition:
		background-color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		border-color     0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ec-circle-wrap:hover .ec-circle {
	background-color: var(--clr-primary);
	border-color: var(--clr-primary);
}

/* ── CIRCLE INNER ── */
.ec-circle-inner {
	display: flex;
	flex-direction: column;
	gap: 14px;
	align-items: center;
	text-align: center;
	padding: 0 20px;
	width: 100%;
}

/* ── PER-CIRCLE EYEBROW LABEL (optional) ── */
.ec-eyebrow-label {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.96px;
	text-transform: uppercase;
	color: var(--clr-primary);
	display: block;
	transition: color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ec-circle-wrap:hover .ec-eyebrow-label {
	color: var(--clr-black);
}

/* ── TITLE (optional) ── */
.ec-title {
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 700;
	line-height: 28.9px;
	color: var(--clr-primary);
	transition: color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ec-circle-wrap:hover .ec-title {
	color: var(--clr-black);
}

/* ── DESCRIPTION ── */
.ec-desc {
	font-family: var(--font-body);
	font-size: 20px;
	font-weight: 300;
	line-height: 30px;
	color: var(--clr-primary);
	max-width: calc(var(--circle-size) * 0.743);
	transition: color 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.ec-circle-wrap:hover .ec-desc {
	color: var(--clr-black);
}

/* ── LINK ICON (↘ arrow — shown on linked circles) ── */
/* Figma: 19.131 × 19.131 px, sitting 5 px below the text block.
   ec-circle-inner has gap:14px; margin-top:-9px closes that to 5px. */
.ec-link-icon {
	width: 19px;
	height: 19px;
	flex-shrink: 0;
	margin-top: -9px;
}

.ec-link-icon img {
	display: block;
	width: 100%;
	height: 100%;
	transition: filter 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* On hover the circle fills cyan — turn the cyan arrow black */
.ec-circle-wrap:hover .ec-link-icon img {
	filter: brightness(0);
}

/* ══════════════════════════════════════════════
   COMPACT TYPE
   Smaller description text + tighter gap to fit
   content inside circles (matches Figma 16px/21px)
   ══════════════════════════════════════════════ */

.ec-circles-row--compact .ec-circle-inner {
	gap: 5px;
	padding: 0 16px;
}

.ec-circles-row--compact .ec-desc {
	font-size: 16px;
	line-height: 21px;
	max-width: calc(var(--circle-size) * 0.84);
}

@media (max-width: 991.98px) {
	.ec-circles-row--compact .ec-desc { font-size: 14px; line-height: 19px; }
}

@media (max-width: 767.98px) {
	.ec-circles-row--compact .ec-circle-inner { gap: 4px; padding: 0 12px; }
	.ec-circles-row--compact .ec-desc { font-size: 13px; line-height: 18px; }
}

@media (max-width: 575.98px) {
	.ec-circles-row--compact .ec-desc { font-size: 11px; line-height: 16px; }
}

/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */

@media (max-width: 991.98px) {
	.ec-section { padding: 48px 0; }
	.ec-header { gap: 20px; margin-bottom: 40px; }

	.ec-heading--h2 {
		font-size: 40px;
		line-height: 1.1;
		letter-spacing: -1px;
	}

	.ec-heading--h3 {
		font-size: 26px;
		line-height: 1.2;
	}

	.ec-circles-row     { --circle-size: 220px; --bs-gutter-y: 28px; }
	.ec-circles-row--5  { --circle-size: 190px; }

	.ec-title { font-size: 24px; line-height: 26px; }
	.ec-desc  { font-size: 17px; line-height: 26px; }
}

@media (max-width: 767.98px) {
	.ec-section { padding: 40px 0; }
	.ec-header { gap: 16px; margin-bottom: 32px; }

	.ec-heading--h2 {
		font-size: 32px;
		letter-spacing: -0.5px;
	}

	.ec-heading--h3 {
		font-size: 22px;
	}

	/* Both column variants collapse to 2-col on mobile — use same size */
	.ec-circles-row,
	.ec-circles-row--5 {
		/* --circle-size: 195px; */
		--circle-size: 230px;
		--dot-ratio: 1.944;
		--bs-gutter-x: 16px;
		--bs-gutter-y: 20px;
	}

	.ec-circle-inner { gap: 10px; }
	.ec-title { font-size: 20px; line-height: 23px; }
	.ec-desc  { font-size: 15px; line-height: 22px; }
}

@media (max-width: 575.98px) {
	.ec-section { padding: 32px 0; }
	.ec-header { margin-bottom: 28px; }

	.ec-heading--h2 {
		font-size: 26px;
		letter-spacing: -0.3px;
	}

	.ec-heading--h3 {
		font-size: 20px;
	}

	.ec-circles-row,
	.ec-circles-row--5 {
		/* --circle-size: 155px; */
		--circle-size: 250px;
		--bs-gutter-x: 10px;
		--bs-gutter-y: 14px;
	}

	.ec-circle-inner { padding: 0 12px; gap: 8px; }
	.ec-title { font-size: 16px; line-height: 19px; }
	.ec-desc  { font-size: 12px; line-height: 17px; }
}

@media (max-width: 359px) {
	.ec-circles-row,
	.ec-circles-row--5 {
		--circle-size: 130px;
		--bs-gutter-x: 8px;
		--bs-gutter-y: 12px;
	}

	.ec-title { font-size: 14px; }
	.ec-desc  { font-size: 11px; line-height: 15px; }
}

/* ── 2-COLUMN SPECIFIC RESPONSIVE ── */

/* LG — container ~960 px, 2×360+60=780 px → fits */
@media (max-width: 991.98px) {
	.ec-circles-row--2 { --circle-size: 360px; column-gap: 60px; row-gap: 32px; }
}

/* MD — container ~720 px, 2×300+40=640 px → fits */
@media (max-width: 767.98px) {
	.ec-circles-row--2 { --circle-size: 300px; column-gap: 40px; row-gap: 24px; }
}

/* SM — container ~540 px, switch to 1-column so circles don't overflow */
@media (max-width: 575.98px) {
	.ec-circles-row--2 {
		--circle-size: 300px;
		grid-template-columns: var(--circle-size);
		column-gap: 0;
		row-gap: 20px;
	}
}

@media (max-width: 359px) {
	.ec-circles-row--2 { --circle-size: 240px; row-gap: 14px; }
}

/* ── 3-COLUMN SPECIFIC RESPONSIVE ── */
/* Overrides placed after shared rules so they take precedence */

@media (max-width: 991.98px) {
	.ec-circles-row--3 { --circle-size: 280px; --bs-gutter-y: 20px; }
}

@media (max-width: 767.98px) {
	.ec-circles-row--3 {
		--circle-size: 240px;
		--bs-gutter-x: 16px;
		--bs-gutter-y: 18px;
	}
}

@media (max-width: 575.98px) {
	.ec-circles-row--3 {
		--circle-size: 190px;
		--bs-gutter-x: 10px;
		--bs-gutter-y: 14px;
	}
}

@media (max-width: 359px) {
	.ec-circles-row--3 {
		--circle-size: 155px;
		--bs-gutter-x: 8px;
		--bs-gutter-y: 10px;
	}
}