/* ─────────────────────────────────────────────────────────────
   GTD Desco — the download library.

   WHAT WAS WRONG

   A Bootstrap `.row` with `<h2>` group headings sitting as direct
   children ALONGSIDE the `.col-*` cards, so the headings were
   grid items. Each card was a div with a flat SVG rectangle as
   its background, a model name, and a button reading DOWNLOAD.

   Nothing told you what you were getting. A 404KB drawing and a
   31MB brochure looked identical. Nothing said whether a file
   was a spec sheet, a brochure or a sales flyer. And an item
   whose button read CONTACT FOR INFO sat in the same grid as
   the real files, promising a download that does not exist.

   WHAT THIS DOES

   Shows the document. WordPress already renders a first-page
   preview of every PDF in the library, so the card IS the sheet,
   standing on an ink ground with the file's real size read off
   disk underneath it.

   The ink band is what makes that work. It is also the one place
   on this site where a dark field is doing a job rather than
   making a mood — and it is why the sheets carry a light inset
   hairline: most of these covers are near-black GTD artwork, and
   without an edge a dark sheet on a dark band is a hole.

   Every sheet is an A4 box whatever the document's real shape,
   because a grid of documents only reads as a set if the sheets
   line up. The two landscape drawings sit centred on a paper
   mount inside that box rather than being cropped in half.

   THE MOMENT

   The sheets deal themselves in — each one rises and settles as
   its group is scrolled to, in the order they sit in the grid.
   On hover the sheet lifts off the ground and its shadow spreads,
   the way a page does when you pick it up off a desk.
   ───────────────────────────────────────────────────────────── */

.gtd-dl-band {
	--dl-ink:    #141313;
	--dl-red:    var(--gtd-red, #c60000);
	--dl-onDark: #ff5b4a;
	--dl-quiet:  rgba(255, 255, 255, .62);
	--dl-line:   rgba(255, 255, 255, .12);
	--dl-ease:   cubic-bezier(.16, 1, .3, 1);

	position: relative;
	isolation: isolate;
	overflow: clip;

	/* Full bleed out of the container it is written inside. */
	width: 100vw;
	margin-left: 50%;
	transform: translateX(-50%);

	background: var(--dl-ink);
	/* Red edge top and bottom, the way the equipment band is edged. */
	box-shadow:
		inset 0  5px 0 0 var(--dl-red),
		inset 0 -5px 0 0 var(--dl-red);
	padding-block: clamp(3.5rem, 8vw, 7rem);
	margin-top: clamp(4rem, 8vw, 7.5rem);
	margin-bottom: clamp(4rem, 8vw, 7.5rem);
}

/* ── a group ──────────────────────────────────────────────────
   The group IS the grid, and its heading is the first cell in it.

   Written the obvious way — a heading row above a grid of cards —
   three of these five groups hold two documents, so two thirds of
   every band row was empty and the count floated off alone at the
   far right of a 1500px container. Putting the heading in the run
   fills the row, sets the title in a column where it can break
   across three lines at size, and puts the count directly under
   the words it counts.
   ───────────────────────────────────────────────────────────── */

.gtd-dl__group {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.5vw, 2.25rem);
	align-items: start;
}

.gtd-dl__group + .gtd-dl__group {
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--dl-line);
}

.gtd-dl__head {
	grid-column: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: clamp(.7rem, 1.3vw, 1.05rem);
	/* The heading reads against the first sheet's top edge, not its middle. */
	padding-top: .35rem;
}

.gtd-dl__rule {
	flex: none;
	display: block;
	width: clamp(2.5rem, 6vw, 4.5rem);
	height: 3px;
	background: var(--dl-onDark);
	transform-origin: left;
}

.gtd-dl__group-title {
	margin: 0;
	/* !important answers css/type.css's `h2 { … !important }`. */
	/*
	 * A clear step BELOW the document names. The documents are what this page
	 * is for, so they get the display voice and the group heading is the label
	 * that files them — told apart by the red rule and its own column, not by
	 * competing for size. The vw term is also what keeps the longest word
	 * ("GEOTHERMAL", "EXPLORATION") inside a 253px column at 1366.
	 */
	font-size: clamp(1.2rem, .55rem + 1.2vw, 2.1rem) !important;
	font-weight: 900;
	line-height: .92;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: #fff !important;
	overflow-wrap: break-word;
	hyphens: none;
}

