/*
 * Home page sections: the card grids (bb/card-grid), the Instagram carousel
 * (bb/instagram) and the reviews carousel (bb/testimonials).
 *
 * Everything is scoped under the component's own class, so the same sections work on
 * any page. Sizes, colours and spacings are the values read from the Figma nodes named
 * in the comments: 11131:774 (feature cards), 11131:719 (tiles), 11131:758 (Instagram)
 * and 11131:876 (reviews). The frames are 1440px wide, so fixed px are the 1440 values
 * and clamp() only scales them down on smaller screens.
 */

/* ----------------------------------------------------------- card grid ---- */

.bb-card-grid {
	padding-block: var( --bb-space-band );
}

/* Type: the shared H2 role in theme.css (nodes 11131:721, 11131:809). */
.bb-card-grid__heading.wp-block-heading {
	margin: 0;
}

/* The hairline and diamond under the heading (node 11131:810, 829px wide).
   The section is a constrained layout, whose `> :where(...)` rule sets max-width to the
   1252px content size, so this needs the section class to outweigh it. */
.bb-card-grid .bb-card-grid__rule {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	margin: 15px auto 0;
	max-width: 829px;
	height: 19.799px;
}

/* Lines 42–45: two 1px strokes each, 398px on the left and 415px on the right. */
.bb-card-grid__rule span {
	height: 2px;
	background: var( --bb-border-soft );
}

.bb-card-grid__rule span:first-child {
	flex: 398 1 0;
}

.bb-card-grid__rule span:last-child {
	flex: 415 1 0;
}

/* Node 11131:811 is a 19.799px box, i.e. a 14px square turned 45 degrees. Its 1px
   margins make the row exactly 398 + 1 + 14 + 1 + 415 = 829 (11131:812-815). */
.bb-card-grid__rule i {
	box-sizing: border-box;
	flex: none;
	margin-inline: 1px;
	width: 14px;
	height: 14px;
	border: var( --bb-border-w ) solid var( --bb-border-soft );
	transform: rotate( 45deg );
}

.bb-card-grid__intro {
	margin: var( --bb-space-head ) auto 0;
	max-width: 956px;
	color: var( --bb-ink );
}

/* The card rows are the shared 12-column grid from theme.css: the cards carry the span
   utilities, so the collapse to tablet and phone is the shared one. */

.bb-card__media {
	margin: 0;
}

/* The card is a flow layout, so core would add its 24px block gap on top of the
   card's own 20px gap (Figma 11131:725 sits 20px under the photo). */
.bb-card__body {
	margin: 0;
}

.bb-card__title.wp-block-heading {
	margin: 0;
}

.bb-card__text {
	margin: 0;
}

/* Feature cards (11131:774): photo down the left, "Explore >" in the bottom corner. */
.bb-card-grid--feature .bb-card-grid__grid {
	--bb-content-w: 1252px; /* two 587.705 cards, 76.295 apart */
	--bb-grid-gap: 76.295px;
	--bb-grid-row-gap: 61px;
	margin-top: var( --bb-space-intro );
}

/* The card chrome (1px gold, 30px, white) is the shared card role in theme.css. */
.bb-card-grid--feature .bb-card {
	display: grid;
	grid-template-columns: 286.318fr 301.387fr;
	grid-template-rows: 1fr auto;
	min-height: 421px;
}

/* The photo fills the card's left column, and is taken out of the flow so its own
   aspect ratio cannot stretch the 421px card. */
.bb-card-grid--feature .bb-card__media {
	position: relative;
	grid-area: 1 / 1 / 3 / 2;
	height: 100%;
}

.bb-card-grid--feature .bb-card__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: calc( var( --bb-radius-lg ) - var( --bb-border-w ) ) 0 0 calc( var( --bb-radius-lg ) - var( --bb-border-w ) );
	object-fit: cover;
	object-position: 50% 32%;
}

.bb-card-grid--feature .bb-card__body {
	grid-column: 2;
	padding: 86px 0 0 60.682px;
}

/* Node 11131:819 (Cormorant Medium 25.43/27.549) converges on the shared card-heading
   role; its colour is the muted ink the whole card text block uses. */
.bb-card-grid--feature .bb-card__title.wp-block-heading {
	max-width: 241.11px;
	color: var( --bb-ink-muted );
}

/* Line 46: 55.5 x 1, stroke #dda6a3. */
.bb-card-grid--feature .bb-card__line {
	display: block;
	width: 55.5px;
	height: 1px;
	margin: 14.17px 0 18px;
	background: var( --bb-border-soft );
}

