/**
 * Section: Intro + statistics
 *
 * Desktop (Figma): 902px serif standfirst on the left, 319px image on the
 * right, three statistics separated by vertical hairlines beneath.
 */

.vu-intro {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10.2%;   /* (1081 − 942) / 1360 */
}

.vu-intro__main {
  flex: 1 1 66.3%;   /* 902 / 1360 */
  min-width: 0;
}

.vu-intro__media {
  flex: 0 0 23.5%;   /* 319 / 1360 */
}

.vu-intro__image {
  width: 100%;
  height: auto;
  aspect-ratio: 319 / 460;
  object-fit: cover;
}

.vu-intro__body {
  font-family: var(--vu-font-serif);
  font-size: 38px;
  line-height: 1.34;
  letter-spacing: -0.01em;
  margin-block-end: 113px;   /* 1329 − 1216 in the Figma frame */
}

.vu-intro__body p + p {
  margin-block-start: 0.6em;
}

/* ------------------------------------------------------- Statistics */
.vu-stats {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--vu-space-10);
  margin: 0;
}

.vu-stats__item {
  display: flex;
  flex-direction: column;
  gap: var(--vu-space-10);
  flex: 0 1 222px;
  min-width: 0;
}

/* Hairline dividers between figures. Drawn on the item rather than as
   separate elements so they never appear at the ends or when a figure
   is removed. */
.vu-stats__item + .vu-stats__item {
  padding-inline-start: var(--vu-space-10);
  border-inline-start: var(--vu-rule-width) solid var(--vu-gold);
}

.vu-stats__figure {
  font-family: var(--vu-font-serif);
  font-weight: 400;
  font-size: 72px;
  line-height: 1.32;
  letter-spacing: -0.01em;
  margin: 0;
}

.vu-stats__meta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}

.vu-stats__label {
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.01em;
}

.vu-stats__source {
  font-size: 14px;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* ================================================================
 * Mobile
 * ============================================================== */
@media (max-width: 1023px) {
  .vu-intro {
    flex-direction: column;
    align-items: stretch;
    gap: var(--vu-space-8);
  }

  .vu-intro__media {
    flex: 1 1 auto;
    width: 100%;
    max-width: 320px;
  }

  .vu-intro__body {
    font-size: 26px;
    margin-block-end: var(--vu-space-16);
  }

  /* Stacked, so the dividers become horizontal rules between rows. */
  .vu-stats {
    flex-direction: column;
    gap: var(--vu-space-8);
  }

  .vu-stats__item {
    flex: 1 1 auto;
    gap: var(--vu-space-4);
  }

  .vu-stats__item + .vu-stats__item {
    padding-inline-start: 0;
    padding-block-start: var(--vu-space-8);
    border-inline-start: 0;
    border-block-start: var(--vu-rule-width) solid var(--vu-gold);
  }

  .vu-stats__figure {
    font-size: 54px;
  }
}
@media (max-width: 980px) {
	.vu-intro {
		align-items: flex-end;
	}
}