/*
 * TIS Gallery. Desktop: Figma frame 1672 x 697 — heading + tools, filter pills and a mosaic (one 567 x 337
 * tile beside a 3 x 2 grid of 163px tiles).
 */

.tis-gallery { background: var(--tis-bg); }

.tis-gallery__inner {
	padding-right: calc(42 * var(--tis-u));
	padding-left: calc(49 * var(--tis-u));
}

/* Heading + tools */
.tis-gallery__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: calc(24 * var(--tis-u));
}

.tis-gallery__intro { padding-left: calc(24 * var(--tis-u)); min-width: 0; }

.tis-gallery__eyebrow .tis-eyebrow__line { width: calc(41 * var(--tis-u)); }

.tis-gallery__title {
	margin: calc(7.6 * var(--tis-u)) 0 0 calc(-2 * var(--tis-u));
	font-family: var(--tis-font-display);
	font-size: max(26px, calc(48 * var(--tis-u)));
	font-weight: 900;
	line-height: 1.08;
	color: var(--tis-ink);
}

.tis-gallery__text {
	max-width: calc(1095 * var(--tis-u));
	margin-top: calc(5.3 * var(--tis-u));
	font-size: max(14px, calc(18 * var(--tis-u)));
	font-weight: 400;
	line-height: 1.4;
	color: #344564;
}

.tis-gallery__text p { margin: 0 0 0.4em; }
.tis-gallery__text p:last-child { margin-bottom: 0; }

.tis-gallery__tools {
	display: flex;
	flex: none;
	align-items: center;
	gap: calc(29 * var(--tis-u));
	margin: calc(77 * var(--tis-u)) calc(32 * var(--tis-u)) 0 0;
}

.tis-gallery__btn {
	min-width: calc(227 * var(--tis-u));
	min-height: calc(58 * var(--tis-u));
	padding: 0 calc(20 * var(--tis-u));
	border-radius: calc(12 * var(--tis-u));
	font-size: max(14px, calc(16 * var(--tis-u)));
}

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

.tis-gallery__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: calc(60 * var(--tis-u));
	height: calc(60 * var(--tis-u));
	padding: 0;
	border: 0;
	border-radius: 50%;
	font-size: max(18px, calc(24 * var(--tis-u)));
	cursor: pointer;
	transition: background-color 0.25s ease, opacity 0.25s ease, transform 0.25s ease;
}

