/* ---------------------------------------------------------------------------
 * home-performance — Performance & quality (Figma 560:610). Moved out of
 * home.css so the block carries its own stylesheet (see inc/block-assets.php).
 * ------------------------------------------------------------------------- */

.home-performance {
  display: grid;
  grid-template-columns: minmax(0, 622px) minmax(0, 1049px);
  align-items: center;
  justify-content: center;
  gap: 89px;
  background: rgba(var(--light-rgb, 232, 232, 232), 0.24);
}

/* At exactly 1920 the centered 622+1049 grid leaves ~80px of breathing room
   on each side; below that the columns compress and the text hits the
   viewport edge. Give the section its own gutters below 1920. */
/* 992-1919: text keeps the left gutter, the photo bleeds to the right edge
   (client call) — the second column flexes to fill whatever the band gives.
   At >=1920 the centered fixed grid restores the Figma side margins. */
@media (min-width: 992px) and (max-width: 1919px) {
  .home-performance {
    grid-template-columns: minmax(0, 622px) minmax(0, 1fr);
    justify-content: start;
    padding-left: var(--gutter, 40px);
  }
}

.home-performance .text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 37px;
  padding-block: var(--section-pad, 87px);
  justify-self: end;
  max-width: 622px;
}

.home-performance h2 {
  width: 694px;
  max-width: none;
  margin: 0;
  font-size: clamp(32px, 3.33vw, 64px);
  line-height: 1.234;
}

.home-performance h2 .accent {
  color: var(--brand, #008AF7);
}

.home-performance p {
  max-width: 630px;
  margin: 0;
  font-size: 18px;
  line-height: 1.4444;
  color: var(--black, #000000);
}

.home-performance .media {
  width: 100%;
  height: 100%;
  min-height: 741px;
  object-fit: cover;
  /* Figma image filter on this fill: saturation -1, contrast +0.3, exposure +0.08. */
  filter: grayscale(1) contrast(1.3) brightness(1.08);
}

/* --- Responsive ---------------------------------------------------------- */

@media (max-width: 1399px) {
  .home-performance {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }

  .home-performance h2 {
    width: auto;
  }

  .home-performance .media {
    min-height: 520px;
  }
}

@media (max-width: 991px) {
  .home-performance {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .home-performance .text {
    padding-inline: var(--gutter);
    justify-self: stretch;
    max-width: none;
  }

  .home-performance .media {
    min-height: 400px;
  }
}

/* --- Editor mirrors ------------------------------------------------------ *
 * See blocks/theme/hero/theme-hero.css for why these exist. Inert on the front
 * end; the `crush-block` container is declared only in assets/css/editor.css.
 * ------------------------------------------------------------------------- */

@container crush-block (min-width: 992px) and (max-width: 1919px) {
  .home-performance {
    grid-template-columns: minmax(0, 622px) minmax(0, 1fr);
    justify-content: start;
    padding-left: var(--gutter, 40px);
  }
}

@container crush-block (max-width: 1399px) {
  .home-performance {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 48px;
  }

  .home-performance h2 {
    width: auto;
  }

  .home-performance .media {
    min-height: 520px;
  }
}

@container crush-block (max-width: 991px) {
  .home-performance {
    grid-template-columns: 1fr;
    gap: 0;
    /* Undoes the `@media (min-width: 992px) and (max-width: 1919px)` rule above.
       A container query cannot un-match a media query, and that one keeps firing
       in the editor because the browser window is wider than 992px even when the
       preview pane is not — leaving the pane with the desktop's left gutter and
       start alignment. These two restore the base rule's values. */
    justify-content: center;
    padding-left: 0;
  }

  .home-performance .text {
    padding-inline: var(--gutter);
    justify-self: stretch;
    max-width: none;
  }

  .home-performance .media {
    min-height: 400px;
  }
}