/*
 * Product pages of design A (Clamp Cylinders, Breakout Machine Parts, Tong
 * Dies, Hand's Off, Rentals, Assembly Inventory, TorqTek Advantage): page
 * hero with breadcrumbs
 * and the sections below it. Colors, fonts and the H1 size come from
 * theme.json; here only spacing, widths and the hero layout. Loaded only
 * where such a section is on the page.
 */

/* Page hero (.p-hero): white band with a line under it, 32px above and 44px
   under the content, as in design A. */
.torqtek-page-hero {
	padding-block: 2rem 2.75rem;
	border-block-end: 1px solid var(--wp--custom--color--rule);
}

/* Breadcrumbs: small muted text, "/" between items (0.9rem: design 0.92rem,
   merged with the x-small size, decisions.md 2026-10-10). */
.torqtek-page-hero .wp-block-breadcrumbs.torqtek-crumbs {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--muted);
}

.torqtek-crumbs a {
	color: inherit;
}

/* Lead under the H1: larger muted text, no wider than 40em; buttons 1.5rem
   under it. The H1 and the lead keep the theme's 1rem block gap. */
.torqtek-page-hero .torqtek-page-lead {
	max-inline-size: var(--wp--custom--measure--lead);
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--muted);
}

/* TorqTek Advantage: the client's slogan as a large line under the H1, in
   the heading font and the steel color (decisions.md 2026-10-15); 0.75rem
   under the H1, the lead 1rem under it. */
.torqtek-page-hero .torqtek-page-slogan {
	margin-block-start: 0.75rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.25rem, 1.1rem + 0.75vw, 1.6rem);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--heading);
	color: var(--wp--preset--color--steel);
}

/* Hero without buttons (TorqTek Advantage): 1.5rem of room under the lead,
   as in design A (its bottom margin there). Stronger than WordPress'
   ":root :where(.is-layout-flow) > :last-child". */
.torqtek-page-hero .wp-block-group > .torqtek-page-lead:last-child {
	margin-block-end: 1.5rem;
}

/* Buttons 1.5rem under the lead: in the text column (hero with a video) or
   in the inner group (hero without a picture). */
.torqtek-page-hero :is(.wp-block-column, .wp-block-group) > .torqtek-page-actions {
	margin-block-start: 1.5rem;
	gap: 0.75rem 1rem;
}

/* Text and picture/video side by side from 1000px, as in the design (core
   columns: 782px); the video then takes the whole column. */
