/* ═════════════════════════════════════════════════════════════
   GTD Desco — FAQs, and the "order from the maker" band

   Used by: the series pages and GTData (series-page.php,
   gtdata-page.php), the rig pages (single-gt-series.php,
   single-rc-series.php), support equipment (single-support-
   equipment.php), the single mud pump pages (mud-pump-single.php)
   and the Single Equipment Page (other-equipment-page-single.php).
   header.php loads it on exactly those.

   Markup: includes/series/faq.php (FAQs), includes/equipment_link.php
   (.gtd-maker). Moved out of css/series.css so the rig pages do not
   pay for the series pages' whole stylesheet.

   Tokens are declared on the blocks themselves, not on a page
   wrapper, so the blocks look the same inside .gtd-series and on
   the older templates that have no wrapper.

   !important only where css/type.css sets the same property with
   !important on the element (h2, p, a, li).
   ───────────────────────────────────────────────────────────── */

.gtd-faq,
.gtd-maker {
	--sr-red:    var(--gtd-red, #c60000);
	--sr-ink-2:  #141313;
	--sr-text:   #23302f;
	--sr-quiet:  #5c6666;
	--sr-line:   rgba(20, 19, 19, .14);
	--sr-stone:  #f1efeb;
	--sr-ease:   cubic-bezier(.16, 1, .3, 1);
	--sr-pad:    clamp(3.5rem, 7vw, 6.5rem);
}

/* The short red rule every block opens with. */
.gtd-faq__rule,
.gtd-maker__rule {
	display: block;
	width: clamp(2.5rem, 6vw, 4.5rem);
	height: 3px;
	margin-bottom: clamp(1rem, 2vw, 1.6rem);
	background: var(--sr-red);
}

/* The block heading voice shared with css/series.css. */
.gtd-faq__title,
.gtd-maker__title {
	margin: 0;
	font-size: clamp(1.9rem, 1.1rem + 2.4vw, 3.6rem) !important;
	font-weight: 900;
	line-height: .95;
	letter-spacing: -.035em;
	text-transform: uppercase;
	color: var(--sr-ink-2) !important;
	text-wrap: balance;
}

/* ═════════════════════════════════════════════════════════════
   FAQ
   ═════════════════════════════════════════════════════════════ */

.gtd-faq { padding-block: var(--sr-pad); }

/* Straight after the drilling videos (rig and equipment pages) the video
   block's own bottom padding is already doing the separating. */
.gtd-evidence + .gtd-faq { padding-top: calc(var(--sr-pad) * .35); }

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

.gtd-faq__aside {
	position: sticky;
	top: calc(var(--nav-h, 80px) + 1.5rem);
}

.gtd-faq__more {
	margin: 1.25rem 0 0 !important;
	font-size: 1rem !important;
	color: var(--sr-quiet) !important;
}

.gtd-faq__more a {
	color: var(--sr-red) !important;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: .2em;
}

.gtd-faq__list { border-top: 1px solid var(--sr-line); }

.gtd-faq__item { border-bottom: 1px solid var(--sr-line); }

.gtd-faq__q {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1.5rem;
	padding: clamp(1.1rem, 2vw, 1.5rem) 0;
	cursor: pointer;
	list-style: none;
	font: 900 clamp(1.02rem, .92rem + .45vw, 1.3rem)/1.2 "eurostile", sans-serif;
	text-transform: uppercase;
	letter-spacing: -.005em;
	color: var(--sr-ink-2);
	transition: color .25s var(--sr-ease);
}

.gtd-faq__q::-webkit-details-marker { display: none; }
.gtd-faq__q:hover { color: var(--sr-red); }

.gtd-faq__q:focus-visible {
	outline: 2px solid var(--sr-red);
	outline-offset: 4px;
}

.gtd-faq__icon {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-top: .2rem;
	stroke: var(--sr-red);
	stroke-width: 2.2;
	transition: transform .35s var(--sr-ease);
}

.gtd-faq__item[open] .gtd-faq__icon { transform: rotate(45deg); }

.gtd-faq__a { padding: 0 2.5rem clamp(1.25rem, 2.2vw, 1.75rem) 0; }

.gtd-faq__a p {
	margin: 0 0 .9rem !important;
	max-width: 68ch;
	font-size: clamp(1rem, .95rem + .25vw, 1.12rem) !important;
	line-height: 1.68;
	color: var(--sr-text) !important;
}

.gtd-faq__a p:last-child { margin-bottom: 0 !important; }

.gtd-faq__link {
	font-weight: 700;
	color: var(--sr-red) !important;
	text-decoration: underline;
	text-underline-offset: .2em;
}

@media (max-width: 860px) {
	.gtd-faq__inner { grid-template-columns: 1fr; }
	.gtd-faq__aside { position: static; }
	.gtd-faq__a { padding-right: 0; }
}

/* ═════════════════════════════════════════════════════════════
   ORDER FROM THE MAKER — GeoWeights
   Copy and an outbound button on the left, the sizes on the right
   as a small spec column. No ground of its own: the section after
   it on that template is already grey, and two greys stacked read
   as one muddy block.
   ═════════════════════════════════════════════════════════════ */

.gtd-maker { padding-block: var(--sr-pad); }

.gtd-maker__inner {
	display: grid;
	grid-template-columns: minmax(0, 60fr) minmax(0, 40fr);
	gap: clamp(2rem, 5vw, 5.5rem);
	align-items: center;
}

.gtd-maker__title em { font-style: normal; color: var(--sr-red); }

.gtd-maker__copy p {
	margin: 1.1rem 0 0 !important;
	max-width: 62ch;
	font-size: clamp(1rem, .95rem + .25vw, 1.12rem) !important;
	line-height: 1.68;
	color: var(--sr-text) !important;
}

.gtd-maker__title + p { margin-top: 1.5rem !important; }

.gtd-maker__cta { margin-top: 2rem; }

.gtd-maker__facts {
	list-style: none;
	margin: 0 !important;
	padding: 0 !important;
	border-top: 1px solid var(--sr-line);
}

.gtd-maker__facts li {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 !important;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--sr-line);
	font-size: .95rem !important;
	color: var(--sr-quiet) !important;
}

.gtd-maker__facts strong {
	font: 900 clamp(1.5rem, 1.1rem + 1.2vw, 2.2rem)/1 "eurostile", sans-serif;
	letter-spacing: -.02em;
	color: var(--sr-ink-2);
}

@media (max-width: 860px) {
	.gtd-maker__inner { grid-template-columns: 1fr; }
}