/* =====================================================================
   Homepage: photographic hero, four service cards
   ===================================================================== */

.cgs-home { background: var(--paper); overflow-x: clip; }

/* ---------- hero ---------- */
.cgs-hero {
	--hero-pos: 50% 50%;
	--card-overlap: 44px;
	position: relative; isolation: isolate;
	min-height: clamp(480px, 36vw, 640px);
	display: flex; align-items: center;
	color: #fff; overflow: hidden;
	background: var(--emerald-900);
}
.cgs-hero__media,
.cgs-hero__media picture,
.cgs-hero__media img {
	position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2;
}
.cgs-hero__media img { display: block; object-fit: cover; object-position: var(--hero-pos); }
/* Bundled concept: frame the signboard and the upper floors. */
.cgs-hero--concept { --hero-pos: 50% 70%; }
/* Dark green, strongest behind the text on the left; the building stays clear on the right. */
.cgs-hero--photo::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background:
		linear-gradient(90deg, rgba(4, 38, 22, .94) 0%, rgba(7, 50, 29, .86) 26%, rgba(9, 60, 35, .52) 44%, rgba(9, 60, 35, .12) 60%, rgba(9, 60, 35, 0) 72%),
		linear-gradient(0deg, rgba(4, 38, 22, .4), transparent 26%);
}
/* No image at all: an abstract emerald field, never a stand-in building. */
.cgs-hero--nophoto {
	background:
		radial-gradient(ellipse at 80% 30%, rgba(201, 162, 74, .22), transparent 55%),
		radial-gradient(ellipse at 10% 110%, rgba(35, 154, 92, .45), transparent 60%),
		linear-gradient(135deg, var(--emerald-950), var(--emerald-800));
}
.cgs-hero__pattern {
	position: absolute; right: -40px; top: 50%; z-index: -1; width: min(620px, 60vw);
	transform: translateY(-50%); color: #8fd1a8; opacity: .18; pointer-events: none;
}
.cgs-hero__in { position: relative; width: 100%; padding-block: clamp(44px, 4.5vw, 72px) calc(var(--card-overlap) + clamp(40px, 4vw, 64px)); }
.cgs-hero__copy { max-width: min(48rem, 56%); }
.cgs-hero__rule { display: block; width: 56px; height: 3px; margin-bottom: 16px; border-radius: 2px; background: var(--gold-2); }
.cgs-hero__title {
	margin: 0; font-family: var(--font-bn); font-weight: 700;
	text-transform: uppercase; text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.cgs-hero__kicker {
	display: block; margin-bottom: 8px;
	font-size: calc(clamp(.9375rem, .8rem + .45vw, 1.3125rem) * var(--ts));
	font-weight: 500; letter-spacing: .3em; line-height: 1.3; color: #eef5f0;
}
.cgs-hero__l1,
.cgs-hero__l2 {
	display: block;
	font-size: calc(clamp(1.5rem, .6rem + 3.3vw, 3.875rem) * var(--ts));
	line-height: 1.12; letter-spacing: .02em;
}
.cgs-hero__l1 { color: #fff; }
.cgs-hero__l2 { color: #ecc977; }
.cgs-hero__motto {
	margin: clamp(14px, 1.6vw, 22px) 0 clamp(20px, 2.2vw, 30px); max-width: 17em;
	font-family: var(--font-display); font-weight: 600;
	font-size: calc(clamp(1.125rem, .9rem + .75vw, 1.625rem) * var(--ts));
	line-height: 1.65; color: #f3f7f4; text-wrap: balance;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
.cgs-btn {
	display: inline-flex; align-items: center; gap: 10px;
	min-height: 50px; padding: 0 26px; border-radius: 999px;
	font-weight: 700; font-size: var(--fs-base); text-decoration: none !important; line-height: 1.2;
	transition: transform .2s var(--ease), background-color .2s, border-color .2s;
}
.cgs-btn .cgs-ico { transition: transform .2s var(--ease); }
.cgs-btn:hover .cgs-ico { transform: translateX(4px); }
/* Rounded outline on a restrained translucent green. */
.cgs-btn--hero {
	color: #fff !important; /* beats plugin and editor link colours */
	background: rgba(17, 96, 59, .55);
	border: 2px solid rgba(255, 255, 255, .78);
	-webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
	box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .6);
}
.cgs-btn--hero:hover { background: rgba(17, 96, 59, .85); border-color: #fff; transform: translateY(-2px); }
.cgs-btn--hero:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 3px; }
/* Visible caption: concept / illustrative image. Top right, clear of the cards. */
.cgs-hero__note {
	position: absolute; top: 12px; right: 12px; z-index: 1;
	padding: 3px 10px; border-radius: 999px;
	background: rgba(4, 38, 22, .62); color: #f3f7f4;
	font-size: calc(.75rem * min(var(--ts), 1.05)); font-weight: 500; line-height: 1.5;
}
.cgs-hero__accent {
	position: absolute; right: var(--gutter); bottom: calc(var(--card-overlap) + 20px); margin: 0;
	font-family: Georgia, "Times New Roman", serif; font-style: italic;
	font-size: clamp(1rem, .5rem + .75vw, 1.5rem); line-height: 1.2;
	color: #f1d68c; opacity: .9; transform: rotate(-5deg); transform-origin: right bottom;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .8), 0 0 16px rgba(4, 38, 22, .9);
	pointer-events: none;
}

/* ---------- service cards ---------- */
.cgs-services { position: relative; z-index: 2; margin-top: -44px; padding-bottom: 72px; /* = hero --card-overlap */ }
.cgs-services__title { margin: 0; }
.cgs-cards {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 28px);
}
.cgs-cards > li { min-width: 0; display: flex; }
.cgs-card {
	--accent: var(--emerald-600);
	--tint: #e7f4ec;
	position: relative; flex: 1;
	display: block; color: var(--ink); text-decoration: none !important;
	border-radius: var(--radius-lg);
	transition: transform .35s var(--ease);
}
.cgs-card--notice { --accent: #b8902f; --tint: #fbf1d8; }
.cgs-card--gallery { --accent: var(--blue); --tint: #e7eefc; }
.cgs-card--contact { --accent: var(--emerald-800); --tint: #e3efe8; }
.cgs-card__inner {
	position: relative; height: 100%;
	display: flex; flex-direction: column; align-items: center; text-align: center;
	padding: 24px 20px 22px;
	background: linear-gradient(180deg, #fff 0%, #fffdf7 100%);
	border-radius: inherit;
	border: 1px solid rgba(201, 162, 74, .35);
	box-shadow:
		0 1px 0 rgba(255, 255, 255, .9) inset,
		0 -4px 0 var(--accent) inset,
		0 22px 38px -22px rgba(10, 63, 36, .4),
		0 6px 14px -8px rgba(10, 63, 36, .18);
	animation: cgs-float 6s ease-in-out infinite;
	animation-delay: calc(var(--i, 0) * -1.5s);
	will-change: transform;
}
@keyframes cgs-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.cgs-card:hover { transform: translateY(-6px); }
.cgs-card:hover .cgs-card__inner,
.cgs-card:focus-visible .cgs-card__inner { animation-play-state: paused; }
.cgs-card__icon {
	position: relative; width: 108px; height: 108px; margin-bottom: 10px;
	display: grid; place-items: center;
}
.cgs-card__icon::before {
	content: ""; position: absolute; inset: 10px; border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, #fff, var(--tint) 70%);
	box-shadow: inset 0 -6px 12px rgba(10, 63, 36, .08), 0 8px 18px -10px rgba(10, 63, 36, .35);
}
.cgs-3d { position: relative; width: 96px; height: 96px; transition: transform .45s var(--ease); }
.cgs-card:hover .cgs-3d { transform: translateY(-4px) rotate(-3deg) scale(1.05); }
.cgs-card__title {
	font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; line-height: 1.35;
	color: var(--emerald-900);
}
.cgs-card__desc { margin-top: 6px; font-size: var(--fs-sm); color: var(--ink-2); line-height: 1.55; }
.cgs-card__go {
	margin-top: auto; width: 40px; height: 40px; border-radius: 50%;
	display: grid; place-items: center; color: #fff; background: var(--accent);
	box-shadow: 0 8px 16px -8px var(--accent);
	transition: transform .3s var(--ease);
}
.cgs-card__desc { margin-bottom: 14px; }
.cgs-card:hover .cgs-card__go { transform: translateX(4px); }
.cgs-card[aria-disabled="true"] { opacity: .55; }

/* ---------- optional existing content below ---------- */

/* =====================================================================
   Responsive
   ===================================================================== */
@media (min-width: 992px) {
	/* The section heading is for assistive technology on wide screens. */
	.cgs-services__head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (min-width: 1800px) {
	/* Very wide, short hero: keep the signboard and upper floors in frame. */
	.cgs-hero--concept { --hero-pos: 50% 62%; }
}
@media (min-width: 2200px) {
	.cgs-hero--concept { --hero-pos: 50% 42%; }
}
@media (max-width: 1439.98px) {
	.cgs-hero__accent { display: none; }
}
@media (max-width: 1199.98px) {
	.cgs-hero__copy { max-width: min(38rem, 60%); }
}
@media (max-width: 991.98px) {
	/* Tablet / phone: full-width image, text over a deeper bottom-weighted overlay. */
	.cgs-hero { --hero-pos: 68% 50%; --card-overlap: 0px; min-height: clamp(400px, 64vw, 540px); align-items: flex-end; }
	.cgs-hero--concept { --hero-pos: 100% 30%; }
	.cgs-hero--photo::before {
		background:
			linear-gradient(90deg, rgba(4, 38, 22, .86) 0%, rgba(7, 50, 29, .6) 45%, rgba(9, 60, 35, .1) 100%),
			linear-gradient(0deg, rgba(4, 38, 22, .8), rgba(4, 38, 22, .2) 55%, transparent 75%);
	}
	.cgs-hero__in { padding-block: 120px 32px; }
	.cgs-hero__copy { max-width: 34rem; }
	.cgs-hero__accent { display: none; }
	.cgs-btn { min-height: 46px; padding: 0 20px; font-size: var(--fs-sm); }

	.cgs-services { margin-top: 0; padding: 22px 0 28px; }
	.cgs-services__head {
		display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px;
	}
	.cgs-services__title {
		font-family: var(--font-display); font-size: var(--fs-md); font-weight: 700; color: var(--emerald-900);
	}
	.cgs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
	.cgs-card__inner { padding: 16px 12px; border-radius: 20px; }
	.cgs-card__icon { width: 84px; height: 84px; margin-bottom: 8px; }
	.cgs-card__icon::before { inset: 6px; }
	.cgs-3d { width: 76px; height: 76px; }
	.cgs-card__title { font-size: var(--fs-base); }
	.cgs-card__desc { margin-bottom: 0; font-size: var(--fs-xs); }
	.cgs-card__go { display: none; }
}
@media (max-width: 599.98px) {
	.cgs-hero { --hero-pos: 64% 50%; min-height: 0; }
	.cgs-hero--concept { --hero-pos: 80% 24%; }
	.cgs-hero__in { padding-block: 150px 28px; }
	.cgs-hero__note { top: 8px; right: 8px; }
	.cgs-hero__kicker { letter-spacing: .16em; margin-bottom: 6px; }
}
@media (max-width: 339.98px) {
	.cgs-cards { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.cgs-card__inner { animation: none; }
	.cgs-card, .cgs-3d, .cgs-btn { transition: none; }
}

/* =====================================================================
   Hero slider (template-parts/home/hero.php, cgs-home.js)
   All slides share one grid cell, so the hero is as tall as its tallest
   slide at every width: changing slides never moves the page. Nothing is
   ever drawn over the group photograph and it is never cropped; on phones
   the banner shows only its building part (lettering replaced by text).
   ===================================================================== */
.cgs-hero--slider {
	--banner-max-h: min(820px, 82vh);
	display: block; min-height: 0;
	padding-bottom: var(--card-overlap); /* the service cards overlap this band only */
	background: var(--emerald-950);
}
.cgs-slides { display: grid; touch-action: pan-y; }
.cgs-slide {
	grid-area: 1 / 1; position: relative; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	opacity: 0; visibility: hidden;
	transition: opacity .8s var(--ease), visibility 0s linear .8s;
}
.cgs-slide.is-active { opacity: 1; visibility: visible; transition: opacity .8s var(--ease), visibility 0s; }

/* Slide 1: the banner, whole, on the school green when the other slide needs more height. */
.cgs-slide__banner { position: relative; z-index: 1; width: 100%; max-width: calc(var(--banner-max-h) * 1600 / 727); }
.cgs-slide__banner img { display: block; width: 100%; height: auto; }
/* Phone presentation of slide 1 (real text + the building without the painted lettering): see the 767px query. */
.cgs-slide__mcopy { display: none; }
/* Real link over the painted “আরও জানুন” button (artwork 1600 × 727: x 64–325, y 561–627). */
.cgs-slide__hotspot {
	position: absolute; left: 3.75%; top: 76.8%; width: 16.75%; height: 9.9%;
	border-radius: 999px; transition: box-shadow .2s;
}
.cgs-slide__hotspot:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, .85), 0 8px 22px -8px rgba(0, 0, 0, .6); }
.cgs-slide__hotspot:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 3px; }

/* Slide 2: text left, the original photograph right. */
.cgs-slide--banner,
.cgs-slide--staff {
	background:
		radial-gradient(ellipse at 0% 100%, rgba(35, 154, 92, .35), transparent 55%),
		linear-gradient(100deg, var(--emerald-950) 0%, #0c4f2d 48%, var(--emerald-900) 100%);
}
.cgs-slide__leaves {
	position: absolute; left: -60px; bottom: -40px; width: min(420px, 34vw);
	color: #8fd1a8; opacity: .14; pointer-events: none;
}
.cgs-slide__grid {
	position: relative; z-index: 1;
	display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center;
	gap: clamp(24px, 3.2vw, 64px); padding-block: clamp(28px, 3vw, 56px);
}
.cgs-slide__copy { min-width: 0; }
.cgs-slide__line { display: block; }
.cgs-slide__rule { display: block; width: 56px; height: 3px; margin-bottom: 14px; border-radius: 2px; background: var(--gold-2); }
.cgs-slide__eyebrow {
	margin: 0 0 8px; color: #f3f7f4; font-weight: 600;
	font-size: calc(clamp(1rem, .85rem + .45vw, 1.375rem) * var(--ts)); line-height: 1.5;
}
.cgs-slide__title {
	margin: 0; font-family: var(--font-display); font-weight: 700; color: #fff;
	font-size: calc(clamp(1.75rem, .9rem + 2.5vw, 3.5rem) * var(--ts)); line-height: 1.32;
	text-shadow: 0 2px 16px rgba(0, 0, 0, .3);
}
.cgs-slide__title .cgs-slide__line + .cgs-slide__line { color: #ecc977; }
.cgs-slide__title [lang="en"] { font-family: var(--font-bn); font-size: .72em; line-height: 1.28; }
.cgs-slide__slogan {
	margin: clamp(12px, 1.4vw, 20px) 0 0; color: #f3f7f4; font-weight: 500;
	font-size: calc(clamp(1rem, .85rem + .55vw, 1.4375rem) * var(--ts)); line-height: 1.7;
}
.cgs-slide__values {
	margin: clamp(10px, 1.2vw, 16px) 0 0; color: var(--gold-2); font-weight: 600;
	font-size: calc(clamp(.9375rem, .85rem + .3vw, 1.1875rem) * var(--ts)); line-height: 1.6; word-spacing: .12em;
}
.cgs-slide__cta { margin-top: clamp(16px, 1.8vw, 26px); }
.cgs-slide__photo {
	margin: 0; min-width: 0;
	border: 2px solid rgba(230, 197, 111, .85); /* frame outside the photograph: nothing covers it */
	background: rgba(255, 255, 255, .06);
	box-shadow: 0 26px 48px -26px rgba(0, 0, 0, .75);
}
.cgs-slide__photo img { display: block; width: 100%; height: auto; }

/* Controls: their own row below the slides (never over the artwork). */
.cgs-slider__bar { display: flex; align-items: center; justify-content: center; gap: 10px; padding-block: 10px 12px; }
.cgs-slider__btn {
	appearance: none; cursor: pointer; flex: none;
	width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
	border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .06); color: #fff;
	transition: background-color .2s, border-color .2s;
}
.cgs-slider__btn:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
.cgs-slider__btn .cgs-ico { width: 20px; height: 20px; }
.cgs-slider__btn:focus-visible,
.cgs-slider__dot:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 2px; }
.cgs-slider__play { margin-left: 6px; }
.cgs-slider__play .is-play,
.cgs-slider__play[aria-pressed="true"] .is-pause { display: none; }
.cgs-slider__play[aria-pressed="true"] .is-play { display: contents; }
.cgs-slider__dots { display: flex; gap: 4px; }
.cgs-slider__dot {
	appearance: none; cursor: pointer; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 999px;
	background: none; display: grid; place-items: center;
}
.cgs-slider__dot::before {
	content: ""; width: 10px; height: 10px; border-radius: 999px; background: rgba(255, 255, 255, .55);
	transition: width .3s var(--ease), background-color .3s;
}
.cgs-slider__dot[aria-current="true"]::before { width: 24px; background: var(--gold-2); }

@media (max-width: 991.98px) {
	.cgs-hero.cgs-hero--slider { min-height: 0; align-items: initial; }
	.cgs-slide__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
}
@media (max-width: 767.98px) {
	/* Stack: the text, then the whole photograph; the hero grows as needed. */
	.cgs-slide__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-block: 22px 18px; }
	.cgs-slide__title { font-size: calc(clamp(1.5rem, 1rem + 2.6vw, 2rem) * var(--ts)); }
	.cgs-slide__leaves { width: 260px; opacity: .1; }
	.cgs-slide__banner { box-shadow: 0 0 0 2px rgba(230, 197, 111, .7), 0 18px 34px -18px rgba(0, 0, 0, .8); }
	/* Slide 1: the banner lettering (x 0–622 of 1600) would be unreadably small. Show the same words as text and only
	   the building part of the artwork (x 652–1600, never stretched); the image hotspot is replaced by a real button. */
	.cgs-slide--banner { flex-direction: column; align-items: stretch; gap: 18px; padding: 22px var(--gutter) 18px; }
	.cgs-slide__mcopy { display: block; position: relative; z-index: 1; }
	.cgs-slide__mtitle {
		margin: 0; font-family: var(--font-bn); font-weight: 700; text-transform: uppercase; color: #fff;
		font-size: calc(clamp(1.625rem, 1rem + 3.6vw, 2.25rem) * var(--ts)); line-height: 1.12; letter-spacing: .01em;
		text-shadow: 0 2px 14px rgba(0, 0, 0, .3);
	}
	.cgs-slide__mkicker { display: block; margin-bottom: 6px; font-size: .5em; font-weight: 500; letter-spacing: .24em; color: #eef5f0; }
	.cgs-slide__line--gold { color: #ecc977; }
	.cgs-slide__banner { max-width: none; }
	.cgs-slide__banner img { aspect-ratio: 948 / 727; object-fit: cover; object-position: 100% 50%; }
	.cgs-slide__hotspot, .cgs-slide__bdesc { display: none !important; }
	.cgs-slider__bar { gap: 6px; padding-block: 8px; }
}
@media (min-width: 600px) and (max-width: 767.98px) {
	/* Large phones / small tablets: keep the stacked images a comfortable size (whole, left-aligned with the text). */
	.cgs-slide__banner, .cgs-slide__photo { width: 100%; max-width: 560px; }
}
@media (max-height: 520px) and (orientation: landscape) {
	.cgs-hero--slider { --banner-max-h: 72vh; }
	.cgs-slide__photo { max-width: calc(80vh * 1448 / 1086); justify-self: end; }
}
@media (prefers-reduced-motion: reduce) {
	.cgs-slide, .cgs-slide.is-active, .cgs-slider__dot::before, .cgs-slide__hotspot { transition: none; }
}