/*
 * Editorial composition and desktop heading safeguards.
 *
 * Display headings must only wrap between words. Their fluid scale is kept
 * inside the width of the column so long Italian words never get clipped.
 */
main :is(h1, h2, h3) {
  max-width: 100%;
  text-align: left;
  text-wrap: balance;
  -webkit-hyphens: none;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
}

.voyqa-v2-heading h2,
.voyqa-story__copy h2,
.voyqa-editorial-split__copy h2 {
  max-width: 100%;
  font-size: clamp(2.8rem, 4.15vw, 5.25rem);
  line-height: .9;
  overflow-wrap: normal;
  word-break: normal;
}

.voyqa-vertical-hero h1 {
  max-width: 11ch;
  font-size: clamp(3.35rem, 4vw, 4.9rem);
  line-height: .88;
  overflow-wrap: normal;
  word-break: normal;
}

.voyqa-page-hero__title,
.voyqa-detail-heading h1,
.voyqa-editorial-heading h1,
.voyqa-contact-layout__intro h1 {
  line-height: .86;
}

.voyqa-heading-visual {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border: 1px solid rgba(185, 139, 75, .46);
  border-radius: 46% 22px 22px 22px;
  background:
    linear-gradient(145deg, rgba(255, 252, 246, .72), rgba(205, 218, 226, .34)),
    var(--voyqa-cloud);
  box-shadow: 0 34px 80px -54px rgba(32, 41, 52, .68);
  isolation: isolate;
}

.voyqa-heading-visual::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 50%, rgba(15, 45, 77, .28)),
    linear-gradient(115deg, rgba(255, 250, 241, .18), transparent 46%);
  content: "";
  pointer-events: none;
}

.voyqa-heading-visual img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.voyqa-heading-visual:hover img {
  transform: scale(1.025);
}

.voyqa-heading-visual figcaption {
  position: absolute;
  right: 20px;
  bottom: 17px;
  z-index: 1;
  color: #fff;
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

/* Homepage trust statement: copy and visual share the available width. */
.voyqa-v2-heading--showcase {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
  gap: clamp(46px, 7vw, 112px);
  align-items: center;
  max-width: none;
}

.voyqa-v2-heading--showcase > div {
  min-width: 0;
}

.voyqa-v2-heading--showcase h2 {
  max-width: 100%;
  margin-bottom: 0;
}

.voyqa-v2-heading--showcase .voyqa-heading-visual {
  min-height: 270px;
}

.voyqa-v2-heading--showcase .voyqa-heading-visual img {
  object-position: 54% center;
}

/* Listing mastheads use the previously empty right-hand region for context. */
.voyqa-page-hero--visual {
  grid-template-columns: 76px minmax(0, 1.08fr) minmax(330px, .92fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
}

.voyqa-page-hero--visual .voyqa-page-hero__title {
  max-width: 11ch;
  font-size: clamp(3.4rem, 5.35vw, 6.6rem);
}

.voyqa-page-hero--visual .voyqa-heading-visual {
  min-height: 300px;
}

/* Generic editorial pages receive a quiet branded panel in their masthead. */
.voyqa-editorial-heading--visual {
  grid-template-columns: 76px minmax(0, 1.08fr) minmax(310px, .72fr);
  gap: clamp(28px, 4.5vw, 72px);
  align-items: center;
}

.voyqa-editorial-heading--visual h1 {
  font-size: clamp(3.6rem, 6.1vw, 7rem);
}

.voyqa-heading-visual--monogram {
  display: grid;
  min-height: 270px;
  padding: clamp(28px, 4vw, 52px);
  place-items: center;
  background:
    radial-gradient(circle at 70% 26%, rgba(255, 255, 255, .9), transparent 26%),
    linear-gradient(145deg, rgba(244, 238, 226, .96), rgba(192, 210, 222, .72));
}

.voyqa-heading-visual--monogram::before {
  color: rgba(15, 45, 77, .88);
  content: "V";
  font-family: var(--voyqa-font-heading);
  font-size: clamp(7rem, 11vw, 11rem);
  font-weight: 500;
  line-height: .8;
}

.voyqa-heading-visual--monogram span {
  position: absolute;
  right: 20px;
  bottom: 17px;
  z-index: 1;
  color: var(--voyqa-blue);
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
}

@media (max-width: 1050px) {
  .voyqa-v2-heading--showcase {
    grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
    gap: 44px;
  }

  .voyqa-page-hero--visual,
  .voyqa-editorial-heading--visual {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .voyqa-page-hero--visual .voyqa-heading-visual,
  .voyqa-editorial-heading--visual .voyqa-heading-visual {
    grid-column: 2;
    width: min(100%, 760px);
    min-height: 0;
    margin-top: 8px;
    aspect-ratio: 16 / 8;
  }
}

@media (max-width: 767px) {
  main :is(h1, h2, h3) {
    text-wrap: pretty;
  }

  .voyqa-v2-heading--showcase {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .voyqa-v2-heading--showcase .voyqa-heading-visual {
    min-height: 0;
    aspect-ratio: 4 / 3;
    border-radius: 34% 18px 18px 18px;
  }

  .voyqa-v2-heading--showcase .voyqa-heading-visual img {
    object-position: 58% center;
  }

  .voyqa-page-hero--visual,
  .voyqa-editorial-heading--visual {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 16px;
  }

  .voyqa-page-hero--visual .voyqa-heading-visual,
  .voyqa-editorial-heading--visual .voyqa-heading-visual {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 16px;
    aspect-ratio: 4 / 3;
    border-radius: 34% 18px 18px 18px;
  }

  .voyqa-heading-visual figcaption,
  .voyqa-heading-visual--monogram span {
    right: 15px;
    bottom: 13px;
  }

  .voyqa-heading-visual--monogram {
    min-height: 230px;
  }
}