/**
 * Homepage layout, built from the approved design mockup.
 *
 * WHY A SEPARATE STYLESHEET
 * Only the front page uses these components, and it is enqueued only there
 * (see EAIBS_Templates). Folding it into eaibs-theme.css would ship ~10KB of
 * unused CSS to the other 27 pages.
 *
 * WHY EVERYTHING IS SCOPED UNDER .eaibs-home
 * The mockup used generic class names - .card, .post, .stat, .quote, .tabs -
 * which Elementor, Tutor LMS and the theme also use. Unscoped, those rules
 * would reach into the header, footer and any widget on the page. Every
 * selector here is prefixed so this file cannot affect anything outside the
 * homepage's own container.
 *
 * WHY THE MOCKUP'S PALETTE IS NOT USED
 * The mockup shipped its own navy (#0f2547), gold (#d9a441), Georgia and
 * Segoe UI. The site already runs a different, signed-off brand. A homepage in
 * one palette beside 27 pages in another reads as broken, so the colours and
 * fonts below map onto the live tokens from eaibs-theme.css. The layout,
 * spacing and structure are the mockup's; the brand is the site's.
 *
 * The mockup's own header, footer, nav and utility bar are deliberately absent.
 * The site's existing header and footer still render, so navigation is
 * identical on every page.
 *
 * @package EAIBS_Content
 */