@media (min-width: 782px) and (max-width: 999.98px) {
	.torqtek-page-hero-cols.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.torqtek-page-hero-cols.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

.torqtek-page-hero .wp-block-video.torqtek-video {
	max-inline-size: none;
}

/* Product hero (.pd-hero, Tong Dies): 24px above the breadcrumbs; photo
   4:3 on the left and the text on the right from 960px, as in design A
   (core columns: 782px), the photo on top on smaller screens. */
.torqtek-page-hero.torqtek-product-hero {
	padding-block-start: 1.5rem;
}

@media (min-width: 782px) and (max-width: 959.98px) {
	.torqtek-product-cols.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.torqtek-product-cols.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

.torqtek-product-cols .wp-block-image.torqtek-product-photo {
	margin: 0;
}

.torqtek-product-photo img {
	display: block;
	box-sizing: border-box;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--wp--custom--color--rule);
	background-color: var(--wp--custom--color--photo-bg);
}

/* Muted category line over the H1, 0.5rem above it; the facts 1.5rem under
   the lead (the buttons 1.5rem under the facts: rule above). */
.torqtek-product-cols .torqtek-product-cat {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.torqtek-product-cols .torqtek-product-cat + h1 {
	margin-block-start: 0.5rem;
}

.torqtek-product-cols .wp-block-column > .wp-block-table {
	margin-block-start: 1.5rem;
}

/* Text and photos side by side from 900px, as in the design (core columns:
   782px). */
@media (min-width: 782px) and (max-width: 899.98px) {
	.torqtek-two-cols.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.torqtek-two-cols.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* TorqTek Advantage: text and a square photo (.adv-row of design A), side
   by side from 900px, half and half with 4rem between them, the photo
   vertically centered on the text; under 900px the photo stands under the
   text (core columns: 782px). torqtek-adv-row--photo-left puts the photo on
   the left from 900px; on smaller screens it stays under the text, as in
   the design. The text keeps 1rem under its last paragraph, as rendered in
   design A (browser margins there), so the centering matches. */
@media (min-width: 782px) and (max-width: 899.98px) {
	.torqtek-adv-row.wp-block-columns {
		flex-wrap: wrap !important;
	}

	.torqtek-adv-row.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

@media (min-width: 900px) {
	.torqtek-adv-row--photo-left > .wp-block-column:has(.torqtek-adv-photo) {
		order: -1;
	}
}

.torqtek-adv-row > .wp-block-column > p {
	max-inline-size: var(--wp--custom--measure--text);
}

.torqtek-adv-row > .wp-block-column > p:last-child {
	margin-block-end: 1rem;
}

/* Designed for quick service: the video 2.5rem under the photo and text. */
.torqtek-psec .wp-block-group > .torqtek-adv-video {
	margin-block-start: 2.5rem;
}

.torqtek-adv-row .wp-block-image.torqtek-adv-photo {
	margin: 0;
}

.torqtek-adv-photo img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* Two sizes: 1.5rem of room under the datasheet, as rendered in design A
   (margin of the list there). Stronger than WordPress' ":root
   :where(.is-layout-flow) > :last-child". */
.torqtek-sizes .wp-block-column > .wp-block-table {
	margin-block-end: 1.5rem;
}

/* Text in product sections: paragraphs no wider than 38em; the last
   paragraph, list or buttons keep 1rem of room under them, as rendered in
   design A (browser margins there). Stronger than WordPress' ":root
   :where(.is-layout-flow) > :last-child". Only the section's own content
   group, not groups inside it (brochure rows). */
.torqtek-psec > .wp-block-group > p {
	max-inline-size: var(--wp--custom--measure--text);
}

.torqtek-psec > .wp-block-group > :is(p, ul, .wp-block-buttons):last-child {
	margin-block-end: 1rem;
}

/* Bulleted list (.p-list): no wider than 40em, small gap between items. */
.torqtek-psec ul.torqtek-plist {
	max-inline-size: var(--wp--custom--measure--lead);
	padding-inline-start: 1.25rem;
}

.torqtek-plist > li + li {
	margin-block-start: 0.4rem;
}

/* Cylinder rebuilds, Pricing, How to order (Tong Dies, Clamp Cylinder
   Parts), How to check availability (Assembly Inventory), How to request a
   rental (Rentals): the
   buttons end the section with no extra room under them, as in design A (the links stand
   outside a paragraph there). */
:is(.torqtek-rebuilds, .torqtek-pricing, .torqtek-die-order, .torqtek-cparts-order, .torqtek-inv-check, .torqtek-rent-request) .wp-block-group > .wp-block-buttons:last-child {
	margin-block-end: 0;
}

/* Brochure: 1.5rem of room under the list, as in design A. */
.torqtek-psec > .wp-block-group > .torqtek-doc-list:last-child {
	margin-block-end: 1.5rem;
}

/* Tong Dies, Available sizes: the table 1rem under the paragraph and right
   at the end of the section, as in design A (the "Coverage" style has
   1.25rem around it). */
.torqtek-die-sizes .wp-block-group > .wp-block-table.is-style-torqtek-coverage {
	margin-block: 1rem 0;
}

/* Tong Dies, Available sizes: a small gallery under the table (photos 3:4,
   torqtek-photos, enlarge on click), 1.5rem under it and no wider than
   28rem (decisions.md 2026-10-27). */
.torqtek-die-sizes .wp-block-group > .wp-block-gallery.torqtek-photos--narrow {
	max-inline-size: 28rem;
	margin-block: 1.5rem 0;
}

/* Tong Dies and Clamp Cylinder Parts, How to order: 0.5rem under the step
   titles (design A, .p-sec h3; on the home page none) and the buttons
   1.5rem under the steps. */
.torqtek-psec .torqtek-step-list > .torqtek-step > h3 {
	margin-block-end: 0.5rem;
}

:is(.torqtek-die-order, .torqtek-cparts-order) .wp-block-group > .torqtek-step-list + .wp-block-buttons {
	margin-block-start: 1.5rem;
}

/* Assembly Inventory, Available now, and Rentals, What you can rent: the
   link under the text, bold and at least 44px high, as in design A
   (.ai-ask). */
:is(.torqtek-inv-ask, .torqtek-rent-ask) a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-weight: 600;
}

/* TorqTek Advantage, Tested, with a warranty: the 2:1 photo across the
   column, 2rem under the paragraph and right at the end of the section, as
   in design A (.adv-wide). */
.torqtek-psec .wp-block-group > .wp-block-image.torqtek-adv-wide {
	margin-block: 2rem 0;
}

.torqtek-adv-wide img {
	display: block;
	inline-size: 100%;
	block-size: auto;
}

/* Contact, Request a quote: the form on the left, "Contact details" on the
   right (1.4 : 1, 2.5rem between them) from 1000px, as in design A
   (.p-contact); on smaller screens the details stand under the form. */
.torqtek-contact-cols.wp-block-group {
	display: grid;
	gap: 2.5rem;
}

@media (min-width: 1000px) {
	.torqtek-contact-cols.wp-block-group {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		align-items: start;
	}
}

.torqtek-contact-cols.wp-block-group > * {
	margin: 0;
}

.torqtek-contact-main.wp-block-group > p {
	max-inline-size: var(--wp--custom--measure--text);
}

.torqtek-contact-main.wp-block-group > .torqtek-form {
	margin-block-start: 1rem;
}

/* Contact details: "Where we work" 1.75rem under the hours, its text 0.5rem
   under it, as in design A (.p-sec h3). */
.torqtek-contact-details.wp-block-group > h3 {
	margin-block: 1.75rem 0;
}

.torqtek-contact-details.wp-block-group > h3 + p {
	margin-block-start: 0.5rem;
}

/* Become a Customer, How it works: 1.5rem under the steps at the end of the
   section, as rendered in design A (margin of the list there). */
.torqtek-bac-steps .wp-block-group > .torqtek-step-list:last-child {
	margin-block-end: 1.5rem;
}

/* Become a Customer, Apply now: the form where design A has its paragraph
   under the H2 (the WordPress gap between blocks), 1rem of room under it. */
.torqtek-bac-apply .wp-block-group > .torqtek-form:last-child {
	margin-block-end: 1rem;
}