/* ─────────────────────────────────────────────────────────────
   GTD Desco — Our Facilities.

   WHAT WAS WRONG

   THE GALLERIES. Four hand-written Bootstrap rows, each column
   an independent stack of <img> at whatever height the file
   happened to be. Nothing lined up across columns, so a wall of
   factory photography read as three ragged piles — and the
   statement tiles, which are the whole point of the pattern,
   floated at arbitrary heights between them. Twenty-seven
   images, none lazy, none with dimensions, none with a srcset,
   one with its alt text typed into the class attribute.

   THE TEXT BANNER. A 1800px-wide band floating in the middle of
   a 2545px page with white either side, its height forced to
   622px inline, and its <h2> absolutely positioned 200px off
   the bottom — so on a short viewport the heading sat outside
   the picture entirely. Nothing moved.

   THE PAGE. `#our-story-main-content` used as an id FOUR times.

   WHAT THIS DOES

   One grid, one tile shape, so the rows align and the wall
   reads as a wall. One tile per section is a feature at twice
   the size, so the grid has somewhere to look first. The
   statements sit IN the grid as tiles of their own, which is
   what they were always trying to be.

   THE MOMENT

   The wall assembles as you reach it — tiles arriving in
   reading order, each one settling from slightly back. The
   banner's photograph drifts against the scroll behind its
   heading, so the one full-bleed picture on the page is the
   one thing that moves.
   ───────────────────────────────────────────────────────────── */

.gtd-mos,
.gtd-plate,
.gtd-fac__say {
	--f-red:    var(--gtd-red, #c60000);
	--f-onDark: #ff5b4a;
	--f-ink:    #141313;
	--f-quiet:  #5c6666;
	--f-ease:   cubic-bezier(.16, 1, .3, 1);
	--f-gap:    clamp(.5rem, 1.1vw, 1rem);
}

/* ═════════════════════════════════════════════════════════════
   THE MOSAIC
   ═════════════════════════════════════════════════════════════ */

.gtd-mos {
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
	padding-inline: max(1.25rem, calc((100vw - 1800px) / 2));
	margin-block: clamp(2rem, 4vw, 3.5rem);
}

.gtd-mos__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: var(--f-gap);
}

/*
 * One shape for every tile is what makes the rows line up. The old galleries
 * let each image keep its own height, which is why nothing agreed with
 * anything else across a column boundary.
 */
.gtd-mos__tile {
	position: relative;
	margin: 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: #e9ebeb;
}

/*
 * Somewhere to look first. Two by two — and it KEEPS the tile ratio rather
 * than going auto: an auto-height item spanning two rows sizes those rows to
 * itself, which stretched every row on the page from 442px to 655px and undid
 * the alignment this grid exists for. Two columns of 4:3 plus the gap is very
 * nearly 4:3 again, so the rows stay where they are.
 */
.gtd-mos__tile--feature {
	grid-column: span 2;
	grid-row: span 2;
}

.gtd-mos__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	transition: transform .8s var(--f-ease);
}

.gtd-mos__tile--image:hover .gtd-mos__img { transform: scale(1.04); }

/* ── the statement tile ─────────────────────────────────────── */

.gtd-mos__tile--text {
	background: var(--f-ink);
	display: flex;
}

.gtd-mos__say {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	padding: clamp(1.5rem, 3vw, 2.75rem);
}

.gtd-mos__rule {
	display: block;
	width: clamp(2rem, 4.5vw, 3.5rem);
	height: 3px;
	margin-bottom: clamp(1rem, 2vw, 1.6rem);
	background: var(--f-red);
	transform-origin: left;
}

.gtd-mos__sayText {
	margin: 0;
	/* !important answers css/type.css's `p { … !important }` — the tile was an
	   <h3> until the heading pass; the rule is needed either way. */
	font-size: clamp(1.15rem, .75rem + 1.15vw, 2.25rem) !important;
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: #fff !important;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.gtd-mos__tile--text.gtd-mos__tile--feature .gtd-mos__sayText {
	font-size: clamp(1.6rem, 1rem + 1.9vw, 3.4rem) !important;
}

/* ═════════════════════════════════════════════════════════════
   THE PLATE
   The full-width picture with a statement on it. Was a 1800px
   band floating in a 2545px page with its heading absolutely
   positioned 200px off the bottom.
   ═════════════════════════════════════════════════════════════ */

