/* =============================================================
 * Minimog Child — About / Feature widget
 *
 * The section's job is credibility: a new visitor deciding whether
 * an unfamiliar parapharmacy is worth an order. So the design puts
 * its weight on the two things that actually earn trust — the
 * photograph and the pharmacist credential sitting on it — and
 * keeps everything else quiet.
 *
 * Notes on what this deliberately does NOT do:
 *
 *   - The stats are a typographic ledger, not tinted cards. Three
 *     identical rounded boxes would give catalogue breadth, depth
 *     and delivery speed the same visual weight and turn three
 *     different claims into one decorative row.
 *   - There is one accent surface on screen, not three. The photo
 *     gets its depth from a shadow, so the tint is free to mean
 *     one thing: the credential badge.
 *   - Labels are sentence case. Tracked-out capitals on the
 *     eyebrow and on every stat label are chrome, not information.
 * ============================================================= */

.bsp-about {
	--bsp-ab-accent: #8022DB;
	--bsp-ab-accent-soft: #F7F3FD;
	--bsp-ab-ink: #16121F;
	--bsp-ab-muted: #6B6478;
	--bsp-ab-rule: rgba(22, 18, 31, .12);
	--bsp-ab-radius: 8px;
	--bsp-ab-media-w: 46%;
	--bsp-ab-gap: 64px;
	--bsp-ab-ease: cubic-bezier(.2, .75, .5, 1);

	display: flex;
	align-items: center;
	gap: var(--bsp-ab-gap);
}

.bsp-about--media-right {
	flex-direction: row-reverse;
}

/* No image chosen yet — common mid-build, and a valid way to use the
 * widget as a plain intro block. Without this the copy keeps the
 * measure cap it was given for a half-width column and sits as a
 * narrow strip in a full-width space. */
.bsp-about--no-media .bsp-about__text {
	max-width: 70ch;
}

/* -------------------------------------------------------------
 * Image
 * ----------------------------------------------------------- */
/* align-self keeps the column from stretching to the height of the
 * copy — the badge is positioned against the photo's bottom edge,
 * so the column has to shrink-wrap the picture. */
.bsp-about__media-col {
	flex: 0 0 var(--bsp-ab-media-w);
	max-width: var(--bsp-ab-media-w);
	align-self: flex-start;
	position: relative;
}

.bsp-about__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--bsp-ab-radius);
	aspect-ratio: 4 / 5;
	background-color: var(--bsp-ab-accent-soft);
}

/* -------------------------------------------------------------
 * Match mode: the photo takes its height from the copy
 *
 * The default above gives the photo a fixed shape and lets the two
 * columns end wherever they end. That is right when the copy is
 * long, and wrong when it is short — a tall portrait beside three
 * lines of text leaves the right-hand column floating in white
 * space, which is what this mode fixes.
 *
 * The aspect-ratio has to be dropped, not overridden with a new
 * one: any ratio at all re-derives height from width and would
 * ignore the copy. Stretching both columns and letting the image
 * cover the resulting box is the only thing that actually ties the
 * two heights together.
 *
 * A min-height floor stays, because the mode inverts badly when the
 * copy is only a line or two: without it the photo collapses to a
 * letterbox strip.
 * ----------------------------------------------------------- */
.bsp-about--match {
	align-items: stretch;
}

/* The column is a plain block in this mode, not a flex container.
 * As a flex parent its content would establish a min-content height
 * from the photo's own proportions, and the column would push the
 * row taller instead of taking its height from the copy. */
.bsp-about--match .bsp-about__media-col {
	align-self: stretch;
	display: block;
}

/* !important earns its place here. The Image Shape control writes
 * its aspect-ratio into Elementor's own generated stylesheet, which
 * loads after this file and targets the same element. Hiding that
 * control with a condition stops it being edited, not the value it
 * already stored from being printed — so a widget switched to match
 * mode after a shape was chosen would keep the old fixed height. */
/* Absolutely positioned so the photo contributes NO height of its
 * own: it fills whatever box the stretched column ends up with, and
 * that box is sized by the copy in the other column. Any in-flow
 * alternative (a flex child, a height:100% block) still reports an
 * intrinsic height from the image and pushes the row taller than
 * the text — which is the bug this mode exists to fix.
 *
 * The floor lives on the COLUMN, not here: a min-height on an
 * absolutely positioned element cannot push its parent open. */
.bsp-about--match .bsp-about__media {
	aspect-ratio: auto !important;
	position: absolute;
	inset: 0;
}

.bsp-about--match .bsp-about__media-col {
	min-height: var(--bsp-ab-media-min, 320px);
}

/* Depth instead of an offset tinted block. A long, low-opacity
 * shadow pulled toward the accent reads as light in the room,
 * rather than as a second shape competing with the photo. */
