/*
 * Catalogue
 *
 * Plain CSS on purpose. The theme's SCSS pipeline is Grunt and compiles the
 * whole of assets/scss into style.min.css; this file is enqueued separately and
 * only on catalogue pages, so it does not need to pass through that build and a
 * deploy does not depend on anyone running Grunt.
 *
 * Colours come from the theme's own :root custom properties, never hardcoded.
 * This site is a DARK theme (--page-background is #010101), so light-theme
 * borders like rgba(0,0,0,.08) are invisible on it - which is exactly how the
 * first pass of this file rendered: cards with no edges and an invisible image
 * placeholder.
 */

.catalog {
	padding: 70px 0 110px;
}

.catalog .row {
	display: flex;
	flex-wrap: wrap;
}

/* The archive has no ACF hero fields and so no background image. Without this
   it inherits hero-secondary's 586px min-height and 171px top padding and opens
   on most of a screen of nothing. The body already carries a 128px top padding
   to clear the absolutely positioned header, so this padding is measured from
   12px below the header, not from the top of the page. */
.hero-secondary--catalog {
	min-height: 0;
	padding: 60px 0 50px;
}

/* Sidebar ---------------------------------------------------------------- */

.catalog-sidebar__heading {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 14px;
	color: var(--grey);
	margin: 0 0 16px;
}

.catalog-sidebar__list,
.catalog-sidebar__sublist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.catalog-sidebar__item > a,
.catalog-sidebar__subitem > a {
	display: flex;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 0;
	text-decoration: none;
	color: var(--white);
	border-bottom: solid 1px var(--dark-grey);
	transition: color 0.2s ease;
}

.catalog-sidebar__item > a:hover,
.catalog-sidebar__subitem > a:hover {
	color: var(--accent);
}

.catalog-sidebar__item--current > a,
.catalog-sidebar__subitem--current > a {
	color: var(--accent);
	font-weight: 700;
}

.catalog-sidebar__sublist {
	padding-left: 14px;
}

.catalog-sidebar__count {
	color: var(--dark-grey);
	font-size: 13px;
}

/* Grid ------------------------------------------------------------------- */

.catalog-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
	gap: 24px;
}

.catalog-card {
	background: var(--light-background);
	border: solid 1px var(--dark-grey);
	border-radius: 8px;
	overflow: hidden;
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.catalog-card:hover {
	border-color: var(--accent);
	transform: translateY(-2px);
}

.catalog-card__link {
	display: block;
	padding: 16px;
	text-decoration: none;
	color: var(--white);
}

.catalog-card__media {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 14px;
	overflow: hidden;
	border-radius: 6px;
	background: var(--black);
}

.catalog-card__media img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.catalog-card__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		45deg,
		var(--black),
		var(--black) 10px,
		var(--light-background) 10px,
		var(--light-background) 20px
	);
}

.catalog-card__title {
	font-size: 17px;
	line-height: 130%;
	color: var(--white);
	margin: 0 0 8px;
}

.catalog-card:hover .catalog-card__title {
	color: var(--accent);
}

.catalog-card__description {
	font-size: 14px;
	line-height: 150%;
	color: var(--text);
	margin: 0 0 10px;
}

.catalog-card__price {
	font-weight: 700;
	color: var(--accent);
	margin: 0;
}

.catalog-empty {
	padding: 40px 0;
	color: var(--grey);
}

/* Pagination ------------------------------------------------------------- */

.catalog-pagination {
	display: flex;
	gap: 8px;
	margin-top: 40px;
}

.catalog-pagination .page-numbers {
	padding: 6px 12px;
	border: solid 1px var(--dark-grey);
	border-radius: 4px;
	text-decoration: none;
	color: var(--white);
}

.catalog-pagination .page-numbers:hover,
.catalog-pagination .page-numbers.current {
	border-color: var(--accent);
	color: var(--accent);
}

/* Single product --------------------------------------------------------- */

.catalog--single {
	padding-top: 150px;
}

.catalog-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 14px;
	margin-bottom: 30px;
	color: var(--grey);
}

.catalog-breadcrumb a {
	color: var(--grey);
	text-decoration: none;
}

.catalog-breadcrumb a:hover {
	color: var(--accent);
}

.catalog-breadcrumb__current {
	color: var(--white);
}

.catalog-product {
	gap: 40px 0;
}

.catalog-gallery__main {
	background: var(--light-background);
	border-radius: 8px;
	overflow: hidden;
}

.catalog-gallery__main img {
	width: 100%;
	height: auto;
	display: block;
}

.catalog-gallery__thumbs {
	display: flex;
	gap: 10px;
	margin-top: 12px;
	flex-wrap: wrap;
}

.catalog-gallery__thumb img {
	width: 74px;
	height: 74px;
	object-fit: cover;
	border-radius: 4px;
	border: solid 1px var(--dark-grey);
}

.catalog-gallery__thumb:hover img {
	border-color: var(--accent);
}

.catalog-product__summary {
	padding-left: 40px;
}

.catalog-product__title {
	font-size: 40px;
	line-height: 110%;
	margin: 0 0 16px;
}

.catalog-product__short {
	color: var(--text);
	line-height: 150%;
	margin: 0 0 20px;
}

.catalog-product__price {
	font-size: 24px;
	font-weight: 700;
	color: var(--accent);
	margin: 0 0 28px;
}

.catalog-product__datasheet {
	margin-left: 12px;
}

.catalog-product__description {
	margin-top: 70px;
	max-width: 820px;
	color: var(--text);
	line-height: 160%;
}

.catalog-specs {
	margin-top: 60px;
	max-width: 820px;
}

.catalog-specs__title {
	font-size: 24px;
	margin: 0 0 20px;
}

.catalog-specs__table {
	width: 100%;
	border-collapse: collapse;
}

.catalog-specs__table th,
.catalog-specs__table td {
	text-align: left;
	padding: 12px 16px;
	border-bottom: solid 1px var(--dark-grey);
	vertical-align: top;
}

.catalog-specs__table th {
	width: 40%;
	font-weight: 600;
	color: var(--grey);
}

.catalog-specs__table td {
	color: var(--white);
}

/* Enquiry notice on the contact page -------------------------------------- */

.catalog-enquiry-notice {
	padding: 16px 20px;
	margin: 0 0 24px;
	border-radius: 6px;
	background: var(--light-background);
	border-left: solid 3px var(--accent);
}

.catalog-enquiry-notice__label {
	color: var(--grey);
}

.catalog-enquiry-notice__product {
	font-weight: 700;
	color: var(--accent);
	text-decoration: none;
}

@media only screen and (max-width: 991px) {
	.catalog {
		padding: 50px 0 80px;
	}

	.catalog--single {
		padding-top: 120px;
	}

	.hero-secondary--catalog {
		padding: 56px 0 36px;
	}

	/* hero-secondary pulls its h1 up by 38px under 768 to sit it over the mobile
	   background image. There is no image here, so that pull just drags the title
	   into the header border. */
	.hero-secondary--catalog h1 {
		margin-top: 0;
	}

	.catalog-sidebar {
		margin-bottom: 36px;
	}

	.catalog-product__summary {
		padding-left: 0;
	}

	.catalog-product__title {
		font-size: 30px;
	}

	.catalog-product__datasheet {
		margin-left: 0;
		margin-top: 12px;
	}
}