/**
 * TitanDrill Drilling Method System
 *
 * File:
 * td-method.css
 *
 * Version:
 * 1.2
 *
 * Scope:
 * Drilling Method taxonomy pages only.
 *
 * Current implementation:
 * - Method page foundation
 * - Shared Method section foundation
 * - Shared typography foundation
 * - Shared Method buttons
 * - Shared engineering notes
 * - Method Hero
 * - Responsive Hero
 *
 * Governance:
 * [TD-GOV] Global Visual & UI Design System Governance v1.0
 * [TD-GOV] Drilling Method Page Renderer Specification v1.1
 */


/* ==========================================================================
   01. METHOD DESIGN TOKENS
   ========================================================================== */

/*
 * Blocksy remains the source of truth for:
 *
 * - Font families
 * - Global heading scale
 * - Global body typography
 * - Theme palette
 * - Default button typography
 *
 * These variables provide Method-specific aliases only.
 */

body.tax-drilling_method,
body.td-method-template {
	--td-method-primary:
		var(--theme-palette-color-1, #f14000);

	--td-method-primary-hover:
		var(--theme-palette-color-2, #ff5c26);

	--td-method-heading:
		var(--theme-palette-color-3, #1f2937);

	--td-method-dark:
		var(--theme-palette-color-4, #2b2f33);

	--td-method-text:
		var(--theme-palette-color-5, #6b7280);

	--td-method-border:
		var(--theme-palette-color-6, #e5e7eb);

	--td-method-background:
		var(--theme-palette-color-7, #f8f9fa);

	--td-method-white:
		var(--theme-palette-color-8, #ffffff);

	--td-method-container:
		1280px;

	--td-method-reading-width:
		720px;

	--td-method-hero-content-width:
		760px;

	--td-method-transition:
		0.25s ease;



	--td-method-hero-overlay-opacity: 0.4;

	--td-method-cta-overlay-opacity: 0.45;

	color: var(--td-method-text);
}


/* ==========================================================================
   02. BLOCKSY TAXONOMY TEMPLATE RESET
   ========================================================================== */

/*
 * The Method Template Loader already replaces the default archive body.
 * These rules remove remaining Blocksy wrapper spacing only.
 */

body.tax-drilling_method .ct-container-full[data-vertical-spacing],
body.td-method-template .ct-container-full[data-vertical-spacing] {
	padding-top: 0;
	padding-bottom: 0;
}

body.tax-drilling_method .site-main,
body.td-method-template .site-main {
	margin-top: 0;
	margin-bottom: 0;
}

body.tax-drilling_method .site-main > article,
body.td-method-template .site-main > article {
	margin: 0;
	padding: 0;
}

body.tax-drilling_method .entry-content,
body.td-method-template .entry-content {
	margin-top: 0;
	margin-bottom: 0;
}

body.tax-drilling_method .entry-content > :first-child,
body.td-method-template .entry-content > :first-child {
	margin-top: 0;
}

body.tax-drilling_method .entry-content > :last-child,
body.td-method-template .entry-content > :last-child {
	margin-bottom: 0;
}


/* ==========================================================================
   03. METHOD PAGE FOUNDATION
   ========================================================================== */

.td-method-page,
.td-method-page-inner {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}

.td-method-page {
	overflow: hidden;
}

.td-method-page *,
.td-method-page *::before,
.td-method-page *::after {
	box-sizing: border-box;
}


/* ==========================================================================
   04. METHOD CONTAINER FOUNDATION
   ========================================================================== */

/*
 * Renderer pages use the same responsive edge spacing configured
 * in Blocksy:
 *
 * Desktop: 4vw
 * Tablet:  3vw
 * Mobile:  5vw
 *
 * The Method renderer controls this explicitly because its taxonomy
 * template bypasses parts of Blocksy's normal content wrapper.
 */

.td-method-page .td-section > .ct-container {
	width: 100%;
	max-width: none;
	margin-right: auto;
	margin-left: auto;
	padding-right: 4vw;
	padding-left: 4vw;
}


/*
 * Hero remains full width and uses the same horizontal alignment
 * as the content sections.
 */

.td-method-hero .ct-container {
	width: 100%;
	max-width: none;
	margin-right: auto;
	margin-left: auto;
	padding-right: 4vw;
	padding-left: 4vw;
}


/* Tablet edge spacing */

@media (max-width: 999px) {

	.td-method-page .td-section > .ct-container,
	.td-method-hero .ct-container {
		padding-right: 3vw;
		padding-left: 3vw;
	}
}


/* Mobile edge spacing */

@media (max-width: 767px) {

	.td-method-page .td-section > .ct-container,
	.td-method-hero .ct-container {
		padding-right: 5vw;
		padding-left: 5vw;
	}
}


/* ==========================================================================
   05. SHARED METHOD SECTION FOUNDATION
   ========================================================================== */

/*
 * Method page-system structural hook only.
 *
 * Vertical section spacing is owned globally by:
 * - .td-section
 * - .td-section--large-top
 * - .td-section--large-bottom
 * - .td-section--large-vertical
 * - .td-section--no-top
 * - .td-section--no-bottom
 */

.td-method-section {
	position: relative;
	width: 100%;
	margin: 0;
}

.td-method-section-inner {
	width: 100%;
}


/*
 * Section header:
 *
 * H2
 * ↓
 * Introduction
 */

.td-method-section-header {
	width: 100%;
	max-width: var(--td-method-hero-content-width);
	margin: 0 0 48px;
}

.td-method-section-title {
	margin: 0 0 24px;
	color: var(--td-method-heading);
}

.td-method-section-intro {
	width: 100%;
	max-width: var(--td-method-reading-width);
	color: var(--td-method-text);
}

.td-method-section-intro > :first-child {
	margin-top: 0;
}

.td-method-section-intro > :last-child {
	margin-bottom: 0;
}

.td-method-section-intro p {
	margin: 0 0 16px;
}


/* ==========================================================================
   06. SHARED RICH TEXT FOUNDATION
   ========================================================================== */

.td-method-rich-text {
	width: 100%;
	color: var(--td-method-text);
	overflow-wrap: anywhere;
}

.td-method-rich-text > :first-child {
	margin-top: 0;
}

.td-method-rich-text > :last-child {
	margin-bottom: 0;
}

.td-method-rich-text p {
	margin: 0 0 20px;
}

.td-method-rich-text h2,
.td-method-rich-text h3,
.td-method-rich-text h4 {
	color: var(--td-method-heading);
}

.td-method-rich-text h2 {
	margin: 40px 0 20px;
}

.td-method-rich-text h3 {
	margin: 32px 0 16px;
}

.td-method-rich-text h4 {
	margin: 24px 0 12px;
}

.td-method-rich-text ul,
.td-method-rich-text ol {
	margin: 0 0 24px;
	padding-left: 24px;
}

.td-method-rich-text li {
	margin-bottom: 10px;
}

.td-method-rich-text li:last-child {
	margin-bottom: 0;
}

.td-method-rich-text a {
	color: var(--td-method-primary);
	text-decoration: none;
	transition: color var(--td-method-transition);
}

.td-method-rich-text a:hover,
.td-method-rich-text a:focus {
	color: var(--td-method-primary-hover);
}

.td-method-rich-text blockquote {
	margin: 32px 0;
	padding: 24px 28px;
	border-left: 3px solid var(--td-method-primary);
	background: var(--td-method-background);
	color: var(--td-method-heading);
}

.td-method-rich-text blockquote > :last-child {
	margin-bottom: 0;
}

.td-method-rich-text img {
	display: block;
	max-width: 100%;
	height: auto;
}


/* ==========================================================================
   08. SHARED ENGINEERING NOTE FOUNDATION
   ========================================================================== */

.td-method-engineering-note {
	width: 100%;
	margin-top: 32px;
	padding: 24px 28px;
	border-left: 3px solid var(--td-method-primary);
	border-radius: 0;
	background: var(--td-method-background);
}

.td-method-note-label {
	margin-bottom: 12px;
	color: var(--td-method-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1.4;
	text-transform: uppercase;
}

.td-method-note-content {
	color: var(--td-method-text);
}

.td-method-note-content > :first-child {
	margin-top: 0;
}

.td-method-note-content > :last-child {
	margin-bottom: 0;
}

.td-method-note-content p {
	margin: 0 0 14px;
}


.td-method-hero {
	isolation: isolate;
	width: 100%;
	margin: 0;
	overflow: hidden;

	background-color: var(--td-method-dark);
	background-image: var(--td-method-hero-bg, none);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;

	color: var(--td-method-white);
}


/*
 * No-image fallback.
 *
 * The Hero still renders cleanly if the ACF background field is empty.
 */

.td-method-hero-no-background {
	background-color: var(--td-method-dark);
	background-image: none;
}


/*
 * Official global Hero overlay:
 *
 * Black
 * 40% opacity
 *
 * No gradient.
 * No left-to-right darkening.
 * No multiple overlays.
 */

.td-method-hero-overlay {
	position: absolute;
	inset: 0;
	z-index: 0;

	/*
	 * Default global overlay:
	 * Black at 40% opacity.
	 */
	background:
		rgba(
			0,
			0,
			0,
			var(--td-method-hero-overlay-opacity, 0.4)
		);

	pointer-events: none;
}

/* ==========================================================================
   METHOD-SPECIFIC VISUAL OVERRIDES
   ========================================================================== */


/*
 * DTH Drilling
 */

body.term-dth-drilling {

	--td-method-hero-overlay-opacity: 0.7;

	--td-method-cta-overlay-opacity: 0.7;

}


/*
 * Overburden Drilling
 */

body.term-overburden-drilling {

	--td-method-hero-overlay-opacity: 0.4;

	--td-method-cta-overlay-opacity: 0.65;

}


/*
 * Rotary Drilling
 */

body.term-rotary-drilling {

	--td-method-hero-overlay-opacity: 0.5;

	--td-method-cta-overlay-opacity: 0.45;

}

/*
 * Top Hammer Drilling
 */

body.term-top-hammer-drilling {

	--td-method-hero-overlay-opacity: 0.5;

	--td-method-cta-overlay-opacity: 0.5;

}


/* ==========================================================================
   10. METHOD HERO INNER LAYOUT
   ========================================================================== */

.td-method-hero-inner {
	position: relative;
	z-index: 1;

	display: flex;
	align-items: center;

	width: 100%;
}


/* ==========================================================================
   12. METHOD HERO TYPOGRAPHY
   ========================================================================== */

/*
 * Eyebrow:
 *
 * 12px
 * 600
 * 2px letter spacing
 * #E5E7EA
 */

.td-method-eyebrow {
	margin: 0;
	color: #e5e7ea;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 2px;
	line-height: 1.4;
	text-transform: uppercase;
}


/*
 * H1 inherits the Blocksy global H1 scale.
 *
 * Only Hero-specific color and spacing are controlled here.
 */

.td-method-title {
	max-width: var(--td-method-hero-content-width);
	margin-top: 16px;
	margin-bottom: 24px;
	color: var(--td-method-white);
	overflow-wrap: anywhere;
}


/*
 * Hero supporting paragraph:
 *
 * #E5E7EA
 * Maximum width 760px
 */

.td-method-hero-intro {
	width: 100%;
	max-width: var(--td-method-hero-content-width);
	color: #e5e7ea;
}

.td-method-hero-intro > :first-child {
	margin-top: 0;
}

.td-method-hero-intro > :last-child {
	margin-bottom: 0;
}

.td-method-hero-intro p {
	margin: 0 0 16px;
}


/* ==========================================================================
   13. METHOD HERO BUTTONS
   ========================================================================== */

/*
 * Official Hero button spacing:
 *
 * Paragraph
 * ↓
 * 48px
 * ↓
 * Buttons
 */

.td-method-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
}


/* Hero primary */

.td-method-hero .td-method-btn-primary {
	border: 1px solid var(--td-method-primary);
	background: var(--td-method-primary);
	color: var(--td-method-white);
}

.td-method-hero .td-method-btn-primary:hover,
.td-method-hero .td-method-btn-primary:focus {
	border-color: var(--td-method-primary-hover);
	background: var(--td-method-primary-hover);
	color: var(--td-method-white);
}


/* Hero secondary */

.td-method-hero .td-method-btn-secondary {
	border: 1px solid rgba(255, 255, 255, 0.85);
	background: transparent;
	color: var(--td-method-white);
}

.td-method-hero .td-method-btn-secondary:hover,
.td-method-hero .td-method-btn-secondary:focus {
	border-color: var(--td-method-white);
	background: var(--td-method-white);
	color: var(--td-method-heading);
}



/* ==========================================================================
   15. TABLET RESPONSIVE
   ========================================================================== */

@media (max-width: 999px) {

	.td-method-hero {
		background-position: center;
	}

	.td-method-hero-content {
		max-width: 720px;
	}

	.td-method-section-header {
		margin-bottom: 40px;
	}
}


/* ==========================================================================
   16. MOBILE RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {

	.td-method-section-header {
		margin-bottom: 32px;
	}

	.td-method-section-title {
		margin-bottom: 20px;
	}

	.td-method-hero {
		background-position: center;
	}

	.td-method-title {
		margin-top: 16px;
		margin-bottom: 24px;
	}

	.td-method-hero-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.td-method-hero-actions .td-method-btn {
		width: 100%;
		white-space: normal;
	}

	.td-method-engineering-note {
		margin-top: 28px;
		padding: 22px 20px;
	}
}


/* ==========================================================================
   18. ACCESSIBILITY & REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

	.td-method-rich-text a {
		transition:none;
	}
}

/* ==========================================================================
   19. METHOD OVERVIEW
   ========================================================================== */

/*
 * The Overview is the first content section after the Hero.
 *
 * Desktop:
 * Text ≈ 55%
 * Image ≈ 45%
 *
 * The section uses the approved first-section spacing already supplied
 * by the shared .td-method-section foundation.
 */

.td-method-overview {
	background-color: var(--td-method-white);
}

.td-method-overview-grid {
	display: grid;
	grid-template-columns:
		minmax(0, 1.08fr)
		minmax(360px, 0.92fr);
	gap: clamp(48px, 6vw, 80px);
	align-items: center;
	width: 100%;
}


/*
 * Graceful no-image layout.
 */

.td-method-overview-grid.td-no-image,
.td-method-overview-grid.td-method-no-image {
	grid-template-columns:
		minmax(0, var(--td-method-reading-width));
}

.td-method-overview-content,
.td-method-overview-media {
	min-width: 0;
}

.td-method-overview-content {
	width: 100%;
}

.td-method-overview-media {
	width: 100%;
}


/*
 * Some engine versions may place the section header inside the
 * left content column. It should not receive the full module spacing
 * twice.
 */

.td-method-overview .td-method-section-header {
	margin-bottom: 32px;
}

.td-method-overview .td-method-section-title {
	margin-bottom: 0;
}


/* Overview image */

.td-method-overview-image,
.td-method-overview-media img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	border-radius: 0;
	object-fit: cover;
}


/*
 * Preserve a stable visual frame without forcing destructive cropping.
 */

.td-method-overview-media {
	overflow: hidden;
	background-color: var(--td-method-background);
}


/* ==========================================================================
   20. METHOD ENGINEERING SUMMARY
   ========================================================================== */

/*
 * Key Summary is intentionally more concise and visually distinct
 * from the longer Overview content.
 */

.td-method-summary-box,
.td-method-key-summary {
	width: 100%;
	margin-top: 32px;
	padding: 24px 28px;
	border-left: 3px solid var(--td-method-primary);
	background-color: var(--td-method-background);
}

.td-method-summary-label,
.td-method-key-summary-label {
	margin: 0 0 12px;
	color: var(--td-method-heading);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	line-height: 1.4;
	text-transform: uppercase;
}

.td-method-summary-text,
.td-method-key-summary-content {
	color: var(--td-method-text);
}

.td-method-summary-text > :first-child,
.td-method-key-summary-content > :first-child {
	margin-top: 0;
}

.td-method-summary-text > :last-child,
.td-method-key-summary-content > :last-child {
	margin-bottom: 0;
}

.td-method-summary-text p,
.td-method-key-summary-content p {
	margin: 0 0 14px;
}

.td-method-summary-text ul,
.td-method-summary-text ol,
.td-method-key-summary-content ul,
.td-method-key-summary-content ol {
	margin: 0;
	padding-left: 22px;
}

.td-method-summary-text li,
.td-method-key-summary-content li {
	margin-bottom: 8px;
}

.td-method-summary-text li:last-child,
.td-method-key-summary-content li:last-child {
	margin-bottom: 0;
}


/* ==========================================================================
   21. METHOD HOW IT WORKS
   ========================================================================== */

/*
 * How It Works visual identity only.
 *
 * Vertical spacing is owned by the global td-section system.
 */

.td-method-how {
	background-color: var(--td-method-white);
}

.td-method-how .td-method-section-header {
	margin-bottom: 32px;
}


/*
 * The How module supports:
 *
 * 1. Diagram + explanation
 * 2. Explanation only
 */

.td-method-how-layout {
	display: grid;

	grid-template-columns:
		minmax(0, 1.08fr)
		minmax(360px, 0.92fr);

	gap: clamp(48px, 6vw, 80px);

	align-items: center;

	width: 100%;
}

.td-method-how-layout.no-diagram {
	grid-template-columns:
		minmax(0, var(--td-method-reading-width));
}

.td-method-how-content,
.td-method-how-media,
.td-method-how-diagram {
	min-width: 0;
}


/*
 * Diagram appears first on desktop to help explain the mechanism before
 * visitors read the detailed engineering explanation.
 */

.td-method-how-media,
.td-method-how-diagram {
	width: 100%;
	overflow: hidden;
	background-color: var(--td-method-background);
}

.td-method-process-diagram,
.td-method-how-image,
.td-method-how-media img,
.td-method-how-diagram img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	margin: 0;
	border-radius: 0;
	object-fit: contain;
}


/*
 * Technical diagrams often include white backgrounds.
 * A restrained border prevents the image from disappearing into
 * the section background.
 */

.td-method-how-media,
.td-method-how-diagram {
	border: 1px solid var(--td-method-border);
}


/*
 * Remove the border when no valid image is present.
 */

.td-method-how-media:empty,
.td-method-how-diagram:empty {
	display: none;
	border: 0;
}


/*
 * Engineering Note spacing is already controlled globally.
 * Here it remains aligned with the explanatory content.
 */

.td-method-how
.td-method-engineering-note {
	margin-top: 32px;
}

/* ==========================================================================
   21A. OVERVIEW & HOW RESPONSIVE LAYOUT
   ========================================================================== */

/* Tablet */

@media (max-width: 1024px) {

	.td-method-overview-grid,
	.td-method-how-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.td-method-overview-content,
	.td-method-overview-media,
	.td-method-how-content,
	.td-method-how-diagram {
		width: 100%;
		min-width: 0;
	}

	.td-method-overview-media,
	.td-method-how-diagram {
		max-width: 820px;
	}
}


/* Mobile */

@media (max-width: 767px) {

	.td-method-overview-grid,
	.td-method-how-layout {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}

	.td-method-overview-content,
	.td-method-overview-media,
	.td-method-how-content,
	.td-method-how-diagram {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}
}

/* ==========================================================================
   22. METHOD WORKFLOW
   ========================================================================== */

/*
 * Workflow visual identity only.
 *
 * Vertical spacing is owned by:
 * .td-section + .td-section--large-vertical
 */

.td-method-workflow {
	background: var(--td-method-background);
}


/* ==========================================================================
   23. WORKFLOW OVERVIEW IMAGE
   ========================================================================== */

.td-method-workflow-overview-image {
	margin-bottom: 56px;
	border: 1px solid var(--td-method-border);
	background: #fff;
	overflow: hidden;
}

.td-method-workflow-image {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}


/* ==========================================================================
   24. WORKFLOW STEP LIST
   ========================================================================== */

.td-method-workflow-steps {

	position: relative;

	display: flex;

	flex-direction: column;

	gap: 32px;

	margin: 0;

	padding: 0;

	list-style: none;

}


/*
 * Vertical timeline
 */

.td-method-workflow-steps::before {

	content: "";

	position: absolute;

	top: 18px;

	bottom: 18px;

	left: 22px;

	width: 1px;

	background: var(--td-method-border);

}


/* ==========================================================================
   25. WORKFLOW STEP
   ========================================================================== */

.td-method-workflow-step {

	position: relative;

	display: grid;

	grid-template-columns:

		44px

		minmax(0,1fr);

	column-gap: 28px;

	align-items: start;

}


/*
 * Step index
 */

.td-method-step-index {

	position: relative;

	z-index: 2;

	display: flex;

	align-items: center;

	justify-content: center;

	width: 44px;

	height: 44px;

	background: var(--td-method-primary);

	color: #fff;

	font-size: 14px;

	font-weight: 700;

	line-height: 1;

	border-radius: 0;

}


/*
 * Step body
 */

.td-method-step-body {

	min-width:0;

	background:#fff;

	border:1px solid var(--td-method-border);

	padding:32px;

	transition:
	border-color .25s ease,
	box-shadow .25s ease;

}


.td-method-workflow-step:hover
.td-method-step-body {

	border-color: var(--td-method-primary);

	box-shadow:

		0 12px 30px rgba(0,0,0,.08);

}


/* ==========================================================================
   26. STEP TYPOGRAPHY
   ========================================================================== */

.td-method-step-title {

	margin:

		0

		0

		18px;

}


.td-method-step-content {

	color: var(--td-method-text);

}


.td-method-step-content > *:first-child {

	margin-top: 0;

}


.td-method-step-content > *:last-child {

	margin-bottom: 0;

}


.td-method-step-content p {

	margin:

		0

		0

		18px;

}


.td-method-step-content ul,

.td-method-step-content ol {

	margin:

		0

		0

		20px;

	padding-left: 22px;

}


.td-method-step-content li {

	margin-bottom: 8px;

}

/* ==========================================================================
   27. STEP IMAGE
   ========================================================================== */

/*
 * Optional image for an individual workflow step.
 */

.td-method-step-media {

	display:block;

	width:100%;

	margin-top:24px;

	overflow:hidden;

	background:var(--td-method-background);

	border:1px solid var(--td-method-border);

}

.td-method-step-image {

	display: block;

	width: 100%;

	height: auto;

	object-fit: cover;

}


/*
 * Prevent very wide landscape images from becoming visually dominant.
 */

@media (min-width: 992px) {

	.td-method-step-image {

		max-height: 420px;

		object-position: center;

	}

}


/* ==========================================================================
   28. RELATED PRODUCTS
   ========================================================================== */

/*
 * Recommended products referenced by the current workflow step.
 */

.td-method-step-products {

	margin-top: 28px;

}


.td-method-step-products-label {

	margin: 0 0 14px;

	font-size: 12px;

	font-weight: 700;

	letter-spacing: 1.5px;

	text-transform: uppercase;

	color: var(--td-method-heading);

}


.td-method-step-products-list {

	display: flex;

	flex-wrap: wrap;

	gap: 10px;

	margin: 0;

	padding: 0;

	list-style: none;

}


.td-method-step-products-list li {

	margin: 0;

	padding: 0;

}


.td-method-step-products-list a {

	display: inline-flex;

	align-items: center;

	justify-content: center;

	padding: 7px 12px;

	border: 1px solid var(--td-method-border);

	background: #fff;

	color: var(--td-method-heading);

	font-size: 13px;

	font-weight: 600;

	line-height: 1.35;

	text-decoration: none;

	transition:

		border-color .25s ease,

		background-color .25s ease,

		color .25s ease;

}


.td-method-step-products-list a:hover,

.td-method-step-products-list a:focus {

	border-color: var(--td-method-primary);

	background: var(--td-method-primary);

	color: #fff;

}


/* ==========================================================================
   29. ENGINEERING NOTE
   ========================================================================== */

.td-method-workflow
.td-method-engineering-note {

	margin-top: 40px;

	background: #fff;

}


/* ==========================================================================
   30. TABLET RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {

	.td-method-workflow-overview-image {

		margin-bottom: 48px;

	}

	.td-method-workflow-step {

		column-gap: 22px;

	}

	.td-method-step-body {

		padding: 28px;

	}

}


/* ==========================================================================
   31. MOBILE RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {

	.td-method-workflow-overview-image {

		margin-bottom: 36px;

	}

	.td-method-workflow-steps {

		gap: 22px;

	}

	/*
	 * Remove the timeline on mobile.
	 */

	.td-method-workflow-steps::before {

		display: none;

	}

	.td-method-workflow-step {

		grid-template-columns: 1fr;

		row-gap: 14px;

	}

	.td-method-step-index {

		width: 40px;

		height: 40px;

		font-size: 13px;

	}

	.td-method-step-body {

		padding: 22px 20px;

	}

	.td-method-step-title {

		margin-bottom: 14px;

	}

	.td-method-step-content p {

		margin-bottom: 16px;

	}

	.td-method-step-media {

		margin-top: 20px;

	}

	.td-method-step-products {

		margin-top: 22px;

	}

	.td-method-workflow
	.td-method-engineering-note {

		margin-top: 32px;

	}

}


/* ==========================================================================
   32. SMALL MOBILE
   ========================================================================== */

@media (max-width: 479px) {

	.td-method-workflow-overview-image {

		margin-bottom: 28px;

	}

	.td-method-step-body {

		padding: 18px;

	}

	.td-method-step-products-list {

		flex-direction: column;

		align-items: stretch;

	}

	.td-method-step-products-list a {

		width: 100%;

		justify-content: center;

	}

}

/* ==========================================================================
   33. METHOD ADVANTAGES & LIMITATIONS
   ========================================================================== */

/*
 * Advantages & Limitations visual identity only.
 *
 * Vertical spacing is owned by:
 * .td-section + .td-section--large-top
 */

.td-method-advantages {
	background-color: var(--td-method-white);
}


/* ==========================================================================
   34. ADVANTAGES & LIMITATIONS GRID
   ========================================================================== */

/*
 * Two complete content blocks:
 *
 * Advantages | Limitations
 */

.td-method-advantages-grid {
	display: grid;
	grid-template-columns:
		repeat(2, minmax(0, 1fr));
	gap: 32px;
	width: 100%;
}


/*
 * Graceful one-column rendering when only one content block exists.
 */

.td-method-advantages-grid.td-one-column {
	grid-template-columns:
		minmax(0, var(--td-method-reading-width));
}

.td-method-advantages-grid.td-two-column {
	grid-template-columns:
		repeat(2, minmax(0, 1fr));
}


/* ==========================================================================
   35. EVALUATION CARDS
   ========================================================================== */

.td-method-evaluation-card {
	min-width: 0;
	padding: 32px;
	border: 1px solid var(--td-method-border);
	border-radius: 0;
	background-color: var(--td-method-white);
	box-shadow: none;

	transition:
		border-color var(--td-method-transition),
		box-shadow var(--td-method-transition);
}


/*
 * Restrained industrial distinction between the two evaluations.
 */

.td-method-advantages-card {
	border-top: 3px solid var(--td-method-primary);
}

.td-method-limitations-card {
	border-top: 3px solid var(--td-method-heading);
}


/*
 * Hover remains restrained:
 *
 * - No movement
 * - No scaling
 * - Border emphasis
 * - Soft shadow only
 */

.td-method-evaluation-card:hover {
	border-right-color: var(--td-method-primary);
	border-bottom-color: var(--td-method-primary);
	border-left-color: var(--td-method-primary);

	box-shadow:
		0 12px 24px -10px
		rgba(31, 41, 55, 0.14);

	transform: none;
}


/* ==========================================================================
   36. EVALUATION HEADERS
   ========================================================================== */

.td-method-evaluation-header {
	margin: 0 0 24px;
	padding: 0 0 20px;
	border-bottom: 1px solid var(--td-method-border);
}

.td-method-evaluation-title {
	margin: 0;
	color: var(--td-method-heading);
}


/* ==========================================================================
   37. EVALUATION CONTENT
   ========================================================================== */

.td-method-evaluation-card
.td-method-rich-text {
	width: 100%;
	max-width: none;
}


/*
 * Slightly reduce paragraph spacing inside evaluation cards.
 */

.td-method-evaluation-card
.td-method-rich-text p {
	margin-bottom: 18px;
}


/*
 * Lists are the preferred presentation for advantages and limitations.
 */

.td-method-evaluation-card
.td-method-rich-text ul,
.td-method-evaluation-card
.td-method-rich-text ol {
	margin-bottom: 20px;
	padding-left: 22px;
}

.td-method-evaluation-card
.td-method-rich-text li {
	margin-bottom: 12px;
	padding-left: 4px;
}

.td-method-evaluation-card
.td-method-rich-text li:last-child {
	margin-bottom: 0;
}


/*
 * Advantage list markers use the primary brand accent.
 */

.td-method-advantages-card
.td-method-rich-text li::marker {
	color: var(--td-method-primary);
}


/*
 * Limitation markers remain visually neutral.
 */

.td-method-limitations-card
.td-method-rich-text li::marker {
	color: var(--td-method-heading);
}


/* ==========================================================================
   38. EVALUATION INTERNAL HEADINGS
   ========================================================================== */

.td-method-evaluation-card
.td-method-rich-text h3 {
	margin-top: 28px;
	margin-bottom: 14px;
}

.td-method-evaluation-card
.td-method-rich-text h4 {
	margin-top: 22px;
	margin-bottom: 12px;
}


/* ==========================================================================
   39. ADVANTAGES — TABLET RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {

	.td-method-advantages-grid {
		gap: 24px;
	}

	.td-method-evaluation-card {
		padding: 28px;
	}
}


/* ==========================================================================
   40. ADVANTAGES — MOBILE RESPONSIVE
   ========================================================================== */

@media (max-width: 767px) {

	.td-method-advantages-grid,
	.td-method-advantages-grid.td-two-column,
	.td-method-advantages-grid.td-one-column {
		grid-template-columns:
			minmax(0, 1fr);
		gap: 20px;
	}

	.td-method-evaluation-card {
		width: 100%;
		min-width: 0;
		padding: 22px 20px;
	}

	.td-method-evaluation-header {
		margin-bottom: 20px;
		padding-bottom: 16px;
	}

	.td-method-evaluation-card
	.td-method-rich-text p {
		margin-bottom: 16px;
	}

	.td-method-evaluation-card
	.td-method-rich-text li {
		margin-bottom: 10px;
	}
}


/* ==========================================================================
   41. ADVANTAGES — SMALL MOBILE
   ========================================================================== */

@media (max-width: 479px) {

	.td-method-evaluation-card {
		padding: 20px 18px;
	}
}

/* ==========================================================================
   42. METHOD RECOMMENDED PRODUCTS
   ========================================================================== */

/*
 * Recommended Products section.
 *
 * Responsibilities:
 *
 * - Product grid layout
 * - Product card spacing
 * - Engineering recommendation note
 *
 * Container and horizontal spacing are inherited from:
 *
 * .td-method-page .td-section > .ct-container
 *
 * Do NOT redefine container width here.
 */

.td-method-products {
	background-color: var(--td-method-white);
}


/* ==========================================================================
   45. PRODUCT ENGINEERING NOTE
   ========================================================================== */

/*
 * Uses shared engineering note component.
 *
 * Only additional spacing modifier is required.
 */

.td-method-products-note {

	margin-top: 48px;

}


/* ==========================================================================
   46. PRODUCT RESPONSIVE
   ========================================================================== */


/* Mobile */

@media (max-width: 767px) {

	.td-method-products-note {

		margin-top: 32px;

	}


}



/* ==========================================================================
   47. METHOD RELATED APPLICATIONS
   ========================================================================== */

/*
 * Related Applications provides navigation
 * between Drilling Methods and Application taxonomy pages.
 *
 * No images are used.
 *
 * Responsibilities:
 *
 * - Application card layout
 * - Application taxonomy navigation
 * - Future scalable entry point
 */

.td-method-applications {

	background-color: var(--td-method-white);

}


/* ==========================================================================
   48. APPLICATION GRID
   ========================================================================== */

.td-method-applications-grid {

	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	gap: 32px;

	width: 100%;

}


/*
 * Empty state protection.
 */

.td-method-applications-grid:empty {

	display: none;

}


/* ==========================================================================
   49. APPLICATION CARD
   ========================================================================== */

/*
 * Industrial taxonomy navigation card.
 *
 * Style language follows:
 *
 * - Product Card
 * - Advantages Card
 *
 * But remains lighter because it links to taxonomy pages.
 */

.td-method-application-card {

	display: flex;

	flex-direction: column;

	min-width: 0;

	height: 100%;

	padding: 32px;

	background: var(--td-method-white);

	border: 1px solid var(--td-method-border);

	border-radius: 0;

	transition:

		border-color var(--td-method-transition),

		box-shadow var(--td-method-transition);

}


/*
 * Hover:
 *
 * No movement.
 *
 * Only visual emphasis.
 */

.td-method-application-card:hover {

	border-color: var(--td-method-primary);

	box-shadow:

		0 12px 30px rgba(0,0,0,.08);

}


/* --------------------------------------------------------------------------
   Application Header
   -------------------------------------------------------------------------- */


.td-method-application-header {

	margin-bottom: 18px;

}


.td-method-application-title {

	margin: 0;

	color: var(--td-method-heading);

	font-size: 22px;

	line-height: 1.35;

}


.td-method-application-title a {

	color: inherit;

	text-decoration: none;

	transition:

		color var(--td-method-transition);

}


.td-method-application-title a:hover,

.td-method-application-title a:focus {

	color: var(--td-method-primary);

}


/* --------------------------------------------------------------------------
   Application Content
   -------------------------------------------------------------------------- */


.td-method-application-content {

	flex: 1;

	margin-bottom: 28px;

	color: var(--td-method-text);

	font-size: 15px;

	line-height: 1.7;

}


.td-method-application-content > :first-child {

	margin-top: 0;

}


.td-method-application-content > :last-child {

	margin-bottom: 0;

}


.td-method-application-content p {

	margin-bottom: 16px;

}


/* --------------------------------------------------------------------------
   Application Action
   -------------------------------------------------------------------------- */


.td-method-application-action {

	margin-top: auto;

}


.td-method-card-link {

	display: inline-flex;

	align-items: center;

	color: var(--td-method-primary);

	font-size: 14px;

	font-weight: 700;

	text-decoration: none;

	transition:

		color var(--td-method-transition);

}


.td-method-card-link::after {

	content: " →";

	transition:

		transform var(--td-method-transition);

}


.td-method-card-link:hover,

.td-method-card-link:focus {

	color: var(--td-method-primary-hover);

}


.td-method-card-link:hover::after,

.td-method-card-link:focus::after {

	transform: translateX(4px);

}


/* ==========================================================================
   50. APPLICATION RESPONSIVE
   ========================================================================== */


/* Tablet */

@media (max-width: 999px) {


	.td-method-applications-grid {

		grid-template-columns:

			repeat(2, minmax(0, 1fr));

		gap: 24px;

	}


	.td-method-application-card {

		padding: 28px;

	}

}


/* Mobile */

@media (max-width: 767px) {


	.td-method-applications-grid {

		grid-template-columns:

			minmax(0, 1fr);

		gap: 20px;

	}


	.td-method-application-card {

		padding: 22px 20px;

	}


	.td-method-application-title {

		font-size: 20px;

	}

}


/* Small Mobile */

@media (max-width: 479px) {


	.td-method-application-card {

		padding: 20px 18px;

	}

}

/* ==========================================================================
   51. METHOD RELATED METHODS
   ========================================================================== */

/*
 * Related Methods provides navigation between
 * different drilling method taxonomy pages.
 *
 * Example:
 *
 * DTH Drilling
 *      ↓
 * Related:
 * - Top Hammer Drilling
 * - Rotary Drilling
 *
 *
 * No images.
 *
 * Uses the same industrial taxonomy card system:
 *
 * - Applications
 * - Products
 *
 */


/* ==========================================================================
   52. RELATED METHODS SECTION
   ========================================================================== */


.td-method-related-methods {

	background-color: var(--td-method-white);

}



/* ==========================================================================
   53. RELATED METHODS GRID
   ========================================================================== */


.td-method-related-grid {

	display: grid;

	grid-template-columns:

		repeat(3, minmax(0, 1fr));

	gap: 32px;

	width:100%;

}


/*
 * Empty protection.
 */

.td-method-related-grid:empty {

	display:none;

}



/* ==========================================================================
   54. RELATED METHOD CARD
   ========================================================================== */


/*
 * Taxonomy navigation card.
 *
 * Same visual language as:
 *
 * .td-method-application-card
 *
 */


.td-method-related-card {

	display:flex;

	flex-direction:column;

	min-width:0;

	height:100%;

	overflow:hidden;

	background:
		var(--td-method-white);

	border:
		1px solid var(--td-method-border);

	border-radius:0;

	transition:

		border-color var(--td-method-transition),

		box-shadow var(--td-method-transition);

}



/*
 * Hover:
 *
 * No transform.
 *
 * No animation movement.
 */

.td-method-related-card:hover {

	border-color:
		var(--td-method-primary);

	box-shadow:

		0 12px 30px rgba(0,0,0,.08);

}



/* ==========================================================================
   55. RELATED METHOD HEADER
   ========================================================================== */


.td-method-related-header {

	margin-bottom:18px;

}



.td-method-related-title {

	margin:0;

	color:
		var(--td-method-heading);

	font-size:22px;

	line-height:1.35;

}



.td-method-related-title a {

	color:inherit;

	text-decoration:none;

	transition:

		color var(--td-method-transition);

}



.td-method-related-title a:hover,

.td-method-related-title a:focus {

	color:
		var(--td-method-primary);

}



/* ==========================================================================
   56. RELATED METHOD ACTION
   ========================================================================== */


.td-method-related-action {

	margin-top:auto;

}



/*
 * Reuse shared card link.
 *
 * .td-method-card-link
 *
 * is already defined in Applications section.
 */


/* ==========================================================================
   57. RELATED METHODS RESPONSIVE
   ========================================================================== */


/* Tablet */

@media (max-width:991px) {


	.td-method-related-grid {

		grid-template-columns:

			repeat(2,minmax(0,1fr));

		gap:24px;

	}


	.td-method-related-header {

		padding:

			22px

			22px

			10px;

	}


	.td-method-related-action {

		padding:

			0

			22px

			22px;

	}


}



/* Mobile */

@media (max-width:767px) {


	.td-method-related-grid {

		grid-template-columns:

			minmax(0,1fr);

		gap:20px;

	}


	.td-method-related-header {

		padding:

			20px

			20px

			10px;

	}


	.td-method-related-action {

		padding:

			0

			20px

			20px;

	}


	.td-method-related-title {

		font-size:20px;

	}
}


/* ==========================================================================
   58. METHOD SELECTION GUIDANCE
   ========================================================================== */

/*
 * Technical Selection Guidance section.
 *
 * Purpose:
 *
 * Help engineers understand:
 *
 * - How to select the drilling method
 * - What information is required for quotation
 *
 * This is an engineering decision support module.
 *
 * Visual language follows:
 *
 * - Advantages Cards
 * - Application Cards
 * - Related Method Cards
 */


.td-method-selection {

	background-color: var(--td-method-white);

}


/* ==========================================================================
   59. SELECTION GRID
   ========================================================================== */


/*
 * Dynamic layout:
 *
 * Two content blocks:
 *
 * Guidance | Quotation Information
 *
 * One content block:
 *
 * Full width
 */


.td-method-selection-grid {

	display:grid;

	width:100%;

	gap:32px;

}



.td-method-selection-grid.td-two-column {

	grid-template-columns:

		repeat(2,minmax(0,1fr));

}



.td-method-selection-grid.td-one-column {

	grid-template-columns:

		minmax(0,var(--td-method-reading-width));

}


/* ==========================================================================
   60. SELECTION CARD
   ========================================================================== */


/*
 * Engineering information card.
 *
 * Same design language as:
 *
 * .td-method-evaluation-card
 *
 */


.td-method-selection-card {

	min-width:0;

	padding:32px;

	border:

		1px solid var(--td-method-border);

	background:

		var(--td-method-white);

	border-radius:0;

	transition:

		border-color var(--td-method-transition),

		box-shadow var(--td-method-transition);

}



/*
 * Restrained hover.
 */

.td-method-selection-card:hover {

	border-color:

		var(--td-method-primary);

	box-shadow:

		0 12px 30px rgba(0,0,0,.08);

}


/*
 * Differentiate the two information types.
 */


.td-method-selection-guidance {

	border-top:

		3px solid var(--td-method-primary);

}


.td-method-required-info {

	border-top:

		3px solid var(--td-method-heading);

}



/* ==========================================================================
   61. SELECTION TYPOGRAPHY
   ========================================================================== */


/*
 * Small engineering label.
 *
 * Same language as:
 *
 * Engineering Note
 * Application Consideration
 */


.td-method-selection-label {

	margin-bottom:20px;

	padding-bottom:16px;

	border-bottom:

		1px solid var(--td-method-border);

	color:

		var(--td-method-heading);

	font-size:12px;

	font-weight:700;

	letter-spacing:1.5px;

	line-height:1.4;

	text-transform:uppercase;

}


/*
 * Rich text inside cards.
 */

.td-method-selection-card
.td-method-rich-text {

	max-width:none;

}



.td-method-selection-card
.td-method-rich-text p {

	margin-bottom:18px;

}



.td-method-selection-card
.td-method-rich-text ul,

.td-method-selection-card
.td-method-rich-text ol {

	margin-bottom:20px;

	padding-left:22px;

}



.td-method-selection-card
.td-method-rich-text li {

	margin-bottom:10px;

}



.td-method-selection-card
.td-method-rich-text li:last-child {

	margin-bottom:0;

}



/*
 * Internal headings.
 */

.td-method-selection-card
.td-method-rich-text h3 {

	margin:

		28px

		0

		14px;

}



.td-method-selection-card
.td-method-rich-text h4 {

	margin:

		22px

		0

		12px;

}


/* ==========================================================================
   62. SELECTION RESPONSIVE
   ========================================================================== */


/* Tablet */

@media (max-width:991px) {


	.td-method-selection-grid.td-two-column {

		grid-template-columns:

			repeat(2,minmax(0,1fr));

		gap:24px;

	}


	.td-method-selection-card {

		padding:28px;

	}


}



/* Mobile */

@media (max-width:767px) {


	.td-method-selection-grid,

	.td-method-selection-grid.td-two-column,

	.td-method-selection-grid.td-one-column {

		grid-template-columns:

			minmax(0,1fr);

		gap:20px;

	}


	.td-method-selection-card {

		padding:22px 20px;

	}
}



/* Small Mobile */

@media (max-width:479px) {


	.td-method-selection-card {

		padding:20px 18px;

	}
}

/* ==========================================================================
   64. METHOD FAQ SECTION
   ========================================================================== */

/*
 * Shared FAQ Engine output.
 *
 * Structure:
 *
 * Section
 *  |
 *  ct-container
 *      |
 *      section header
 *      |
 *      FAQ accordion
 */


.td-faq-section {

	background-color:
		var(--td-method-white);

}



/* ==========================================================================
   11. METHOD DOWNLOADS SECTION
   ========================================================================== */


/*
 * Shared Downloads Component
 *
 * Structure:
 *
 * .td-downloads-section
 *      |
 *      .ct-container
 *          |
 *          .td-downloads-grid
 *              |
 *              .td-download-card
 */


/* ==========================================================================
   SECTION
   ========================================================================== */


.td-downloads-section {

	background:
		var(--td-method-background);

}



/* ==========================================================================
   DOWNLOAD GRID
   ========================================================================== */


.td-downloads-grid {

	display:

		flex;

	flex-direction:

		column;

	gap:

		20px;

}



/* ==========================================================================
   DOWNLOAD CARD
   ========================================================================== */


.td-download-card {

	display:

		flex;

	align-items:

		center;

	justify-content:

		space-between;

	gap:

		32px;


	padding:

		28px 32px;


	background:

		var(--td-method-white);


	border:

		1px solid var(--td-method-border);


	transition:

		border-color .25s ease,
		box-shadow .25s ease;

}



.td-download-card:hover {

	border-color:

		var(--td-method-primary);


	box-shadow:

		0 8px 24px rgba(
			0,
			0,
			0,
			0.06
		);

}



/* ==========================================================================
   DOWNLOAD META
   ========================================================================== */


.td-download-meta {

	display:

		flex;

	align-items:

		center;

	gap:

		20px;

	flex:1;

}



/* ==========================================================================
   ICON
   ========================================================================== */


.td-download-icon {

	width:

		48px;

	height:

		48px;


	display:

		flex;

	align-items:

		center;

	justify-content:

		center;


	flex:none;


	background:

		#f5f6f7;


	color:

		var(--td-method-primary);

}



.td-download-svg {

	width:

		24px;

	height:

		24px;

}



/* ==========================================================================
   DETAILS
   ========================================================================== */


.td-download-details {

	min-width:

		0;

}



.td-download-title {

	margin:

		0 0 8px;


	font-size:

		18px;


	line-height:

		1.4;


	font-weight:

		700;


	color:

		var(--td-method-heading);

}



.td-download-info {

	font-size:

		14px;


	line-height:

		1.5;


	color:

		var(--td-method-text);

}



.td-download-separator {

	margin:

		0 6px;

}



/* ==========================================================================
   DOWNLOAD BUTTON
   ========================================================================== */


.td-download-button {

	flex:none;


	display:

		inline-flex;


	align-items:

		center;


	justify-content:

		center;


	min-width:

		120px;


	padding:

		12px 24px;


	border:

		1px solid var(--td-method-primary);


	color:

		var(--td-method-primary);


	background:

		transparent;


	font-size:

		15px;


	font-weight:

		700;


	text-decoration:

		none;


	transition:

		background-color .25s ease,
		color .25s ease;

}



.td-download-button:hover {

	background:

		var(--td-method-primary);


	color:

		#ffffff;

}



/* ==========================================================================
   RESPONSIVE
   ========================================================================== */


@media (max-width: 767px) {


	.td-download-card {


		flex-direction:

			column;


		align-items:

			flex-start;


		padding:

			24px;


		gap:

			24px;


	}



	.td-download-meta {


		width:

			100%;


	}



	.td-download-button {


		width:

			100%;
	}

}


.td-method-related-card {
    overflow:hidden;
}


.td-method-related-image {
    aspect-ratio:4 / 3;
    overflow:hidden;
	background:
		var(--td-method-background);
}


.td-method-related-image img {
    display:block;
	width:100%;
    height:100%;
    object-fit:cover;
	transition:
		transform var(--td-method-transition);
}

.td-method-related-card:hover
.td-method-related-image img {

	transform:scale(1.03);

}


.td-method-related-header {
    padding:24px 24px 12px;
	margin:0;
}


.td-method-related-action {
	margin-top:auto;
    padding:0 24px 24px;
}

@media (max-width:768px){

	.td-method-hero-actions {

		gap:16px;

	}

}