.eaibs-home {
	--h-navy:      var(--eaibs-navy,      #16306b);
	--h-navy-2:    var(--eaibs-navy-deep, #0e1f47);
	--h-gold:      var(--eaibs-gold,      #c9a227);
	/* Darkened deliberately. The live --eaibs-gold-deep (#a8861a) measures
	   3.45:1 on white and fails WCAG AA for the small text it is used on here.
	   #8f6412 measures 5.25:1 on white and 4.89:1 on tint. */
	--h-gold-dark: #8f6412;
	--h-ink:       var(--eaibs-ink,    #16202c);
	--h-muted:     var(--eaibs-muted,  #6b7889);
	--h-line:      var(--eaibs-line,   #dde3ea);
	--h-tint:      var(--eaibs-tint,   #f4f7fa);
	--h-radius:    var(--eaibs-radius, 6px);
	--h-shadow:    var(--eaibs-shadow, 0 8px 28px rgba(15, 37, 71, .10));
	--h-max:       1180px;

	color: var(--h-ink);
	line-height: 1.6;
}

/* ---------------------------------------------------------------- layout */
.eaibs-home .wrap { max-width: var(--h-max); margin: 0 auto; padding: 0 20px; }
.eaibs-home section { padding: 84px 0; }
.eaibs-home .tint { background: var(--h-tint); }
.eaibs-home .head { margin-bottom: 38px; }
.eaibs-home .head.center { text-align: center; }
.eaibs-home .head.center .lead { margin: 0 auto; }

.eaibs-home h2,
.eaibs-home h3 {
	font-family: var(--eaibs-display, Georgia, "Times New Roman", serif);
	line-height: 1.2;
	color: var(--h-navy);
}
.eaibs-home h2 { font-size: clamp(1.7rem, 3.2vw, 2.3rem); margin-bottom: 10px; }

.eaibs-home .eyebrow {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: .14em;
	font-size: .76rem;
	font-weight: 700;
	color: var(--h-gold-dark);
	margin-bottom: 10px;
}
.eaibs-home .lead { color: var(--h-muted); max-width: 640px; }

/* Announced by screen readers, invisible on screen. */
.eaibs-home .sr-only {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- buttons */
.eaibs-home .btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 13px 24px; border-radius: 999px;
	font-weight: 600; font-size: .96rem;
	border: 2px solid transparent; cursor: pointer;
	transition: .2s; text-decoration: none;
}
.eaibs-home .btn-gold { background: var(--h-gold); color: var(--h-navy); }
.eaibs-home .btn-gold:hover { background: var(--h-gold-dark); color: #fff; }
.eaibs-home .btn-ghost { border-color: rgba(255, 255, 255, .7); color: #fff; }
.eaibs-home .btn-ghost:hover { background: #fff; color: var(--h-navy); }
.eaibs-home .btn-outline { border-color: var(--h-navy); color: var(--h-navy); }
.eaibs-home .btn-outline:hover { background: var(--h-navy); color: #fff; }

/* ------------------------------------------------------------------ hero */
.eaibs-home .hero {
	position: relative; color: #fff; overflow: hidden;
	background:
		radial-gradient(900px 500px at 85% 30%, #2b55a8 0%, transparent 60%),
		linear-gradient(135deg, var(--h-navy), var(--h-navy-2));
}
/* The scrim. Guarantees the headline stays readable whatever photo loads -
   darkest where the words are, lightest where the card is. */
.eaibs-home .hero::before {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(100deg,
		rgba(14, 31, 71, .94) 0%,
		rgba(14, 31, 71, .78) 48%,
		rgba(14, 31, 71, .40) 100%);
}
/* Two stacked images, crossfaded on opacity. background-image cannot be
   transitioned, and opacity runs on the compositor. The 6s delay is exactly
   half the 12s cycle, which is what makes the handover seamless. */
.eaibs-home .hero-bg {
	position: absolute; inset: 0;
	background-size: cover; background-position: center;
	opacity: 0; animation: eaibsHeroFade 12s infinite;
}
.eaibs-home .hero-bg.b2 { animation-delay: 6s; }
@keyframes eaibsHeroFade {
	0%   { opacity: 0 }
	8%   { opacity: 1 }
	50%  { opacity: 1 }
	58%  { opacity: 0 }
	100% { opacity: 0 }
}
.eaibs-home .hero .wrap {
	position: relative; z-index: 2;
	display: grid; grid-template-columns: 1.15fr .85fr;
	gap: 40px; align-items: center;
	min-height: 560px; padding-top: 70px; padding-bottom: 70px;
}
.eaibs-home .hero h1 {
	color: #fff;
	font-family: var(--eaibs-display, Georgia, serif);
	font-size: clamp(2.2rem, 5vw, 3.5rem);
	line-height: 1.15; margin-bottom: 18px;
}
.eaibs-home .hero h1 em { color: var(--h-gold); font-style: normal; }
.eaibs-home .hero .eyebrow { color: var(--h-gold); }
.eaibs-home .hero p { font-size: 1.12rem; color: #d7e0ef; max-width: 560px; margin-bottom: 30px; }
.eaibs-home .hero .cta { display: flex; gap: 14px; flex-wrap: wrap; }
.eaibs-home .hero-note {
	margin-top: 26px; font-size: .88rem; color: #c3d0e4;
	display: flex; gap: 18px; flex-wrap: wrap;
}
.eaibs-home .hero-note span::before { content: "\2713"; color: var(--h-gold); margin-right: 7px; font-weight: 700; }

.eaibs-home .hero-card {
	background: rgba(255, 255, 255, .1);
	border: 1px solid rgba(255, 255, 255, .22);
	backdrop-filter: blur(10px);
	border-radius: 20px; padding: 28px;
}
.eaibs-home .hero-card h3 { color: #fff; font-family: inherit; font-size: 1.05rem; margin-bottom: 4px; }
.eaibs-home .hero-card small { color: #c3cfe3; display: block; margin-bottom: 16px; }
.eaibs-home .hero-card label { display: block; font-size: .8rem; color: #c3cfe3; margin: 12px 0 5px; }
.eaibs-home .hero-card select,
.eaibs-home .hero-card input {
	width: 100%; padding: 12px 14px; border-radius: 10px; border: 0;
	font-size: .95rem; background: #fff; color: var(--h-ink);
}
.eaibs-home .hero-card .btn { width: 100%; justify-content: center; margin-top: 18px; }

/* ----------------------------------------------------------- trust strip */
.eaibs-home .trust { padding: 34px 0; border-bottom: 1px solid var(--h-line); background: #fff; }
.eaibs-home .trust .wrap { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; justify-content: center; }
.eaibs-home .trust p { font-size: .8rem; text-transform: uppercase; letter-spacing: .12em; color: var(--h-muted); font-weight: 700; }
.eaibs-home .logos { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.eaibs-home .logo-chip {
	height: 54px; min-width: 112px; padding: 6px 16px;
	border: 1px solid var(--h-line); border-radius: 10px;
	display: grid; place-items: center;
	font-weight: 800; letter-spacing: .06em; color: #7b8699;
	font-family: var(--eaibs-display, Georgia, serif);
	filter: grayscale(1); transition: .25s;
}
.eaibs-home .logo-chip:hover { filter: none; color: var(--h-navy); border-color: var(--h-gold); box-shadow: var(--h-shadow); }
.eaibs-home .logo-chip img { max-height: 42px; max-width: 110px; width: auto; object-fit: contain; mix-blend-mode: multiply; }

/* ----------------------------------------------------------------- stats */
.eaibs-home .stats { padding: 56px 0; background: var(--h-navy); color: #fff; }
/* Flex, centred — not a grid.
   A grid stretches its tracks to fill the row, so three stats sat ~380px apart
   across the full 1140px and read as drifting rather than as a set. Flex with
   justify-content:center keeps them as one centred group whatever the count,
   and each item is capped so the labels stay close to their numbers. */
.eaibs-home .stats .grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 28px 64px;
	text-align: center;
}
.eaibs-home .stat { flex: 0 1 200px; }
.eaibs-home .stat b {
	display: block; font-family: var(--eaibs-display, Georgia, serif);
	font-size: clamp(2rem, 4vw, 2.8rem); color: var(--h-gold);
}
.eaibs-home .stat span { color: #c3cfe3; font-size: .92rem; }

/* -------------------------------------------------------------- programs */
.eaibs-home .tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; }
.eaibs-home .tab {
	padding: 9px 20px; border-radius: 999px; border: 1px solid var(--h-line);
	background: #fff; font-weight: 600; font-size: .9rem; cursor: pointer;
	color: var(--h-ink); transition: .2s;
}
.eaibs-home .tab:hover { border-color: var(--h-navy); }
.eaibs-home .tab.active { background: var(--h-navy); color: #fff; border-color: var(--h-navy); }

.eaibs-home .cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.eaibs-home .card {
	background: #fff; border: 1px solid var(--h-line); border-radius: var(--h-radius);
	overflow: hidden; display: flex; flex-direction: column;
	transition: .25s; text-decoration: none;
}
.eaibs-home .card:hover { transform: translateY(-5px); box-shadow: var(--h-shadow); border-color: transparent; }
.eaibs-home .card .img {
	height: 170px; position: relative; display: flex; align-items: flex-end; padding: 14px;
	background: var(--photo, linear-gradient(transparent, transparent)), var(--g);
	background-size: cover; background-position: center;
}
.eaibs-home .card .img span {
	background: rgba(255, 255, 255, .92); color: var(--h-navy);
	font-size: .7rem; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
}
.eaibs-home .i-biz  { --g: linear-gradient(135deg, #16306b, #3b6bb5); }
.eaibs-home .i-it   { --g: linear-gradient(135deg, #0e6f6f, #35b3a3); }
.eaibs-home .i-lang { --g: linear-gradient(135deg, #9a4d1c, #e0a053); }
.eaibs-home .i-corp { --g: linear-gradient(135deg, #4a2c7a, #8f6bd1); }
.eaibs-home .card .body { padding: 20px; display: flex; flex-direction: column; flex: 1; }
.eaibs-home .card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.eaibs-home .card p { font-size: .92rem; color: var(--h-muted); flex: 1; }
.eaibs-home .card .more { margin-top: 16px; font-weight: 700; font-size: .9rem; color: var(--h-navy); }
.eaibs-home .card .more::after { content: " \2192"; transition: .2s; display: inline-block; }
.eaibs-home .card:hover .more::after { transform: translateX(4px); }
.eaibs-home .center-btn { text-align: center; margin-top: 36px; }

/* -------------------------------------------------------- qualifications */
.eaibs-home .quals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.eaibs-home .qual {
	background: #fff; border-radius: var(--h-radius); padding: 26px;
	border: 1px solid var(--h-line); display: flex; gap: 18px; align-items: flex-start; transition: .25s;
}
.eaibs-home .qual:hover { box-shadow: var(--h-shadow); border-color: var(--h-gold); }
.eaibs-home .qual .badge {
	flex: 0 0 78px; height: 62px; padding: 6px; border-radius: 14px;
	background: #fff; border: 1px solid var(--h-line);
	display: grid; place-items: center;
	font-family: var(--eaibs-display, Georgia, serif); font-weight: 800;
	color: var(--h-navy); font-size: .82rem; letter-spacing: .04em;
}
.eaibs-home .qual .badge img { max-width: 100%; max-height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.eaibs-home .qual h3 { font-size: 1.1rem; margin-bottom: 4px; }
.eaibs-home .qual p { font-size: .9rem; color: var(--h-muted); }
.eaibs-home .qual a { display: inline-block; margin-top: 8px; font-weight: 700; font-size: .88rem; color: var(--h-gold-dark); }

/* ------------------------------------------------------------------- why */
.eaibs-home .why { display: grid; grid-template-columns: 1fr 1.2fr; gap: 56px; align-items: center; }
.eaibs-home .why-img {
	border-radius: 20px; min-height: 420px;
	background:
		linear-gradient(160deg, rgba(14, 31, 71, .10), rgba(14, 31, 71, .35)),
		var(--photo, linear-gradient(transparent, transparent)),
		linear-gradient(135deg, #3b6bb5, var(--h-gold));
	background-size: cover; background-position: center;
	position: relative; box-shadow: var(--h-shadow);
}
.eaibs-home .why-list { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 24px; margin-top: 28px; }
.eaibs-home .why-item .n {
	width: 42px; height: 42px; border-radius: 50%;
	background: var(--h-navy); color: var(--h-gold);
	display: grid; place-items: center; font-weight: 700; margin-bottom: 10px;
	font-family: var(--eaibs-display, Georgia, serif);
}
.eaibs-home .why-item h3 { font-size: 1.05rem; margin-bottom: 4px; font-family: inherit; }
.eaibs-home .why-item p { font-size: .9rem; color: var(--h-muted); }

/* ---------------------------------------------------------------- quotes */
.eaibs-home .tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.eaibs-home .quote {
	background: #fff; border: 1px solid var(--h-line);
	border-radius: var(--h-radius); padding: 28px; position: relative;
}
.eaibs-home .quote::before {
	content: "\201C"; position: absolute; top: 6px; right: 22px;
	font-family: var(--eaibs-display, Georgia, serif); font-size: 5rem;
	color: var(--h-gold); opacity: .35; line-height: 1;
}
.eaibs-home .quote p { font-style: italic; color: var(--h-ink); margin-bottom: 20px; position: relative; }
.eaibs-home .who { display: flex; align-items: center; gap: 12px; }
.eaibs-home .avatar {
	width: 46px; height: 46px; border-radius: 50%;
	background: var(--h-tint); border: 2px dashed #b7c2d6;
	display: grid; place-items: center; color: #7b8699; font-size: .7rem;
}
.eaibs-home .who b { display: block; font-size: .94rem; color: var(--h-navy); }
.eaibs-home .who span { font-size: .8rem; color: var(--h-muted); }

/* ------------------------------------------------------- news and intake */
.eaibs-home .news { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; }
.eaibs-home .posts { display: grid; gap: 18px; }
.eaibs-home .post {
	display: flex; gap: 18px; background: #fff; border: 1px solid var(--h-line);
	border-radius: var(--h-radius); padding: 14px; transition: .25s; text-decoration: none;
}
.eaibs-home .post:hover { box-shadow: var(--h-shadow); }
.eaibs-home .post .thumb {
	flex: 0 0 120px; height: 96px; border-radius: 10px;
	background: linear-gradient(135deg, var(--h-navy), #6f95cf);
	background-size: cover; background-position: center;
}
.eaibs-home .post small { color: var(--h-gold-dark); font-weight: 700; font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; }
.eaibs-home .post h3 { font-size: 1.02rem; margin: 3px 0; }
.eaibs-home .post .excerpt { font-size: .88rem; color: var(--h-muted); }

.eaibs-home .intakes { background: var(--h-navy); color: #fff; border-radius: var(--h-radius); padding: 30px; }
.eaibs-home .intakes h3 { color: #fff; margin-bottom: 6px; }
.eaibs-home .intakes .note { color: #c3cfe3; font-size: .92rem; }
.eaibs-home .intakes ul { list-style: none; margin-top: 18px; padding: 0; }
.eaibs-home .intakes li {
	display: flex; justify-content: space-between; gap: 12px;
	padding: 13px 0; border-top: 1px solid rgba(255, 255, 255, .15); font-size: .94rem;
}
.eaibs-home .intakes li span { color: var(--h-gold); font-weight: 700; white-space: nowrap; }
.eaibs-home .intakes .btn { margin-top: 20px; width: 100%; justify-content: center; }

/* ------------------------------------------------------------------- cta */
.eaibs-home .cta-band {
	background: linear-gradient(120deg, var(--h-navy), var(--h-navy-2));
	color: #fff; text-align: center; padding: 76px 0;
}
.eaibs-home .cta-band h2 { color: #fff; }
.eaibs-home .cta-band p { color: #cdd8ea; max-width: 620px; margin: 8px auto 28px; }
.eaibs-home .cta-band .row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* -------------------------------------------------------------- floating */
.eaibs-home-wa {
	position: fixed; right: 18px; bottom: 18px; z-index: 60;
	background: #25d366; color: #fff; border-radius: 999px;
	padding: 13px 20px; font-weight: 700; text-decoration: none;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
	display: flex; gap: 8px; align-items: center;
}
.eaibs-home-sticky { display: none; }

/* ------------------------------------------------------------ responsive */
@media (max-width: 1020px) {
	.eaibs-home .cards { grid-template-columns: repeat(2, 1fr); }
	.eaibs-home .quals,
	.eaibs-home .tgrid { grid-template-columns: 1fr 1fr; }
	.eaibs-home .hero .wrap { grid-template-columns: 1fr; min-height: 0; }
	.eaibs-home .hero-card { max-width: 520px; }
	.eaibs-home .why,
	.eaibs-home .news { grid-template-columns: 1fr; }
	.eaibs-home .why-img { min-height: 260px; }

	/* The theme's header Apply button is not available at this width, so the
	   sticky bar starts here rather than at 640px - otherwise every tablet and
	   small laptop has no Apply button anywhere on the page. .eaibs-home-wa and
	   the body padding move with it, or WhatsApp sits on top of the bar. */
	.eaibs-home-sticky {
		display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
		background: var(--eaibs-navy, #16306b); padding: 12px 16px; text-align: center;
	}
	.eaibs-home-sticky a {
		display: block; background: var(--eaibs-gold, #c9a227);
		color: var(--eaibs-navy, #16306b); font-weight: 700;
		border-radius: 999px; padding: 12px; text-decoration: none;
	}
	.eaibs-home-wa { bottom: 78px; }
	body.home { padding-bottom: 64px; }
}

@media (max-width: 640px) {
	.eaibs-home section { padding: 60px 0; }
	.eaibs-home .cards,
	.eaibs-home .quals,
	.eaibs-home .tgrid,
	.eaibs-home .why-list { grid-template-columns: 1fr; }
	.eaibs-home .post { flex-direction: column; }
	.eaibs-home .post .thumb { flex: 0 0 auto; width: 100%; height: 150px; }
}

/* The hero crossfade runs forever and cannot otherwise be escaped. The first
   image is left visible rather than hidden, so the layered hero still reads
   as designed. */
@media (prefers-reduced-motion: reduce) {
	.eaibs-home .hero-bg { animation: none; opacity: 1; }
	.eaibs-home .hero-bg.b2 { display: none; }
	.eaibs-home .card,
	.eaibs-home .tab,
	.eaibs-home .qual,
	.eaibs-home .post,
	.eaibs-home .logo-chip,
	.eaibs-home .btn { transition: none; }
	.eaibs-home .card:hover { transform: none; }
}

/* grayscale(1) only lifts on :hover, which never fires on touch - so every
   logo stayed permanently grey on phones and tablets. */
@media (hover: none) {
	.eaibs-home .logo-chip { filter: none; }
}