/*
 * TIS Booking Banner. Desktop: Figma frame 1672 x 232 on #0b1822 — copy on the left, a 2-column benefits
 * grid with the pill button in its last cell, hairline at y=218.
 */

.tis-banner {
	background: #0b1822;
	color: #fff;
	padding-bottom: calc(14 * var(--tis-u));
}

.tis-banner__inner {
	display: flex;
	align-items: flex-start;
	min-height: calc(218 * var(--tis-u));
	padding-right: 0;
	padding-left: calc(67 * var(--tis-u));
	border-bottom: 1px solid transparent;
}

.tis-banner.has-rule .tis-banner__inner { border-bottom-color: #283b49; }

.tis-banner__copy { flex: none; width: calc(822 * var(--tis-u)); padding-left: calc(2 * var(--tis-u)); }

.tis-banner__eyebrow { color: #98bff7; }

.tis-banner__title {
	margin: calc(1.6 * var(--tis-u)) 0 0 calc(-2 * var(--tis-u));
	font-family: var(--tis-font-display);
	font-size: max(22px, calc(36 * var(--tis-u)));
	font-weight: 900;
	line-height: 1.4;
	color: #fff;
}

.tis-banner__title .tis-accent { color: #88b8f9; }

.tis-banner__text {
	max-width: calc(770 * var(--tis-u));
	margin: calc(7.6 * var(--tis-u)) 0 0 calc(-1 * var(--tis-u));
	font-size: max(14px, calc(17 * var(--tis-u)));
	font-weight: 400;
	line-height: 1.4;
	color: #9fb8d3;
}

/* Benefits grid: two columns, the button takes the last cell */
.tis-banner__grid {
	display: grid;
	grid-template-columns: calc(199 * var(--tis-u)) auto;
	align-items: center;
	row-gap: calc(15 * var(--tis-u));
	margin-top: var(--tis-gap);
}

.tis-banner__benefit { display: flex; align-items: center; gap: calc(14 * var(--tis-u)); }

.tis-banner__benefit-icon {
	width: max(36px, calc(44 * var(--tis-u)));
	height: max(36px, calc(44 * var(--tis-u)));
	background: #062348;
	color: #ced9ed;
}

.tis-banner__benefit-icon svg {
	width: max(20px, calc(26 * var(--tis-u)));
	height: max(20px, calc(26 * var(--tis-u)));
}

.tis-banner__benefit:nth-child(2) .tis-banner__benefit-icon { color: #98bff7; }

.tis-banner__benefit-text {
	font-size: max(12px, calc(14 * var(--tis-u)));
	font-weight: 400;
	line-height: 1.4;
	color: #fff;
}

.tis-banner__cell { margin-left: calc(5 * var(--tis-u)); }

.tis-banner__btn {
	min-width: calc(229 * var(--tis-u));
	min-height: calc(55 * var(--tis-u));
	padding: 0 calc(24 * var(--tis-u));
	font-size: max(15px, calc(18 * var(--tis-u)));
}

/* ---------------------------------------------------------------------
 * Tablet
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.tis-banner { padding-bottom: 0; }
	.tis-banner__inner { flex-direction: column; min-height: 0; gap: 28px; padding-left: var(--tis-gutter); padding-right: var(--tis-gutter); }
	.tis-banner__copy { width: auto; padding-left: 0; }
	.tis-banner__title { margin: 8px 0 0; font-size: 30px; line-height: 1.3; }
	.tis-banner__text { max-width: 640px; margin: 10px 0 0; font-size: 17px; }
	.tis-banner__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 24px; margin-top: 0; width: 100%; max-width: 560px; }
	.tis-banner__benefit { gap: 14px; }
	.tis-banner__benefit-icon { width: 48px; height: 48px; }
	.tis-banner__benefit-icon svg { width: 26px; height: 26px; }
	.tis-banner__benefit-text { font-size: 15px; }
	.tis-banner__cell { margin-left: 0; }
	.tis-banner__btn { min-width: 0; min-height: 52px; padding: 0 28px; font-size: 16px; gap: 12px; }
}

/* ---------------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.tis-banner__title { font-size: 24px; }
	.tis-banner__text { font-size: 15px; }
	.tis-banner__grid { grid-template-columns: 1fr; max-width: none; }
	.tis-banner__cell { margin-top: 6px; }
	.tis-banner__btn { width: 100%; }
}