/* Lennon Music V8.3.4 — centred header search, consistent illustrated banners. */

/* The search trigger must be centred in the horizontal space between the
   header's leading copy and account actions, not pushed against either one.
   Both auto margins share any leftover space in the desktop flex header. */
@media (min-width: 761px) {
  .topbar > .header-search.lm-search-trigger {
    margin-inline: auto !important;
    align-self: center;
  }
}

/* Keep the existing two-row mobile header layout: the search uses its entire
   second grid row, instead of acquiring desktop auto margins. */
@media (max-width: 760px) {
  .topbar > .header-search.lm-search-trigger {
    margin: 0 !important;
    justify-self: stretch;
  }
}

/* Same exact outer height for the three types of illustrated headers.
   box-sizing includes their existing borders and responsive padding. */
.page-heading.plans-heading.lm-illustrated-plans,
.lm-library-intro.lm-illustrated-library,
.lm-archive-heading.lm-illustrated-archive {
  box-sizing: border-box !important;
  height: 225px !important;
  min-height: 225px !important;
  max-height: 225px !important;
}

/* Give the artwork breathing room inside its 225px high container. */
.lm-archive-heading.lm-illustrated-archive .lm-archive-illustration {
  width: clamp(155px, 19vw, 205px);
  max-height: 205px;
}
.lm-library-intro.lm-illustrated-library .lm-library-intro-art.lm-illustrated-playlists {
  width: clamp(150px, 18vw, 205px);
  flex-basis: clamp(150px, 18vw, 205px);
  max-height: 205px;
}
.page-heading.plans-heading.lm-illustrated-plans .lm-plans-heading-art {
  width: clamp(150px, 18vw, 205px);
  flex-basis: clamp(150px, 18vw, 205px);
  max-height: 205px;
}

/* On phones, the existing content and image layout remains side-by-side.
   Keep a little more available width for headings/descriptions. */
@media (max-width: 760px) {
  .lm-archive-heading.lm-illustrated-archive .lm-archive-illustration {
    width: clamp(105px, 27vw, 145px);
  }
  .lm-library-intro.lm-illustrated-library .lm-library-intro-art.lm-illustrated-playlists {
    width: clamp(104px, 28vw, 138px);
    flex-basis: auto;
  }
  .page-heading.plans-heading.lm-illustrated-plans .lm-plans-heading-art {
    width: clamp(100px, 28vw, 144px);
    flex-basis: clamp(100px, 28vw, 144px);
  }
}
@media (max-width: 400px) {
  .lm-archive-heading.lm-illustrated-archive .lm-archive-illustration { width: 104px; }
  .lm-library-intro.lm-illustrated-library .lm-library-intro-art.lm-illustrated-playlists { width: 100px; }
  .page-heading.plans-heading.lm-illustrated-plans .lm-plans-heading-art {
    width: 94px;
    flex-basis: 94px;
  }
}