/**
 * NewEra homepage layout — sits on top of components.css.
 * Only the pieces the shared component set does not already cover:
 * hero, overlapping search card, quick-action row, speciality tile grid,
 * story cards, accreditation row + a few section-rhythm tweaks.
 * Breakpoints mirror components.css: 1024px (tablet) · 640px (mobile).
 */

/* ============================================================= *
 *  Section header row: "View All" ghost link with arrow
 * ============================================================= */
.ne-viewall {
	display: inline-flex;
	align-items: center;
	gap: var(--ne-space-2xs);
	color: var(--ne-secondary-300);
	font-weight: 700;
	font-size: var(--ne-b2-size);
	text-decoration: none;
	white-space: nowrap;
	flex: 0 0 auto;
}
.ne-viewall .ne-icon { width: 16px; height: 16px; transition: transform .18s ease; }
.ne-viewall:hover { color: var(--ne-secondary-500); }
.ne-viewall:hover .ne-icon { transform: translateX(3px); }

/* ============================================================= *
 *  Hero
 * ============================================================= */
.ne-hero {
	position: relative;
	background: var(--ne-primary-600);
	overflow: hidden;
}
.ne-hero__bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
}
/* Silent background loop. Sits on top of the still and under the gradient, and
   fades in once it is actually playing so there is no flash of black while it
   buffers. Hidden entirely below 1025px and under prefers-reduced-motion —
   main.js does not even fetch it in those cases. */
.ne-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 1;
	pointer-events: none;
}
.ne-hero__video.is-playing { opacity: 1; }
/* The night footage is far darker than the dusk still, so lift it slightly and
   ease off the scrim once it is playing — otherwise the building disappears. */
.ne-hero.has-video .ne-hero__video { filter: brightness(1.35) contrast(1.04); }
.ne-hero.has-video .ne-hero__bg::after {
	background: linear-gradient(90deg, rgba(14,7,57,0.86) 0%, rgba(14,7,57,0.58) 45%, rgba(14,7,57,0.16) 100%);
}
/*@media (max-width: 1024px) {
	.ne-hero__video { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ne-hero__video { display: none; }
}*/
.ne-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(14,7,57,0.92) 0%, rgba(14,7,57,0.72) 45%, rgba(14,7,57,0.30) 100%);
}
/* Figma: hero photo band is exactly 560px; the widget overlaps its last 56px. */
.ne-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	min-height: 560px;
	padding-block: var(--ne-space-6xl) 120px;
}
.ne-hero__content { max-width: 640px; color: var(--ne-neutral-100); }
.ne-hero__badge {
	display: inline-flex;
	align-items: center;
	gap: var(--ne-space-2xs);
	padding: 5px var(--ne-space-s);
	border-radius: 999px;
	background: rgba(255,255,255,0.12);
	color: var(--ne-neutral-100);
	font-size: var(--ne-b3-size);
	font-weight: 700;
	letter-spacing: .02em;
	margin-bottom: var(--ne-space-l);
}
.ne-hero__badge .ne-icon { width: 15px; height: 15px; color: var(--ne-tertiary-300); }
.ne-hero__title {
	margin: 0;
	color: var(--ne-neutral-100);
	font-size: var(--ne-h1-size);
	line-height: 1.08;
	font-weight: 700;
}
/* Words are stacked in one grid cell for the crossfade; JS sets the wrapper
   width to the active word so the trailing copy hugs it (no fixed-width gap).
   The active word renders cyan italic per Figma ("Every *Era* of Your Life"). */