.gtd-dl__count {
	margin: 0;
	font-size: clamp(.7rem, .66rem + .16vw, .8rem) !important;
	font-weight: 700;
	letter-spacing: .17em;
	text-transform: uppercase;
	color: var(--dl-quiet) !important;
}

/* ── the grid ─────────────────────────────────────────────── */

/*
 * display:contents so the cards are items of the GROUP's grid rather than of
 * a nested one — which is what lets the heading share a row with them. The
 * role attribute is on the markup because display:contents drops list
 * semantics in WebKit.
 */
.gtd-dl__grid {
	display: contents;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gtd-dl__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.gtd-dl__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: clamp(.9rem, 1.8vw, 1.25rem);
	height: 100%;
}

/* ── the sheet ────────────────────────────────────────────────
   A4 upright, white, with a real shadow — offset and blurred, so
   it reads as paper resting on the ground rather than as a card
   with a halo.
   ───────────────────────────────────────────────────────────── */

.gtd-dl__sheet {
	position: relative;
	aspect-ratio: 1 / 1.414;
	/* The mount. Only ever seen behind a document that is not A4. */
	background: #e9ebeb;
	/*
	 * clip, NOT hidden. `overflow: hidden` makes an element a scroll
	 * container, and the sheet's own .gtd-dl__page carries an
	 * `animation-timeline: view()` — which would then measure against THIS
	 * box instead of the page and sit at a constant progress for ever.
	 * `clip` crops identically without creating a scroll container;
	 * `hidden` stays in front of it for browsers that predate `clip`.
	 */
	overflow: hidden;
	overflow: clip;
	/*
	 * The inset hairline is not decoration. Half these covers are near-black
	 * GTD artwork, and on a #141313 band a dark sheet has no edge at all —
	 * the light rule is what makes it a piece of paper rather than a hole.
	 */
	box-shadow:
		0 10px 24px rgba(0, 0, 0, .45),
		inset 0 0 0 1px rgba(255, 255, 255, .16);
	transition:
		transform .5s var(--dl-ease),
		box-shadow .5s var(--dl-ease);
}

.gtd-dl__page {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	/*
	 * contain, not cover. Two of these documents are landscape, and cover was
	 * cutting them in half — the tooling brochure lost its own title.
	 */
	object-fit: contain;
	object-position: center;
}

/* No preview in the library: a drawn sheet keeps the grid's rhythm. */
.gtd-dl__blank {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background:
		repeating-linear-gradient(0deg,
			rgba(16, 29, 29, .05) 0 1px,
			transparent 1px 13px),
		#f3f4f4;
}

.gtd-dl__blank-mark {
	font-size: clamp(1rem, .8rem + .7vw, 1.5rem);
	font-weight: 900;
	letter-spacing: -.02em;
	text-transform: uppercase;
	color: rgba(16, 29, 29, .3);
	text-align: center;
	padding-inline: 1rem;
}

/* What kind of document it is, on the sheet itself. */
.gtd-dl__badge {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	padding: .55rem .85rem;
	background: var(--dl-red);
	color: #fff;
	font-size: clamp(.62rem, .59rem + .13vw, .74rem);
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	line-height: 1;
}

