/* Jdate-specific layout on top of libs/landing-static base.css. */

/* Illustration benefits: text first, image below, centered cards.
 * Icons are tall portrait illustrations — size them by HEIGHT (matches
 * www.jdate.com .feature-card-icon img { height: 200px; width: auto }).
 * The shared base sizes by width, which stretches these too tall. */
.benefits {
  justify-items: center;
}

.benefit {
  max-width: 320px;
}

.benefit__icon {
  order: 3;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.benefit__icon img {
  height: 200px;
  width: auto;
}

.benefit__title {
  line-height: 1.2;
}

/* Serif heading sizes closer to the SPA (lg:text-[4rem]/[75px]). */
@media (min-width: 1024px) {
  .hero__title {
    font-size: 4rem;
    line-height: 75px;
  }
  .showcase__title {
    font-size: 3rem;
    line-height: 1.2;
  }
}

/* Showcase: contained rounded photo (max 548px, matching www.jdate.com
 * .content-section-image) with the decorative paper-scrap art behind the text
 * column. White section background so the pale scraps read against it (the
 * page canvas is a near-identical cream). Art is bg-none below 768px. */
/* Full-width white sections: drop the centered max-width so the background
 * spans the viewport (like www.jdate.com .content-section), and pad the grid
 * in instead. */
.showcase--first,
.showcase--second {
  max-width: none;
  margin: 0;
  background-color: #fff;
}

@media (min-width: 768px) {
  .showcase--first {
    background-image: url("/assets/images/login-first-content-bg.png");
    background-position: right center;
    background-size: contain;
    background-repeat: no-repeat;
  }
  .showcase--second {
    background-image: url("/assets/images/login-second-content-bg.png");
    background-position: left center;
    background-size: contain;
    background-repeat: no-repeat;
  }
}

@media (min-width: 1024px) {
  .showcase--first,
  .showcase--second {
    padding-inline: max(1.5rem, calc((100vw - var(--max-content)) / 2 + 1.5rem));
  }
  .showcase__img {
    max-width: 548px;
  }
  /* Pull each photo toward the center gutter, as production does. */
  .showcase--first .showcase__img {
    justify-self: end;
  }
  .showcase--second .showcase__img {
    justify-self: start;
  }
}

.callout p {
  font-size: 27px;
  line-height: 1.4;
}

/* App-stores heading matches the SPA's text-[1.5rem] lg:text-[3rem]. */
@media (min-width: 1024px) {
  .appstores__heading {
    font-size: 3rem;
    line-height: 1.2;
  }
}