/* Page-scoped styles: help
 * Identity: slug:wl-slp--help
 * Extracted VERBATIM from packages/rexall-ds/src/styles/globals.css.
 * Every selector here carries the identity above, so these rules could only
 * ever match on this one page -- yet every route downloaded them.
 * Loaded by <PageScopedStyles> AFTER globals.css. Only rules proven not to
 * change any cascade outcome by that move were extracted; see
 * docs/plans/css-route-splitting.md for the ordering proof.
 */


.wl-slp.wl-slp--help {
  box-sizing: border-box;
  max-width: 960px;
  margin: 24px auto 0;
  padding: 0;
}

.wl-slp--help .wl-hlp-hero-title-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 220px;
  padding: 30px;
}

.wl-slp--help .wl-hlp-cardgrid-rail-heading {
  padding-right: 48px;
}

@media (max-width: 767px) {

  .wl-slp--help::before {
    display: none;
  }

  .wl-slp--help .wl-hlp-hero-title-panel {
    min-height: 220px;
    padding: 30px;
  }

  .wl-slp--help .wl-hlp-cardgrid--rail {
    min-height: 172px;
  }

  .wl-slp--help .wl-hlp-cardgrid-rail-list > li {
    display: none;
  }

  .wl-slp--help .wl-hlp-cardgrid-rail-list > li:first-child {
    display: block;
  }

  .wl-slp--help .wl-hlp-cardgrid-rail-list > li:first-child > a {
    position: relative;
    color: transparent;
  }

  .wl-slp--help
    .wl-blocks--aside
    > .wl-hlp-cardgrid--rail:nth-child(2)
    .wl-hlp-cardgrid-rail-list
    > li:first-child
    > a::after {
    content: "Learn More";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 14px;
  }

  .wl-slp--help
    .wl-blocks--aside
    > .wl-hlp-cardgrid--rail:nth-child(3)
    .wl-hlp-cardgrid-rail-list
    > li:first-child
    > a::after {
    content: "Search Now";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 14px;
  }
}