.gtd-dl__item--enquiry .gtd-dl__badge { background: var(--gtd-ink, #101d1d); }

/* ── the label ────────────────────────────────────────────── */

.gtd-dl__meta {
	display: flex;
	flex-direction: column;
	gap: .35rem;
	margin-top: auto;
}

.gtd-dl__name {
	margin: 0;
	/*
	 * The loudest type in the band. These are model numbers — GT35, RC65DR,
	 * MG500 — and on every other page of this site the model number is the
	 * biggest thing on the screen. Setting them as captions under a picture
	 * was the library quietly opting out of the site's own voice.
	 */
	font-size: clamp(1.5rem, 1rem + 1.15vw, 2.5rem) !important;
	font-weight: 900;
	line-height: .9;
	letter-spacing: -.035em;
	text-transform: uppercase;
	color: #fff !important;
	overflow-wrap: break-word;
}

/* The whole card is the target — a 40px button under a 300px sheet is a
   smaller thing to hit than the sheet the visitor is already looking at. */
.gtd-dl__link {
	color: inherit;
	text-decoration: none;
}

/*
 * The name's text lives INSIDE this anchor, and css/type.css sets
 * `p, a, li { font-size: var(--t-body) !important }`. A bare `a` is (0,0,1),
 * but with `!important` on both sides it was still winning over the h3 that
 * wraps it — an element only inherits from its parent when nothing else
 * claims it. So the display size was landing on the h3 and the anchor inside
 * was quietly rendering the model number at 21px body size.
 */
.gtd-dl__name .gtd-dl__link {
	font: inherit !important;
	letter-spacing: inherit;
}

.gtd-dl__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.gtd-dl__sr {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Shown only on the phone layout, where the sheet badge is hidden. */
.gtd-dl__kind { display: none; }

.gtd-dl__sub {
	margin: 0;
	font-size: clamp(.8rem, .76rem + .18vw, .92rem) !important;
	line-height: 1.4;
	color: var(--dl-quiet) !important;
}

.gtd-dl__file {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: .7rem 0 0;
	padding-top: .7rem;
	border-top: 1px solid var(--dl-line);
	font-size: clamp(.68rem, .65rem + .14vw, .76rem) !important;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dl-onDark) !important;
}

.gtd-dl__dot { opacity: .5; }

/* Real numbers, read off disk. The RC sheets are 15–18MB and the brochure is
   31MB; on site data that is worth knowing before you tap it. */
.gtd-dl__size { color: var(--dl-quiet); }

/* A target-shaped thing rather than a floating glyph. */
.gtd-dl__arrow {
	margin-left: auto;
	flex: none;
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	color: #fff;
	background: var(--dl-red);
	transition:
		transform .4s var(--dl-ease),
		background-color .3s var(--dl-ease);
}

.gtd-dl__item--enquiry .gtd-dl__arrow { background: rgba(255, 255, 255, .14); }

/* ── hover ────────────────────────────────────────────────────
   The sheet comes off the desk. Nothing else moves.
   ───────────────────────────────────────────────────────────── */

.gtd-dl__card:hover .gtd-dl__sheet,
.gtd-dl__link:focus-visible ~ * .gtd-dl__sheet,
.gtd-dl__card:focus-within .gtd-dl__sheet {
	transform: translateY(-10px);
	box-shadow:
		0 26px 50px rgba(0, 0, 0, .6),
		inset 0 0 0 1px rgba(255, 255, 255, .3);
}

.gtd-dl__card:hover .gtd-dl__arrow,
.gtd-dl__card:focus-within .gtd-dl__arrow {
	transform: translateY(3px);
	background: var(--dl-onDark);
	color: #141313;
}

.gtd-dl__item--enquiry .gtd-dl__card:hover .gtd-dl__arrow,
.gtd-dl__item--enquiry .gtd-dl__card:focus-within .gtd-dl__arrow { transform: translateX(3px); }

.gtd-dl__link:focus-visible::before {
	outline: 3px solid var(--dl-onDark);
	outline-offset: 4px;
}

/* ── the moment ───────────────────────────────────────────────
   The sheets deal themselves in, in grid order.
   ───────────────────────────────────────────────────────────── */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes gtdDlDraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
		/*
		 * A card skidding onto a desk: it arrives from the left of its slot,
		 * low, small and off-square, and squares up as it lands. The rotation
		 * is what makes it a deal rather than a fade — sixteen identical rises
		 * is one effect repeated, not a moment.
		 */
		@keyframes gtdDlDeal {
			from {
				opacity: 0;
				transform: translate3d(-7%, 46px, 0) rotate(-3.4deg) scale(.93);
			}
			to { opacity: 1; transform: none; }
		}

		/* The cover settles a beat behind its sheet. Two layers, one move. */
		@keyframes gtdDlSettle {
			from { transform: scale(1.07); }
			to   { transform: none; }
		}
		@keyframes gtdDlRise { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }

		.gtd-dl__rule {
			animation: gtdDlDraw linear both;
			animation-timeline: view();
			animation-range: entry 20% cover 4%;
		}

		.gtd-dl__group-title,
		.gtd-dl__count {
			animation: gtdDlRise linear both;
			animation-timeline: view();
			animation-range: entry 18% cover 6%;
		}

		/*
		 * The timeline is on the ITEM, not the sheet — the sheet carries the
		 * hover transform, and an entrance on the same element would fight it
		 * the moment someone points at a card mid-animation.
		 */
		.gtd-dl__item {
			animation: gtdDlDeal linear both;
			animation-timeline: view();
			animation-range: entry 14% cover 8%;
			transform-origin: 50% 130%;
		}

		.gtd-dl__page {
			animation: gtdDlSettle linear both;
			animation-timeline: view();
			animation-range: entry 14% cover 22%;
		}

		/* Dealt in grid order rather than all at once. */
		.gtd-dl__item:nth-child(2) { animation-range: entry 17% cover 11%; }
		.gtd-dl__item:nth-child(3) { animation-range: entry 20% cover 14%; }
		.gtd-dl__item:nth-child(4) { animation-range: entry 23% cover 17%; }
		.gtd-dl__item:nth-child(5) { animation-range: entry 26% cover 20%; }
		.gtd-dl__item:nth-child(6) { animation-range: entry 29% cover 23%; }
		.gtd-dl__item:nth-child(7) { animation-range: entry 32% cover 26%; }
		.gtd-dl__item:nth-child(8) { animation-range: entry 35% cover 29%; }
	}
}