/*
 * Answers the legacy #text-banner-image-bkg block in sass/style.css. That rule
 * is id-scoped (1,0,0) and sets `margin: auto`, which silently beat the class
 * rule's `margin-left: 50%` below and left the band sitting half a screen to
 * the left of the page. The full-bleed maths has to live at id strength.
 */
#text-banner-image-bkg.gtd-plate {
	height: auto !important;
	max-width: none !important;
	width: 100vw !important;
	margin: 0 0 0 50% !important;
	background-image: none !important;
}

/*
 * The band is the drift's timeline SUBJECT. Named here and read by
 * .gtd-plate__img — see the note on .gtd-plate__media above.
 */
.gtd-plate {
	view-timeline-name: --gtdPlate;
	position: relative;
	isolation: isolate;
	display: flex;
	align-items: flex-end;
	min-height: min(72vh, 720px);
	padding-block: clamp(3rem, 7vw, 6rem);
	background: var(--f-ink);
	overflow: clip;

	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);
}

.gtd-plate__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	/*
	 * `hidden` makes this box a scroll container, and that is what froze the
	 * drift below: an anonymous `view()` measures against its animated
	 * element's nearest ancestor scrollport, and this box never scrolls.
	 *
	 * The fix here is not the clipping but the timeline. .gtd-plate carries
	 * `view-timeline-name: --gtdPlate` and .gtd-plate__img drives off that
	 * name, so the subject is the BAND and the scrollport is the page —
	 * which is what the drift was always meant to track. The clipping is
	 * then free to stay as it was.
	 */
	overflow: hidden;
}

/*
 * Taller than the frame on purpose: the drift below moves it 8% either way,
 * and a picture the same height as its frame would show the ground behind it.
 */
.gtd-plate__img {
	display: block;
	width: 100%;
	height: 124%;
	max-width: none;
	position: absolute;
	top: -12%;
	left: 0;
	object-fit: cover;
	object-position: center;
	will-change: transform;
}

.gtd-plate__scrim {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(to top, rgba(13, 20, 20, .9) 0%, rgba(13, 20, 20, .5) 40%, rgba(13, 20, 20, .08) 75%, rgba(13, 20, 20, 0) 100%),
		linear-gradient(to right, rgba(13, 20, 20, .62) 0%, rgba(13, 20, 20, .18) 50%, rgba(13, 20, 20, 0) 82%);
}

.gtd-plate__inner {
	position: relative;
	z-index: 1;
	width: 100%;
}

.gtd-plate__rule {
	display: block;
	width: clamp(2.5rem, 6vw, 4.5rem);
	height: 3px;
	margin-bottom: clamp(1rem, 2vw, 1.6rem);
	background: var(--f-red);
	transform-origin: left;
}

.gtd-plate__title {
	margin: 0;
	/* !important answers css/type.css's `h2 { … !important }`. */
	font-size: clamp(1.9rem, 1.05rem + 2.9vw, 4.75rem) !important;
	font-weight: 900;
	line-height: .92;
	letter-spacing: -.04em;
	text-transform: uppercase;
	color: #fff !important;
	max-width: 20ch;
	text-wrap: balance;
	overflow-wrap: break-word;
}

/* ═════════════════════════════════════════════════════════════
   THE SECTIONS
   Was `#our-story-main-content` — the same id, four times.
   ═════════════════════════════════════════════════════════════ */

.gtd-fac__say { padding-block: clamp(3rem, 6vw, 5.5rem); }

.gtd-fac__sayHead {
	display: grid;
	grid-template-columns: minmax(0, 38fr) minmax(0, 62fr);
	gap: clamp(2rem, 5vw, 5.5rem);
	align-items: start;
}

.gtd-fac__sayRule {
	display: block;
	width: clamp(2.5rem, 6vw, 4.5rem);
	height: 3px;
	margin-bottom: clamp(1rem, 2vw, 1.6rem);
	background: var(--f-red);
	transform-origin: left;
}

