/*
 * An app's page (KID-1324, the canvas's AppB board), on its own domain and on the main site. Loaded by that page
 * alone, after site.css, whose tokens.css declares the `pages` layer. App pages use lavender, not the app's accent.
 */

@layer pages {
  .kp-app__title {
    max-width: 45rem;
    font-size: var(--kp-text-h2);
  }

  /* Hero: on lavender, continuing the header's; the promise centered, then up to three phones cut off below */
  .kp-app-hero {
    padding-block-start: clamp(1.5rem, 0.6rem + 2.5vw, 3.5rem);
    overflow: hidden;
    background: var(--kp-alt);
  }

  .kp-app-hero__text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.375rem;
    text-align: center;
  }

  .kp-app-hero h1 {
    max-width: 62.5rem;
    font-size: var(--kp-text-display-2);
    line-height: var(--kp-display-leading);
    letter-spacing: var(--kp-display-tracking-tight);
  }

  .kp-app-hero__lead {
    max-width: 42.5rem;
    color: var(--kp-ink-2);
    font-size: var(--kp-text-lead);
    line-height: var(--kp-body-leading);
  }

  .kp-app-hero .kp-store-badges__links {
    justify-content: center;
  }

  .kp-app-hero__screens {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: clamp(0.625rem, 0.2rem + 1.8vw, 1.75rem);
    max-width: 68.75rem;
    margin: 3.5rem auto 0;
    padding-inline: var(--kp-gutter);
  }

  .kp-app-hero__screens .kp-device {
    --kp-device-width: 15.625rem;
    --kp-device-height: 23rem;
    flex-shrink: 0;
  }

  /* The middle phone is the largest; on phones only it shows */
  .kp-app-hero__screens--3 .kp-device:nth-child(2),
  .kp-app-hero__screens--1 .kp-device {
    --kp-device-width: 18.75rem;
    --kp-device-height: 27.5rem;
  }

  @media (max-width: 47.99rem) {
    .kp-app-hero__screens--3 .kp-device:not(:nth-child(2)),
    .kp-app-hero__screens--2 .kp-device:nth-child(2) {
      display: none;
    }

    .kp-app-hero__screens .kp-device {
      --kp-device-width: 15.625rem;
      --kp-device-height: 22rem;
    }
  }

  /* Highlights: one band of chips under the hero */
  .kp-app-highlights {
    background: var(--kp-band);
  }

  .kp-app-highlights ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.625rem;
    padding-block: 1.125rem;
  }

  .kp-app-highlights li {
    padding: 0.5625rem 0.875rem;
    border-radius: var(--kp-radius-pill);
    background: rgb(255 255 255 / 0.1);
    color: #ffffff;
    font-size: 0.9375rem;
    font-weight: 700;
  }

  /* A look inside: each screen with its caption */
  .kp-app-screen {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    margin: 0;
  }

  .kp-app-screen .kp-device {
    --kp-device-width: 100%;
  }

  .kp-app-screen figcaption {
    display: flex;
    flex-direction: column;
    gap: var(--kp-space-1);
  }

  .kp-app-screen figcaption strong {
    font-family: var(--kp-font-display);
    font-size: 1.0625rem;
    font-weight: 800;
    line-height: var(--kp-title-leading, 1.3);
  }

  .kp-app-screen figcaption span {
    color: var(--kp-muted);
    font-size: 0.875rem;
    line-height: 1.45;
  }

  /* Premium: what it adds, on the purple band's color in both themes */
  .kp-app-premium {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kp-space-8);
    align-items: center;
  }

  @media (min-width: 64rem) {
    .kp-app-premium {
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
      gap: 3.5rem;
    }
  }

  .kp-app-premium__text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--kp-space-4);
  }

  .kp-app-premium__text p {
    color: var(--kp-ink-2);
    font-size: var(--kp-text-lead);
    line-height: var(--kp-body-leading);
  }

  .kp-app-premium__card {
    display: flex;
    flex-direction: column;
    gap: var(--kp-space-6);
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border-radius: var(--kp-radius-xl);
    background: var(--kp-band);
    color: #eeebf8;
  }

  .kp-app-premium__head {
    display: flex;
    flex-direction: column;
    gap: var(--kp-space-1);
  }

  .kp-app-premium__head strong {
    color: var(--kp-yellow);
    font-family: var(--kp-font-display);
    font-size: 1.75rem;
    font-weight: 900;
  }

  .kp-app-premium__head span {
    color: #c9c3e6;
  }

  .kp-app-premium__card ul {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kp-space-3) var(--kp-space-6);
  }

  @media (min-width: 40rem) {
    .kp-app-premium__card ul {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  .kp-app-premium__card li {
    min-width: 0;
    overflow-wrap: break-word;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-weight: 600;
    line-height: 1.4;
  }

  .kp-app-premium__card li svg {
    flex-shrink: 0;
    color: var(--kp-yellow);
  }

  .kp-app-premium__card .kp-button {
    background: var(--kp-yellow);
    color: var(--kp-night);
  }

  .kp-app-premium__card .kp-button:hover {
    background: #ffd83d;
    color: var(--kp-night);
  }

  /* Reviews: the heading and rating summary, then the reviews; four across on desktops */
  .kp-app-reviews {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kp-space-4);
  }

  @media (min-width: 48rem) {
    .kp-app-reviews {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 72rem) {
    .kp-app-reviews {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .kp-app-reviews__summary {
    display: flex;
    flex-direction: column;
    gap: var(--kp-space-5);
    padding-inline-end: var(--kp-space-4);
  }

  /* Tools and posts: three across */
  .kp-app-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kp-space-4);
  }

  @media (min-width: 48rem) {
    .kp-app-cards {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  /* The Get the app band: the words, then the badges and, on desktops, the QR code */
  /* The FAQ from the app's help articles (KID-1337), at the reading measure, on the page's left edge */
  .kp-app-faq > * {
    max-width: var(--kp-measure-wide);
  }

  .kp-app-get {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--kp-space-8);
    padding: clamp(1.5rem, 0.5rem + 4vw, 3.5rem);
    border-radius: var(--kp-radius-xl);
    background: var(--kp-band);
    color: #ffffff;
  }

  .kp-app-get__text {
    display: flex;
    flex-direction: column;
    gap: var(--kp-space-3);
  }

  .kp-app-get h2 {
    color: #ffffff;
    font-size: var(--kp-text-h2);
  }

  .kp-app-get p {
    color: #e4e0f5;
    font-size: var(--kp-text-lead);
  }

  .kp-app-get .kp-qr figcaption {
    color: #e4e0f5;
  }

  /* The head of an app's other pages (Premium features, a screen's page): on lavender, under the breadcrumb */
  .kp-app-page-head {
    padding-block: clamp(1.5rem, 0.6rem + 2.5vw, 3.5rem) var(--kp-section);
    background: var(--kp-alt);
  }

  .kp-app-page-head h1 {
    max-width: 50rem;
    font-size: clamp(2.5rem, 1.9rem + 2.5vw, 4rem);
    line-height: var(--kp-display-leading);
  }

  .kp-app-page-head__lead {
    max-width: 42.5rem;
    color: var(--kp-ink-2);
    font-size: var(--kp-text-lead);
    line-height: var(--kp-body-leading);
  }

  .kp-app-page-head--split {
    padding-block-end: 0;
    overflow: hidden;
  }

  .kp-app-page-head__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kp-space-8);
    align-items: end;
  }

  .kp-app-page-head__grid > .kp-stack {
    padding-block-end: var(--kp-section);
  }

  .kp-app-page-head__grid .kp-device {
    --kp-device-width: 18.75rem;
    --kp-device-height: 27.5rem;
    justify-self: center;
  }

  /* A watch screen's page: the watch stands on the head's bottom edge, no wider than its capture is sharp at 2x
     (ScreenImage::LARGEST_DISPLAY_WIDTHS, KID-1356) */
  .kp-app-page-head__grid .kp-watch-stand .kp-device--watch {
    --kp-device-width: 12.5rem;
  }

  @media (min-width: 64rem) {
    .kp-app-page-head__grid {
      grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    }
  }

  @media (max-width: 63.99rem) {
    .kp-app-page-head__grid > .kp-stack {
      padding-block-end: 0;
    }
  }

  /* Premium features: icon, name and headline, two or three across */
  .kp-app-premium-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--kp-space-4);
  }

  @media (min-width: 40rem) {
    .kp-app-premium-list {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }

  @media (min-width: 64rem) {
    .kp-app-premium-list {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }
  }

  .kp-app-premium-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--kp-space-4);
    padding: var(--kp-space-6);
    border-radius: var(--kp-radius-lg);
    background: var(--kp-alt);
  }

  .kp-app-premium-list li > span:last-child {
    min-width: 0;
    overflow-wrap: break-word;
    display: flex;
    flex-direction: column;
    gap: var(--kp-space-1);
  }

  .kp-app-premium-list strong {
    font-family: var(--kp-font-display);
    font-size: 1.125rem;
    font-weight: 800;
    line-height: var(--kp-title-leading, 1.3);
  }

  .kp-app-premium-list li > span:last-child > span {
    color: var(--kp-ink-2);
    font-size: 0.9375rem;
    line-height: var(--kp-body-leading);
  }

  .kp-app-premium-list__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: var(--kp-radius-sm);
    background: var(--kp-card);
    color: var(--kp-brand);
    object-fit: cover;
  }

  /* A screen's article */
  .kp-prose {
    display: flex;
    flex-direction: column;
    gap: var(--kp-space-4);
    color: var(--kp-ink-2);
    font-size: var(--kp-text-body-l);
    line-height: var(--kp-reading-leading, 1.7);
  }

  .kp-prose h2,
  .kp-prose h3 {
    margin-block-start: var(--kp-space-4);
    color: var(--kp-head);
  }

  .kp-prose h2 {
    font-size: var(--kp-text-h3);
  }

  .kp-prose ul,
  .kp-prose ol {
    padding-inline-start: 1.25em;
  }

  .kp-prose li + li {
    margin-block-start: var(--kp-space-2);
  }

  /* The invitation */
  .kp-app-invite .kp-app-hero__text {
    padding-block-end: var(--kp-space-4);
  }

  .kp-app-invite__mark {
    border-radius: 1.125rem;
  }
}