/* ─────────────────────────────────────────────────────────────
   GTD Desco — CTA panels.

   Three blocks: the factory tour, driller focused support, and
   our story.

   WHAT WAS WRONG

   The same 650px box, copied three times. The photograph as a
   background-image with a flat `rgba(0, 0, 0, .6)` wash across
   the whole of it — a 60% black sheet over the one asset each
   block exists to show — and the copy absolutely positioned in a
   corner under 90 to 120px of padding, so two thirds of every
   block was empty space and the button floated in the middle of
   a greyed photograph with nothing beneath it.

   All three carried a 6px top border in #217d5a, a green the
   site uses nowhere else, and all three shared the wrapper id
   `#factory-tour-outter` — which is invalid HTML and was the
   direct cause of two real bugs.

   WHAT THIS DOES

   A solid panel holds the invitation, hard against a clean
   photograph. Nothing is dimmed, because the type is on the
   panel rather than on the picture.

   THE SEQUENCE

   These three run consecutively on eleven templates, so three
   identical slabs would read as wallpaper. They share one
   grammar and differ in weight:

     Factory tour     red panel,  left,  44 / 56
     Driller support  ink panel,  right, 40 / 60
     Our story        ink panel,  left,  48 / 52

   The red one leads — it is the invitation — and the two ink
   ones follow as a pair, which is a hierarchy rather than a
   checkerboard. The ink panels carry a 6px red seam on the edge
   that meets the photograph, so the brand red is still the thing
   dividing panel from picture without a third red slab.

   THE MOMENT

   One element does the reveal and the layout. A panel-coloured
   curtain covers the block and leaves towards the photograph as
   it is scrolled into view, so the picture is uncovered and the
   panel is what the curtain leaves behind. It travels in the
   direction the panel faces, so the right-hand panel sweeps the
   other way. Transform only, scroll-driven, no JavaScript.
   ───────────────────────────────────────────────────────────── */

/*
 * `#factory-tour-outter` is the factory tour's id alone now — support and our
 * story have their own, and includes/looper-download-block.php, the fourth
 * user, is not included by any template.
 *
 * height and border-top carry !important because sass/style.css's mobile block
 * sets BOTH with !important of its own —
 *
 *     #factory-tour-outter { height: 420px !important;
 *                            border-top: 4px solid #217d5a !important; }
 *
 * and !important beats specificity outright, so (1,1,0) here lost to (1,0,0)
 * there. The block's own content is 550px on a phone, so a forced 420px with
 * `overflow: hidden` was cutting the CTA off the bottom entirely.
 */
#factory-tour-outter.gtd-cta {
	height: auto !important;
	max-width: none;
	width: 100%;
	margin-inline: 0;
	margin-top: var(--cta-gap) !important;   /* answers `margin-top: 50px !important` */
	margin-bottom: var(--cta-gap);
	border-top: 0 !important;                /* the green slab */
	padding: 0;

	/*
	 * And the reason the curtain and the panel never moved. sass/style.css
	 * line 1858 sets `#factory-tour-outter { overflow: hidden }` at id
	 * strength, which beat `.gtd-cta { overflow: clip }` below outright.
	 * `overflow: hidden` makes the section a scroll container, so the
	 * curtain's and the panel's `animation-timeline: view()` measured
	 * against a box that never scrolls and froze at a constant progress.
	 * Restated here at (1,1,0) so the clip wins.
	 */
	overflow: clip;
}

/* ── the component ────────────────────────────────────────── */

