/* ==========================================================================
   CTA band — "Plan Your Stay": the closing contact card.

   The user's layout, 2026-10-07; framed 2026-10-10. The card's white ground,
   inset and the pattern around it are the closing frame's (vv-primitives.css),
   which this band sits in, the newsletter under it when it follows. Two
   columns on desktop, 50 apart: the heading, line and buttons; then the
   reservations label 20 over phone and email (one line, 40 apart) and
   WhatsApp 20 under. One column below desktop, 40 between the two.
   ========================================================================== */

.vv-r-cta-band__card {
  display: grid;
  grid-template-columns: var(--vv-r-cta-band-columns);
  gap: var(--vv-gap-40) var(--vv-gap-50);
  align-items: start;
}

.vv-r-cta-band__main {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vv-head-action-gap);
}

.vv-r-cta-band__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vv-gap-10);              /* heading to line (user, 2026-10-07) */
  max-width: var(--vv-measure-800);
}

.vv-r-cta-band__action { display: flex; flex-wrap: wrap; gap: var(--vv-gap-20); }
.vv-r-cta-band__action .vv-button { text-align: start; }

/* ---------- Contacts ---------- */

.vv-r-cta-band__reach,
.vv-r-cta-band__contacts {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--vv-gap-20);
}

.vv-r-cta-band__pair {
  display: flex;
  flex-wrap: wrap;
  gap: var(--vv-gap-20) var(--vv-gap-25);
}
/* One contact grouping everywhere (user, 2026-10-11): the label over the
   lines in one row from a tablet up, 25 apart; a column on a phone. */
@media (min-width: 810px) {
  .vv-r-cta-band__contacts { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--vv-gap-20) var(--vv-gap-25); }
  .vv-r-cta-band__pair { display: contents; }   /* each line its own item: they wrap one by one, not as a pair */
}

.vv-r-cta-band__contact {
  display: inline-flex;
  align-items: center;
  gap: var(--vv-gap-10);
  text-decoration: none;
}

.vv-r-cta-band__icon {
  flex: none;
  width: 20px;
  height: 20px;
}

/* ---------- Breakpoints ---------- */

:root { --vv-r-cta-band-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1200.98px) {
  :root { --vv-r-cta-band-columns: minmax(0, 1fr); }
}

@media (max-width: 809.98px) {
  .vv-r-cta-band__pair { flex-direction: column; }
}