.bsp-about--lifted .bsp-about__media {
	box-shadow:
		0 2px 6px -2px rgba(22, 18, 31, .10),
		0 28px 50px -32px rgba(22, 18, 31, .55);
}

/* The theme ships a global `img { max-width: 100%; height: auto }`.
 * That `height: auto` beats a plain `height: 100%` here, which left
 * the photo at its natural height inside the 4:5 box. Both need
 * forcing. */
.bsp-about__img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
	object-position: center;
}

/* -------------------------------------------------------------
 * Credential badge
 *
 * The one loud moment in the section, and the only thing allowed
 * to break the photo's edge. It carries the claim the rest of the
 * copy rests on — that a pharmacist chose the catalogue — so it
 * sits where the eye leaves the picture.
 * ----------------------------------------------------------- */
/* The overhang is deliberately modest. It has to read as breaking the
 * photo's edge without pushing into the gap between the columns, which
 * the Column Gap control can take down to 20px. */
.bsp-about__badge {
	position: absolute;
	z-index: 2;
	right: -16px;
	bottom: 26px;
	/* Leaves the overhang plus a margin, so a long credential wraps
	 * instead of running past the far edge of the picture. */
	max-width: calc(100% - 24px);
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 13px 20px 13px 16px;
	border-radius: var(--bsp-ab-radius);
	background-color: #FFF;
	box-shadow:
		0 1px 2px rgba(22, 18, 31, .07),
		0 18px 36px -20px rgba(22, 18, 31, .45);
}

.bsp-about--media-right .bsp-about__badge {
	right: auto;
	left: -18px;
}

.bsp-about__badge-mark {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background-color: var(--bsp-ab-accent-soft);
	color: var(--bsp-ab-accent);
}

.bsp-about__badge-mark svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* Without min-width:0 this flex child refuses to shrink below the
 * width of its longest line, so the badge overruns the photo on a
 * narrow column instead of wrapping. */
.bsp-about__badge-body {
	min-width: 0;
}

.bsp-about__badge-text {
	display: block;
	color: var(--bsp-ab-ink);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.bsp-about__badge-sub {
	display: block;
	margin-top: 2px;
	color: var(--bsp-ab-muted);
	font-size: 12px;
	font-weight: 500;
	line-height: 1.3;
}

/* -------------------------------------------------------------
 * Copy
 * ----------------------------------------------------------- */
.bsp-about__body {
	flex: 1 1 auto;
	min-width: 0;
	/* Left, not centred. Centred prose starts every line in a
	 * different place, which is what made the original read as a
	 * wall of text. */
	text-align: left;
}

/* Sentence case, not tracked-out capitals: it is a line of writing
 * that orients the reader, so it should look like one. The accent
 * dot does the work of marking it as a label. */
.bsp-about__eyebrow {
	display: flex;
	align-items: center;
	gap: 9px;
	margin-bottom: 16px;
	color: var(--bsp-ab-accent);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .01em;
	line-height: 1.4;
}

.bsp-about__eyebrow::before {
	content: '';
	flex: 0 0 auto;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: currentColor;
}

.bsp-about__title {
	margin: 0 0 20px;
	color: var(--bsp-ab-ink);
	/* Scales with the viewport so the heading keeps its presence
	 * against a tall photo instead of being dwarfed by it. */
	font-size: clamp(34px, 3.6vw, 50px);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.03em;
}

.bsp-about__text {
	color: var(--bsp-ab-muted);
	font-size: 16px;
	line-height: 1.75;
	/* A measure cap. Past roughly 75 characters the eye loses its
	 * place returning to the next line. */
	max-width: 56ch;
}

.bsp-about__text > *:first-child {
	margin-top: 0;
}

.bsp-about__text > *:last-child {
	margin-bottom: 0;
}

.bsp-about__text p {
	margin: 0 0 14px;
}

/* -------------------------------------------------------------
 * Stat ledger
 *
 * Hairline-separated columns rather than tiles. The numbers are
 * already the largest thing in the block; wrapping each one in a
 * tinted box adds a surface without adding information, and makes
 * three different kinds of claim look interchangeable.
 * ----------------------------------------------------------- */
.bsp-about__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0 34px;
	margin: 34px 0 0;
	padding: 26px 0 0;
	border-top: 1px solid var(--bsp-ab-rule);
	list-style: none;
}

