/* =========================================================================
   b2b.css — the B2B band on the front page.

   The reference is mymarket.ge's delivery banner. Its anatomy is reproduced
   exactly; its palette is mapped onto this shop's, not borrowed:

       reference yellow -> --bedi-accent    the loudest colour we have
       reference black  -> --bedi-navy      the badge and the button
       reference black  -> white            the headline, because #2D81FF is a
                                            mid tone where yellow is a light one

   Four columns on a desk — copy, photograph, steps, button — and one on a
   phone. The photograph bleeds off the bottom edge at both, which is what
   stops the card reading as a box with a picture in it.
   ========================================================================= */

.bedi-b2b {
	margin-block: var(--bedi-space-8);
}

/*
 * THE CARD IS THE LINK. Every child is inert, including the thing that looks
 * like a button, so there is exactly one tab stop and one destination.
 */
.bedi-b2b__card {
	align-items: center;
	background-color: var(--bedi-accent);
	border-radius: var(--bedi-radius-2xl);
	color: #FFFFFF;
	column-gap: var(--bedi-space-4);
	display: grid;
	/*
	 * The photograph column is given a fraction rather than `auto` on purpose:
	 * `auto` sizes to the image's intrinsic width, which at 1200px is wider
	 * than the whole card and collapses the other three tracks to nothing.
	 */
	/*
	 * 1.05 / 1 IS A MEASURED RATIO, NOT A GUESS.
	 *
	 * The two flexible tracks share whatever the steps and the button leave —
	 * 1280 wide, less 80 of padding and 48 of gaps, less 138 and 208 for the
	 * two rigid tracks, is 806. The headline needs about 420 of it to hold two
	 * lines in Georgian at this size (at 381 it broke to four) and the
	 * photograph needs about 400 to read at all (at 344 it looked like a
	 * thumbnail). There is 806. The ratio is what splits it that way, and the
	 * gap above came down to space-4 to find the last 24px.
	 */
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr) auto auto;
	min-block-size: 290px;
	/*
	 * `clip` rather than `hidden`, the same choice auth-modal.css documents: it
	 * crops the bleeding photograph without turning the card into a scroll
	 * container.
	 */
	overflow: clip;
	padding: var(--bedi-space-7) var(--bedi-space-8);
	position: relative;
	text-decoration: none;
	transition:
		box-shadow var(--bedi-dur-micro) var(--bedi-ease-out),
		transform var(--bedi-dur-micro) var(--bedi-ease-out);
}

.bedi-b2b__card:hover {
	box-shadow: 0 18px 40px -18px rgba(6, 104, 252, 0.65);
	transform: translateY(-2px);
}

.bedi-b2b__card:focus-visible {
	outline: 3px solid var(--bedi-navy);
	outline-offset: 3px;
}

/* --- the copy ------------------------------------------------------- */

.bedi-b2b__copy {
	grid-column: 1;
	min-inline-size: 0;
}

.bedi-b2b__eyebrow {
	color: rgba(255, 255, 255, 0.78);
	font-size: var(--bedi-text-sm);
	font-weight: 700;
	letter-spacing: 0.08em;
	margin: 0 0 var(--bedi-space-2);
	text-transform: uppercase;
}

.bedi-b2b__title {
	color: #FFFFFF;
	font-family: var(--bedi-font-display);
	font-size: clamp(1.4rem, 2.1vw, 1.875rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 var(--bedi-space-4);
}

/*
 * The wordmark sits ON the second line rather than after the whole heading,
 * which is the arrangement the reference uses and the reason its two lines read
 * as one shape. It needs its own line box to do that.
 */
.bedi-b2b__titleline {
	align-items: center;
	column-gap: var(--bedi-space-3);
	display: flex;
	flex-wrap: wrap;
	row-gap: var(--bedi-space-2);
}

.bedi-b2b__brand {
	background-color: #FFFFFF;
	border-radius: var(--bedi-radius-pill);
	color: var(--bedi-accent-strong);
	font-size: 0.62em;
	font-weight: 700;
	padding: 0.32em 0.9em;
	white-space: nowrap;
}

/*
 * The dark badge. inline-flex so it is exactly as wide as its own two lines —
 * a block would stretch to the column and read as a bar rather than a chip.
 */
.bedi-b2b__badge {
	align-items: center;
	background-color: var(--bedi-navy);
	border-radius: var(--bedi-radius-lg);
	color: #FFFFFF;
	column-gap: var(--bedi-space-3);
	display: inline-flex;
	font-size: var(--bedi-text-base);
	font-weight: 700;
	line-height: 1.22;
	margin: 0 0 var(--bedi-space-3);
	padding: var(--bedi-space-3) var(--bedi-space-5);
}

.bedi-b2b__badge svg { flex: none; }

.bedi-b2b__note {
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--bedi-text-sm);
	font-weight: 500;
	margin: 0;
}

/* --- the photograph -------------------------------------------------- */

.bedi-b2b__art {
	align-self: end;
	grid-column: 2;
	/*
	 * MORE THAN THE CARD'S OWN BOTTOM PADDING, AND THE DIFFERENCE IS THE BLEED.
	 *
	 * Cancelling the padding exactly (-space-7) lands the photograph flush on
	 * the bottom edge, which is not the same thing: measured, it produced 0px
	 * of overhang and the cut-out read as a picture sitting in a box. The extra
	 * -space-5 pushes it under the edge, where the card's `overflow: clip`
	 * crops it — the reference's figure is cut off at the shin for the same
	 * reason.
	 */
	margin-block-end: calc(-1 * (var(--bedi-space-7) + var(--bedi-space-5)));
	min-inline-size: 0;
}

