/* ============================================================
   Surface System v2 — Phase 5: page chrome
   Hero, section storytelling rhythm, footer and the mobile bottom
   bar, rebuilt on the shared tokens so the page frame matches the
   card material instead of carrying its own hardcoded depth.

   Loads after surfaces/controls/motion, before feature stylesheets
   can claim a bespoke exception.
   ============================================================ */

/* ============================================================
   1. Hero
   ============================================================ */

.seraj-hero,
.seraj-dest-hero,
.seraj-accom-hero,
.seraj-pkg-hero {
	--s-hero-ink: #fff;
	--s-hero-ink-soft: rgba(255, 255, 255, .88);
}

/* Cinematic scrim: three stops so the type always sits on ink, but the
   image keeps its light at the top. */
.seraj-hero__scrim,
.seraj-accom-hero__scrim,
.seraj-pkg-hero__scrim {
	background:
		linear-gradient(180deg,
			rgba(10, 14, 11, .42) 0%,
			rgba(10, 14, 11, .12) 32%,
			rgba(10, 14, 11, .52) 74%,
			rgba(10, 14, 11, .82) 100%);
}

/* Slow ambient drift on the hero media — pure polish, disabled for
   reduced motion below. */
.seraj-hero__image,
.seraj-hero__video {
	animation: s-hero-drift 24s var(--s-ease) infinite alternate;
	transform-origin: 50% 55%;
}
@keyframes s-hero-drift {
	from { transform: scale(1.02); }
	to   { transform: scale(1.08); }
}

/* Content enters on load with the system curve. */
.seraj-hero__eyebrow,
.seraj-hero__headline,
.seraj-hero__sub,
.seraj-hero__ctas {
	animation: s-hero-rise var(--s-slow) var(--s-ease-out) both;
}
.seraj-hero__eyebrow  { animation-delay: .05s; }
.seraj-hero__headline { animation-delay: .12s; }
.seraj-hero__sub      { animation-delay: .20s; }
.seraj-hero__ctas     { animation-delay: .28s; }
@keyframes s-hero-rise {
	from { opacity: 0; transform: translateY(16px); }
	to   { opacity: 1; transform: none; }
}

.seraj-hero__eyebrow,
.seraj-dest-hero__eyebrow,
.seraj-accom-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s-gap-sm);
	padding: .35rem .8rem;
	border-radius: calc(var(--s-radius-pill) * var(--s-radius-scale));
	border: 1px solid rgba(255, 255, 255, .28);
	background: rgba(255, 255, 255, .10);
	backdrop-filter: blur(8px);
	color: var(--s-hero-ink);
	letter-spacing: .2em;
}

.seraj-hero__sub,
.seraj-dest-hero__sub,
.seraj-accom-hero__lede { color: var(--s-hero-ink-soft); text-wrap: pretty; }

/* Hero fact rails share the chip material. */
.seraj-dest-hero__facts,
.seraj-pkg-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-gap-sm);
	list-style: none;
	margin: 0 0 var(--s-gap-lg, 1.5rem);
	padding: 0;
}
.seraj-dest-hero__facts > li,
.seraj-pkg-hero__facts > li {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .38rem .8rem;
	font-size: .85rem;
	color: var(--s-hero-ink);
	border-radius: calc(var(--s-radius-pill) * var(--s-radius-scale));
	border: 1px solid rgba(255, 255, 255, .22);
	background: rgba(255, 255, 255, .10);
	backdrop-filter: blur(8px);
}

/* Scroll cue: the same curve as everything else. */
.seraj-hero__scroll {
	border-color: rgba(255, 255, 255, .55);
	transition: opacity var(--s-base) var(--s-ease);
}
.seraj-hero__scroll:hover { opacity: .7; }

/* Dark-band contrast guarantee for anything a card places on the hero. */
.seraj-hero .s-surface,
.seraj-dest-hero .s-surface,
.seraj-pkg-hero .s-surface {
	background: rgba(255, 255, 255, .10);
	border-color: rgba(255, 255, 255, .22);
	color: var(--s-hero-ink);
	backdrop-filter: blur(10px);
	box-shadow: none;
}

