/* #manager: the offer text, the girl and the form keep their tops level and equal gaps between them.
   The girl is a grid item here (she used to hang behind the text, centred on the whole section). */
body.home #manager.manager-1 {
  --mgr-gap: 40px;                        /* minimum gap; spare room is shared equally between the gaps */
  --mgr-form: 410px;
  --mgr-girl: clamp(350px, 25vw, 480px);  /* the girl's smallest size in one row */
  --mgr-girl-max: 520px;                  /* she grows into spare room up to this */
}
@media (min-width: 1536px) {
  body.home #manager.manager-1 { --mgr-form: 464px; }
}

/* Offer list: each "a / b / c" choice moves to its own line as one piece instead of breaking after a slash.
   Where a line is too narrow for the whole choice, the nested pieces split it in two halves at a slash. */
body.home #manager .utp li .mgr-keep { display: inline-block; }
@media (min-width: 500px) {
  body.home #manager .utp ul { max-width: 480px; }      /* room for a whole choice on one line */
}

@media (min-width: 500px) {
  body.home #manager .wrap { display: grid; align-items: start; column-gap: var(--mgr-gap); row-gap: var(--mgr-gap); }
  body.home #manager .left-wrap { grid-area: text; display: block; min-width: 0; }
  body.home #manager .left-wrap .text-wrap { flex: none; width: auto; max-width: none; height: auto; padding: 0; }
  body.home #manager .manager__img {
    grid-area: girl; position: relative; inset: auto;
    width: 100%; max-width: var(--mgr-girl); transform: none;
  }
  body.home #manager .tugan-girl > img { display: block; width: 100%; height: auto; }
  body.home #manager.manager-1 .form-wrap { grid-area: form; width: 100%; max-width: var(--mgr-form); margin: 0; }
}

/* Wide screens: one row. tugan-manager-layout.js narrows the text column to its longest line,
   so the visible gap after the heading equals the gap before the form. */
@media (min-width: 1366px) {
  body.home #manager .wrap {
    /* --mgr-text is the text's longest line, set by the script; the girl takes what is left, up to her maximum. */
    grid-template-columns: var(--mgr-text, auto) minmax(0, var(--mgr-girl-max)) var(--mgr-form);
    grid-template-areas: "text girl form";
    justify-content: space-between;
  }
  body.home #manager .manager__img { max-width: var(--mgr-girl-max); }
  /* While the script measures the text, the girl keeps her smallest size so the text has all the room it needs. */
  body.home #manager .wrap.is-measuring { grid-template-columns: auto var(--mgr-girl) var(--mgr-form); }
  body.home #manager .wrap.is-measuring .manager__img { max-width: var(--mgr-girl); }
}

/* Laptops and tablets: the text on top, the girl and the form side by side under it. */
@media (min-width: 900px) and (max-width: 1365px) {
  body.home #manager .wrap {
    grid-template-columns: minmax(0, 1fr) var(--mgr-form);
    grid-template-areas: "text text" "girl form";
  }
  body.home #manager .manager__img { justify-self: end; max-width: 520px; }
}

/* Narrow tablets: text, girl and form stacked. */
@media (min-width: 500px) and (max-width: 899px) {
  body.home #manager .wrap { grid-template-columns: minmax(0, 1fr); grid-template-areas: "text" "girl" "form"; }
  body.home #manager .manager__img { justify-self: center; max-width: 340px; }
  body.home #manager.manager-1 .form-wrap { justify-self: center; max-width: 464px; }
}