.tis-gallery__arrow--prev { background: var(--tis-soft); color: var(--tis-primary); }
.tis-gallery__arrow--next { background: var(--tis-primary); color: #fff; }
.tis-gallery__arrow:hover:not(:disabled) { transform: scale(1.07); }
.tis-gallery__arrow:disabled { opacity: 0.45; cursor: default; }
.tis-gallery.is-static .tis-gallery__arrow:disabled { opacity: 1; }
.tis-gallery__arrow:focus-visible { outline: 2px solid var(--tis-primary); outline-offset: 3px; }

/* Filters */
.tis-gallery__filters {
	display: flex;
	flex-wrap: wrap;
	gap: calc(12.2 * var(--tis-u));
	margin: var(--tis-gap) 0 0 calc(24 * var(--tis-u));
}

.tis-gallery__filter {
	display: inline-flex;
	align-items: center;
	gap: calc(15 * var(--tis-u));
	height: calc(53 * var(--tis-u));
	padding: 0 calc(30.5 * var(--tis-u)) 0 calc(21 * var(--tis-u));
	border: 1px solid var(--tis-line);
	border-radius: calc(40 * var(--tis-u));
	background: var(--tis-bg);
	color: #344564;
	font-family: var(--tis-font-body);
	font-size: max(12px, calc(13 * var(--tis-u)));
	font-weight: 500;
	line-height: 1.4;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.tis-gallery__filter:hover { border-color: var(--tis-primary); }

.tis-gallery__filter--all {
	justify-content: center;
	min-width: calc(114 * var(--tis-u));
	padding: 0 calc(24 * var(--tis-u));
}

.tis-gallery__filter.is-active,
.tis-gallery__filter.is-active:hover { border-color: var(--tis-primary); background: var(--tis-primary); color: #fff; }

.tis-gallery__filter:focus-visible { outline: 2px solid var(--tis-primary); outline-offset: 2px; }

.tis-gallery__filter-icon {
	display: inline-flex;
	flex: none;
	width: max(16px, calc(23 * var(--tis-u)));
	height: max(16px, calc(23 * var(--tis-u)));
	font-size: max(16px, calc(23 * var(--tis-u)));
	color: var(--tis-primary);
}

/* Mosaic */
.tis-gallery__viewport { margin-top: var(--tis-gap); overflow: hidden; touch-action: pan-y; }

.tis-gallery__track {
	display: flex;
	transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.3, 1);
	will-change: transform;
}

.tis-gallery__page {
	display: grid;
	flex: 0 0 100%;
	grid-template-columns: 567fr 328fr 328fr 328fr;
	grid-template-rows: repeat(2, calc(163 * var(--tis-u)));
	grid-auto-rows: calc(163 * var(--tis-u));
	gap: calc(11 * var(--tis-u)) calc(10 * var(--tis-u));
	min-width: 0;
}

.tis-gallery__tile {
	position: relative;
	margin: 0;
	border-radius: calc(10 * var(--tis-u));
	overflow: hidden;
	min-width: 0;
	min-height: 0;
}

.tis-gallery__tile:first-child { grid-row: 1 / span 2; }

.tis-gallery__link { display: block; width: 100%; height: 100%; }

.tis-gallery__tile .tis-gallery__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
	transition: transform 0.7s ease;
}

.tis-gallery__tile:hover .tis-gallery__img { transform: scale(1.05); }

/* ---------------------------------------------------------------------
 * Tablet
 * ------------------------------------------------------------------ */
@media (max-width: 1024px) {
	.tis-gallery__inner { padding-left: var(--tis-gutter); padding-right: var(--tis-gutter); }
	.tis-gallery__head { flex-direction: column; gap: 24px; }
	.tis-gallery__intro { padding-left: 0; }
	.tis-gallery__eyebrow .tis-eyebrow__line { width: 36px; }
	.tis-gallery__title { margin: 12px 0 0; font-size: 38px; }
	.tis-gallery__text { margin-top: 14px; font-size: 17px; }
	.tis-gallery__tools { align-self: stretch; justify-content: space-between; margin: 0; }
	.tis-gallery__btn { min-width: 0; min-height: 52px; padding: 0 28px; border-radius: 12px; font-size: 15px; gap: 12px; }
	.tis-gallery__arrow { width: 52px; height: 52px; font-size: 22px; }
	.tis-gallery__arrows { gap: 12px; }
	.tis-gallery__filters { margin: var(--tis-gap) 0 0; gap: 10px; }
	.tis-gallery__filter { height: 48px; padding: 0 22px 0 16px; gap: 10px; font-size: 14px; border-radius: 40px; }
	.tis-gallery__filter--all { min-width: 0; padding: 0 28px; }
	.tis-gallery__filter-icon { width: 20px; height: 20px; font-size: 20px; }
	.tis-gallery__viewport { margin-top: var(--tis-gap); }
	/* The large first tile gets its own (taller) first grid row, so it can never spill over the tiles below it. */
	.tis-gallery__page { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: clamp(240px, 46vw, 400px); grid-auto-rows: clamp(150px, 26vw, 230px); gap: 12px; }
	.tis-gallery__tile { border-radius: 12px; }
	.tis-gallery__tile:first-child { grid-column: 1 / -1; grid-row: auto; height: auto; }
}

/* ---------------------------------------------------------------------
 * Mobile
 * ------------------------------------------------------------------ */
@media (max-width: 767px) {
	.tis-gallery__title { font-size: 28px; }
	.tis-gallery__text { font-size: 16px; }
	.tis-gallery__filters { flex-wrap: nowrap; margin-right: calc(-1 * var(--tis-gutter)); padding-right: var(--tis-gutter); overflow-x: auto; scrollbar-width: none; }
	.tis-gallery__filters::-webkit-scrollbar { display: none; }
	.tis-gallery__filter { flex: none; }
	.tis-gallery__page { grid-template-rows: clamp(200px, 60vw, 300px); grid-auto-rows: clamp(120px, 34vw, 180px); gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.tis-gallery__track,
	.tis-gallery__tile .tis-gallery__img { transition: none; }
}