/* =========================================================
   YACHT CARDS
   Impreza Grid + Grid Layouts, styled by class.

   Put the grid class on the Grid element (Extra class):
     bm-yacht-grid                        fleet page
     bm-yacht-grid bm-yacht-grid--compact About us
     bm-yacht-grid bm-yacht-grid--classic homepage (Grid Layout "Yacht Card – Classic")

   Put the element classes on the Grid Layout elements:
     bm-card__media        Post Custom Field  hero_image_desktop
     bm-card__badge        Post Taxonomy      Yacht types
     bm-card__body         Vertical Wrapper   around everything below
     bm-card__title        Post Title
     bm-card__tagline      Post Custom Field  tagline
     (no class)            HTML element       [yacht_card_stats]
     bm-card__trips        Post Custom Field  bm_card_trips
     (no class)            HTML element       [yacht_card_price]
     bm-card__type         Post Custom Field  bm_card_type   (compact only)

   The two shortcodes print their own markup:
     .bm-card__stats > .bm-card__stat > .bm-card__stat-value > i + span
     (Font Awesome turns the i into an svg on the page)
     .bm-card__price-wrap > .bm-card__price + .bm-card__note

   Classic uses [yacht_card_stats show="speed,pax,cabins" labels="1"],
   same markup plus a label under each value:
     .bm-card__stat > .bm-card__stat-value (i + span) + .bm-card__stat-label
========================================================= */

.bm-yacht-grid {
	--bm-card-bg: #ffffff;
	--bm-card-radius: 16px;
	--bm-card-border: rgba(15, 45, 70, 0.08);
	--bm-card-shadow: 0 6px 24px rgba(15, 45, 70, 0.08);
	--bm-card-shadow-hover: 0 14px 36px rgba(15, 45, 70, 0.14);
	--bm-card-title: #16506e;
	--bm-card-text: #1d2b36;
	--bm-card-muted: #5f6f7a;
	--bm-card-accent: #1e9bd7;
	--bm-card-tile: #f4f7f9;
	--bm-card-tile-border: rgba(15, 45, 70, 0.07);
	--bm-card-pad: 20px;
}


/* =========================================================
   CARD
   Impreza wraps every item in .w-grid-item-h. That is the card.
========================================================= */

.bm-yacht-grid .w-grid-item-h {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	background: var(--bm-card-bg);
	border: 1px solid var(--bm-card-border);
	border-radius: var(--bm-card-radius);
	box-shadow: var(--bm-card-shadow);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.bm-yacht-grid .w-grid-item-h:hover {
	box-shadow: var(--bm-card-shadow-hover);
	transform: translateY(-3px);
}


/* =========================================================
   IMAGE
   The container fixes the shape, so a card still lines up
   if one image was not cropped to 1280 x 853.
========================================================= */

.bm-yacht-grid .bm-card__media {
	position: relative;
	margin: 0 !important;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--bm-card-tile);
}

.bm-yacht-grid .bm-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}

.bm-yacht-grid .w-grid-item-h:hover .bm-card__media img {
	transform: scale(1.04);
}


/* =========================================================
   BADGE
   Yacht type, sitting on the image.
========================================================= */

.bm-yacht-grid .bm-card__badge {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	margin: 0 !important;
	pointer-events: none;
}

.bm-yacht-grid .bm-card__badge a,
.bm-yacht-grid .bm-card__badge span {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: var(--bm-card-title);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-decoration: none;
}


/* =========================================================
   BODY
========================================================= */

.bm-yacht-grid .bm-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 0;
	padding: var(--bm-card-pad) var(--bm-card-pad) calc(var(--bm-card-pad) + 2px);
	text-align: center;
}

.bm-yacht-grid .bm-card__title {
	margin: 0 !important;
	color: var(--bm-card-title);
	font-size: 1.35rem;
	line-height: 1.25;
}

.bm-yacht-grid .bm-card__title a {
	color: inherit;
	text-decoration: none;
}

/* The title link covers the whole card, so a click anywhere opens
   the yacht. The card is position: relative, so the link fills it. */
.bm-yacht-grid .bm-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.bm-yacht-grid .bm-card__title a:focus-visible {
	outline: none;
}

.bm-yacht-grid .bm-card__title a:focus-visible::after {
	border-radius: var(--bm-card-radius);
	box-shadow: inset 0 0 0 3px var(--bm-card-accent);
}

.bm-yacht-grid .bm-card__tagline {
	margin: 4px 0 0 !important;
	color: var(--bm-card-muted);
	font-size: 14px;
	line-height: 1.45;
}


/* =========================================================
   STATS
   Three equal tiles: guests, length, speed.
========================================================= */

.bm-yacht-grid .bm-card__stats {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	margin: 16px 0 0 !important;
}

.bm-yacht-grid .bm-card__stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 0;
	margin: 0 !important;
	padding: 10px 6px;
	border: 1px solid var(--bm-card-tile-border);
	border-radius: 10px;
	background: var(--bm-card-tile);
}

