/**
 * Villa Welcome section — two-column intro: eyebrow + H1 + image on the left,
 * image + copy + button on the right. Depends on villa-home.css for tokens,
 * the button, the type scale and the reveal system.
 *
 * @package Villa_Addon
 */

.vo-welcome { padding-block: var(--sp-100); }

.vo-welcome__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 120px);
}

.vo-welcome__l,
.vo-welcome__r { display: flex; flex-direction: column; }

.vo-welcome__eyebrow { margin-bottom: 18px; }

.vo-welcome__h1 { margin-bottom: 60px; }

.vo-welcome__figure { overflow: hidden; margin: 0; }

.vo-welcome__l .vo-welcome__figure img { width: 100%; aspect-ratio: 1 / 1.05; object-fit: cover; display: block; }
.vo-welcome__r .vo-welcome__figure img { width: 100%; aspect-ratio: 1 / .62; object-fit: cover; display: block; }

.vo-welcome__p { margin: 60px 0 0; line-height: 1.4; font-size: 18px; color: var(--body); }
.vo-welcome__p + .vo-welcome__p { margin-top: 1.4rem; }

.vo-welcome__r .vo-btn { margin-top: 44px; align-self: flex-start; }

/* Media-left variant (About "Five thousand square feet" section): one image on
   the left, heading + copy on the right, vertically centred. */
.vo-welcome--media-left .vo-welcome__grid { align-items: center; }
.vo-welcome--media-left .vo-welcome__l .vo-welcome__figure img { aspect-ratio: 1 / .8; }
.vo-welcome--media-left .vo-welcome__h1 { margin-bottom: 28px; }
.vo-welcome--media-left .vo-welcome__p { margin-top: 1.3rem; }
.vo-welcome--media-left .vo-welcome__p:first-of-type { margin-top: 0; }

@media (max-width: 900px) {
  .vo-welcome__grid { grid-template-columns: 1fr; gap: 44px; }
  .vo-welcome__h1 { margin-bottom: 36px; }
  .vo-welcome__p { margin-top: 36px; }
  .vo-welcome--media-left .vo-welcome__h1 { margin-bottom: 20px; }
  .vo-welcome--media-left .vo-welcome__p { margin-top: 1.3rem; }
}