/*
 * Shop archive, measured from the "Shop page" Figma frame (1387px wide):
 * hero 508px tall, text block 129px in, photo from 51% to the right edge, gold L-shaped outline,
 * "Category" heading and a 4-column grid inset 129px each side with 33px gaps.
 * The theme sets html font-size to 10px, so rem values are scaled for a 10px base.
 */
:root {
	--shop-red: #A72114;
	--shop-gold: #F8B053;
	--shop-white: #fff;
}

/*
 * Same wallpaper as the other pages' repeated parallax cover (core's has-parallax is-repeated): the cream 15% opacity
 * wordmark tile (gwalia-text.svg is that cover's background-graphic-oneline.svg) at its natural size, tiled both ways
 * and fixed to the viewport, on the theme red. It was a stretched Figma stroke export on a different red.
 */
.gwalia-shop {
	background-color: var(--red);
	background-image: url(../../img/gwalia-text.svg);
	background-repeat: repeat;
	background-size: auto;
	background-position: 50% 50%;
	background-attachment: fixed;
	color: var(--shop-white);
	padding-bottom: 12rem;
}

/*
 * The hero is the shared .hopp-2-col block markup from hopp-gwalia's app.css, the same code the other pages use: the
 * heading and tagline use the global h1 and .is-style-gwal-h6 styles, and the gold outline lines up with the header's
 * vertical gold line at every width. Only the photo needs its own rules, because the other pages fill that half with a
 * core cover block and this one uses the Shop page's featured image as a background.
 */
.gwalia-shop__hero-image {
	background-size: cover;
	background-position: center;
	min-height: 24rem;
}

@media screen and (min-width: 768px) {
	.gwalia-shop__hero-image {
		position: absolute;
		top: 0;
		width: 50%;
		height: 100%;
		min-height: 0;
		z-index: -1;
	}
}

/* Official merchandise card: a full-width gold-outlined banner that links out to the external shop. */
.gwalia-shop__cta {
	padding: 8rem 9.4% 0;
}

.gwalia-shop__cta-card {
	width: 100%;
}

/* The card block caps its own width; let it fill the section. */
.gwalia-shop__cta-card .wp-block-gwalia-card {
	max-width: none;
	width: 100%;
}

/*
 * Side by side layout (the block's own breakpoint): keep the card at the 30rem height it had at its old 60rem width.
 * The photo is taken out of flow and covers its half, so a wider card crops the image instead of growing taller or
 * stretching it.
 */
@media screen and (min-width: 768px) {
	.gwalia-shop__cta-card .wp-block-gwalia-card .is-style-gwalia-card {
		height: 30rem;
		min-height: 0;
	}

	.gwalia-shop__cta-card .wp-block-gwalia-card .image-wrapper {
		position: relative;
		overflow: hidden;
	}

	.gwalia-shop__cta-card .wp-block-gwalia-card .image-wrapper picture,
	.gwalia-shop__cta-card .wp-block-gwalia-card .image-wrapper img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		max-height: none;
		object-fit: cover;
	}
}

.gwalia-shop__products {
	padding: 14rem 9.4% 0;
}

.gwalia-shop__category {
	font-family: BebasKai, sans-serif;
	font-size: clamp(5.6rem, 6.1vw, 8.5rem);
	line-height: 1;
	font-weight: 400;
	text-transform: uppercase;
	color: var(--shop-white);
	margin: 0 0 4.6rem;
}

.gwalia-shop .products {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 3.3rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Card: white-framed image on top, title sits on the page red in white type. */
.gwalia-shop__card-link {
	display: block;
	border: 1px solid var(--shop-white);
	color: var(--shop-white);
	text-decoration: none;
}

.gwalia-shop__card-image {
	display: block;
	background: var(--shop-white);
}

.gwalia-shop__card-image img {
	display: block;
	width: 100%;
	height: auto;
	/*
	 * Synced product photos come in mixed sizes; a fixed ratio keeps the four cards level. It is square because
	 * WooCommerce crops the card thumbnail to 1:1, so a taller box left white bars above and below the photo.
	 */
	aspect-ratio: 1 / 1;
	object-fit: contain;
}

.gwalia-shop__card-title {
	display: block;
	padding: 0.8rem 1rem 1.2rem;
	font-family: BebasKai, sans-serif;
	font-size: 1.9rem;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--shop-white);
}

/* Media queries use the browser's 16px rem, not the theme's 10px root, so these breakpoints are 1280px and 768px. */
@media (max-width: 80rem) {
	.gwalia-shop__products {
		padding-top: 8rem;
	}

	.gwalia-shop__cta {
		padding-top: 5rem;
	}

	.gwalia-shop .products {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 48rem) {
	.gwalia-shop__products {
		padding: 4rem 1.6rem 0;
	}

	.gwalia-shop__cta {
		padding: 4rem 1.6rem 0;
	}


	.gwalia-shop .products {
		gap: 1.6rem;
	}
}