/* Base slide/media/link/content styling is inherited from cbm-marquee.css
   (its unscoped .cbm-marquee__* rules). This file only restates what that
   file scopes to .wp-block-acf-cbm-marquee, and overrides what doesn't fit
   a product card (the poster-scale title, the hover-reveal caption). */

.wp-block-acf-cbm-related-products {
	max-width: 100%;
	margin-top: var(--wp--preset--spacing--medium);
	margin-bottom: var(--wp--preset--spacing--medium);
}

/*
 * cbm-marquee.css scopes its swiper-wrapper/swiper-slide layout rules to
 * `.cbm-marquee`, a class this block's wrapper doesn't carry (only
 * .wp-block-acf-cbm-related-products) - restated here rather than adding
 * an unrelated block's class to this markup.
 */
.wp-block-acf-cbm-related-products .swiper-wrapper {
	display: flex;
	align-items: stretch;
}

.wp-block-acf-cbm-related-products .swiper-slide {
	flex-shrink: 0;
}

/*
 * Height chain so .cbm-marquee__link ends up with a definite height to
 * grow .cbm-marquee__content against (see that rule below), so
 * .cbm-related-products__price (margin-top: auto) can pin to the
 * bottom regardless of how many lines the title/variation text above
 * it wraps to.
 *
 * .cbm-marquee__slide gets height: auto in cbm-marquee.css (unscoped,
 * so it reaches this block too) - that's deliberate there, since the
 * poster marquee's slides aren't meant to stretch to match a taller
 * neighbour. Overridden back to 100% here, scoped to this block's own
 * wrapper class, so it doesn't change that behaviour for cbm-marquee
 * itself. .cbm-marquee-slide__front only gets height: 100% in cbm-
 * marquee.css when scoped to .wp-block-acf-cbm-marquee, a class this
 * block doesn't carry - restated here for the same reason as the
 * swiper-wrapper/swiper-slide rules above.
 */
.wp-block-acf-cbm-related-products .cbm-marquee__slide {
	height: 100%;
}

.wp-block-acf-cbm-related-products .cbm-marquee-slide__front {
	height: 100%;
}

/*
 * Spacing model matched to the post/query card (wp_posts ID 6924, the
 * live author-archive template - see templates/author.html's DOM
 * shape): a vertical flex container with a flat gap between every
 * child, not per-element margins. .cbm-marquee__link's own display:
 * block/line-height: 0 (cbm-marquee.css, unscoped) is overridden here
 * so the image and the content block sit gap-apart as flex siblings,
 * same as that card's image/title/excerpt/author.
 */
.wp-block-acf-cbm-related-products .cbm-marquee__link {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xx-small);
	height: 100%;
}

/*
 * Same flex-gap model one level down, so title and price also sit the
 * same 10px apart as the reference card's own children - not the
 * margin-top this used to carry.
 *
 * flex-grow: 1, not height: 100% - .cbm-marquee__content is a flex item
 * alongside .cbm-marquee__media inside .cbm-marquee__link (height: 100%
 * above, so definite). height: 100% here previously relied on the
 * flex-shrink calculation to give media its natural size back, which
 * didn't reliably happen. flex-grow: 1 states the intent directly: take
 * whatever space is left in the column after media takes its own
 * height, so .cbm-related-products__price's margin-top: auto (below)
 * has real leftover space to push against instead of none.
 */
.wp-block-acf-cbm-related-products .cbm-marquee__content {
	margin-top: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xx-small);
	flex-grow: 1;
}

/*
 * Matched to the post/query card's title treatment on the live
 * author-archive template (wp_posts ID 6924: wp:post-title
 * {"isLink":true,"fontSize":"max-36","fontFamily":"steelfish"}) rather
 * than the poster cards, now that this is meant to read as the same
 * family as that component. letter-spacing is restated literally
 * rather than as a preset token for the reason noted at assets/css/
 * woocommerce.css Section 12f: theme.json has no custom-property token
 * for it.
 *
 * line-height: 1.1 is written as a literal, NOT as
 * var(--cbm-author-archive-grid-title-line-height, 1.1) the way
 * style.css (line 533) writes it. That custom property is never
 * defined anywhere in style.css or theme.json - it only ever appears
 * as a var() fallback, so 1.1 IS the real computed value already.
 * Referencing the property name here would just be citing a variable
 * that doesn't exist; do not "fix" this into a var() reference.
 *
 * Clamped to 2 lines, matching that card's own -webkit-line-clamp: 2,
 * so a long product name can't push the price to a different vertical
 * position than its neighbours in the row.
 */
