/* ==========================================================================
   rebuild.css — repair + redesign layer for the Karnataka Smart Cities build.

   Loaded last, so the theme's own stylesheets stay untouched and this file can
   be read on its own. Palette is taken from the page's own inline colours
   (#0ebfe9 headings, olive header).
   ========================================================================== */

:root {
	--ka-cyan: #0ebfe9;
	--ka-cyan-deep: #0a94b5;
	--ka-ink: #16202b;
	--ka-body: #58636f;
	--ka-line: rgba(22, 32, 43, 0.10);
	--ka-shadow: 0 1px 2px rgba(22, 32, 43, 0.05), 0 12px 30px rgba(22, 32, 43, 0.10);
	--ka-shadow-lift: 0 2px 6px rgba(22, 32, 43, 0.08), 0 22px 44px rgba(22, 32, 43, 0.17);
}

html { scroll-behavior: smooth; }
[id] { scroll-margin-top: 110px; }
img { max-width: 100%; }

a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--ka-cyan);
	outline-offset: 3px;
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}

/* ------------------------------------------------------------------ hero */
/* The royalslider pointed at four banner images on the dead live host, none of
   them archived, so the section rendered as an empty black box. Rebuilt from
   the event logo over the one large photo that was recoverable. */

.ka-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 520px;
	padding: 72px 24px 78px;
	overflow: hidden;
	isolation: isolate;
}
.ka-hero-bg {
	position: absolute;
	inset: 0;
	z-index: -2;
}
.ka-hero-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 38%;
}
.ka-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(8, 18, 28, 0.72), rgba(8, 18, 28, 0.80)),
		radial-gradient(120% 90% at 50% 30%, rgba(14, 191, 233, 0.22), transparent 70%);
}

.ka-hero-inner {
	width: 100%;
	max-width: 880px;
	text-align: center;
}
.ka-hero-logo {
	display: block;
	width: 100%;
	max-width: 620px;
	height: auto;
	margin: 0 auto;
	filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.45));
}
.ka-hero-meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 30px 0 0;
	padding: 0;
	list-style: none;
}
.ka-hero-meta li {
	margin: 0;
	padding: 9px 22px;
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.10);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.2;
}
.ka-hero-note {
	max-width: 620px;
	margin: 20px auto 0;
	color: rgba(255, 255, 255, 0.84);
	font-size: 15px;
	line-height: 1.6;
}
.ka-hero-cta {
	display: inline-block;
	margin-top: 26px;
	padding: 13px 30px;
	border-radius: 999px;
	background: var(--ka-cyan);
	color: #06222c;
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 10px 26px rgba(14, 191, 233, 0.34);
	transition: transform 0.2s ease, background 0.2s ease;
}
.ka-hero-cta:hover {
	background: #33d0f5;
	color: #06222c;
	transform: translateY(-2px);
}

@media (max-width: 700px) {
	.ka-hero { min-height: 380px; padding: 52px 18px 58px; }
	.ka-hero-meta { gap: 8px; margin-top: 22px; }
	.ka-hero-meta li { padding: 7px 15px; font-size: 12px; }
	.ka-hero-note { font-size: 14px; }
}

/* ------------------------------------------------------- partner strips */
/* These were <marquee> elements: deprecated, unreadable to assistive tech and
   frozen mid-scroll in any static capture. Same effect in CSS, pausable. */

