/*
 * TIS Service Areas. Desktop: Figma frame 1672 x 716 — copy on the left, an 867 x 716 map bleeding off
 * the right edge with positioned markers and a 266px "key areas" card.
 */

.tis-areas {
	background: linear-gradient(115deg, #fcfdff 0%, #f1f6ff 55%, #dde8fc 100%);
	overflow: hidden;
}

.tis-areas__inner {
	position: relative;
	min-height: calc(716 * var(--tis-u));
	padding-left: calc(63 * var(--tis-u));
	padding-right: 0;
}

.tis-areas__content {
	position: relative;
	z-index: 3;
	padding-top: calc(124 * var(--tis-u));
	padding-bottom: calc(60 * var(--tis-u));
	max-width: calc(760 * var(--tis-u));
}

.tis-areas__eyebrow .tis-eyebrow__line { width: calc(39 * var(--tis-u)); }

.tis-areas__title {
	margin: calc(13 * var(--tis-u)) 0 0 calc(4 * var(--tis-u));
	font-family: var(--tis-font-display);
	font-weight: 900;
	line-height: 1.04;
}

.tis-areas__title-1 {
	display: block;
	font-size: max(28px, calc(53 * var(--tis-u)));
	color: var(--tis-ink);
}

.tis-areas__title-2 {
	display: block;
	margin-top: calc(3.9 * var(--tis-u));
	font-size: max(24px, calc(46 * var(--tis-u)));
	color: var(--tis-primary);
}

.tis-areas__text {
	max-width: calc(638 * var(--tis-u));
	margin: calc(24 * var(--tis-u)) 0 0 calc(4 * var(--tis-u));
	font-size: max(15px, calc(20 * var(--tis-u)));
	font-weight: 400;
	line-height: 1.45;
	color: #535d75;
}

.tis-areas__text p { margin: 0 0 0.6em; }
.tis-areas__text p:last-child { margin-bottom: 0; }

.tis-areas__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: calc(23 * var(--tis-u));
	margin: var(--tis-gap) 0 0 calc(5 * var(--tis-u));
}

.tis-areas__btn {
	min-height: calc(58 * var(--tis-u));
	padding: 0 calc(24 * var(--tis-u));
	border-radius: calc(12 * var(--tis-u));
	font-size: max(15px, calc(20 * var(--tis-u)));
}

.tis-areas__btn--primary { min-width: calc(227 * var(--tis-u)); }
.tis-areas__btn--secondary { min-width: calc(220 * var(--tis-u)); }

/* Stage = map + markers + card, anchored to the right edge */
.tis-areas__stage {
	position: absolute;
	top: 0;
	right: 0;
	z-index: 1;
	width: calc(867 * var(--tis-u));
	height: calc(716 * var(--tis-u));
}

.tis-areas__map {
	--fl: 24%;
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.tis-areas__skyline {
	--fr: 38%;
	--ft: 42%;
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 0;
	width: calc(980 * var(--tis-u));
	height: calc(310 * var(--tis-u));
	pointer-events: none;
}

.tis-areas__skyline .tis-areas__skyline-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left bottom;
}

