/* ==========================================================================
   Section: Construction — Figma 92:947
   ========================================================================== */

/* Figma 92:947 / 94:2430 — 120px above, 90px below. */
.trustav-construction {
  padding-block: clamp(4rem, 9vw, 7.5rem) clamp(3rem, 6vw, 5.625rem);
}

.trustav-construction__top {
  display: grid;
  grid-template-columns: minmax(0, 600fr) minmax(0, 540fr); /* Figma 92:937 */
  gap: 100px;
  align-items: end;
}

.trustav-construction__intro {
  display: flex;
  flex-direction: column;
  gap: 36px; /* Figma 92:935 */
}

.trustav-construction__title {
  margin: 0;
  font-family: var(--ff-heading);
  font-size: var(--fs-h2);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  color: var(--c-text);
}

.trustav-construction__text {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-text-muted);
}

/* With a clip: copy and callout stack on the left, the portrait clip on the right. */
.trustav-construction__top--video {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "intro video"
    "note  video";
  column-gap: 100px;
  row-gap: var(--space-2xl);
  align-items: center;
}

.trustav-construction__top--video .trustav-construction__intro { grid-area: intro; }
.trustav-construction__top--video .trustav-construction__note { grid-area: note; max-width: 540px; }

.trustav-construction__video-frame {
  grid-area: video;
  width: clamp(240px, 24vw, 340px);
  aspect-ratio: 9 / 16;
  margin: 0;
}

/* --- Callout card --------------------------------------------------------- */

.trustav-construction__note {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: 38px 30px 30px;
  border: var(--border-width) solid var(--c-accent); /* Figma 92:923 */
}

/* The ribbon sits over the top-right corner — Figma 92:930. */
.trustav-construction__note-mark {
  position: absolute;
  inset-block-start: -8px;
  inset-inline-end: 13px;
  display: block;
  width: 52px;
  height: 52px;
}

/* Figma 92:932 paints the ribbon in accent through the PNG as an alpha mask. */
.trustav-construction__note-mark {
  background-color: var(--c-accent);
  -webkit-mask: url("../../img/icon-bookmark.png") center / contain no-repeat;
  mask: url("../../img/icon-bookmark.png") center / contain no-repeat;
}

.trustav-construction__note-mark img {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.trustav-construction__note-title {
  margin: 0;
  font-family: var(--ff-heading);
  font-size: var(--fs-h5);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  color: var(--c-text);
  /* Clears the ribbon: it reaches 65px in from the card edge, the padding 30. */
  padding-inline-end: 40px;
}

.trustav-construction__note-text {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--c-text-muted);
}

.trustav-construction__note .trustav-btn {
  min-width: 222px;
}

/* --- Image band ----------------------------------------------------------- */

.trustav-construction__images {
  /* Flex-grow = aspect ratio, so every figure ends up the same height. */
  display: flex;
  gap: 30px;
  margin-block-start: 80px;
}

.trustav-construction__figure {
  --ratio: 1.882; /* 670 / 356, Figma 92:946 */
  flex: var(--ratio) 1 0;
  min-width: 0;
  margin: 0;
  aspect-ratio: var(--ratio);
}

.trustav-construction__figure:last-child {
  --ratio: 1.517; /* 540 / 356 */
}

/* Portrait photos (a door, a window) keep their shape. */
.trustav-construction__figure.trustav-construction__figure--portrait {
  --ratio: 0.8;
}

.trustav-construction__figure img,
.trustav-construction__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .trustav-construction__top {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .trustav-construction__top--video {
    grid-template-areas: "intro" "video" "note";
  }

  .trustav-construction__top--video .trustav-construction__note {
    max-width: none;
  }

  .trustav-construction__video-frame {
    justify-self: center;
    width: min(100%, 340px);
  }

  .trustav-construction__images {
    margin-block-start: var(--space-2xl);
  }
}

@media (max-width: 640px) {
  .trustav-construction__images {
    flex-direction: column;
    gap: var(--space-md);
  }

  .trustav-construction__figure,
  .trustav-construction__figure:last-child {
    flex: none;
    aspect-ratio: 3 / 2;
  }

  .trustav-construction__figure.trustav-construction__figure--portrait {
    aspect-ratio: 4 / 5;
  }
}

/* Phones: full-width, like every other section's buttons. */
@media (max-width: 560px) {
  .trustav-construction__note .trustav-btn {
    width: 100%;
    min-width: 0;
  }
}