/*
 * Ventureheap Builder - business widgets.
 */

/* Service cards ----------------------------------------------------------- */
.vhb-service-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 28px;
	background: var(--vhb-bg);
	border: 1px solid var(--vhb-border);
	border-radius: var(--vhb-radius);
	transition: transform var(--vhb-transition), box-shadow var(--vhb-transition), border-color var(--vhb-transition);
	height: 100%;
}

.vhb-service-card:hover { transform: translateY(-3px); box-shadow: var(--vhb-shadow); border-color: transparent; }

.vhb-service-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.1em;
	height: 3.1em;
	font-size: 20px;
	color: var(--vhb-primary);
	background: color-mix(in srgb, var(--vhb-primary) 12%, transparent);
	border-radius: var(--vhb-radius-btn);
	flex: 0 0 auto;
}

.vhb-service-card__icon svg { width: 1em; height: 1em; fill: currentColor; }
.vhb-service-card__image img { border-radius: var(--vhb-radius-btn); width: 100%; }
.vhb-service-card__body { display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.vhb-service-card__title { margin: 0; font-size: 1.15rem; color: var(--vhb-secondary); }
.vhb-service-card__text { margin: 0; color: var(--vhb-muted); }
.vhb-service-card__link { margin-top: auto; align-self: flex-start; }

/* Team -------------------------------------------------------------------- */
.vhb-team-card {
	background: var(--vhb-bg);
	border: 1px solid var(--vhb-border);
	border-radius: var(--vhb-radius);
	overflow: hidden;
	text-align: center;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.vhb-team-card__photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
.vhb-team-card__photo.is-circle {
	width: 140px;
	margin: 24px auto 0;
	border-radius: 50%;
	overflow: hidden;
}
.vhb-team-card__body { padding: 20px; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.vhb-team-card__name { margin: 0; font-size: 1.1rem; color: var(--vhb-secondary); }
.vhb-team-card__role { margin: 0; color: var(--vhb-primary); font-size: .9rem; font-weight: 600; }
.vhb-team-card__bio { margin: .4rem 0 0; color: var(--vhb-muted); font-size: .92rem; }

.vhb-team-card__social {
	display: flex;
	justify-content: center;
	gap: 10px;
	list-style: none;
	margin: .9rem 0 0;
	padding: 0;
}

.vhb-team-card__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--vhb-alt);
	color: var(--vhb-secondary);
	text-decoration: none;
	transition: background var(--vhb-transition), color var(--vhb-transition);
}

.vhb-team-card__social a:hover { background: var(--vhb-primary); color: #fff; }
.vhb-team-card__social svg { width: 15px; height: 15px; fill: currentColor; }

/* Testimonials ------------------------------------------------------------ */
.vhb-testimonial {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
	padding: 28px;
	background: var(--vhb-bg);
	border: 1px solid var(--vhb-border);
	border-radius: var(--vhb-radius);
	height: 100%;
}

.vhb-testimonial__quote { margin: 0; padding: 0; border: 0; font-size: 1.02rem; color: var(--vhb-text); }
.vhb-testimonial__quote p { margin: 0; }
.vhb-testimonial__quote::before { content: "\201C"; color: var(--vhb-primary); font-size: 1.4em; line-height: 0; vertical-align: -.25em; margin-right: .1em; }

.vhb-testimonial__meta { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.vhb-testimonial__photo img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.vhb-testimonial__person { display: flex; flex-direction: column; }
.vhb-testimonial__name { font-weight: 700; color: var(--vhb-secondary); }
.vhb-testimonial__role { font-size: .86rem; color: var(--vhb-muted); }

.vhb-testimonials--minimal .vhb-testimonial { border: 0; padding: 0; background: none; }

.vhb-testimonials--bubble .vhb-testimonial { background: none; border: 0; padding: 0; }
.vhb-testimonials--bubble .vhb-testimonial__quote {
	position: relative;
	padding: 24px;
	background: var(--vhb-alt);
	border-radius: var(--vhb-radius);
}
.vhb-testimonials--bubble .vhb-testimonial__quote::after {
	content: "";
	position: absolute;
	left: 28px;
	bottom: -9px;
	width: 18px;
	height: 18px;
	background: inherit;
	transform: rotate(45deg);
}
.vhb-testimonials--bubble .vhb-testimonial__meta { padding-left: 8px; }

/* Client logos ------------------------------------------------------------ */
.vhb-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	height: 100%;
}

.vhb-logo img { max-height: 48px; width: auto; object-fit: contain; }

.vhb-logos.is-grayscale .vhb-logo img {
	filter: grayscale(1);
	opacity: .65;
	transition: filter var(--vhb-transition), opacity var(--vhb-transition);
}

.vhb-logos.is-grayscale .vhb-logo:hover img { filter: none; opacity: 1; }

/* Pricing ----------------------------------------------------------------- */
.vhb-pricing {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	padding: 32px;
	background: var(--vhb-bg);
	border: 1px solid var(--vhb-border);
	border-radius: var(--vhb-radius);
	height: 100%;
}

.vhb-pricing.is-featured { border-width: 2px; border-color: var(--vhb-primary); box-shadow: var(--vhb-shadow); }

.vhb-pricing__ribbon {
	position: absolute;
	top: -12px;
	right: 24px;
	padding: .25rem .75rem;
	font-size: .74rem;
	font-weight: 700;
	color: #fff;
	background: var(--vhb-primary);
	border-radius: 999px;
}

.vhb-pricing__head { text-align: center; }
.vhb-pricing__plan { margin: 0 0 .3rem; font-size: 1.2rem; color: var(--vhb-secondary); }
.vhb-pricing__desc { margin: 0 0 .8rem; color: var(--vhb-muted); font-size: .92rem; }

.vhb-pricing__price {
	margin: 0;
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: .12em;
	color: var(--vhb-secondary);
}

.vhb-pricing__currency { font-size: 1.2rem; font-weight: 600; }
.vhb-pricing__amount { font-size: 2.6rem; font-weight: 800; line-height: 1; }
.vhb-pricing__period { font-size: .9rem; color: var(--vhb-muted); font-weight: 500; }

.vhb-pricing__features { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.vhb-pricing__features li { display: flex; gap: .6rem; align-items: flex-start; color: var(--vhb-text); }
.vhb-pricing__features .is-excluded, .vhb-pricing__features li.is-excluded { color: var(--vhb-muted); text-decoration: line-through; }
.vhb-pricing__mark { color: var(--vhb-primary); font-weight: 700; flex: 0 0 auto; }
.vhb-pricing__features li.is-excluded .vhb-pricing__mark { color: var(--vhb-muted); }
.vhb-pricing__action { margin-top: auto; }
.vhb-pricing__action .vhb-btn { width: 100%; }

/* Process steps ----------------------------------------------------------- */
.vhb-steps { list-style: none; margin: 0; padding: 0; }

.vhb-step { position: relative; }

.vhb-steps--horizontal .vhb-step { text-align: center; }

.vhb-step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 62px;
	height: 62px;
	margin-bottom: 1rem;
	font-size: 1.15rem;
	font-weight: 800;
	color: #fff;
	background: var(--vhb-primary);
	border-radius: 50%;
	position: relative;
	z-index: 2;
}

.vhb-step__number svg { width: 22px; height: 22px; fill: currentColor; }
.vhb-step__title { margin: 0 0 .4rem; font-size: 1.1rem; color: var(--vhb-secondary); }
.vhb-step__text { margin: 0; color: var(--vhb-muted); }

.vhb-steps--vertical { display: grid; gap: 0; }
.vhb-steps--vertical .vhb-step { display: flex; gap: 20px; padding-bottom: 32px; }
.vhb-steps--vertical .vhb-step__number { margin-bottom: 0; flex: 0 0 auto; }
.vhb-steps--vertical.has-connector .vhb-step:not(:last-child)::after {
	content: "";
	position: absolute;
	top: 62px;
	left: 30px;
	bottom: 0;
	width: 2px;
	background: var(--vhb-border);
}

/* Contact info ------------------------------------------------------------ */
.vhb-contact-list { list-style: none; margin: 0; padding: 0; }
.vhb-contact-list--list { display: grid; gap: 18px; }

.vhb-contact { display: flex; gap: 14px; align-items: flex-start; }

.vhb-contact-list--cards .vhb-contact {
	padding: 22px;
	background: var(--vhb-bg);
	border: 1px solid var(--vhb-border);
	border-radius: var(--vhb-radius);
	height: 100%;
}

.vhb-contact__icon {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	background: currentColor;
	color: var(--vhb-primary);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.vhb-contact__icon--phone { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 2 .7 2.9a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.2-1.2a2 2 0 0 1 2.1-.5c.9.3 1.9.6 2.9.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E"); }
.vhb-contact__icon--email { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m2 7 10 6 10-6'/%3E%3C/svg%3E"); }
.vhb-contact__icon--address { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.vhb-contact__icon--hours { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E"); }
.vhb-contact__icon--whatsapp { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-12.6 7.4L3 20.5l1.7-5.2A8.5 8.5 0 1 1 21 11.5z'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.5 8.5 0 0 1-12.6 7.4L3 20.5l1.7-5.2A8.5 8.5 0 1 1 21 11.5z'/%3E%3C/svg%3E"); }

.vhb-contact__body { display: flex; flex-direction: column; }
.vhb-contact__label { font-size: .82rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--vhb-muted); }
.vhb-contact__value { color: var(--vhb-secondary); }
.vhb-contact__value a { color: inherit; text-decoration: none; }
.vhb-contact__value a:hover { color: var(--vhb-primary); text-decoration: underline; }

/* ------------------------------------------------------------ Mobile pass */
@media (max-width: 782px) {
	.vhb-service-card,
	.vhb-testimonial,
	.vhb-pricing { padding: 20px; }

	.vhb-pricing__amount { font-size: 2.1rem; }

	.vhb-steps--vertical .vhb-step { gap: 14px; padding-bottom: 24px; }
	.vhb-step__number { width: 50px; height: 50px; font-size: 1rem; }
	.vhb-steps--vertical.has-connector .vhb-step:not(:last-child)::after { top: 50px; left: 24px; }

	.vhb-contact-list--cards .vhb-contact { padding: 16px; }
	.vhb-team-card__photo.is-circle { width: 110px; }
	.vhb-logo { padding: 10px; }
}
