/* ═══════════════════════════════════════════════════════════
   SOLUTIONS PAGE — Rebuilt (matches mockup)
   ═══════════════════════════════════════════════════════════ */

/* ── Hero Bento Grid ───────────────────────────────────── */
.sol-hero {
	padding: 2rem 0 3rem;
	background: #fff;
}

.sol-hero-grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 1.25rem;
	min-height: 520px;
}

/* Left big image card */
.sol-hero-main {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	min-height: 520px;
}

.sol-hero-main img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sol-hero-main-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(23,68,41,.7) 0%, rgba(23,68,41,.92) 100%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 2.5rem;
	color: #fff;
}

.sol-hero-main-overlay h1 {
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	font-weight: 800;
	line-height: 1.25;
	margin-bottom: 1rem;
	color: #fff;
}

.sol-hero-main-overlay p {
	font-size: .9rem;
	line-height: 1.6;
	color: rgba(255,255,255,.88);
	margin-bottom: 1.5rem;
}

.sol-hero-scroll {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	color: rgba(255,255,255,.9);
	text-decoration: none;
	font-size: .85rem;
	font-weight: 500;
	transition: color .2s;
}

.sol-hero-scroll:hover {
	color: #fff;
}

/* Right Bento grid */
.sol-bento {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: auto auto auto;
	gap: 1.25rem;
}

.sol-bento-card {
	display: flex;
	flex-direction: column;
	padding: 1.5rem;
	border-radius: 14px;
	text-decoration: none;
	color: var(--gray-900);
	transition: transform .25s ease, box-shadow .25s ease;
	border: 1px solid rgba(0,0,0,.06);
}

.sol-bento-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(0,0,0,.1);
}

.sol-bento-card h3 {
	font-size: .95rem;
	font-weight: 700;
	color: var(--green-900);
	margin-bottom: .4rem;
}

.sol-bento-card p {
	font-size: .8rem;
	color: var(--gray-700);
	line-height: 1.5;
	margin: 0 0 .75rem;
	flex: 1;
}

.sol-bento-link {
	display: inline-block;
	font-size: .78rem;
	font-weight: 600;
	color: var(--green-600);
	border: 1.5px solid var(--green-600);
	border-radius: 6px;
	padding: .35rem .9rem;
	margin-top: auto;
	width: fit-content;
	transition: background .2s, color .2s;
}

.sol-bento-link:hover {
	background: var(--green-600);
	color: #fff;
}

.sol-bento-link--outline {
	color: var(--gray-700);
	border-color: var(--gray-700);
}

/* Bento card 01 */
.sol-bento-01 {
	grid-column: 1 / 3;
	background: #fff;
}

.sol-bento-icon {
	width: 48px;
	height: 48px;
	background: rgba(31,90,55,.08);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: .75rem;
	color: var(--green-600);
}

/* Bento card 02 — SDGs with image */
.sol-bento-02 {
	grid-column: 1 / 3;
	background: #fff;
}

.sol-bento-02-inner {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 1.25rem;
	align-items: start;
}

.sol-bento-02-inner img {
	width: 100%;
	height: 150px;
	object-fit: cover;
	border-radius: 10px;
}

/* Bento card 03 — City */
.sol-bento-03 {
	background: #f0f4f1;
}

.sol-bento-subtitle {
	font-weight: 600;
	font-size: .85rem;
	color: var(--green-900);
	margin-bottom: .5rem;
}

.sol-city-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .75rem;
	margin-top: .5rem;
}

.sol-city-cols strong {
	font-size: .78rem;
	display: block;
	margin-bottom: .15rem;
}

.sol-city-cols span {
	font-size: .72rem;
	color: var(--gray-700);
	line-height: 1.4;
}