/* Node 11131:829: Cormorant Medium 16/22, -4%. It is the only body copy in the file set
   in the display face, and it sits between two Cormorant lines inside the card, so it
   keeps that face rather than converging on the Work Sans "small" role. */
.bb-card-grid--feature .bb-card__text {
	max-width: 241px;
	font-family: var( --bb-font-display );
	font-size: var( --bb-fs-body );
	font-weight: 500;
	line-height: 1.375; /* 22 / 16 */
	letter-spacing: var( --bb-ls-eyebrow );
	color: var( --bb-ink-muted );
}

.bb-card-grid--feature .bb-card__more {
	grid-column: 2;
	align-self: end;
	padding: 24px 0 86px 60.682px;
	color: var( --bb-ink-muted );
	font-family: var( --bb-font-display );
	font-size: var( --bb-fs-h3 );
	font-weight: 500;
	line-height: var( --bb-lh-h3 );
	letter-spacing: var( --bb-ls-h3 );
	text-decoration: none;
}

.bb-card-grid--feature .bb-card__more:hover {
	color: var( --bb-burgundy );
}

.bb-card-grid--feature .bb-card__more span {
	margin-left: 0; /* 11131:824 starts at x 77, the width of "Explore" itself */
}

/* Tiles (11131:719): photo on top, then the title, the blurb and a button. */
.bb-card-grid--tiles .bb-card-grid__grid {
	--bb-content-w: 1280px; /* three 414 cards, 20 apart */
	--bb-grid-gap: 20px;
	--bb-grid-row-gap: 40px;
	margin-top: var( --bb-space-intro );
}

.bb-card-grid--tiles .bb-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.bb-card-grid--tiles .bb-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 415 / 280;
	border-radius: var( --bb-radius-lg );
	object-fit: cover;
}

.bb-card-grid--tiles .bb-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
}

/* Node 11131:727 is the Figma "H4" style: the shared card-heading role. */
.bb-card-grid--tiles .bb-card__title.wp-block-heading {
	min-height: 40px;
}

.bb-card-grid--tiles .bb-card__buttons {
	margin-top: auto;
}

/* Button 3 (node 11131:729): the pill button in outline, at full strength. */
.bb-card-grid--tiles .bb-card__buttons .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var( --bb-border-ink );
	opacity: 1;
}

/* ----------------------------------------------------------- instagram ---- */

.bb-instagram {
	padding-block: var( --bb-space-band );
}

/* Type: the shared H2 role in theme.css (node 11131:760). */
.bb-instagram__heading.wp-block-heading {
	margin: 0;
}

.bb-instagram__carousel {
	margin-top: var( --bb-space-intro );
}

.bb-instagram__carousel .bb-carousel__track {
	gap: 20px;
}

.bb-instagram__item {
	flex: 0 0 calc( ( 100% - 40px ) / 3 ); /* three 414px slides, 20px apart */
	margin: 0;
}

.bb-instagram__item img {
	display: block;
	width: 100%;
	aspect-ratio: 414 / 735;
	border-radius: var( --bb-radius-lg );
	object-fit: cover;
}

/* Frame 1321315158: the two 44px buttons sit 8px apart, 45px under the photos. */
.bb-instagram__carousel .bb-carousel__nav {
	gap: 8px;
	margin-top: var( --bb-space-intro );
}

/* --------------------------------------------------------------- arrows ---- */

/* -------------------------------------------------------- testimonials ---- */

.bb-testimonials {
	position: relative; /* the quote marks bracket the whole section, not the carousel */
	padding-block: var( --bb-space-band );
}

/* The five-star rating above the heading (BugHerd #15/#16): stars in a centred row with
   the caption underneath, in the shared label role. */
.bb-testimonials__rating {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	margin: 0 0 var( --bb-space-head );
}

.bb-testimonials__stars {
	display: flex;
	gap: 4px;
}

.bb-testimonials__star {
	display: block;
	width: 22px;
	height: 22px;
	fill: var( --bb-accent ); /* gold is invisible on the cream page background */
}

/* Node 11131:880 is 40/50 in Figma; it converges on the shared H2 role. */
.bb-testimonials__heading.wp-block-heading {
	margin: 0 auto;
	max-width: 1009px;
}

.bb-testimonials__carousel {
	position: relative;
	margin-top: var( --bb-space-lg ); /* the column's 80px gap */
}

.bb-testimonials__carousel .bb-carousel__track {
	gap: 0;
}

