/* Shared pieces: the closing invitation band and the WhatsApp button styling
   that goes with it. Loaded by the Contact page and every policy page, which
   is why nothing here is scoped to one page's wrapper class. */

/* ------------------------------------------------- WhatsApp button ---- */

/* The plugin ships a solid green pill. On these pages it reads as a quiet
   secondary action, so only the glyph keeps the WhatsApp green. */
.vvw-wa-btn.vvt-wa {
	gap: .6rem; padding: .7rem 1.2rem;
	background: #fff; color: var(--vv-navy) !important;
	border: 1px solid var(--vv-line); border-radius: var(--vv-radius);
	font-size: .82rem; font-weight: 600;
}

.vvw-wa-btn.vvt-wa svg { color: #25d366; }
.vvw-wa-btn.vvt-wa:hover { filter: none; border-color: var(--vv-navy); box-shadow: var(--vv-shadow-sm); }

/* Full-width variant, for sitting under a primary button. */
.vvw-wa-btn.vvt-wa--block {
	width: 100%; padding: .85rem 1.9rem;
	border-color: var(--vv-gold);
	font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}

.vvw-wa-btn.vvt-wa--block svg { width: 20px; height: 20px; }

/* ---------------------------------------------------- closing band ---- */

.vvt-cta { padding: 0 0 clamp(3rem, 6vw, 4.5rem); }

.vvt-cta__band {
	position: relative; overflow: hidden;
	display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr) auto;
	gap: clamp(1.25rem, 3vw, 2.5rem); align-items: center;
	background: #fffdf8;
	border: 1px solid var(--vv-line); border-radius: var(--vv-radius-lg);
}

/* Named rather than "> *", which would outrank the watermark's own
   position:absolute and drop it into the grid as a fourth column. */
.vvt-cta__copy,
.vvt-cta__act { position: relative; z-index: 2; }

.vvt-cta__media { margin: 0; align-self: stretch; }
.vvt-cta__media img { width: 100%; height: 100%; object-fit: cover; object-position: center bottom; }

.vvt-cta__copy { padding: 1.75rem 0; }
.vvt-cta__copy h2 { margin: 0 0 .5rem; font-family: var(--vv-serif); font-size: var(--vv-h3); font-weight: 700; line-height: 1.2; color: var(--vv-navy); }
.vvt-cta__copy p { margin: 0; max-width: 46ch; font-size: .86rem; color: var(--vv-muted); line-height: 1.7; }

.vvt-cta__act { display: grid; justify-items: stretch; gap: .6rem; width: min(15rem, 100%); padding: 1.75rem clamp(1.5rem, 3vw, 2.75rem) 1.75rem 0; }

.vvt-cta__btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
	padding: .85rem 1.9rem;
	background: var(--vv-navy); color: #fff !important;
	border-radius: var(--vv-radius);
	font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	transition: background .22s var(--vv-ease), transform .22s var(--vv-ease);
}

.vvt-cta__btn:hover { background: var(--vv-navy-deep); transform: translateY(-2px); }

/* Skyline watermark, behind the buttons on the right. Boxed to the band's own
   height and contained, so the domes stay in frame however short the band is. */
.vvt-cta__arch { position: absolute; inset: 0 0 0 auto; z-index: 1; width: min(46%, 460px); opacity: .3; pointer-events: none; }
.vvt-cta__arch img { width: 100%; height: 100%; object-fit: contain; object-position: right bottom; }

@media (max-width: 1000px) {
	.vvt-cta__band { grid-template-columns: minmax(0, .5fr) minmax(0, 1fr); }
	.vvt-cta__act { grid-column: 1 / -1; width: 100%; max-width: 22rem; padding: 0 clamp(1.25rem, 3vw, 2rem) 1.75rem; }
	.vvt-cta__copy { padding-right: 1.5rem; }
}

@media (max-width: 720px) {
	.vvt-cta__band { grid-template-columns: 1fr; }
	.vvt-cta__media { max-height: 220px; }
	.vvt-cta__copy { padding: 1.5rem 1.25rem 0; }
	.vvt-cta__act { padding: 0 1.25rem 1.5rem; }
	.vvt-cta__arch { width: 70%; opacity: .18; }
}