.gtd-cta {
	--cta-red:   var(--gtd-red, #c60000);
	--cta-ink:   var(--gtd-ink, #101d1d);
	--cta-gap:   120px;
	--cta-ease:  cubic-bezier(.16, 1, .3, 1);

	/* Overridden per instance below. */
	--cta-panel: 44fr;
	--cta-photo: 56fr;
	--cta-bg:    var(--cta-red);
	--cta-seam:  0px;

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

	display: grid;
	align-items: stretch;

	min-height: clamp(30rem, 46vw, 44rem);
	background: var(--cta-ink);   /* the ground before the photograph arrives */
}

/* ── side ─────────────────────────────────────────────────────
   Which column the panel takes, which way the curtain leaves,
   and which edge the seam sits on. Three properties, one switch.
   ───────────────────────────────────────────────────────────── */

.gtd-cta--left {
	grid-template-columns: minmax(0, var(--cta-panel)) minmax(0, var(--cta-photo));
	--cta-col: 1;
	--cta-out: 101%;
	--cta-seam-shadow: inset calc(-1 * var(--cta-seam)) 0 0 0 var(--cta-red);
}

.gtd-cta--right {
	grid-template-columns: minmax(0, var(--cta-photo)) minmax(0, var(--cta-panel));
	--cta-col: 2;
	--cta-out: -101%;
	--cta-seam-shadow: inset var(--cta-seam) 0 0 0 var(--cta-red);
}

/* ── tone ─────────────────────────────────────────────────── */

.gtd-cta--red { --cta-bg: var(--cta-red); --cta-seam: 0px; }
.gtd-cta--ink { --cta-bg: var(--cta-ink); --cta-seam: 6px; }

/* ── per-instance weight ──────────────────────────────────────
   The splits are not arbitrary. Support gets the photograph its
   largest share because the picture is two drillers on a site,
   and people are the whole claim the block is making.
   ───────────────────────────────────────────────────────────── */

#factory-tour-outter.gtd-cta { --cta-panel: 44fr; --cta-photo: 56fr; }
#support-cta                 { --cta-panel: 40fr; --cta-photo: 60fr; }
#our-story-cta               { --cta-panel: 42fr; --cta-photo: 58fr; }

/* The two blocks with no legacy id rules still need their own spacing. */
#support-cta,
#our-story-cta {
	margin-top: var(--cta-gap);
	margin-bottom: var(--cta-gap);
}

/* ── the photograph ───────────────────────────────────────────
   Behind everything and across the whole block, not just its own
   column: the panel sits ON the picture rather than beside a
   cropped one, so the scene runs the full width and the panel is
   an object placed on it.
   ───────────────────────────────────────────────────────────── */

.gtd-cta__figure {
	position: absolute;
	inset: 0;
	z-index: 0;
	margin: 0;
}

.gtd-cta__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	max-width: none;
	display: block;
	transition: transform 1.2s var(--cta-ease);
}

.gtd-cta:hover .gtd-cta__img { transform: scale(1.035); }

/* ── the panel ────────────────────────────────────────────── */

.gtd-cta__panel {
	position: relative;
	z-index: 2;
	grid-column: var(--cta-col);

	background: var(--cta-bg);
	color: #fff;
	box-shadow: var(--cta-seam-shadow);

	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;

	padding: clamp(2rem, 4.5vw, 4.5rem);
}

.gtd-cta__title {
	margin: 0;
	/* !important answers css/type.css's `h2 { … !important }`. */
	font-size: clamp(2.1rem, 1.2rem + 2.8vw, 4.5rem) !important;
	font-weight: 900;
	line-height: .95;
	letter-spacing: -.03em;
	text-transform: uppercase;
	color: #fff !important;
	text-wrap: balance;
}

/* The rule the rig cards, the upsell panels and the quote banner all use. */
.gtd-cta__rule {
	display: block;
	width: clamp(2.5rem, 6vw, 4.5rem);
	height: 3px;
	margin: clamp(1rem, 2vw, 1.6rem) 0 clamp(1.1rem, 2.2vw, 1.75rem);
	background: #fff;
	transform-origin: left;
	transition: transform .7s var(--cta-ease);
}

/* On ink the rule can be the brand red; on red it has to be white. */
.gtd-cta--ink .gtd-cta__rule { background: var(--cta-red); }

.gtd-cta:hover .gtd-cta__rule { transform: scaleX(1.7); }

.gtd-cta__text,
.gtd-cta__text p {
	margin: 0;
	/*
	 * 42ch was set against the narrowest of the three panels and left the other
	 * two with a column of dead ink to the right of every line — 307px of it on
	 * our story. The measure has to fill the panel it is in, and at 18px this is
	 * still well inside a comfortable line length.
	 */
	max-width: min(52ch, 100%);
	/* !important answers css/type.css's blanket `p { … !important }`. */
	font-size: clamp(.95rem, .9rem + .3vw, 1.125rem) !important;
	line-height: 1.6;
	color: rgba(255, 255, 255, .9) !important;
}