.ka-marquee {
	position: relative;
	overflow: hidden;
	padding: 10px 0;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ka-marquee-track {
	display: flex;
	align-items: center;
	gap: 40px;
	width: max-content;
	animation: ka-scroll 46s linear infinite;
}
.ka-marquee:hover .ka-marquee-track,
.ka-marquee:focus-within .ka-marquee-track { animation-play-state: paused; }
.ka-marquee-track img {
	display: block;
	height: 78px;
	width: auto;
	max-width: none;
}
@keyframes ka-scroll {
	from { transform: translate3d(0, 0, 0); }
	to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.ka-marquee { -webkit-mask-image: none; mask-image: none; overflow-x: auto; }
	.ka-marquee-track { animation: none; }
}
@media (max-width: 700px) {
	.ka-marquee-track img { height: 54px; }
	.ka-marquee-track { gap: 26px; }
}

/* --------------------------------------------------------- speaker rows */
/* The theme floats `one-quarter` columns, so a row with fewer than four people
   hangs to the left with dead space beside it. */

.ka-people {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: 26px 22px;
	margin: 6px 0 0 !important;
}
.ka-people > .one-quarter,
.ka-people > .one-third {
	display: flex;
	flex-direction: column;
	float: none !important;
	width: auto !important;
	max-width: 252px;
	flex: 0 1 252px;
	margin: 0 !important;
	padding: 0 !important;
}
/* empty spacer columns the page builder emitted to pad rows */
.ka-people > .one-quarter:not(:has(.w-person)):not(:has(h4)),
.ka-people > .one-third:not(:has(.w-person)):not(:has(h4)) { display: none; }

.ka-people .w-person {
	/* grow to fill the column instead of height:100% — some columns also hold a
	   group heading, and a 100%-tall card overflowed past the column bottom and
	   printed over the next row's heading */
	flex: 1 1 auto;
	height: auto;
	padding: 24px 18px 22px;
	border: 1px solid var(--ka-line);
	border-radius: 14px;
	background: #fff;
	box-shadow: var(--ka-shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.no-touch .ka-people .w-person:hover {
	transform: translateY(-5px);
	box-shadow: var(--ka-shadow-lift);
}
.ka-people .w-person-image { margin: 0 0 16px !important; }
.ka-people .w-person-image img {
	width: 152px;
	height: 152px;
	object-fit: cover;
	border-radius: 50%;
	margin: 0 auto;
	box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(14, 191, 233, 0.34);
}
.ka-people .w-person-name,
.ka-people .w-person-name span {
	color: var(--ka-ink);
	font-size: 16px;
	line-height: 1.35;
}
.ka-people .w-person-role {
	color: var(--ka-body);
	font-size: 13px;
	line-height: 1.55;
}
/* the little cyan group heading that sits above some columns */
.ka-people h4[style*="0ebfe9"] {
	margin-bottom: 14px;
	font-size: 15px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

@media (max-width: 600px) {
	.ka-people > .one-quarter,
	.ka-people > .one-third { flex-basis: 100%; max-width: 300px; }
}

/* --------------------------------------------------------- section type */

.wpb_text_column h2 { line-height: 1.25; }
.l-section h2[style*="0ebfe9"] { letter-spacing: -0.01em; }

/* ------------------------------------------------------------- videos */
/* Embedded YouTube returns Error 153 from a file:// page, so each player is a
   facade: local thumbnail + play badge + real title, linking to the watch
   page. Served over http(s), js/rebuild.js swaps in the real player. */

.ka-video { position: relative; }
.ka-video-link {
	display: block;
	text-decoration: none;
	color: inherit;
	border: 0;
}
.ka-video-thumb {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 10px;
	background: #0d1117;
	aspect-ratio: 16 / 9;
	box-shadow: var(--ka-shadow);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ka-video-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease, filter 0.25s ease;
}
.ka-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 66px;
	height: 46px;
	transform: translate(-50%, -50%);
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}
.ka-play-bg { fill: #1c1c1c; fill-opacity: 0.82; transition: fill 0.2s ease, fill-opacity 0.2s ease; }
.ka-play-tri { fill: #fff; }

.ka-video-link:hover .ka-video-thumb,
.ka-video-link:focus-visible .ka-video-thumb {
	transform: translateY(-4px);
	box-shadow: var(--ka-shadow-lift);
}
.ka-video-link:hover .ka-video-thumb img { transform: scale(1.04); filter: brightness(1.05); }
.ka-video-link:hover .ka-play-bg { fill: #e62117; fill-opacity: 1; }

.ka-video-title {
	display: block;
	margin-top: 12px;
	color: var(--ka-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.45;
}
.ka-video-hint {
	display: block;
	margin-top: 4px;
	color: var(--ka-cyan-deep);
	font-size: 13px;
	font-weight: 600;
}
.ka-video.is-playing iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 10px;
	display: block;
}

/* ------------------------------------------- portraits with no photo */
/* Three speaker images were never archived; initials beat a broken-image icon. */
.ka-initials {
	display: grid;
	place-items: center;
	width: 152px;
	height: 152px;
	margin: 0 auto;
	border-radius: 50%;
	background: linear-gradient(150deg, var(--ka-cyan), var(--ka-cyan-deep));
	color: #fff;
	font-size: 46px;
	font-weight: 700;
	letter-spacing: 0.02em;
	box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(14, 191, 233, 0.34);
}

/* ---------------------------------------------------------- magazines */
/* The Elets magazine widget is an owl-carousel whose two stylesheets live on
   www.eletsonline.com and now 404, so the covers rendered full size in one
   unstyled row that ran off the right edge. Grid instead. */

.ka-mags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 26px 22px;
	max-width: 1120px;
	margin: 30px auto 0;
	padding: 0;
	list-style: none;
}
.ka-mags > li { flex: 0 0 176px; max-width: 176px; margin: 0; }
.ka-mag a { display: block; border: 0; text-decoration: none; }
.ka-mag-cover {
	display: block;
	overflow: hidden;
	border-radius: 6px;
	background: #fff;
	box-shadow: 0 8px 22px rgba(0, 0, 0, 0.34);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.ka-mag-cover img { display: block; width: 100%; height: auto; }
.no-touch .ka-mag a:hover .ka-mag-cover {
	transform: translateY(-7px);
	box-shadow: 0 18px 36px rgba(0, 0, 0, 0.42);
}
.ka-mag a:focus-visible .ka-mag-cover {
	outline: 3px solid #fff;
	outline-offset: 3px;
}

@media (max-width: 900px) {
	.ka-mags { gap: 20px 16px; }
	.ka-mags > li { flex-basis: 138px; max-width: 138px; }
}
@media (max-width: 480px) {
	.ka-mags > li { flex-basis: 120px; max-width: 120px; }
}

/* group heading that sits above a card inside the same column */
.ka-people > .one-quarter > .wpb_text_column,
.ka-people > .one-third > .wpb_text_column { flex: 0 0 auto; margin-bottom: 10px !important; }