/* Bento card 04 — Corporate */
.sol-bento-04 {
	background: linear-gradient(135deg, #e8ecee, #f5f7f9);
}

/* Bento card 05 — Events with 6-cell grid (5 photos + text) */
.sol-bento-05 {
	grid-column: 1 / 3;
	padding: 0;
	background: var(--green-900);
	color: #fff;
	overflow: hidden;
}

.sol-bento-05 h3 {
	color: #fff;
}

.sol-bento-05 p {
	color: rgba(255,255,255,.85);
}

.sol-bento-05 .sol-bento-link {
	color: #fff;
	border-color: #fff;
}

.sol-bento-05 .sol-bento-link:hover {
	background: #fff;
	color: var(--green-900);
}

/* 6-cell grid: 3 cols × 2 rows, last cell = text */
.sol-bento-05-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 1fr 1fr;
	min-height: 200px;
}

.sol-bento-05-grid img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sol-bento-05-text {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.sol-bento-05-text ul {
	list-style: none;
	padding: 0;
	margin: 0 0 .5rem;
}

.sol-bento-05-text ul li {
	font-size: .78rem;
	padding: .1rem 0;
	color: rgba(255,255,255,.9);
}

.sol-bento-05-text ul li::before {
	content: '•';
	margin-right: .35rem;
	color: var(--accent);
}

.sol-events-stat {
	margin-bottom: .5rem;
}

.sol-events-stat strong {
	font-size: 1.2rem;
	color: var(--accent);
	display: block;
}

.sol-events-stat span {
	font-size: .72rem;
	color: rgba(255,255,255,.8);
}

/* Badges */
.sol-badge {
	display: inline-block;
	font-size: .7rem;
	font-weight: 700;
	padding: .3rem .75rem;
	border-radius: 20px;
	text-transform: uppercase;
	letter-spacing: .04em;
	margin-bottom: .75rem;
	width: fit-content;
}

.sol-badge--green {
	background: var(--green-600);
	color: #fff;
}

.sol-badge--gray {
	background: #555;
	color: #fff;
}

.sol-badge--orange {
	background: var(--orange);
	color: #fff;
}

/* ── Section styling ───────────────────────────────────── */
.sol-section {
	padding: 4rem 0;
}

.sol-section--alt {
	background: #f9faf9;
}

.sol-section--green {
	background: var(--section-light);
	color: #fff;
}

.sol-section--green .sol-title,
.sol-section--green h3,
.sol-section--green h4,
.sol-section--green strong {
	color: #fff;
}

.sol-section--green p,
.sol-section--green span,
.sol-section--green li {
	color: rgba(255,255,255,.9);
}

.sol-num {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: .9rem;
	color: var(--gray-700);
	margin-bottom: .25rem;
	text-align: center;
}

.sol-section--green .sol-num {
	color: rgba(255,255,255,.6);
}

.sol-title {
	font-size: clamp(1.5rem, 3vw, 2.2rem);
	font-weight: 800;
	text-align: center;
	margin-bottom: .5rem;
	color: var(--gray-900);
}

.sol-subtitle {
	text-align: center;
	color: var(--gray-700);
	font-size: .95rem;
	max-width: 700px;
	margin: 0 auto 1.5rem;
}

.sol-section--green .sol-subtitle {
	color: rgba(255,255,255,.85);
}

/* ── Package cards ─────────────────────────────────────── */
.sol-packages {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	max-width: 960px;
	margin: 2.5rem auto 0;
}

.sol-pkg {
	background: #fff;
	border-radius: 14px;
	padding: 2rem 1.5rem;
	border: 1.5px solid rgba(0,0,0,.08);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	transition: transform .25s ease, box-shadow .25s ease;
}

.sol-pkg:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgba(0,0,0,.1);
}

.sol-pkg-icon {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: 2px solid var(--green-900);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
	color: var(--green-900);
}

.sol-pkg-icon--gold {
	border-color: #c8a951;
	color: #c8a951;
}

.sol-pkg-icon--silver {
	border-color: #8a8a8a;
	color: #8a8a8a;
}

.sol-pkg h3 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--green-900);
	margin-bottom: .75rem;
	line-height: 1.4;
}

.sol-pkg h3 span {
	font-weight: 400;
	font-size: .88rem;
	color: var(--gray-700);
}

.sol-pkg-desc {
	font-size: .85rem;
	color: var(--gray-700);
	line-height: 1.6;
	margin-bottom: 1.25rem;
	flex: 1;
}