.bsp-about__stat {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* The divider belongs between items, so it hangs off the start of
 * each one but the first. A pseudo-element rather than a border:
 * a border-left would also need the padding, and this way the rule
 * can inset from the top and bottom of the figure. */
.bsp-about__stat + .bsp-about__stat {
	position: relative;
	padding-left: 34px;
}

.bsp-about__stat + .bsp-about__stat::before {
	content: '';
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 1px;
	background-color: var(--bsp-ab-rule);
}

.bsp-about__stat-value {
	display: block;
	color: var(--bsp-ab-ink);
	font-size: 34px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.035em;
	/* Keeps 357 and 7000 on a shared figure width so the row reads
	 * as a set of numbers rather than as loose words. */
	font-variant-numeric: tabular-nums;
}

/* The + or h rides smaller and tight against the number, and takes
 * the accent so each figure has one point of colour. */
.bsp-about__stat-suffix {
	color: var(--bsp-ab-accent);
	font-size: .58em;
	font-weight: 700;
	margin-left: 1px;
}

.bsp-about__stat-label {
	display: block;
	margin-top: 8px;
	color: var(--bsp-ab-muted);
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
}

/* -------------------------------------------------------------
 * Button
 * ----------------------------------------------------------- */
.bsp-about__btn {
	display: inline-flex;
	align-items: center;
	margin-top: 34px;
	padding: 0 28px;
	height: 52px;
	border-radius: var(--bsp-ab-radius);
	background-color: var(--bsp-ab-accent);
	color: #FFF;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: .01em;
	text-decoration: none;
	transition:
		background-color .3s var(--bsp-ab-ease),
		transform .3s var(--bsp-ab-ease),
		box-shadow .3s var(--bsp-ab-ease);
}

.bsp-about__btn:hover,
.bsp-about__btn:focus-visible {
	color: #FFF;
	text-decoration: none;
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -12px rgba(128, 34, 219, .6);
}

.bsp-about__btn:focus-visible {
	outline: 2px solid var(--bsp-ab-accent);
	outline-offset: 3px;
}

/* -------------------------------------------------------------
 * Responsive
 * ----------------------------------------------------------- */
@media (max-width: 1024px) {
	.bsp-about {
		--bsp-ab-gap: 40px;
	}

	.bsp-about__stats {
		gap: 0 24px;
	}

	.bsp-about__stat + .bsp-about__stat {
		padding-left: 24px;
	}

	.bsp-about__stat-value {
		font-size: 29px;
	}
}

@media (max-width: 767px) {
	/* Stack, image first — the photo is the hook on a phone.
	 * row-reverse is cleared so "image right" does not invert the
	 * stacking order and put the copy above the image. */
	.bsp-about,
	.bsp-about--media-right {
		flex-direction: column;
		gap: 30px;
	}

	.bsp-about__media-col {
		flex: 0 0 auto;
		max-width: 100%;
		width: 100%;
	}

	.bsp-about__media {
		aspect-ratio: 4 / 3;
	}

	/* Stacked, there is no second column to match, so the "same
	 * height as the content" mode has nothing to track. Left alone
	 * its stretch rules would give the photo whatever height the
	 * flex line happened to produce; the normal mobile ratio is
	 * restored instead. */
	/* Back into the flow: stacked, the photo has to carry its own
	 * height again, since there is no side column to take it from. */
	.bsp-about--match .bsp-about__media {
		aspect-ratio: 4 / 3 !important;
		position: relative;
		inset: auto;
	}

	.bsp-about--match .bsp-about__media-col {
		min-height: 0;
	}

	/* The badge cannot hang off the edge of a full-bleed column, so
	 * it tucks inside the photo instead of overlapping it. */
	.bsp-about__badge,
	.bsp-about--media-right .bsp-about__badge {
		right: 14px;
		left: auto;
		bottom: 14px;
		max-width: calc(100% - 28px);
		padding: 11px 16px 11px 13px;
	}

	.bsp-about__title {
		font-size: 30px;
		margin-bottom: 16px;
	}

	.bsp-about__text {
		font-size: 15px;
	}

	/* A grid rather than a wrapping flex row. With three stats the flex
	 * row broke 2 + 1 and left the last figure stranded on its own line;
	 * auto-fit keeps them even whatever the stat count, and drops to two
	 * columns only when a third would be too narrow to read. */
	.bsp-about__stats {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
		gap: 20px 16px;
		margin-top: 28px;
		padding-top: 22px;
	}

	/* The rule only reads as a divider between items on the same
	 * line, and the wrap point moves with the stat count. */
	.bsp-about__stat + .bsp-about__stat {
		padding-left: 0;
	}

	.bsp-about__stat + .bsp-about__stat::before {
		display: none;
	}

	.bsp-about__stat-value {
		font-size: 28px;
	}

	.bsp-about__btn {
		display: flex;
		justify-content: center;
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bsp-about__btn {
		transition: none !important;
	}

	.bsp-about__btn:hover,
	.bsp-about__btn:focus-visible {
		transform: none !important;
	}
}