/**
 * Shop by Category
 *
 * Design ref: design-preferences/css-exports/Home Page/shop-by-category.css
 * Revised: docs/design/home-revised.png — photo on top, caption band beneath
 * it. The old layout overlaid the caption on the photo at top-right and cropped
 * each image
 * with per-slug absolute offsets; the band means the media area is now a plain
 * object-fit: cover box, so any category thumbnail works without a rule of its
 * own.
 */

.shop-by-category {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--section-heading-to-grid);
	/* Figma Frame 1376 — gutters via width calc, not inner padding */
	width: min(var(--shop-by-category-max), calc(100% - (2 * var(--section-inline-pad))));
	max-width: var(--shop-by-category-max);
	margin: 0 auto;
	padding: var(--home-section-gap) 0 0;
	box-sizing: border-box;
}

.shop-by-category__header {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--section-heading-to-divider);
	width: 100%;
	max-width: 393px;
	margin: 0;
}

.shop-by-category__title {
	margin: 0;
	font-family: var(--font-heading);
	font-style: normal;
	font-weight: 400;
	font-size: var(--section-title-size);
	line-height: 1;
	letter-spacing: var(--section-title-tracking);
	text-align: center;
	text-transform: uppercase;
	color: var(--color-heading);
	text-box-trim: trim-both;
	text-box-edge: cap alphabetic;
}

.shop-by-category__divider {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 148px;
	height: 12px;
	line-height: 0;
}

.shop-by-category__divider svg {
	display: block;
	width: 148px;
	height: 12px;
}

.shop-by-category__grid {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: var(--shop-by-category-grid-gap);
	width: 100%;
	margin: 0;
}

.shop-by-category__card {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 0 var(--category-card-width);
	width: var(--category-card-width);
	height: var(--category-card-height);
	background: var(--color-bg-card-inner);
	border: 1px solid var(--color-border-category);
	border-radius: var(--radius-category-card);
	overflow: hidden;
	text-decoration: none;
	box-sizing: border-box;
	transition: border-color 0.2s ease;
}

.shop-by-category__card:hover,
.shop-by-category__card:focus {
	border-color: var(--color-accent);
	outline: none;
}

/*
 * Media box. Fixed height so all five cards line up whatever the source
 * aspect; `cover` centres the crop, which is what the reference shows.
 */
.shop-by-category__media {
	position: relative;
	display: block;
	flex: 0 0 var(--category-card-media-height);
	width: 100%;
	height: var(--category-card-media-height);
	overflow: hidden;
	/*
	 * Matches the card so a cut-out PNG with a transparent background (which
	 * is what the current category thumbnails are) reads as part of the card
	 * rather than sitting on a grey plate.
	 */
	background: var(--color-bg-card-inner);
}

/*
 * Top-anchored rather than centred: a portrait source taller than the 262×360
 * box loses the overflow off the bottom instead of splitting it top and
 * bottom, which is what keeps heads in frame. The reference images are already
 * cropped to roughly this aspect, so it only bites on off-ratio uploads.
 */
.shop-by-category__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.shop-by-category__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--category-card-text-gap);
	width: 100%;
	padding: var(--category-card-caption-pad) 12px;
	/*
	 * Off-white, not #fff: in the reference the caption band reads a shade
	 * warmer than the page behind the grid (251,250,248 against 254,254,254 in
	 * docs/design/home-revised.png). Same fill as the card, so the band and the
	 * letterboxing behind a cut-out thumbnail are one surface.
	 */
	background: var(--color-bg-card-inner);
	box-sizing: border-box;
	text-align: center;
}

.shop-by-category__name {
	display: block;
	font-family: var(--font-body);
	font-style: normal;
	font-weight: 700;
	font-size: 20px;
	line-height: 22px;
	letter-spacing: -0.2px;
	text-align: center;
	text-transform: uppercase;
	color: var(--color-accent);
}

.shop-by-category__link {
	display: block;
	font-family: var(--font-body);
	font-style: normal;
	font-weight: 500;
	font-size: var(--category-card-link-size);
	line-height: var(--category-card-link-lh);
	letter-spacing: 0.03em;
	text-align: center;
	color: var(--color-heading);
	text-decoration: none;
}

.shop-by-category__card:hover .shop-by-category__link,
.shop-by-category__card:focus .shop-by-category__link {
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Tablet
   -------------------------------------------------------------------------- */

@media (max-width: 1200px) {
	.shop-by-category {
		width: min(var(--shop-by-category-max), calc(100% - 48px));
	}

	.shop-by-category__grid {
		flex-wrap: wrap;
		align-items: stretch;
		justify-content: center;
	}

	.shop-by-category__card {
		flex: 0 0 var(--category-card-width);
	}
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media screen and (max-width: 782px) {
	.shop-by-category {
		gap: 16px;
		width: min(var(--shop-by-category-max), calc(100% - 32px));
		padding: 32px 0 0;
	}

	.shop-by-category__title {
		font-size: 28px;
		line-height: 1;
	}

	/*
	 * Two up rather than a single stacked column. The thumbnails are 2:3, so
	 * full-width cards would run ~645px each and put the five categories over
	 * 3000px of scroll; halved, the same uncropped portrait is ~260px tall.
	 */
	.shop-by-category__grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}

	.shop-by-category__card {
		width: auto;
		max-width: none;
		height: auto;
	}

	.shop-by-category__media {
		flex: 0 0 auto;
		height: auto;
		aspect-ratio: var(--category-card-media-aspect);
	}

	.shop-by-category__content {
		padding: 18px 12px;
	}

	.shop-by-category__name {
		/* "Health & Beauty" holds one line in a half-width card at this size */
		font-size: 16px;
		line-height: 20px;
	}

	.shop-by-category__link {
		font-size: 13px;
	}
}