/* ── small screens ────────────────────────────────────────── */

@media (max-width: 1100px) {
	.gtd-dl__group { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
	.gtd-dl__group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	/*
	 * At two up a heading cell would eat half the row, so it goes back to
	 * being a band across the top — the reason it sat in the grid was to fill
	 * a four-wide row, and there is no four-wide row left to fill.
	 */
	.gtd-dl__head {
		grid-column: 1 / -1;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		gap: .5rem clamp(1rem, 2vw, 1.75rem);
		padding-top: 0;
		margin-bottom: clamp(.5rem, 1.5vw, 1rem);
	}
	.gtd-dl__rule { align-self: center; }
	.gtd-dl__count { margin-left: auto; }
}

@media (max-width: 460px) {
	.gtd-dl__group { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
	/* One up: the sheet would be enormous at full width, so it lies down. */
	.gtd-dl__card { flex-direction: row; align-items: flex-start; gap: 1rem; }
	.gtd-dl__sheet { flex: 0 0 40%; }
	.gtd-dl__meta { margin-top: 0; }
	.gtd-dl__count { margin-left: 0; }
	/*
	 * The sheet is 40% of a phone here — the badge was wrapping to two lines
	 * across a third of the cover, and at one line it spanned the whole of it.
	 * The kind moves down into the label, where there is room for it.
	 */
	.gtd-dl__badge { display: none; }
	.gtd-dl__kind  { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
	.gtd-dl__sheet,
	.gtd-dl__arrow { transition: none !important; }
}

/* ═════════════════════════════════════════════════════════════
   THE FEATURED DOCUMENT
   The brochure is 31MB and the only document covering the whole
   range, so it leads the page instead of sitting in the grid as
   one card among eighteen.
   ═════════════════════════════════════════════════════════════ */

.gtd-feature {
	--f-ink:   var(--gtd-ink, #101d1d);
	--f-red:   var(--gtd-red, #c60000);
	--f-quiet: #5c6666;
	--f-ease:  cubic-bezier(.16, 1, .3, 1);

	/*
	 * Same edge maths as the equipment rows on the support page: the outer
	 * page edge is the container's CONTENT edge, which is Bootstrap's 12px
	 * padding inside its 1520px box — not (100vw - 1520px) / 2.
	 */
	--f-edge: max(1.25rem, calc((100vw - 1520px) / 2 + 12px));

	display: block;
	margin-top: clamp(3.5rem, 7vw, 6rem);
}

.gtd-feature__inner {
	display: grid;
	/*
	 * The cover takes the larger share. It is bleeding off the page, so the
	 * half that stays on screen has to be big enough to still read as a
	 * document; and the copy is capped at a 52ch measure anyway, so a wider
	 * panel only buys empty space to the right of it.
	 */
	grid-template-columns: minmax(0, 53fr) minmax(0, 47fr);
	gap: clamp(1.75rem, 4.5vw, 4.5rem);
	align-items: center;
	/* The cover runs off the left of the page; the copy stops at the edge. */
	padding-right: var(--f-edge);
}

.gtd-feature__sheet {
	position: relative;
	/*
	 * No forced ratio here. This one is alone rather than in a set, so it gets
	 * the brochure's true landscape shape from the image's own width and
	 * height — an A4 box was cropping the cover through its headline.
	 */
	background: #e9ebeb;
	overflow: hidden;
	box-shadow: 24px 26px 60px rgba(16, 29, 29, .32);
	transition: transform .6s var(--f-ease), box-shadow .6s var(--f-ease);
}

.gtd-feature:hover .gtd-feature__sheet {
	transform: translateY(-10px);
	box-shadow: 24px 40px 80px rgba(16, 29, 29, .38);
}

.gtd-feature__page {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
}

.gtd-feature__badge {
	position: absolute;
	top: 0;
	left: 0;
	padding: .5rem .8rem;
	background: var(--f-red);
	color: #fff;
	font-size: clamp(.62rem, .59rem + .12vw, .7rem);
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	line-height: 1;
}

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

.gtd-feature__title {
	margin: 0 0 clamp(.8rem, 1.6vw, 1.2rem);
	/* !important answers css/type.css's `h2 { … !important }`. */
	font-size: clamp(1.9rem, 1.1rem + 2.6vw, 4rem) !important;
	font-weight: 900;
	line-height: .95;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: var(--f-ink) !important;
	text-wrap: balance;
}

.gtd-feature__text {
	margin: 0;
	font-size: clamp(1rem, .95rem + .28vw, 1.2rem) !important;
	line-height: 1.62;
	max-width: 52ch;
	color: var(--f-quiet) !important;
}

.gtd-feature__file {
	display: flex;
	align-items: center;
	gap: .45rem;
	margin: clamp(1rem, 2vw, 1.5rem) 0 0;
	font-size: clamp(.68rem, .65rem + .14vw, .78rem) !important;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--f-red) !important;
}

.gtd-feature__size { color: var(--f-quiet); }

.gtd-feature__cta { margin-top: clamp(1.25rem, 2.5vw, 1.9rem); }

.gtd-feature__cta:hover,
.gtd-feature__cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(198, 0, 0, .3);
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.gtd-feature__rule {
			animation: gtdDlDraw linear both;
			animation-timeline: view();
			animation-range: entry 20% cover 6%;
		}
		.gtd-feature__title,
		.gtd-feature__text,
		.gtd-feature__file,
		.gtd-feature__cta,
		.gtd-feature__sheet {
			animation: gtdDlRise linear both;
			animation-timeline: view();
			animation-range: entry 16% cover 8%;
		}
		.gtd-feature__text { animation-range: entry 20% cover 12%; }
		.gtd-feature__file { animation-range: entry 24% cover 16%; }
		.gtd-feature__cta  { animation-range: entry 28% cover 20%; }
	}
}

@media (max-width: 800px) {
	/* Stacked, the bleed has nowhere to go, so the block returns to the container. */
	.gtd-feature__inner {
		grid-template-columns: minmax(0, 1fr);
		padding-inline: var(--f-edge);
	}
	.gtd-feature__sheet { max-width: 30rem; }
	.gtd-feature__text  { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.gtd-feature__sheet,
	.gtd-feature__cta { transition: none !important; }
}