.ne-hero__rotate { display: inline-grid; justify-items: start; transition: width .45s ease; }
.ne-hero__rotate > span {
	grid-area: 1 / 1;
	color: var(--ne-tertiary-300);
	font-style: italic;
	padding-right: 0.12em; /* keep the italic overhang off the next word */
	opacity: 0;
	transform: translateY(0.35em);
	transition: opacity .45s ease, transform .45s ease;
	white-space: nowrap;
}
.ne-hero__rotate > span.is-active { opacity: 1; transform: none; }
.ne-hero__sub {
	margin: var(--ne-space-l) 0 0;
	color: var(--ne-neutral-200);
	font-size: var(--ne-h8-size);
	line-height: 1.6;
	max-width: 30em;
}
.ne-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ne-space-s);
	margin-top: var(--ne-space-2xl);
}
.ne-btn--outline-light {
	background: transparent;
	color: var(--ne-neutral-100);
	border-color: rgba(255,255,255,0.55);
}
.ne-btn--outline-light:hover {
	background: rgba(255,255,255,0.12);
	border-color: var(--ne-neutral-100);
	color: var(--ne-neutral-100);
}

/* Overlapping appointment-search card (Figma 333:8185: 182px tall, 56px overlap) */
.ne-hero-search {
	position: relative;
	z-index: 2;
	margin-top: -56px;
}
.ne-searchcard {
	background: var(--ne-neutral-100);
	border-radius: 16px;
	box-shadow: var(--ne-shadow-deep);
	padding: 25px 26px;
}
.ne-searchcard__head {
	display: flex;
	align-items: center;
	gap: var(--ne-space-s);
	margin-bottom: var(--ne-space-m);
}
.ne-searchcard__head .ne-icon { width: 24px; height: 24px; color: var(--ne-secondary-300); }
.ne-searchcard__title { margin: 0; font-size: var(--ne-h6-size); color: var(--ne-primary-500); }
.ne-searchcard__fields {
	display: grid;
	grid-template-columns: 1.2fr 1fr 1fr auto;
	gap: var(--ne-space-m);
	align-items: end;
}
.ne-searchcard .ne-field { margin-bottom: 0; }
.ne-searchcard__submit { height: 48px; }
/* Leading icon inside widget inputs (search / calendar per Figma) */
.ne-inputwrap { position: relative; display: block; }
.ne-inputwrap > .ne-icon {
	position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
	width: 18px; height: 18px; color: var(--ne-neutral-500); pointer-events: none;
}
.ne-inputwrap input { padding-left: 42px; }
/* .ne-field input[type=…] (0,2,1) outranks the rule above — without this the
   calendar/search glyph sits under the input's text (QA: date icon overlap). */
.ne-field .ne-inputwrap input { padding-left: 42px; }

/* ============================================================= *
 *  Quick-action chip row — white chips on a teal band (Figma Frame 94)
 * ============================================================= */
.ne-quickband {
	background: var(--ne-tertiary-500);
	border-radius: 16px;
	padding: var(--ne-space-m);
	margin-top: var(--ne-space-2xl);
}
/* Quick-links band stays pinned just below the sticky header while the
   visitor scrolls (desktop only — on small screens it would eat the viewport). */
@media (min-width: 1024px) {
	.ne-quicksticky { position: sticky; top: calc(var(--ne-header-h) + 10px); z-index: 55; }
	.ne-quicksticky .ne-quickband { box-shadow: 0 10px 28px rgba(23, 11, 91, 0.16); }
}
.ne-quickactions {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ne-space-m);
}
.ne-quickactions .ne-btncard { justify-content: flex-start; border: 0; }
.ne-quickactions .ne-btncard__label { color: var(--ne-primary-400); }
.ne-quickactions .ne-btncard__icon { width: 32px; height: 32px; border-radius: 50%; }
.ne-quickactions .ne-btncard__icon .ne-icon { width: 16px; height: 16px; }

/* ============================================================= *
 *  COE / carousel cards — image-forward
 * ============================================================= */
.ne-card--coe .ne-card__title { font-size: var(--ne-h7-size); }
.ne-card--coe .ne-card__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ============================================================= *
 *  Speciality tile grid (light-blue band)
 * ============================================================= */