.bm-yacht-grid .bm-card__stat-value {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	margin: 0 !important;
	color: var(--bm-card-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	white-space: nowrap;
}

/* Font Awesome replaces the <i> with an <svg> on the page, so both are styled. */
.bm-yacht-grid .bm-card__stat-value i,
.bm-yacht-grid .bm-card__stat-value svg {
	margin: 0 !important;
	color: var(--bm-card-accent);
	font-size: 18px;
}


/* =========================================================
   TRIPS
========================================================= */

.bm-yacht-grid .bm-card__trips {
	margin: 14px 0 0 !important;
	color: var(--bm-card-muted);
	font-size: 13px;
	line-height: 1.4;
}


/* =========================================================
   CTA
========================================================= */

.bm-yacht-grid .bm-card__cta a,
.bm-yacht-grid .bm-card__cta {
    margin: 14px 0 0 !important;
    color: var(--bm-card-accent);
    font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
    line-height: 1.55;
}

/* Base underline styling */
.bm-yacht-grid .bm-card__cta a {
    text-decoration: underline;
    text-underline-offset: 4px; /* Prevents underline from touching text descenders */
    text-decoration-thickness: 1.5px;
}

/* Hover state */
.bm-yacht-grid .bm-card__cta a:hover {
    color: var(--bm-card-muted);
    text-decoration-color: var(--bm-card-muted); /* Keeps underline matching hover color */
}


/* =========================================================
   PRICE
   Pushed to the bottom, so prices line up across a row even
   when one card has a longer tagline. The shortcode sits inside
   Impreza's HTML element, so that element takes the auto margin.
========================================================= */

.bm-yacht-grid .bm-card__body > *:has(.bm-card__price-wrap) {
	margin-top: auto !important;
}

.bm-yacht-grid .bm-card__price-wrap {
	margin: 0 !important;
	padding-top: 14px;
}

.bm-yacht-grid .bm-card__price-wrap::before {
	content: "";
	display: block;
	height: 1px;
	margin: 0 0 14px;
	background: var(--bm-card-border);
}

.bm-yacht-grid .bm-card__price {
	margin: 0 !important;
	color: var(--bm-card-text);
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.3;
}

.bm-yacht-grid .bm-card__note {
	margin: 2px 0 0 !important;
	color: var(--bm-card-muted);
	font-size: 12px;
	line-height: 1.4;
}


/* =========================================================
   COMPACT
   About us. Image, name, type, tagline. Left aligned.
========================================================= */

.bm-yacht-grid--compact {
	--bm-card-pad: 16px;
}

.bm-yacht-grid--compact .bm-card__body {
	text-align: left;
}

.bm-yacht-grid--compact .bm-card__title {
	font-size: 1.15rem;
}

.bm-yacht-grid--compact .bm-card__type {
	margin: 2px 0 0 !important;
	color: var(--bm-card-muted);
	font-size: 13px;
	line-height: 1.4;
}

.bm-yacht-grid--compact .bm-card__tagline {
	margin-top: 6px !important;
	font-size: 13px;
}


/* =========================================================
   CLASSIC
   Homepage. The look of the yacht cards on the current website:
   name and length in capitals, price under the name, three
   tiles with icon, value and label, trips at the bottom.
   The card stays on hover, only the photo zooms.

   Grid Layout "Yacht Card – Classic":
     bm-card__media                  Image              hero_image_desktop
     bm-card__body                   Vertical Wrapper   around everything below
     bm-card__title-row              Horizontal Wrapper title + length
     bm-card__title                  Post Title
     bm-card__title bm-card__length  Post Custom Field  specs_length_ft
     (no class)                      HTML element       [yacht_card_price]
     (no class)                      HTML element       [yacht_card_stats show="speed,pax,cabins" labels="1"]
     bm-card__trips                  Post Custom Field  bm_card_trips
========================================================= */

.bm-yacht-grid--classic {
	--bm-card-radius: 24px;
}

/* The card stays, only the photo zooms */
.bm-yacht-grid--classic .w-grid-item-h:hover {
	transform: none;
}

.bm-yacht-grid--classic .bm-card__media img {
	transition: transform 0.3s ease;
}

.bm-yacht-grid--classic .w-grid-item-h:hover .bm-card__media img {
	transform: scale(1.05);
}

/* Name and length on one line, in capitals */
.bm-yacht-grid--classic .bm-card__title {
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* The theme adds space above a heading that follows another heading. */
.bm-yacht-grid--classic .bm-card__length {
	margin-left: 0.3em !important;
	padding-top: 0 !important;
}

/* Price directly under the name, without the line above */
.bm-yacht-grid--classic .bm-card__body > *:has(.bm-card__price-wrap) {
	margin-top: 8px !important;
}

.bm-yacht-grid--classic .bm-card__price-wrap {
	padding-top: 0;
}

.bm-yacht-grid--classic .bm-card__price-wrap::before {
	content: none;
}

/* Tiles: icon in a square, value, label.
   Font Awesome replaces the <i> with an <svg> on the page, so both are styled. */
.bm-yacht-grid--classic .bm-card__stat {
	padding: 12px 8px;
	border-radius: 12px;
}

.bm-yacht-grid--classic .bm-card__stat-value i,
.bm-yacht-grid--classic .bm-card__stat-value svg {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 24px;
	height: 24px;
	margin: 0 0 4px !important;
	padding: 6px;
	border-radius: 8px;
	background: var(--bm-card-accent);
	color: #ffffff;
	font-size: 12px;
}

.bm-yacht-grid--classic .bm-card__stat-label {
	margin: 2px 0 0 !important;
	color: var(--bm-card-muted);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Trips at the bottom of the card */
.bm-yacht-grid--classic .bm-card__trips {
	margin-top: auto !important;
	padding-top: 14px;
}


/* =========================================================
   SMALL SCREENS
========================================================= */

@media (max-width: 599px) {

	.bm-yacht-grid {
		--bm-card-pad: 16px;
	}

	.bm-yacht-grid .bm-card__title {
		font-size: 1.2rem;
	}

	.bm-yacht-grid .bm-card__stat-value {
		font-size: 13px;
	}

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

	.bm-yacht-grid .w-grid-item-h,
	.bm-yacht-grid .bm-card__media img {
		transition: none;
	}

	.bm-yacht-grid .w-grid-item-h:hover,
	.bm-yacht-grid .w-grid-item-h:hover .bm-card__media img {
		transform: none;
	}

}