/*
 * Homepage hero composition override for FG CRM public site.
 * Keeps Francisca unobstructed on the right and moves the fade to the left.
 */

@media (min-width: 901px) {
  body.home .fgsite-hero,
  body.front-page .fgsite-hero {
    min-height: 720px;
    background-color: var(--fgsite-paper, #f6f4ef);
    background-image:
      linear-gradient(
        90deg,
        rgba(246, 244, 239, 1) 0%,
        rgba(246, 244, 239, 1) 40%,
        rgba(246, 244, 239, .98) 47%,
        rgba(246, 244, 239, .86) 53%,
        rgba(246, 244, 239, .58) 59%,
        rgba(246, 244, 239, .25) 65%,
        rgba(246, 244, 239, 0) 72%
      ),
      var(--fgsite-hero-image, linear-gradient(135deg, #cfd5db, #f3f0e8));
    background-size: 100% 100%, auto 100%;
    background-position: left center, right center;
    background-repeat: no-repeat, no-repeat;
  }

  body.home .fgsite-hero .fgsite-container,
  body.front-page .fgsite-hero .fgsite-container {
    grid-template-columns: minmax(0, .95fr) minmax(420px, 1.05fr);
    gap: 36px;
  }

  body.home .fgsite-hero-copy,
  body.front-page .fgsite-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 650px;
  }

  body.home .fgsite-hero-space,
  body.front-page .fgsite-hero-space {
    min-height: 720px;
  }
}

/* Tablet: keep the photograph fully readable at the top/right and move copy below it. */
@media (min-width: 601px) and (max-width: 900px) {
  body.home .fgsite-hero,
  body.front-page .fgsite-hero {
    min-height: 760px;
    align-items: flex-end;
    background-color: var(--fgsite-paper, #f6f4ef);
    background-image:
      linear-gradient(
        180deg,
        rgba(246, 244, 239, 0) 0%,
        rgba(246, 244, 239, 0) 42%,
        rgba(246, 244, 239, .58) 55%,
        rgba(246, 244, 239, .94) 67%,
        rgba(246, 244, 239, 1) 76%,
        rgba(246, 244, 239, 1) 100%
      ),
      var(--fgsite-hero-image, linear-gradient(135deg, #cfd5db, #f3f0e8));
    background-size: 100% 100%, auto 72%;
    background-position: center, right top;
    background-repeat: no-repeat, no-repeat;
  }

  body.home .fgsite-hero-copy,
  body.front-page .fgsite-hero-copy {
    padding: 430px 0 72px;
    max-width: 680px;
  }
}

/* Mobile: never center-crop the face. Fit the photograph to the viewport width. */
@media (max-width: 600px) {
  body.home .fgsite-hero,
  body.front-page .fgsite-hero {
    min-height: auto;
    align-items: flex-end;
    background-color: var(--fgsite-paper, #f6f4ef);
    background-image:
      linear-gradient(
        180deg,
        rgba(246, 244, 239, 0) 0%,
        rgba(246, 244, 239, 0) 35%,
        rgba(246, 244, 239, .38) 48%,
        rgba(246, 244, 239, .90) 61%,
        rgba(246, 244, 239, 1) 70%,
        rgba(246, 244, 239, 1) 100%
      ),
      var(--fgsite-hero-image, linear-gradient(135deg, #cfd5db, #f3f0e8));
    background-size: 100% 100%, 100% auto;
    background-position: center, center top;
    background-repeat: no-repeat, no-repeat;
  }

  body.home .fgsite-hero-copy,
  body.front-page .fgsite-hero-copy {
    position: relative;
    z-index: 2;
    padding: clamp(300px, 82vw, 420px) 0 58px;
  }
}