.ne-tilegrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ne-space-m);
}
/* Tile: icon block stacked above the name (Figma Button Card 333:8238) */
.ne-tile {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--ne-space-s);
	padding: var(--ne-space-l);
	background: var(--ne-neutral-100);
	border: 1px solid transparent;
	border-radius: 16px;
	text-decoration: none;
	transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.ne-tile:hover { box-shadow: var(--ne-shadow-deep); transform: translateY(-3px); }
.ne-tile__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 14px;
	background: var(--ne-tertiary-a10); color: var(--ne-tertiary-500);
	flex: 0 0 auto;
}
.ne-tile__icon .ne-icon { width: 24px; height: 24px; }
.ne-tile__name { display: block; font-weight: 700; color: var(--ne-primary-400); font-size: var(--ne-h8-size); }
.ne-tile__sub { display: block; margin-top: 2px; color: var(--ne-neutral-700); font-size: var(--ne-b3-size); line-height: var(--ne-b3-line); }

/* Story cards (.ne-storycard) moved to components.css — the testimonials
   part renders them on speciality/COE/contact/international pages too. */

/* ============================================================= *
 *  Media card source line
 * ============================================================= */
.ne-card--media .ne-card__source {
	display: inline-flex; align-items: center; gap: var(--ne-space-2xs);
	color: var(--ne-neutral-600); font-size: var(--ne-b3-size); font-weight: 600;
}

/* ============================================================= *
 *  Accreditation row
 * ============================================================= */
.ne-awards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--ne-space-l);
}
.ne-award {
	position: relative;
	display: flex; flex-direction: column; align-items: center; gap: var(--ne-space-s);
	padding: var(--ne-space-xl);
	background: var(--ne-neutral-100);
	border: 1px solid var(--ne-neutral-200);
	border-radius: 14px;
	text-align: center;
	overflow: hidden;
}
/* Blue accent along the bottom edge (Figma award card) */
.ne-award::after {
	content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px;
	background: var(--ne-secondary-300);
}
.ne-award__logo {
	display: inline-flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 50%;
	background: var(--ne-secondary-a10); color: var(--ne-secondary-300);
}
.ne-award__logo img { max-height: 56px; width: auto; }
.ne-award__logo .ne-icon { width: 26px; height: 26px; }
.ne-award__label { color: var(--ne-secondary-400); font-size: var(--ne-h8-size); font-weight: 700; }

/* Section rhythm: keep the tinted specialities/stories bands airy */
.ne-home .ne-slider__dots { margin-top: var(--ne-space-xl); }

/* ============================================================= *
 *  Responsive — tablet
 * ============================================================= */
@media (max-width: 1024px) {
	.ne-hero__title { font-size: 44px; }
	.ne-searchcard__fields { grid-template-columns: 1fr 1fr; }
	.ne-searchcard__submit { grid-column: 1 / -1; width: 100%; }
	.ne-quickactions { grid-template-columns: repeat(2, 1fr); }
	.ne-tilegrid { grid-template-columns: repeat(2, 1fr); }
	.ne-awards { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================= *
 *  Responsive — mobile
 * ============================================================= */
@media (max-width: 640px) {
	.ne-hero__inner { min-height: 440px; padding-block: var(--ne-space-4xl) 90px; }
	.ne-hero__title { font-size: 34px; }
	.ne-hero__sub { font-size: var(--ne-b1-size); }
	.ne-hero-search { margin-top: -70px; }
	.ne-searchcard { padding: var(--ne-space-l); }
	.ne-searchcard__fields { grid-template-columns: 1fr; }
	.ne-quickactions { grid-template-columns: 1fr; }
	.ne-tilegrid { grid-template-columns: 1fr; }
	.ne-awards { grid-template-columns: repeat(2, 1fr); }
	.ne-storycard { grid-template-columns: 1fr; }
	.ne-storycard__media { height: 200px; }
}