.sol-pkg-features {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	width: 100%;
	text-align: left;
}

.sol-pkg-features li {
	padding: .4rem 0;
	font-size: .85rem;
	color: var(--gray-900);
	display: flex;
	align-items: center;
	gap: .5rem;
}

.sol-pkg-features li::before {
	content: '•';
	color: var(--green-600);
	font-weight: 700;
	flex-shrink: 0;
}

.sol-pkg-btn {
	display: inline-block;
	font-size: .85rem;
	font-weight: 600;
	color: var(--green-600);
	border: 1.5px solid var(--green-600);
	border-radius: 8px;
	padding: .55rem 1.5rem;
	cursor: pointer;
	transition: background .2s, color .2s;
	margin-top: auto;
}

.sol-pkg-btn:hover {
	background: var(--green-600);
	color: #fff;
}

.sol-pkg-btn--gold {
	color: #c8a951;
	border-color: #c8a951;
}

.sol-pkg-btn--gold:hover {
	background: #c8a951;
	color: #fff;
}

.sol-pkg-btn--silver {
	color: #8a8a8a;
	border-color: #8a8a8a;
}

.sol-pkg-btn--silver:hover {
	background: #8a8a8a;
	color: #fff;
}

/* Wide registration button under packages */
.sol-register-btn {
	display: block;
	width: 100%;
	max-width: 960px;
	margin: 2rem auto 0;
	padding: 1rem;
	text-align: center;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	background: var(--green-700);
	border-radius: 10px;
	text-decoration: none;
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
	box-shadow: 0 4px 16px rgba(15,123,92,.18);
}

.sol-register-btn:hover {
	background: var(--green-900);
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(15,123,92,.25);
}

/* ── SDGs Card ─────────────────────────────────────────── */
.sol-sdgs-card {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2.5rem;
	align-items: center;
	max-width: 900px;
	margin: 0 auto;
	background: #fff;
	border-radius: 16px;
	padding: 2rem;
	border: 1px solid rgba(0,0,0,.06);
}

.sol-sdgs-img img {
	width: 220px;
	height: 280px;
	object-fit: cover;
	border-radius: 12px;
}

.sol-sdgs-text .sol-num,
.sol-sdgs-text .sol-title {
	text-align: left;
}

.sol-sdgs-text p {
	font-size: .92rem;
	line-height: 1.7;
	color: var(--gray-700);
}

/* ── City Advisory ─────────────────────────────────────── */
.sol-city-advisory {
	max-width: 900px;
	margin: 2rem auto 0;
}

.sol-city-advisory-card {
	background: rgba(255,255,255,.1);
	border-radius: 14px;
	padding: 2rem;
	border: 1px solid rgba(255,255,255,.15);
}

.sol-city-advisory-card h3 {
	font-size: 1.2rem;
	margin-bottom: .75rem;
}

.sol-city-advisory-card p {
	font-size: .9rem;
	line-height: 1.7;
}

.sol-city-icons {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	padding-top: 1rem;
}

.sol-city-icon-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	text-align: center;
}

.sol-city-icon-item span {
	font-weight: 600;
	font-size: .9rem;
}

/* ── Coming Soon ───────────────────────────────────────── */
.sol-coming-soon {
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
	padding: 2.5rem;
	background: #f9faf8;
	border-radius: 16px;
	border: 2px dashed rgba(0,0,0,.1);
}

.sol-coming-soon p {
	color: var(--gray-700);
	font-size: .92rem;
	line-height: 1.7;
	margin-top: 1rem;
}

/* ── Events full section ───────────────────────────────── */
.sol-events-full {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	margin-top: 2rem;
}

.sol-events-collage--large {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 6px;
	border-radius: 14px;
	overflow: hidden;
}

.sol-events-collage--large img {
	width: 100%;
	height: 140px;
	object-fit: cover;
	display: block;
}