/* ============================================================
   2. Section storytelling
   Sections read as chapters: eyebrow → title → lede → content,
   with one rhythm and optional tinted / dark bands.
   ============================================================ */

.seraj-section {
	position: relative;
	padding-block: clamp(3rem, 6vw, 5.5rem);
}

.seraj-section + .seraj-section { padding-block-start: clamp(2.5rem, 5vw, 4.5rem); }

/* Band variants — apply on any section wrapper. */
.seraj-section--tint   { background: var(--s-tint); }
.seraj-section--sunken { background: var(--s-sunken); }
.seraj-section--dark {
	background: color-mix(in srgb, var(--seraj-text, #141413) 92%, var(--seraj-primary, #2f5d3a));
	color: #fff;
}
.seraj-section--dark .seraj-section-title,
.seraj-section--dark .seraj-display,
.seraj-section--dark .seraj-eyebrow { color: #fff; }
.seraj-section--dark .seraj-lede { color: rgba(255, 255, 255, .82); }
.seraj-section--dark .s-surface {
	background: rgba(255, 255, 255, .06);
	border-color: rgba(255, 255, 255, .14);
	color: #fff;
	box-shadow: none;
}

/* Hairline chapter rule between stacked light bands. */
.seraj-section--ruled { border-top: 1px solid var(--s-hairline); }

/* The header rhythm — one scale everywhere. */
.seraj-section-header,
.seraj-kit-section-header {
	display: flex;
	flex-direction: column;
	gap: var(--s-gap-sm);
	max-width: 68ch;
	margin-block-end: clamp(1.5rem, 3vw, 2.5rem);
}
.seraj-section-header--center,
.seraj-kit-section-header--center {
	align-items: center;
	text-align: center;
	margin-inline: auto;
}

.seraj-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--s-gap-sm);
	margin: 0;
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--seraj-primary, #2f5d3a);
}
/* The little accent tick that makes an eyebrow feel authored. */
.seraj-eyebrow::before {
	content: "";
	width: 1.6rem;
	height: 1px;
	background: currentColor;
	opacity: .6;
	flex: 0 0 auto;
}
.seraj-section-header--center .seraj-eyebrow::before,
.seraj-kit-section-header--center .seraj-eyebrow::before { display: none; }

.seraj-section-title,
.seraj-display {
	margin: 0;
	font-family: var(--seraj-font-display);
	line-height: 1.08;
	letter-spacing: -.015em;
	text-wrap: balance;
}
.seraj-section-title { font-size: clamp(1.6rem, 3.2vw, 2.5rem); }
.seraj-display { font-size: clamp(2rem, 4.2vw, 3.2rem); }

.seraj-lede {
	margin: 0;
	max-width: 62ch;
	font-size: clamp(1rem, 1.2vw, 1.12rem);
	line-height: 1.6;
	color: var(--seraj-muted, #5c5a55);
	text-wrap: pretty;
}

/* Editorial blocks pick up the same chapter feel. */
.seraj-editorial-intro .seraj-prose--dropcap > p:first-of-type::first-letter {
	float: inline-start;
	font-family: var(--seraj-font-display);
	font-size: 3.2em;
	line-height: .82;
	padding-inline-end: .08em;
	color: var(--seraj-primary, #2f5d3a);
}

.seraj-quotebg,
.seraj-hero-block {
	border-radius: calc(var(--s-radius-lg) * var(--s-radius-scale));
	overflow: hidden;
	background-size: cover;
	background-position: center;
	box-shadow: var(--s-shadow-raised);
}

/* ============================================================
   3. Footer
   ============================================================ */

.seraj-footer {
	position: relative;
	background:
		radial-gradient(120% 90% at 12% 0%, color-mix(in srgb, var(--seraj-primary, #2f5d3a) 26%, transparent) 0%, transparent 60%),
		color-mix(in srgb, var(--seraj-text, #141413) 94%, var(--seraj-primary, #2f5d3a));
	color: rgba(255, 255, 255, .74);
	margin-top: 0;
}
.seraj-footer::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
}
.seraj-footer a { color: rgba(255, 255, 255, .86); text-decoration: none; }
.seraj-footer a:hover { color: #fff; }

.seraj-footer__tagline { color: rgba(255, 255, 255, .62); }

.seraj-footer-widget-title { color: #fff; }

.seraj-footer__col ul { color: rgba(255, 255, 255, .72); }
.seraj-footer__col ul a {
	display: inline-block;
	padding-block: .1rem;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size var(--s-base) var(--s-ease), color var(--s-base) var(--s-ease);
}
.seraj-footer__col ul a:hover { background-size: 100% 1px; }

/* Social links become pills on the dark band. */
.seraj-social a {
	display: inline-flex;
	align-items: center;
	padding: .38rem .85rem;
	font-size: .82rem;
	border-radius: calc(var(--s-radius-pill) * var(--s-radius-scale));
	border: 1px solid rgba(255, 255, 255, .16);
	background: rgba(255, 255, 255, .06);
	transition: background var(--s-base) var(--s-ease), border-color var(--s-base) var(--s-ease), transform var(--s-base) var(--s-ease);
}
.seraj-social a:hover {
	background: rgba(255, 255, 255, .13);
	border-color: rgba(255, 255, 255, .3);
	transform: translateY(-1px);
}

.seraj-footer__bar {
	border-top-color: rgba(255, 255, 255, .1);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-gap);
	color: rgba(255, 255, 255, .55);
}
.seraj-footer__legal { margin: 0; }

.seraj-footer :focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .45);
	border-radius: calc(var(--s-radius-xs) * var(--s-radius-scale));
}

/* Keep the footer clear of the mobile bar. */
@media (max-width: 768px) {
	.seraj-footer__bar { padding-bottom: .5rem; }
}

/* ============================================================
   4. Mobile bottom bar
   ============================================================ */

.seraj-mobile-tabbar {
	background: color-mix(in srgb, var(--s-floating) 88%, transparent);
	backdrop-filter: blur(16px) saturate(1.3);
	border-top: 1px solid var(--s-hairline);
	box-shadow: var(--s-shadow-floating);
	padding-block: .3rem;
	padding-bottom: calc(.3rem + env(safe-area-inset-bottom));
}

.seraj-mobile-tabbar__item {
	position: relative;
	min-height: 48px;                    /* touch target */
	color: var(--seraj-muted, #5c5a55);
	border-radius: calc(var(--s-radius-sm) * var(--s-radius-scale));
	transition:
		color var(--s-fast) var(--s-ease),
		background var(--s-fast) var(--s-ease),
		transform var(--s-fast) var(--s-ease);
}
.seraj-mobile-tabbar__item svg {
	color: currentColor;
	transition: transform var(--s-base) var(--s-ease-out);
}
.seraj-mobile-tabbar__item:active { transform: translateY(1px); }
.seraj-mobile-tabbar__item:hover { color: var(--seraj-primary, #2f5d3a); }

.seraj-mobile-tabbar__item.is-active {
	color: var(--seraj-primary, #2f5d3a);
	background: var(--s-tint);
	font-weight: 600;
}
.seraj-mobile-tabbar__item.is-active svg { transform: translateY(-1px) scale(1.06); }

/* Active pip above the icon. */
.seraj-mobile-tabbar__item.is-active::before {
	content: "";
	position: absolute;
	top: 3px;
	left: 50%;
	width: 18px;
	height: 3px;
	transform: translateX(-50%);
	border-radius: var(--s-radius-pill);
	background: currentColor;
}

.seraj-mobile-tabbar__item:focus-visible {
	outline: none;
	box-shadow: var(--s-focus-ring);
}

/* ============================================================
   5. Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	.seraj-hero__image,
	.seraj-hero__video { animation: none; transform: none; }
	.seraj-hero__eyebrow,
	.seraj-hero__headline,
	.seraj-hero__sub,
	.seraj-hero__ctas { animation: none; }
	.seraj-social a:hover,
	.seraj-mobile-tabbar__item.is-active svg { transform: none; }
}