.cb-block--guide-feature {
	padding: clamp(1rem, 2vw, 1.5rem) 0;
}

/* Remove the 1280px container cap so the card can scale on large screens. */
.cb-block--guide-feature .cb-container {
	max-width: none;
}

/* Full-width variant: spans the viewport with a FIXED side margin (same
   spacing on every screen size), and a larger title. */
.cb-guide-feature--full .cb-container {
	padding-inline: 32px;
}

.cb-guide-feature--full .cb-guide-feature__card {
	width: 100%;
	/* Full width is much wider than 966px, so drop the tall 966:435 ratio.
	   min-height keeps a banner feel but lets long text grow the panel. */
	aspect-ratio: auto;
	min-height: clamp(360px, 24vw, 520px);
}

.cb-guide-feature--full .cb-guide-feature__title {
	font-size: clamp(2.25rem, 4vw, 3.5rem);
}

/*
 * Fluid: the card keeps roughly the same share of the viewport on every
 * screen size (~67vw ≈ the 966px it was on a 1440px laptop). Height follows
 * the reference 966:435 ratio via aspect-ratio so it scales proportionally.
 */
.cb-guide-feature__card {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr;
	width: 65vw;
	/* Keep the 966:435 banner proportion as a MINIMUM, but let the card grow
	   when the panel text is long — otherwise long copy was clipped by the fixed
	   aspect-ratio + overflow:hidden. The image (object-fit:cover) fills the
	   taller card. */
	min-height: calc(65vw * 435 / 966);
	margin-inline: auto;
	overflow: hidden;
	border-radius: var(--cb-radius-lg);
}

.cb-guide-feature--img-right .cb-guide-feature__media {
	order: 2;
}

.cb-guide-feature__media {
	overflow: hidden;
}

.cb-guide-feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.cb-guide-feature__panel {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(2rem, 5vw, 4rem);
}

.cb-guide-feature__inner {
	max-width: 28rem;
	text-align: center;
}

.cb-guide-feature__eyebrow {
	font-family: var(--cb-font-body);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 0.8125rem;
	font-weight: var(--cb-font-weight-medium);
	/* Default muted tone (e.g. bra-type labels); blue jeans eyebrows get an
	   inline colour from the block's Title Colour. */
	color: #8a7b69;
	margin: 0 0 0.5rem;
}

.cb-guide-feature__title {
	font-family: var(--cb-font-display);
	font-weight: var(--cb-font-weight-normal);
	letter-spacing: var(--cb-letter-spacing-display);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.1;
	margin: 0 0 1rem;
	color: #242118;
}

.cb-guide-feature__text {
	color: #242118;
	line-height: var(--cb-line-height-base);
}

.cb-guide-feature__text p:last-child {
	margin-bottom: 0;
}

/* Centred spec bullets (e.g. model feature blocks). */
.cb-guide-feature__text ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cb-guide-feature__text li {
	margin: 0.15rem 0;
}

.cb-guide-feature__text li::before {
	content: "• ";
}

.cb-guide-feature__cta {
	margin-top: 1.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

.cb-guide-feature__cta .cb-btn {
	border-radius: var(--cb-radius-pill);
	border: 1px solid rgba(36, 33, 24, 0.5);
	background: transparent;
	color: #242118;
	font-weight: 600;
	padding: 0.9rem 2.25rem;
}

.cb-guide-feature__cta .cb-btn:hover {
	border-color: #242118;
	background: transparent;
	transform: none;
}

@media (max-width: 56rem) {
	.cb-guide-feature__card {
		width: 100%;
		aspect-ratio: auto;
		grid-template-columns: 1fr;
		grid-template-rows: auto auto;
	}

	.cb-guide-feature--img-right .cb-guide-feature__media {
		order: -1;
	}

	.cb-guide-feature__media {
		min-height: 70vw;
	}
}