.bedi-b2b__art img {
	block-size: auto;
	display: block;
	inline-size: 100%;
	max-block-size: 340px;
	object-fit: contain;
	object-position: bottom center;
}

/* --- the three steps -------------------------------------------------- */

.bedi-b2b__steps {
	display: grid;
	grid-column: 3;
	list-style: none;
	margin: 0;
	padding: 0;
	row-gap: var(--bedi-space-3);
}

.bedi-b2b__step {
	align-items: center;
	color: #FFFFFF;
	column-gap: var(--bedi-space-3);
	display: flex;
	font-size: var(--bedi-text-lg);
	font-weight: 700;
	justify-content: flex-end;
	white-space: nowrap;
}

.bedi-b2b__stepicon {
	align-items: center;
	display: inline-flex;
	flex: none;
	justify-content: center;
}

/* --- the button ------------------------------------------------------- */

.bedi-b2b__cta {
	align-items: center;
	background-color: var(--bedi-navy);
	border-radius: var(--bedi-radius-pill);
	color: #FFFFFF;
	column-gap: var(--bedi-space-2);
	display: inline-flex;
	flex: none;
	font-size: var(--bedi-text-base);
	font-weight: 700;
	grid-column: 4;
	min-block-size: 48px;
	padding-inline: var(--bedi-space-5);
	transition: background-color var(--bedi-dur-micro) var(--bedi-ease-out);
	white-space: nowrap;
}

.bedi-b2b__card:hover .bedi-b2b__cta {
	background-color: #150A45;
}

/* --- between the two ---------------------------------------------------
 * The steps are the first thing to go. They are a restatement of the button —
 * "get in touch, get prices, get delivery" is what pressing it starts — and
 * below about 62em they are what forces the headline to wrap to four lines.
 * ------------------------------------------------------------------- */

@media (max-width: 61.9375em) {
	.bedi-b2b__card {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr) auto;
		padding-inline: var(--bedi-space-6);
	}

	.bedi-b2b__steps { display: none; }

	.bedi-b2b__cta { grid-column: 3; }
}

/* --- phones ------------------------------------------------------------ */

@media (max-width: 47.9375em) {
	.bedi-b2b {
		margin-block: var(--bedi-space-6);
	}

	/*
	 * One column, and the photograph LAST so it can still bleed off the bottom
	 * edge — which is the one part of the composition worth keeping at this
	 * width. The button goes full width above it, where a thumb reaches it
	 * without scrolling past the picture.
	 */
	.bedi-b2b__card {
		grid-template-columns: minmax(0, 1fr);
		min-block-size: 0;
		padding: var(--bedi-space-6) var(--bedi-space-5) 0;
		row-gap: var(--bedi-space-5);
	}

	.bedi-b2b__copy { grid-column: 1; }

	.bedi-b2b__title {
		font-size: 1.375rem;
		margin-block-end: var(--bedi-space-3);
	}

	/*
	 * THE DELIVERY PILL GOES TO THE BOTTOM LEFT, OVER THE PHOTOGRAPH.
	 *
	 * In the flow it was a third line of copy between the title and the note,
	 * which is where the desktop composition puts it because there the
	 * photograph is in the next column. Stacked on a phone that reads as three
	 * paragraphs and the picture is left holding the bottom of the card alone.
	 *
	 * Absolute against .bedi-b2b__card, which is already `position: relative`
	 * and is the nearest positioned ancestor — .bedi-b2b__copy is static, so
	 * the pill escapes the column it is nested in without being moved in the
	 * markup, and the desktop layout above is untouched.
	 *
	 * It sits ON the artwork rather than beside it. Beside would mean splitting
	 * the bottom band in two and the picture could then only get smaller, which
	 * is the opposite of what was asked; a navy pill over the lower corner of a
	 * cut-out reads as a label on the photograph, which is what it is.
	 */
	.bedi-b2b__badge {
		font-size: var(--bedi-text-sm);
		inset-block-end: var(--bedi-space-5);
		inset-inline-start: var(--bedi-space-5);
		margin-block: 0;
		padding: var(--bedi-space-2) var(--bedi-space-4);
		position: absolute;
		z-index: 2;
	}

	.bedi-b2b__cta {
		grid-column: 1;
		grid-row: 2;
		justify-content: center;
	}

	/*
	 * BIGGER, AND OFF THE RIGHT EDGE AS WELL AS THE BOTTOM ONE.
	 *
	 * 170px tall and centred in a 295px column made the photograph an
	 * illustration sitting under the copy. Bleeding it into the card's right
	 * padding buys 20px and, more importantly, lets it be a picture that runs
	 * out of the card rather than one parked inside it — the same thing the
	 * desktop composition does with the corner.
	 */
	.bedi-b2b__art {
		grid-column: 1;
		grid-row: 3;
		margin-block-end: 0;
		margin-inline-end: calc(var(--bedi-space-5) * -1);
	}

	.bedi-b2b__art img {
		/* `auto 0` is right-aligned: all the free space goes to the left. */
		margin-inline: auto 0;
		max-block-size: 250px;
		max-inline-size: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bedi-b2b__card,
	.bedi-b2b__cta { transition: none; }

	.bedi-b2b__card:hover { transform: none; }
}