.gtd-cta__text p + p { margin-top: .7em; }

.gtd-cta__cta {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/*
 * On red, .info-button ships a white face with red type, which is exactly
 * right — but its hover fills red on red, so it goes to the brand ink instead.
 */
.gtd-cta--red:hover .gtd-cta__cta,
.gtd-cta--red .gtd-cta__cta:hover,
.gtd-cta--red .gtd-cta__cta:focus-visible {
	background-color: var(--cta-ink);
	border-color: var(--cta-ink);
	color: #fff;
}

/*
 * On ink, .red-info-button's own red fill and lift-on-hover are already the
 * right behaviour, so only the lift is added here.
 */
.gtd-cta:hover .gtd-cta__cta,
.gtd-cta__cta:hover,
.gtd-cta__cta:focus-visible {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .3);
}

.gtd-cta__cta:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/* ── the reveal ───────────────────────────────────────────────
   Scroll-driven, behind @supports, no JavaScript. The timeline is
   on the curtain — never on the element that contains the
   photograph, per the P5e/P5g lesson.
   ───────────────────────────────────────────────────────────── */

.gtd-cta__curtain {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: var(--cta-bg);
	pointer-events: none;
	/* With no scroll timeline available it is simply never in the way. */
	transform: translateX(var(--cta-out));
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		@keyframes gtdCtaReveal {
			from { transform: translateX(0); }
			to   { transform: translateX(var(--cta-out)); }
		}

		.gtd-cta__curtain {
			animation: gtdCtaReveal linear both;
			animation-timeline: view();
			animation-range: entry 10% entry 92%;
		}

		/* The panel arrives from its own side, just behind the curtain, so it
		   reads as the thing the curtain left rather than as a separate
		   entrance of its own. */
		@keyframes gtdCtaPanelIn {
			from { opacity: 0; transform: translateX(calc(var(--cta-out) / -4.2)); }
			to   { opacity: 1; transform: none; }
		}

		.gtd-cta__panel {
			animation: gtdCtaPanelIn linear both;
			animation-timeline: view();
			animation-range: entry 30% cover 4%;
		}
	}
}

/* ── small screens ────────────────────────────────────────────
   Stacked: a band of photograph, then the panel under it. The
   panel over a picture at this width would need a scrim, and a
   scrim is the thing this redesign exists to remove.

   The seam turns with the layout: it divides panel from picture,
   so once the picture is above it, it is a top edge.
   ───────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
	.gtd-cta {
		--cta-gap: clamp(3.5rem, 12vw, 7.5rem);
		grid-template-columns: minmax(0, 1fr);
		grid-template-rows: clamp(12rem, 40vw, 18rem) auto;
		min-height: 0;
	}

	.gtd-cta__figure {
		position: relative;
		grid-row: 1;
		inset: auto;
	}

	.gtd-cta__panel {
		grid-column: 1;
		grid-row: 2;
		padding: clamp(1.75rem, 7vw, 2.5rem);
		box-shadow: inset 0 var(--cta-seam) 0 0 var(--cta-red);
	}

	/* A curtain that leaves sideways across a stacked block wipes the panel
	   off its own photograph, which reads as a glitch. It lifts instead. */
	.gtd-cta__curtain { transform: translateY(-101%); }

	@supports (animation-timeline: view()) {
		@media (prefers-reduced-motion: no-preference) {
			@keyframes gtdCtaRevealUp {
				from { transform: translateY(0); }
				to   { transform: translateY(-101%); }
			}

			.gtd-cta__curtain { animation-name: gtdCtaRevealUp; }

			@keyframes gtdCtaPanelUp {
				from { opacity: 0; transform: translateY(20px); }
				to   { opacity: 1; transform: none; }
			}

			.gtd-cta__panel { animation-name: gtdCtaPanelUp; }
		}
	}
}

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

	.gtd-cta__curtain {
		animation: none !important;
		transform: translateX(var(--cta-out));
	}

	.gtd-cta__panel {
		animation: none !important;
		opacity: 1;
		transform: none;
	}
}