.tis-areas__map .tis-areas__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tis-areas__lines { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tis-areas__lines path { fill: none; stroke: var(--tis-primary); stroke-width: 1.5; stroke-dasharray: 2 5; stroke-linecap: round; vector-effect: non-scaling-stroke; }

.tis-areas__markers { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tis-areas__markers > * { pointer-events: auto; }

.tis-areas__pin,
.tis-areas__hub { position: absolute; display: flex; align-items: center; white-space: nowrap; text-decoration: none; }

.tis-areas__pin {
	gap: calc(11 * var(--tis-u));
	height: calc(35 * var(--tis-u));
	padding: 0 calc(20 * var(--tis-u)) 0 calc(13 * var(--tis-u));
	border-radius: calc(13 * var(--tis-u));
	background: #fff;
	box-shadow: 0 5px 12px rgba(33, 67, 114, 0.13);
	font-size: max(12px, calc(14 * var(--tis-u)));
	font-weight: 500;
	line-height: 1.4;
	color: var(--tis-ink);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

a.tis-areas__pin:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(33, 67, 114, 0.2); }

.tis-areas__pin-dot {
	flex: none;
	width: calc(13 * var(--tis-u));
	height: calc(13 * var(--tis-u));
	min-width: 9px;
	min-height: 9px;
	border-radius: 50%;
	background: var(--tis-primary);
}

.tis-areas__hub-icon { display: flex; margin-bottom: calc(6 * var(--tis-u)); color: var(--tis-primary); }
.tis-areas__hub-icon svg { width: max(26px, calc(48 * var(--tis-u))); height: max(26px, calc(48 * var(--tis-u))); fill: currentColor; fill-opacity: .15; stroke-width: 2.2; }

.tis-areas__hub {
	flex-direction: column;
	justify-content: flex-end;
	height: auto;
	min-width: calc(186 * var(--tis-u));
	padding: 0 calc(10 * var(--tis-u));
	background: transparent;
	transform: translateY(calc(-62 * var(--tis-u)));
	font-size: max(15px, calc(23 * var(--tis-u)));
	font-weight: 700;
	line-height: 1.4;
	color: #0033cb;
}

/* Key areas card (Figma: 266 x 462 at x=1372, y=115) */
.tis-areas__panel {
	position: absolute;
	top: calc(115 * var(--tis-u));
	right: calc(34 * var(--tis-u));
	z-index: 3;
	width: calc(266 * var(--tis-u));
	padding: calc(22 * var(--tis-u)) calc(24 * var(--tis-u)) calc(17 * var(--tis-u));
	border-radius: calc(15 * var(--tis-u));
	background: #fff;
	box-shadow: 0 8px 24px rgba(33, 67, 114, 0.1);
}

.tis-areas__panel-head { display: flex; align-items: center; gap: calc(13 * var(--tis-u)); }

.tis-areas__panel-icon {
	display: inline-flex;
	flex: none;
	width: max(18px, calc(23 * var(--tis-u)));
	height: max(18px, calc(23 * var(--tis-u)));
	font-size: max(18px, calc(23 * var(--tis-u)));
	color: var(--tis-primary);
}

.tis-areas__panel-title { gap: 0; white-space: nowrap; font-size: max(12px, calc(16 * var(--tis-u))); letter-spacing: 0.3125em; }

.tis-areas__panel-divider {
	display: block;
	height: 1px;
	margin: calc(13 * var(--tis-u)) calc(16 * var(--tis-u)) 0 0;
	background: var(--tis-line);
}

.tis-areas__list {
	display: grid;
	row-gap: calc(4 * var(--tis-u));
	margin: calc(16 * var(--tis-u)) 0 0 calc(20 * var(--tis-u));
	padding: 0;
	list-style: none;
}

.tis-areas__item { display: flex; align-items: center; gap: calc(22 * var(--tis-u)); min-height: calc(30 * var(--tis-u)); }

.tis-areas__item-icon {
	display: inline-flex;
	flex: none;
	width: max(16px, calc(22 * var(--tis-u)));
	height: max(16px, calc(22 * var(--tis-u)));
	font-size: max(16px, calc(22 * var(--tis-u)));
	color: var(--tis-primary);
}

.tis-areas__item-text {
	font-size: max(14px, calc(17 * var(--tis-u)));
	font-weight: 400;
	line-height: 1.4;
	color: var(--tis-ink);
	text-decoration: none;
}

a.tis-areas__item-text:hover { color: var(--tis-primary); }

/* ---------------------------------------------------------------------
 * Tablet: copy above, map below with the card underneath
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.tis-areas__inner { min-height: 0; padding-left: var(--tis-gutter); padding-right: var(--tis-gutter); }
	.tis-areas__content { max-width: none; padding: 0 0 36px; }
	.tis-areas__title { margin: 14px 0 0; }
	.tis-areas__title-1 { font-size: 42px; }
	.tis-areas__title-2 { margin-top: 4px; font-size: 36px; }
	.tis-areas__text { max-width: 640px; margin: 18px 0 0; font-size: 18px; }
	.tis-areas__actions { margin: var(--tis-gap) 0 0; gap: 16px; }
	.tis-areas__btn { min-height: 54px; border-radius: 12px; font-size: 17px; }
	.tis-areas__btn--primary,
	.tis-areas__btn--secondary { min-width: 0; padding: 0 30px; }

	.tis-areas__stage {
		position: relative;
		width: calc(100% + 2 * var(--tis-gutter));
		height: auto;
		margin: 0 calc(-1 * var(--tis-gutter));
	}

	.tis-areas__skyline { display: none; }
	.tis-areas__map { --fl: 0%; --ft: 26%; position: relative; inset: auto; height: clamp(360px, 70vw, 560px); }
	.tis-areas__markers { inset: 0 0 auto 0; height: clamp(360px, 70vw, 560px); }
	.tis-areas__pin { gap: 8px; height: 32px; padding: 0 14px 0 11px; border-radius: 12px; font-size: 13px; }
	.tis-areas__pin-dot { width: 11px; height: 11px; }
	.tis-areas__hub { min-width: 0; padding: 0 12px; font-size: 18px; transform: translateY(-40px); }

	.tis-areas__panel {
		position: relative;
		top: auto;
		right: auto;
		width: auto;
		margin: -36px var(--tis-gutter) 0;
		padding: 22px 24px 20px;
		border-radius: 16px;
		box-shadow: 0 18px 40px rgba(33, 67, 114, 0.12);
	}

	.tis-areas__panel-head { gap: 12px; }
	.tis-areas__panel-title { font-size: 14px; }
	.tis-areas__panel-divider { margin: 14px 0 0; }
	.tis-areas__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; margin: 16px 0 0; }
	.tis-areas__item { gap: 12px; }
	.tis-areas__item-text { font-size: 16px; }
	.tis-areas { padding-bottom: 56px; }
}

/* ---------------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.tis-areas__title-1 { font-size: 30px; }
	.tis-areas__title-2 { font-size: 24px; }
	.tis-areas__text { font-size: 16px; }
	.tis-areas__actions { flex-direction: column; align-items: stretch; }
	.tis-areas__btn { width: 100%; }
	.tis-areas__map,
	.tis-areas__markers { height: clamp(300px, 92vw, 420px); }
	.tis-areas__pin { height: 28px; padding: 0 10px 0 8px; gap: 6px; font-size: 11px; }
	.tis-areas__pin-dot { width: 8px; height: 8px; min-width: 0; min-height: 0; }
	.tis-areas__hub { font-size: 14px; transform: translateY(-34px); }
	.tis-areas__list { grid-template-columns: 1fr 1fr; column-gap: 12px; }
	.tis-areas__item-text { font-size: 15px; }
}

/* Icons picked in the editor (Lucide set OR an uploaded SVG / icon-font glyph) always fill their slot. */
.tis-areas__item-icon,
.tis-areas__panel-icon { align-items: center; justify-content: center; line-height: 1; overflow: hidden; }
.tis-areas__item-icon svg,
.tis-areas__panel-icon svg,
.tis-areas__item-icon img,
.tis-areas__panel-icon img { display: block; width: 100%; height: 100%; max-width: 100%; }
.tis-areas__item-icon i,
.tis-areas__panel-icon i { font-size: inherit; line-height: 1; }
.tis-areas__item-icon .tis-svg,
.tis-areas__panel-icon .tis-svg { fill: currentColor; fill-opacity: .9; }
@media (max-width: 767px) {

  .tis-areas__stage {
    --tis-mk-shift: 18%;
  }

  .tis-areas__markers,
  .tis-areas__lines {
    transform: translateX(var(--tis-mk-shift));
  }
}

@media (max-width: 767px) {

  /* Icon chhota */
  .tis-areas__hub-icon {
    margin-bottom: 0;
  }
  .tis-areas__hub-icon svg {
    width: 20px;
    height: 20px;
  }

  /* Text upar + hub ko thora upar */
  .tis-areas__hub {
    transform: translateY(-44px);
    font-size: 13px;
    line-height: 1.1;
  }
}