/*
 * Hero guide. Figma 2480:68118: under the transparent header (32px gap), grey
 * panel 1220x568 (square corners), text block 409 wide 64px from the left and
 * vertically centred (header/XL + body/S grey, 24 gap to the tags). Photo area
 * 696 wide flush right: cut-out photo 747x394 at the bottom, 51px past the
 * right edge (clipped); bubbles subtitle/M, 8/12 padding, positions from the
 * bottom of the photo area. Sizes in the photo area use cqw so the bubbles stay
 * on the photo as it scales.
 * Mobile 2534:47964: panel 350x506, radius 20; photo area 253 high 16px from
 * the top (photo 205 high at its bottom), bubbles subtitle/S, 4/8 padding;
 * text 20px in, header/L, 16 gaps, 16px bottom padding.
 */

.hero-guide { padding-top: calc(var(--header-h) + 32px); }

.hero-guide__panel {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 568px;
	background: var(--c-bg-grey);
	overflow: hidden;
}

.hero-guide__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	width: 409px;
	max-width: calc(100% - 128px);
	margin-left: 64px;
	padding-block: 64px;
}

.hero-guide__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hero-guide__title { font: var(--f-header-xl); color: var(--c-text-dark); text-wrap: wrap; }
.hero-guide__lead { font: var(--f-body-s); color: var(--c-text-grey); }

.hero-guide__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Photo area: 696 of the 1220 panel, full height. */
.hero-guide__figure {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: min(696px, 100% - 497px);
	container-type: inline-size;
}

.hero-guide__img {
	position: absolute;
	right: -7.33cqw;                    /* 51 / 696 */
	bottom: 0;
	width: 107.33cqw;                   /* 747 / 696 */
	max-width: none;
	height: auto;
	aspect-ratio: 747 / 394;
	object-fit: contain;
	object-position: bottom center;
}

.hero-guide__bubbles { position: absolute; inset: 0; }

.hero-guide__bubble {
	position: absolute;
	padding: 8px 12px;
	border-radius: var(--r-xs) var(--r-xs) var(--r-xs) 1px;
	background: var(--c-secondary);
	color: var(--c-text-dark);
	font: var(--f-subtitle-m);
	white-space: nowrap;
}

/* Spots from Figma: left and bottom in 696ths of the photo area width. */
.hero-guide__bubble:nth-child(1) { left: 1.15cqw; bottom: 50.29cqw; border-radius: var(--r-xs) var(--r-xs) 1px var(--r-xs); }
.hero-guide__bubble:nth-child(2) { left: 60.92cqw; bottom: 54.31cqw; }
.hero-guide__bubble:nth-child(3) { left: 72.84cqw; bottom: 45.4cqw; }

@media (max-width: 1100px) {
	.hero-guide__bubble {
		padding: 4px 8px;
		font: var(--f-subtitle-s);
	}
}

/* Tablet and mobile: photo on top, text below. */
@media (max-width: 900px) {
	.hero-guide__panel {
		flex-direction: column;
		align-items: stretch;
		gap: 20px;
		min-height: 0;
		padding: 16px 0;
		border-radius: var(--r-l);
	}

	.hero-guide__figure {
		position: relative;
		order: -1;
		width: 100%;
		height: auto;
		aspect-ratio: 350 / 253;
	}

	.hero-guide__img {
		right: 0;
		width: 100%;
		height: 81.2%;                  /* 205.4 / 253 */
		aspect-ratio: auto;
		object-fit: cover;
	}

	.hero-guide__bubble { white-space: normal; }

	/* Mobile spots: px from the top, left in 350ths of the area width. */
	.hero-guide__bubble:nth-child(1) { left: 4cqw; top: 20px; bottom: auto; max-width: 125px; }
	.hero-guide__bubble:nth-child(2) { left: 59.43cqw; top: 0; bottom: auto; max-width: 114px; }
	.hero-guide__bubble:nth-child(3) { left: 72cqw; top: 52px; bottom: auto; max-width: 90px; }

	.hero-guide__content {
		width: auto;
		max-width: none;
		gap: 16px;
		margin: 0;
		padding: 0 20px;
	}
}

@media (max-width: 767px) {
	.hero-guide { padding-top: calc(var(--header-h) + 16px); }
	.hero-guide__title { font: var(--f-header-l); }
	.hero-guide__btn { width: 100%; }
}