.wp-block-acf-cbm-related-products .cbm-marquee__title {
	font-family: var(--wp--preset--font-family--steelfish);
	text-transform: uppercase;
	font-size: var(--wp--preset--font-size--max-36);
	letter-spacing: 0.02em;
	line-height: 1.1;
	color: var(--wp--preset--color--cb-black);
	margin: 0;
	display: -webkit-box;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}

/*
 * .cbm-marquee__content's flex gap (above) already puts a uniform
 * xx-small (10px) between every child, which reads as tight enough
 * under the title on its own - left alone rather than fought with a
 * negative margin. No margin-bottom here (unlike before
 * .cbm-related-products__domain existed) - that "clear separation
 * before price" role now belongs to whichever of __variation/__domain
 * is the last text line, since __domain can render directly after
 * this one. See __domain below for where it moved to.
 *
 * line-height is explicit here, not inherited: .cbm-marquee__link
 * (cbm-marquee.css, unscoped) sets line-height: 0, which reaches this
 * element by inheritance since nothing between the two overrides it. A
 * single line renders fine at 0, but a wrapped second line has a
 * zero-height line box and stacks directly on the first instead of
 * sitting below it. 1.56 matches .cbm-related-products__price's own
 * line-height - the other EditSerifPro rule in this file.
 */
.wp-block-acf-cbm-related-products .cbm-related-products__variation {
	font-family: var(--wp--preset--font-family--editserifpro);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: none;
	line-height: 1.56;
	color: var(--wp--preset--color--cb-black);
	margin: 0;
}

/*
 * Most products don't have a 3-part Broadside-style variation name, so
 * .cbm-related-products__domain never renders for them and __variation
 * is the last text line before the price - it needs the "clear
 * separation" margin-bottom back in that case. :has() with a next-
 * sibling combinator scopes this to only when __domain isn't there;
 * when it is, __domain carries that role instead (below) and this
 * doesn't apply, keeping __variation tight under the title as intended.
 *
 * xx-small (10px), not x-small - stacked on the container's own 10px
 * flex gap, that's 20px total before the price. x-small (20px) here
 * made 30px total, the largest gap in the card, and the price read as
 * detached from everything above it.
 */
.wp-block-acf-cbm-related-products .cbm-related-products__variation:not(:has(+ .cbm-related-products__domain)) {
	margin-bottom: var(--wp--preset--spacing--xx-small);
}

/*
 * Same family as .cbm-related-products__variation above, one step
 * smaller. font-size has no matching theme.json preset below x-small
 * (16px, the smallest named step on the scale) - restated literally,
 * following the x-small/max-36 literal-value precedent already used
 * elsewhere in this file (see assets/css/woocommerce.css Section 12f
 * for the same situation). 14px follows the ~2px cadence between the
 * scale's own low-end steps (x-small 16 -> small 18 -> medium 20).
 *
 * line-height is explicit for the same reason __variation's is above:
 * .cbm-marquee__link (cbm-marquee.css, unscoped) sets line-height: 0,
 * which would otherwise reach this element by inheritance too and
 * cause the same wrapped-line overlap bug fixed there.
 *
 * margin-top: -7px cancels most of .cbm-marquee__content's uniform
 * xx-small (10px) flex gap for this one pair specifically - variation
 * and domain are two lines of one label, not two separate things, so
 * they need to read closer together than every other pair of children
 * in that container. The flex gap itself is untouched (still correct
 * for title-to-variation and domain-to-price); -7px leaves roughly
 * 2-3px of visible space rather than cancelling the gap entirely.
 * margin-bottom carries the "clear separation before price" role
 * moved down from __variation, since this is now the last text line
 * before it when a variation has all 3 parts. xx-small (10px), not
 * x-small - stacked on the container's own 10px flex gap, that's 20px
 * total before the price; x-small made 30px, the largest gap in the
 * card, and the price read as detached from everything above it.
 */
.wp-block-acf-cbm-related-products .cbm-related-products__domain {
	font-family: var(--wp--preset--font-family--editserifpro);
	font-size: 14px;
	line-height: 1.56;
	color: var(--wp--preset--color--cb-black);
	margin: 0;
	margin-top: -7px;
	margin-bottom: var(--wp--preset--spacing--xx-small);
}

.wp-block-acf-cbm-related-products .cbm-related-products__price {
	font-family: var(--wp--preset--font-family--editserifpro);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 100;
	line-height: 1.56;
	color: var(--wp--preset--color--cb-black);
	margin: 0;
	margin-top: auto;
}