/**
 * BBP Services widget styles.
 *
 * Card proportions (4 equal columns, photo aspect ratio 315:252) measured
 * directly off the Figma reference.
 *
 * Deliberately has NO hardcoded outer padding of its own: Elementor's
 * native Advanced > Padding control (which targets
 * .elementor-widget-container) is the only source of outer spacing.
 *
 * .bbp-text-gold is defined in hero.css and reused here, not redefined.
 */

.elementor-widget-bbp-services {
	width: 100%;
}

.bbp-services-section {
	width: 100%;
	max-width: var(--bbp-content-width);
	margin: 0 auto;
}

.bbp-services-heading {
	font-family: var(--bbp-heading-font);
	font-weight: 400;
	font-size: 40px;
	line-height: 1.2;
	color: var(--bbp-text-white);
	text-transform: uppercase;
	text-align: center;
	margin: 0 0 40px;
}

.bbp-services-heading .bbp-text-gold {
	color: var(--bbp-gold);
}

.bbp-services-grid {
	--bbp-services-cols: 4;
	display: grid;
	grid-template-columns: repeat(var(--bbp-services-cols), 1fr);
	gap: 24px;
}

.bbp-services-card {
	display: flex;
	flex-direction: column;
	background: var(--bbp-bg-card);
	border: 1px solid var(--bbp-border-card);
	border-radius: 17px;
	padding: 8px;
}

.bbp-services-photo {
	width: 100%;
	aspect-ratio: 1.25;
	border-radius: 12px;
	overflow: hidden;
	margin-bottom: 16px;
}

.bbp-services-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Zoom-in-out on hover — gated to real hover input (mouse/trackpad) so
   touch devices don't get stuck in the zoomed-in state after a tap. */
@media (hover: hover) {
	.bbp-services-photo img {
		transition: transform 0.45s ease;
	}

	.bbp-services-card:hover .bbp-services-photo img {
		transform: scale(1.1);
	}
}

.bbp-services-body {
	padding: 0 10px 10px;
}

.bbp-services-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.bbp-services-title {
	font-family: var(--bbp-font-family);
	font-weight: 800;
	font-size: 17px;
	color: var(--bbp-text-white);
	text-transform: uppercase;
}

.bbp-services-price {
	flex: 0 0 auto;
	font-family: var(--bbp-font-family);
	font-weight: 700;
	font-size: 16px;
	color: var(--bbp-gold);
	white-space: nowrap;
}

.bbp-services-duration {
	font-family: var(--bbp-font-family);
	font-size: 13px;
	color: var(--bbp-text-muted);
	margin-top: 4px;
}

.bbp-services-description {
	position: relative;
	margin-top: 12px;
}

.bbp-services-description p {
	font-family: var(--bbp-font-family);
	font-size: 14px;
	line-height: 1.6;
	color: var(--bbp-text-muted);
	margin: 0;
}

.bbp-services-book-btn {
	width: 100%;
	margin-top: 16px;
	font-size: 15px;
	padding: 14px 20px;
}

/* Desktop hover — only on devices with a real hover input (mouse/
   trackpad). The description text fades away (revealing the card's own
   background colour behind it) and the Book Now button fades/slides in
   on top of that same box, since the widget nests the button inside
   .bbp-services-description (see the widget's render()) specifically so
   this absolute positioning lines up with the text it's covering.

   On touch devices (no hover capability), none of this applies — the
   description stays visible and the button sits in normal flow right
   below it, since a hover-only reveal would otherwise make it
   unreachable there. */
@media (hover: hover) {
	.bbp-services-description p {
		transition: opacity 0.3s ease;
	}

	.bbp-services-card:hover .bbp-services-description p,
	.bbp-services-card:focus-within .bbp-services-description p {
		opacity: 0;
	}

	.bbp-services-description .bbp-services-book-btn {
		position: absolute;
		inset: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		opacity: 0;
		height: 50px;
		transform: translateY(8px);
		pointer-events: none;
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	.bbp-services-card:hover .bbp-services-description .bbp-services-book-btn,
	.bbp-services-card:focus-within .bbp-services-description .bbp-services-book-btn {
		opacity: 1;
		transform: translateY(0);
		pointer-events: auto;
	}
}

@media (max-width: 992px) {
	.bbp-services-grid {
		--bbp-services-cols: 2 !important;
	}
}

@media (max-width: 560px) {
	.bbp-services-heading {
		font-size: 30px;
	}

	.bbp-services-grid {
		--bbp-services-cols: 1 !important;
	}

	/* On phones the hover-hide/reveal treatment above (gated to
	   @media(hover:hover)) can still match — touchscreen laptops/hybrid
	   devices, or emulated viewports that report a mouse. Force the
	   description and button back to their normal, always-visible flow
	   state below this width regardless. */
	.bbp-services-description p {
		opacity: 1 !important;
	}

	.bbp-services-description .bbp-services-book-btn {
		position: static !important;
		margin-top: 16px !important;
		opacity: 1 !important;
		transform: none !important;
		pointer-events: auto !important;
	}
}