/* Store page layout (Fix 08): template-parts/woocommerce/store-categories.php
 * and store-devices.php.
 *
 * Categories: image cards with a dark fade, title and sub-category links, one
 * row that scrolls sideways (about four and a half visible) on desktop, two
 * to a row on phones.
 * Devices: the comparison table's cards (css/device-comparison.css supplies
 * the badge, title, price and finance styles), in its phone card form at every
 * width: labels inline, View / Buy now stacked. */

/* Categories */
.store-categories {
	--store-gap: 14px;

	position: relative;
}

.store-categories-track {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - var(--store-gap) * 4) / 4.4);
	gap: var(--store-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;

	&::-webkit-scrollbar {
		display: none;
	}
}

.store-category {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	border-radius: 12px;
	background-color: var(--color-secondary);
	scroll-snap-align: start;

	&:after {
		content: '';
		position: absolute;
		inset: 0;
		z-index: 1;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0.85) 100%);
	}

	.store-category-image {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.store-category-body {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
	padding: 18px;
	color: var(--color-white);
}

.store-category-title {
	margin: 0;
	font-size: var(--text-size-md);
	font-weight: 500;
	line-height: 1.25;

	a {
		color: var(--color-white);
		text-decoration: none;
	}
}

.store-category-links {
	display: grid;
	gap: 6px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;

	a {
		font-size: var(--text-size-sm);
		color: var(--color-white);
		text-decoration: underline;
		text-underline-offset: 3px;

		&:hover {
			text-decoration-thickness: 2px;
		}
	}
}

.store-category-text {
	margin: 12px 0 0;
	font-size: var(--text-size-sm);
	color: var(--color-white);
}

.store-categories-next {
	position: absolute;
	top: 50%;
	right: 10px;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--color-white);
	color: var(--color-secondary);
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
	transform: translateY(-50%);
	cursor: pointer;
}

/* Devices */
.store-devices {
	margin-top: calc(var(--default-gutter-y) * 3);
}

.store-devices-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	margin-bottom: calc(var(--default-gutter-y) * 1.5);
}

.store-devices-title {
	margin: 0;
	font-size: var(--text-size-lg);
	font-weight: 500;
}

.store-devices-grid {
	--store-col-gap: calc(var(--default-gutter-x) * 2);
}

.store-devices-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--store-col-gap);
	font-size: var(--text-size-sm);
	line-height: 1.4;

	p {
		margin: 0;
	}
}

.store-device.dc-device {
	/* The table places every column on row 1 (grid-row: 1 / -1); cards flow normally. */
	grid-row: auto;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--color-grey-darker);
	border-radius: 12px;
	background-color: var(--color-white);

	.dc-head {
		padding: 0 0 var(--default-gutter-y);
		background-color: transparent;
	}

	.dc-media {
		aspect-ratio: 16 / 10;
		margin-bottom: var(--default-gutter-y);
		border-radius: 0;
	}

	.dc-badge {
		top: 10px;
		left: 10px;
	}

	.dc-title,
	.dc-price,
	.dc-finance {
		padding: 0 var(--default-gutter-x);
	}

	.dc-specs {
		display: block;
		margin: 0;
		padding: 0 var(--default-gutter-x);
	}

	.dc-cell {
		display: grid;
		grid-template-columns: 38% 1fr;
		gap: var(--default-gutter-x);
		padding: 10px 0;
		border-top: 0;
		border-bottom: 1px solid var(--color-grey-darker);
		background-color: transparent;
	}

	.dc-cell-label {
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip: auto;
		white-space: normal;
		align-self: center;
		font-size: var(--text-size-xs);
		font-weight: 300;
	}

	.dc-actions {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: calc(var(--default-gutter-y) / 2);
		margin-top: auto;
		padding: var(--default-gutter-y) var(--default-gutter-x);
	}
}

/* All products (Row 12) */
.store-products {
	margin-top: calc(var(--default-gutter-y) * 4);
}

.store-products-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--default-gutter-y) 24px;
}

.store-products-title {
	margin: 0;
	font-size: var(--text-size-lg);
	font-weight: 500;
}

/* The filters in use: FacetWP's removable labels, then Clear all. Hidden until something is chosen. */
.store-products-selections {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
	margin-top: var(--default-gutter-y);

	&:not(:has(.facetwp-selections li)) {
		display: none;
	}

	.facetwp-selections ul {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.facetwp-selections li {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		padding: 6px 12px;
		border-radius: 50vh;
		background-color: var(--color-grey);
		font-size: var(--text-size-sm);
	}

	.facetwp-selection-label {
		font-weight: 500;
	}

	.facetwp-selection-value {
		padding-right: 18px;
		background-position: right center;
		cursor: pointer;
	}

	.store-products-clear {
		padding: 0;
		border: 0;
		background: none;
		font-size: var(--text-size-sm);
		color: var(--color-secondary);
		text-decoration: underline;
		text-underline-offset: 4px;
		cursor: pointer;
	}
}

.store-products > .row {
	margin-top: calc(var(--default-gutter-y) * 2);
}

/* "View product" sits at the bottom of every card, however long the name. */
.store-products .card-wrapper > .padding-wrapper {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;

	> .row:last-child {
		margin-top: auto !important;
		padding-top: calc(var(--default-gutter-y) * 2);
	}
}

/* The category line: small, tucked into the top-left corner of the white area.
   The image keeps its own height (it would otherwise share the card's spare
   height, so the white area started lower on cards with short names), and the
   name starts clear of the category line. */
.store-products .card-wrapper > .image {
	flex: 0 0 auto;
}

.store-products .card-wrapper > .padding-wrapper {
	position: relative;
	padding-top: 2.5rem;
}

.store-products .card-category {
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	left: 0.75rem;
	overflow: hidden;
	font-size: var(--text-size-xs);
	font-weight: 500;
	line-height: 1.2;
	color: #55565a;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Six to a row is narrower than the usual four, so the card buttons take the
   theme's small button size (as .button.small). */
.store-products .card-wrapper .button {
	min-height: 38px;
	padding-left: var(--default-gutter-x);
	padding-right: 2px;
	font-size: var(--text-size-sm);

	&:not(.iconless):after {
		margin-left: calc(var(--default-gutter-x) / 2);
	}

	&:not(.iconless):hover:after {
		margin-left: var(--default-gutter-x);
	}
}

/* Six to a row, so a featured device card (two columns) sits over two product cards. */
@media (min-width: 1200px) {
	.store-devices-grid {
		grid-template-columns: repeat(6, minmax(0, 1fr));

		.store-device {
			grid-column: span 2;
		}
	}

	.store-products .facetwp-template.products > * {
		flex: 0 0 auto;
		width: calc(100% / 6);
	}
}

@media (max-width: 991.98px) {
	.store-categories-track {
		grid-auto-columns: calc((100% - var(--store-gap) * 2) / 2.6);
	}

	.store-devices-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767.98px) {
	.store-categories-track {
		grid-auto-flow: row;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		overflow: visible;
	}

	/* Grow with the links (Products has four) instead of a fixed shape. */
	.store-category {
		display: flex;
		align-items: flex-end;
		aspect-ratio: auto;
		min-height: 220px;
	}

	.store-category-body {
		position: relative;
		padding: 48px 12px 12px;
	}

	.store-category-title {
		font-size: var(--text-size);
	}

	.store-category-links a,
	.store-category-text {
		font-size: var(--text-size-xs);
	}

	.store-categories-next {
		display: none;
	}

	.store-devices-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}