/* =========================================
   Area hero
   Row:     .bm-area-hero
   Title:   .bm-area-hero__title
   Tagline: .bm-area-hero__tagline
   Only the two background images are set on the Impreza row

   Compact variant (half height): Extra class
   "bm-area-hero bm-area-hero--compact" on the row.
   ========================================= */

/* Hero row: background handling, height, text at the bottom */
.l-section.bm-area-hero {
	position: relative;
	aspect-ratio: 21 / 9 !important;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background-color: var(--color-tertiary, #086788);
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
}

/* Gradient overlay, same as the other heroes */
.l-section.bm-area-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		180deg,
		rgba(0, 0, 0, 0.28) 0%,
		rgba(0, 0, 0, 0.04) 35%,
		rgba(0, 0, 0, 0.38) 70%,
		rgba(0, 0, 0, 0.68) 100%
	);
	pointer-events: none;
	z-index: 0;
}

/* Content above the overlay */
.l-section.bm-area-hero > .l-section-h {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: 0;
	padding-bottom: 48px;
}

/* Title */
.bm-area-hero__title {
	margin: 0 0 8px;
	color: #ffffff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Tagline */
.bm-area-hero__tagline {
	margin: 0;
	max-width: 640px;
	color: #ffffff;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

/* Tablet and below: 4:5 for the mobile image */
@media (max-width: 1024px) {
	.l-section.bm-area-hero {
		aspect-ratio: 4 / 5 !important;
	}

	.l-section.bm-area-hero > .l-section-h {
		padding-bottom: 32px;
	}
}

/* =========================================
   Area hero – compact (half height)
   Extra class on the row: "bm-area-hero bm-area-hero--compact"
   Uses the same images, cropped to the lower height (cover):
     Desktop (1025px and up) : 2560 / 833 (like the contact page)
     Tablet and phones       : 8 / 5
   ========================================= */

.l-section.bm-area-hero.bm-area-hero--compact {
	aspect-ratio: 2560 / 833 !important;
}

.l-section.bm-area-hero.bm-area-hero--compact > .l-section-h {
	padding-bottom: 40px;
}

@media (max-width: 1024px) {
	.l-section.bm-area-hero.bm-area-hero--compact {
		aspect-ratio: 8 / 5 !important;
	}

	.l-section.bm-area-hero.bm-area-hero--compact > .l-section-h {
		padding-bottom: 24px;
	}
}

/* =========================================
   Area – About + At a glance
   Intro:    .bm-area-intro
   Tags:     .bm-good-for  ([bm_area_good_for])
   Box:      .bm-glance
   ========================================= */

/* Intro text */
.bm-area-intro {
	margin-bottom: 24px;
}

.bm-area-intro p:last-child {
	margin-bottom: 0;
}

/* Good for tags */
.bm-good-for {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bm-good-for__item {
	margin: 0;
	padding: 8px 16px;
	border-radius: 999px;
	background-color: #e8f5fd;
	color: var(--color-tertiary, #086788);
	font-weight: 600;
	line-height: 1.2;
}

/* At a glance box */
.bm-glance {
	padding: 16px;
	background-color: #ffffff;
	border: 1px solid #dfe6ee;
	border-radius: 16px;
	box-shadow: 0 8px 24px rgba(8, 103, 136, 0.08);
}

.bm-glance__title {
	margin: 0 0 8px;
	color: var(--color-tertiary, #086788);
}

/* Location / Difficulty / Travel time */
.bm-glance .post_custom_field .w-post-elm-before {
	color: var(--color-body-text, #4d5156);
}

.bm-glance .post_custom_field .w-post-elm-value {
	font-weight: 700;
	color: var(--color-tertiary, #086788);
}

/* Button full width inside the box */
.bm-glance .w-btn-wrapper {
	margin-top: 8px;
}

.bm-glance .w-btn-wrapper .w-btn {
	width: 100%;
	justify-content: center;
}

/* =========================================
   Area – Spots in this area (destination cards)
   Grid:  .bm-spots
   Body:  .bm-spot__body
   Title: .bm-spot__title
   Text:  .bm-spot__text
   ========================================= */

/* Card */
.bm-spots .w-grid-item-h {
	display: flex;
	flex-direction: column;
	height: 100%;
	background-color: #ffffff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(8, 103, 136, 0.08);
}

/* Image */
.bm-spots .post_image {
	margin: 0;
}

.bm-spots .post_image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Text area */
.bm-spot__body {
	flex: 1 1 auto;
	padding: 16px;
}

.bm-spot__title {
	margin: 0;
	color: var(--color-tertiary, #086788);
}

.bm-spot__text {
	color: var(--color-body-text, #4d5156);
}

.bm-spot__text p {
	margin: 0;
}