.sol-events-details {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.sol-event-item h4 {
	font-size: 1rem;
	font-weight: 700;
	margin-bottom: .35rem;
}

.sol-event-item p {
	font-size: .88rem;
	line-height: 1.6;
}

/* ── Testimonials ──────────────────────────────────────── */
.sol-testimonials {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
	max-width: 960px;
	margin: 2rem auto 0;
}

.sol-testimonial {
	background: #f9faf9;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(0,0,0,.06);
}

.sol-testimonial-video {
	position: relative;
	padding-top: 56.25%;
}

.sol-testimonial-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.sol-testimonial-body {
	padding: 1.25rem;
}

.sol-testimonial-body blockquote {
	font-size: .88rem;
	line-height: 1.6;
	color: var(--gray-700);
	font-style: italic;
	margin: 0 0 .75rem;
	border: 0;
	padding: 0;
}

.sol-testimonial-body strong {
	display: block;
	font-size: .88rem;
	color: var(--gray-900);
}

.sol-testimonial-body span {
	font-size: .78rem;
	color: var(--gray-700);
}

/* ── Bottom CTA ────────────────────────────────────────── */
.sol-cta {
	padding: 3.5rem 0;
	background: linear-gradient(180deg, #f5f7f5 0%, #e8ece8 100%);
	text-align: center;
}

.sol-cta h2 {
	font-size: clamp(1.3rem, 3vw, 1.8rem);
	font-weight: 700;
	color: var(--gray-900);
	margin-bottom: 1.5rem;
}

.sol-cta-actions {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

.sol-cta-btn {
	display: inline-block;
	padding: .7rem 1.75rem;
	font-size: .9rem;
	font-weight: 600;
	border: 2px solid var(--gray-900);
	border-radius: 8px;
	color: var(--gray-900);
	text-decoration: none;
	transition: background .2s, color .2s;
}

.sol-cta-btn:hover {
	background: var(--gray-900);
	color: #fff;
}

.sol-cta-btn--outline {
	border-color: var(--gray-700);
	color: var(--gray-700);
}

.sol-cta-btn--outline:hover {
	background: var(--gray-700);
	color: #fff;
}

/* ── Solutions Responsive ──────────────────────────────── */
@media (max-width: 1024px) {
	.sol-hero-grid {
		grid-template-columns: 1fr 1.2fr;
	}
	.sol-bento-02-inner {
		grid-template-columns: 120px 1fr;
	}
}

@media (max-width: 900px) {
	.sol-hero-grid {
		grid-template-columns: 1fr;
	}
	.sol-hero-main {
		min-height: 280px;
	}
	.sol-bento {
		grid-template-columns: 1fr 1fr;
	}
	.sol-bento-05-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.sol-packages {
		grid-template-columns: 1fr 1fr;
		max-width: 640px;
	}
	.sol-packages .sol-pkg:last-child {
		grid-column: 1 / -1;
		max-width: 320px;
		margin: 0 auto;
	}
	.sol-sdgs-card {
		grid-template-columns: 1fr;
	}
	.sol-sdgs-img img {
		width: 100%;
		height: 200px;
	}
	.sol-events-full {
		grid-template-columns: 1fr;
	}
	.sol-testimonials {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.sol-hero-main {
		min-height: 240px;
	}
	.sol-hero-main-overlay {
		padding: 1.5rem;
	}
	.sol-hero-main-overlay h1 {
		font-size: 1.3rem;
	}
	.sol-bento {
		grid-template-columns: 1fr;
	}
	.sol-bento-02 {
		grid-column: 1;
	}
	.sol-bento-02-inner {
		grid-template-columns: 1fr;
	}
	.sol-bento-05 {
		grid-column: 1;
	}
	.sol-bento-05-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto auto auto;
	}
	.sol-bento-05-text {
		grid-column: 1 / -1;
		padding: 1rem;
	}
	.sol-packages {
		grid-template-columns: 1fr;
		max-width: 360px;
	}
	.sol-packages .sol-pkg:last-child {
		grid-column: auto;
		max-width: none;
	}
	.sol-city-cols {
		grid-template-columns: 1fr;
	}
	.sol-events-collage--large {
		grid-template-columns: repeat(2, 1fr);
	}
	.sol-section {
		padding: 2.5rem 0;
	}
	.sol-register-btn {
		font-size: .9rem;
		padding: .85rem;
	}
}