.bb-review {
	flex: 0 0 100%;
	margin: 0;
	text-align: center;
}

.bb-review__quote {
	margin: 0;
	padding: 0;
	border: 0;
}

/* Type: the shared quote role in theme.css (node 11131:881). */
.bb-review__quote p {
	margin: 0 auto;
	max-width: 940.614px;
}

/* Node 11131:884: "Satoshi Medium" 20px, uppercase, #440e1f, no tracking, in a 27px
   box — the footer-text face at the 20px step, centred 80px under the quote. */
.bb-review__by {
	margin-top: var( --bb-space-lg );
	color: var( --bb-ink );
	font-family: var( --bb-font-body );
	font-size: var( --bb-fs-h4 ); /* the system's 20px step */
	font-weight: 500;
	line-height: 1.35; /* 27 / 20 */
	letter-spacing: 0;
	text-transform: uppercase;
}

/* The oversized quote marks (nodes 11131:888, 11131:890): 300px, -12px, 5% opacity. */
.bb-testimonials__mark {
	position: absolute;
	z-index: 0;
	box-sizing: content-box;
	margin: 0; /* core's flow gap offsets an absolutely positioned box too */
	width: 67px;
	text-align: center;
	color: var( --bb-ink );
	font-family: var( --bb-font-display );
	font-size: 300px;
	font-weight: 600;
	line-height: 58px;
	letter-spacing: -12px;
	opacity: 0.05;
	pointer-events: none;
}

/* Node 11131:887 is at x 69 / y 115 in the 1440 frame and node 11131:889 ends 2px from
   the right edge with its box bottom 87px above the section's. */
.bb-testimonials__mark--start {
	top: 115px;
	left: 69px;
}

.bb-testimonials__mark--end {
	right: 2px;
	bottom: 87px;
	transform: rotate( 180deg );
}

/* The shared carousel puts its buttons under the track; here they flank it, on the
   section's own 80px gutters — the rendered frame puts the left arrow at x 80 and the
   right one at 1316-1360 (11131:877 / 11131:885). */
.bb-testimonials__carousel .bb-carousel__nav {
	position: absolute;
	inset: 0;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	pointer-events: none;
}

.bb-testimonials__carousel .bb-carousel__button {
	pointer-events: auto;
}

/* ---------------------------------------------------------- responsive ---- */

@media ( min-width: 782px ) and ( max-width: 1024px ) {
	/* The cards are full width on a tablet, so the Figma text column cap would leave
	   most of the card empty. */
	.bb-card-grid--feature .bb-card__title.wp-block-heading,
	.bb-card-grid--feature .bb-card__text {
		max-width: none;
	}
}

@media ( max-width: 1024px ) {
	.bb-instagram__item {
		flex: 0 0 calc( ( 100% - 20px ) / 2 );
	}

	.bb-testimonials__carousel {
		padding-inline: 60px;
	}

	.bb-testimonials__carousel .bb-carousel__nav {
		inset: 0;
	}
}

@media ( max-width: 781px ) {
	.bb-card-grid--feature .bb-card {
		grid-template-columns: minmax( 0, 1fr );
		grid-template-rows: auto auto auto;
		min-height: 0;
	}

	.bb-card-grid--feature .bb-card__media {
		grid-area: auto;
		height: auto;
	}

	.bb-card-grid--feature .bb-card__media img {
		position: static;
		aspect-ratio: 4 / 3;
		height: auto;
		border-radius: var( --bb-radius-md ) var( --bb-radius-md ) 0 0;
	}

	.bb-card-grid--feature .bb-card__body,
	.bb-card-grid--feature .bb-card__more {
		grid-column: 1;
		padding-inline: 24px;
	}

	.bb-card-grid--feature .bb-card__body {
		padding-top: 24px;
	}

	.bb-card-grid--feature .bb-card__more {
		padding-bottom: 28px;
	}

	.bb-card-grid--feature .bb-card__title.wp-block-heading,
	.bb-card-grid--feature .bb-card__text {
		max-width: none;
	}

	.bb-instagram__item {
		flex: 0 0 82%;
	}

	.bb-testimonials__carousel {
		padding-inline: 0;
	}

	.bb-testimonials__carousel .bb-carousel__nav {
		position: static;
		justify-content: center;
		margin-top: 32px;
	}

	.bb-review__by {
		margin-top: 40px;
	}

	.bb-testimonials__mark {
		font-size: 160px;
		line-height: 30px;
	}
}