.gtd-fac__sayTitle {
	margin: 0;
	font-size: clamp(1.7rem, 1.05rem + 2.1vw, 3.4rem) !important;
	font-weight: 900;
	line-height: .95;
	letter-spacing: -.035em;
	text-transform: uppercase;
	color: var(--gtd-ink, #101d1d) !important;
	text-wrap: balance;
}

.gtd-fac__sayBody p {
	margin: 0 0 1.1em;
	font-size: clamp(1rem, .95rem + .32vw, 1.22rem) !important;
	line-height: 1.68;
	max-width: 62ch;
	color: #23302f !important;
}

.gtd-fac__sayBody p:last-child { margin-bottom: 0; }

/* ── the tour film ───────────────────────────────────────────
   Was 90% wide, centred, inside a 6px red border with a 24px
   radius — on a site where nothing has a radius at all.
   ───────────────────────────────────────────────────────────── */

.gtd-fac__film {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	background: var(--f-ink);
	aspect-ratio: 16 / 9;
	overflow: hidden;
	box-shadow: inset 0 0 0 4px var(--f-red);
}

.gtd-fac__filmVideo {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	background: var(--f-ink);
}

/* ═════════════════════════════════════════════════════════════
   THE MOMENT
   ═════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {

		@keyframes gtdMosIn {
			from { opacity: 0; transform: translate3d(0, 40px, 0) scale(.94); }
			to   { opacity: 1; transform: none; }
		}
		@keyframes gtdFacRise {
			from { opacity: 0; transform: translate3d(0, 28px, 0); }
			to   { opacity: 1; transform: none; }
		}
		@keyframes gtdFacDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

		/*
		 * The wall assembles in reading order. The stagger is on the TILE, and
		 * the hover transform is on the image inside it, so the entrance and
		 * the hover never drive the same property on the same element.
		 */
		.gtd-mos__tile {
			animation: gtdMosIn linear both;
			animation-timeline: view();
			animation-range: entry 6% cover 10%;
			transform-origin: 50% 120%;
		}
		.gtd-mos__tile:nth-child(3n + 2) { animation-range: entry 9% cover 13%; }
		.gtd-mos__tile:nth-child(3n + 3) { animation-range: entry 12% cover 16%; }

		/*
		 * The plate's drift. The picture runs against the scroll across the
		 * whole time the band is on screen — the one moving thing on the page,
		 * and the reason it is the only full-bleed photograph.
		 */
		@keyframes gtdPlateDrift {
			from { transform: translate3d(0, -6%, 0) scale(1.04); }
			to   { transform: translate3d(0,  6%, 0) scale(1.04); }
		}
		.gtd-plate__img {
			animation: gtdPlateDrift linear both;
			/* The band's named timeline, not an anonymous view() — the picture's
			   own wrapper is a scroll container and would freeze it. */
			animation-timeline: --gtdPlate;
			animation-range: cover 0% cover 100%;
		}

		.gtd-plate__rule  { animation: gtdFacDraw linear both; animation-timeline: view(); animation-range: entry 25% cover 12%; }
		.gtd-plate__title { animation: gtdFacRise linear both;  animation-timeline: view(); animation-range: entry 22% cover 14%; }

		.gtd-fac__sayRule  { animation: gtdFacDraw linear both; animation-timeline: view(); animation-range: entry 18% cover 6%; }
		.gtd-fac__sayTitle { animation: gtdFacRise linear both; animation-timeline: view(); animation-range: entry 16% cover 8%; }
		.gtd-fac__sayBody  { animation: gtdFacRise linear both; animation-timeline: view(); animation-range: entry 20% cover 12%; }
	}
}

@media (prefers-reduced-motion: reduce) {
	.gtd-mos__img { transition: none !important; }
	.gtd-plate__img { animation: none !important; }
}

/* ═════════════════════════════════════════════════════════════
   SMALLER SCREENS
   ═════════════════════════════════════════════════════════════ */

@media (max-width: 1100px) {
	.gtd-fac__sayHead { grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2rem); }
	.gtd-fac__sayBody p { max-width: 100%; }
}

@media (max-width: 900px) {
	/*
	 * Two up, not three. Three columns inside a 768px tablet gives 237px
	 * tiles — postage stamps of a factory floor. And not one up either: at one
	 * tile per row a wall of twenty-seven photographs is a scroll with no end.
	 */
	.gtd-mos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.gtd-mos__tile--feature { grid-column: span 2; grid-row: span 1; aspect-ratio: 16 / 10; }
	.gtd-plate { min-height: min(62vh, 460px); }
	.gtd-plate__title { max-width: 100%; }
}