/*
 * Cards of design A (torqtek-cards / torqtek-card): white card with a thin
 * border, photo 16:10 on top (Cover block, focal point set in the editor),
 * H3, muted text and a link pinned to the bottom, so the links of one row
 * line up. 1 card per row on phones, 2 from 768px, 4 from 1280px; any extra
 * card (a duplicate) simply starts a new row.
 */

.torqtek-cards {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1.25rem;
}

@media (min-width: 768px) {
	.torqtek-cards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1280px) {
	.torqtek-cards {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Grid gaps replace the block gap WordPress puts between blocks. */
.torqtek-cards > .torqtek-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--wp--custom--color--rule);
	border-radius: var(--wp--preset--border-radius--small);
	background-color: var(--wp--preset--color--surface);
}

.torqtek-card > .torqtek-card-photo {
	min-block-size: 0;
	margin: 0;
	padding: 0;
	border-block-end: 1px solid var(--wp--custom--color--rule);
	background-color: var(--wp--custom--color--photo-bg);
}

.torqtek-card .torqtek-card-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 1.25rem;
}

.torqtek-card .torqtek-card-body > * {
	margin: 0;
}

.torqtek-card .torqtek-card-body > p {
	color: var(--wp--preset--color--muted);
}

/* Link at the bottom of the card, at least 44px tall. */
.torqtek-card .torqtek-card-body > .torqtek-card-more {
	margin-block-start: auto;
}

.torqtek-card-more a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-weight: 600;
}

/*
 * Catalog cards (torqtek-cards--catalog, Breakout Machine Parts in design
 * A): 1 per row on phones, 2 from 700px, 3 from 1100px. The photo is an
 * Image block 4:3 (3:4 for the tall rental carts) set to "Cover" with a
 * focal point, so it fills the frame without gray fields (decisions.md
 * 2026-10-27, unlike design A). "Contain" still works: the whole part with
 * 0.75rem around it on the gray photo background. A title can link to the part's page; the links at the bottom
 * (regular weight, as in the design) stand one under the other.
 */
@media (min-width: 700px) {
	.torqtek-cards.torqtek-cards--catalog {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.torqtek-cards.torqtek-cards--catalog {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.torqtek-card > .wp-block-image.torqtek-card-image {
	margin: 0;
	border-block-end: 1px solid var(--wp--custom--color--rule);
	background-color: var(--wp--custom--color--photo-bg);
}

.torqtek-card-image img {
	display: block;
	box-sizing: border-box;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 4 / 3;
}

.torqtek-card-image img[style*="contain"] {
	padding: 0.75rem;
}

.torqtek-card-image a {
	display: block;
}

.torqtek-card-image a:hover img {
	opacity: 0.9;
}

/* 1rem under the title, as in design A (0.5rem margin plus the 0.5rem gap). */
.torqtek-cards--catalog .torqtek-card .torqtek-card-body > h3 {
	margin-block-end: 0.5rem;
}

.torqtek-card-body h3 a {
	color: inherit;
	text-decoration: none;
}

.torqtek-card-body h3 a:hover {
	text-decoration: underline;
}

/* Sizes list (Tong Dies): body text color, small indent. */
.torqtek-card .torqtek-card-body > .torqtek-card-sizes {
	margin-block-start: 0.25rem;
	padding-inline-start: 1.1rem;
}

.torqtek-cards--catalog .torqtek-card .torqtek-card-body > .torqtek-card-more {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	padding-block-start: 0.5rem;
}

/* In the editor the links of one paragraph are split by a line break. */
.torqtek-cards--catalog .torqtek-card-more br {
	display: none;
}

.torqtek-cards--catalog .torqtek-card-more a {
	font-weight: 400;
}

/* Inventory cards (torqtek-card--inventory): the outline "Check
   Availability" button at the bottom of the card, so the buttons of one row
   line up. */
.torqtek-card .torqtek-card-body > .torqtek-card-action {
	margin-block-start: auto;
	padding-block-start: 0.5rem;
}

/* Two cards per row at most (torqtek-cards--two, Rentals in design A): one
   on phones, two from 700px, still two from 1100px. */
@media (min-width: 1100px) {
	.torqtek-cards.torqtek-cards--catalog.torqtek-cards--two {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}