/*
 * TIS Page Hero (inner pages). Dark #001426 banner, ~560px tall on desktop: breadcrumb + eyebrow + big
 * headline + intro + buttons on the left, photo bleeding off the right edge with a fade.
 */

.tis-phero {
	background: #001426;
	color: #fff;
	overflow: hidden;
}

.tis-phero__curves {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: calc(119 * var(--tis-u));
	overflow: hidden;
	pointer-events: none;
	opacity: 0.9;
}

.tis-phero__curves .tis-phero__curves-img { display: block; width: 100%; height: 100%; object-fit: cover; }

.tis-phero__inner {
	position: relative;
	min-height: calc(560 * var(--tis-u));
	padding-right: 0;
	padding-left: calc(82 * var(--tis-u));
}

.tis-phero__photo {
	--fl: 40%;
	--fb: 8%;
	position: absolute;
	top: 0;
	right: 0;
	z-index: 0;
	width: calc(740 * var(--tis-u));
	height: 100%;
	overflow: hidden;
}

.tis-phero__photo .tis-phero__img { display: block; width: 100%; height: 100%; object-fit: cover; }

.tis-phero__fade {
	--tis-fade: #001426;
	position: absolute;
	top: 0;
	right: calc(560 * var(--tis-u));
	z-index: 1;
	width: calc(260 * var(--tis-u));
	height: 100%;
	background: linear-gradient(90deg, var(--tis-fade) 0%, transparent 100%);
	pointer-events: none;
}

.tis-phero__content { position: relative; z-index: 2; max-width: calc(880 * var(--tis-u)); }

/* Breadcrumb */
.tis-phero__crumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: calc(10 * var(--tis-u));
	margin-bottom: calc(30 * var(--tis-u));
	font-size: max(13px, calc(15 * var(--tis-u)));
	font-weight: 500;
	line-height: 1.4;
}

.tis-phero__crumbs a { color: #98bff7; text-decoration: none; transition: color 0.2s ease; }
.tis-phero__crumbs a:hover { color: #fff; }
.tis-phero__crumb-current { color: #fff; }
.tis-phero__sep { display: inline-flex; font-size: max(12px, calc(15 * var(--tis-u))); color: #5d7da8; }

.tis-phero__eyebrow { color: #98bff7; }
.tis-phero__eyebrow .tis-eyebrow__line { width: calc(83 * var(--tis-u)); background: var(--tis-primary); }

.tis-phero__title {
	margin: calc(22 * var(--tis-u)) 0 0 calc(-3 * var(--tis-u));
	font-family: var(--tis-font-display);
	font-size: max(32px, calc(68 * var(--tis-u)));
	font-weight: 900;
	line-height: 1.06;
	color: #fff;
}

.tis-phero__text {
	max-width: calc(700 * var(--tis-u));
	margin-top: calc(26 * var(--tis-u));
	font-size: max(16px, calc(22 * var(--tis-u)));
	font-weight: 400;
	line-height: 1.5;
	color: #cfd6e4;
}

.tis-phero__text p { margin: 0 0 0.5em; }
.tis-phero__text p:last-child { margin-bottom: 0; }

.tis-phero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: calc(24 * var(--tis-u)); margin-top: calc(40 * var(--tis-u)); }

.tis-phero__btn { min-height: calc(64 * var(--tis-u)); border-radius: calc(12 * var(--tis-u)); padding: 0 calc(32 * var(--tis-u)); font-size: max(15px, calc(19 * var(--tis-u))); }

.tis-phero__btn--secondary {
	border: 1.3px solid #fff;
	background: rgba(0, 20, 38, 0.19);
	color: #fff;
}

.tis-phero__btn--secondary:hover,
.tis-phero__btn--secondary:focus-visible { background: #fff; color: #001426; box-shadow: none; }

/* ---------------------------------------------------------------------
 * Tablet
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.tis-phero__inner { display: flex; flex-direction: column; min-height: 0; padding-right: var(--tis-gutter); padding-left: var(--tis-gutter); padding-bottom: 0; }
	.tis-phero__content { order: 1; max-width: none; padding-bottom: 40px; }
	.tis-phero__crumbs { margin-bottom: 22px; font-size: 14px; gap: 8px; }
	.tis-phero__title { margin: 16px 0 0; font-size: 50px; }
	.tis-phero__text { max-width: 640px; margin-top: 20px; font-size: 18px; }
	.tis-phero__actions { margin-top: 30px; gap: 16px; }
	.tis-phero__btn { min-height: 54px; padding: 0 30px; font-size: 17px; }
	.tis-phero__photo { --fl: 0%; --ft: 26%; --fb: 0%; position: relative; order: 2; width: calc(100% + 2 * var(--tis-gutter)); height: clamp(240px, 46vw, 380px); margin: 0 calc(-1 * var(--tis-gutter)); }
	.tis-phero__fade { display: none; }
	.tis-phero__curves { height: 70px; }
}

/* ---------------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.tis-phero__title { font-size: 34px; }
	.tis-phero__text { font-size: 16px; }
	.tis-phero__actions { flex-direction: column; align-items: stretch; }
	.tis-phero__btn { width: 100%; }
	.tis-phero__photo { height: clamp(200px, 58vw, 300px); }
}