/* 54px on top of vendors-intro's 58px bottom padding puts the first category rule
   112px below the intro paragraph, as the design renders it. (The design file's
   intro frame is 58px clear of the list frame, but that frame is sized for six
   lines of copy where only four render — the slack lives here.) */
.bsw-vendors {
	background: #fff;
	padding-inline: 20px;
	padding-block: 54px 0;
}

/* CSS columns rather than a grid: the design's distribution is whatever the
   browser's column balancing produces from this card order, and cards must never
   be split down the middle. 1400px content - 2x72px gutters = 418.67px columns. */
.bsw-vendors__columns.wp-block-group {
	column-count: 3;
	column-gap: 72px;
}

.bsw-vendors__card,
.bsw-vendors__figure {
	break-inside: avoid;
	page-break-inside: avoid;
	margin-bottom: 40px;
}

/* Category rule — Cormorant caps over a blush hairline. The structural selector
   is there so a heading added in the editor (which won't carry the BEM class)
   still renders correctly. */
h2.bsw-vendors__category,
.bsw-vendors__card > h2 {
	font-family: var(--wp--preset--font-family--cormorant, 'Cormorant', serif) !important;
	font-size: 23px !important;
	font-weight: 500 !important;
	font-style: normal !important;
	line-height: normal !important;
	letter-spacing: 0.16em !important;
	text-transform: uppercase !important;
	color: var(--wp--preset--color--taupe, #8c857b) !important;
	padding-bottom: 11px;
	border-bottom: 1px solid var(--wp--preset--color--blush, #d7a3ac);
	margin-block: 0 !important;
}

/* Entries are matched structurally (any list in a card) as well as by their BEM
   class, so a list or heading added in the editor — which won't carry the class —
   still picks up the styling. */
.bsw-vendors__entries,
.bsw-vendors__card > ul {
	list-style: none !important;
	padding-inline-start: 0 !important;
	margin-block: 18px 0 !important;
	display: flex;
	flex-direction: column;
	gap: 17px;
}

/* The design gives the name line 23px of leading and the link line 22px. The item's
   own line-height sets the strut for every line in it, so 22px goes on the item and
   ::first-line lifts the name back to 23px — matching it with a single 23px strut
   would add a pixel to all 51 entries and drift the column balance. */
.bsw-vendors__card li {
	font-family: var(--wp--preset--font-family--cardo, 'Cardo', serif);
	font-size: 16px;
	line-height: 22px;
	color: var(--wp--preset--color--charcoal, #373737);
	margin: 0;
}

.bsw-vendors__card li::first-line {
	line-height: 23px;
}

/* Stays `display: inline` on purpose. As an inline-block the underline offset would
   inflate the line box by 2px, and 51 entries of that shifts the column balance
   away from the design's — so the offset lives on the ::after instead. */
.bsw-vendors__card li a {
	font-family: var(--wp--preset--font-family--cardo, 'Cardo', serif);
	font-size: 15px;
	font-style: italic;
	line-height: 22px;
	color: #8e4e58;
	text-decoration: none;
	position: relative;
	transition: color 0.2s ease;
}

/* Same blush rule that wipes out from the centre as the nav links. */
.bsw-vendors__card li a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: var(--wp--preset--color--blush, #d7a3ac);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.bsw-vendors__card li a:hover,
.bsw-vendors__card li a:focus-visible {
	color: #aa747c;
}

.bsw-vendors__card li a:hover::after,
.bsw-vendors__card li a:focus-visible::after {
	transform: scaleX(1);
}

/* Inline photos — 4:5 crops the width of their column */
.bsw-vendors__photo.wp-block-image {
	margin: 0;
}

.bsw-vendors__photo.wp-block-image img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center;
}

p.bsw-vendors__credit {
	font-family: var(--wp--preset--font-family--cardo, 'Cardo', serif) !important;
	font-size: 14px !important;
	font-style: italic !important;
	font-weight: 400 !important;
	line-height: normal !important;
	text-align: left !important;
	color: #baaa7c !important;
	margin-block: 5px 0 !important;
}

/* Scroll reveal. The figures are visible by default — vendors-list.js arms them
   with --armed and then releases each one with --in as it enters the viewport, so
   with JS off the photos simply show. */
.bsw-vendors__figure--armed {
	opacity: 0;
}

.bsw-vendors__figure--in {
	animation: bsw-vendors-reveal 1.15s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
}

@keyframes bsw-vendors-reveal {
	from {
		opacity: 0;
		transform: translateY(-30px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (max-width: 767px) {
	.bsw-vendors {
		padding-block: 0 8px;
	}

	/* One column, and a flex gap rather than per-card margins so there's no
	   trailing space under the last card before the Instagram section. */
	.bsw-vendors__columns.wp-block-group {
		display: flex;
		flex-direction: column;
		gap: 36px;
	}

	.bsw-vendors__card,
	.bsw-vendors__figure {
		margin-bottom: 0;
	}

	h2.bsw-vendors__category,
	.bsw-vendors__card > h2 {
		font-size: 22px !important;
	}
}