/* ==========================================================================
   MARK One – Applications page. Builds on style.css + hardware.css + appstore.css (same layers, tokens, header, footer, bands, tiles).
   Mobile-first; from 1100px up it is the 1920px design scaled with --u.
   ========================================================================== */
body.ap-page { --bg: #dfdfdf; }

@layer components {

  /* ---------- hero ---------- */
  .ap-hero { background: #c9c9d3; color: #fff; }
  .ap-hero .hw-hero__img::after { inset: auto 0 0 0; height: 36%; background: linear-gradient(to top, rgba(45, 45, 65, .5), rgba(45, 45, 65, 0)); }
  .ap-hero .hw-hero__img img { object-position: var(--op, 63% 50%); }
  .ap-hero .hero__title { text-shadow: 0 1px 26px rgba(70, 70, 90, .38); }

  /* ---------- sections ---------- */
  .ap-sec { position: relative; background: var(--bg); text-align: center; isolation: isolate; }
  .ap-top { background: #fff; }
  .ap-top .teaser { padding-bottom: 0; }
  .ap-p { align-self: start; --r: 14px; }
  .ap-grid { margin-top: clamp(30px, 9vw, 64px); }
  .ap-grid .span2 { grid-column: 1 / -1; }
  .ap-grid .as-rp .rt { font-size: max(13px, calc(var(--s) / var(--pw) * 100cqw)); }

  /* phones: captions of light photos sit above the photo instead of over the subject */
  .ap-cap { display: flex; flex-direction: column; aspect-ratio: auto; }
  .ap-cap .pt { position: static; order: -1; padding: 16px 16px 12px; }
  .ap-cap img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; }

  /* ---------- three pillars ---------- */
  .ap-pil { text-align: center; padding: clamp(34px, 9vw, 60px) 16px clamp(34px, 9vw, 56px); --r: 16px; color: #000; }
  .ap-pi { font-size: clamp(16px, 4.4vw, 22px); line-height: 1.2; letter-spacing: -.02em; margin: 0 auto; max-width: 22em; text-wrap: balance; }
  .ap-pill { display: grid; justify-items: center; gap: 2px; margin-top: clamp(30px, 9vw, 52px); }
  .ap-ph { font-size: clamp(28px, 8.2vw, 42px); line-height: 1.1; letter-spacing: -.02em; margin: 0; font-weight: 400; }
  .ap-ps { font-size: clamp(18px, 5.2vw, 26px); line-height: 1.2; letter-spacing: -.01em; margin: 0 0 14px; font-weight: 400; }
  .ap-ic { position: relative; display: block; width: clamp(96px, 30vw, 150px); aspect-ratio: calc(var(--pw) / var(--ph)); overflow: hidden; }

  /* ---------- 360 lifter ---------- */
  .ap-360 { padding-top: clamp(44px, 13vw, 90px); }
  .ap-360m { position: relative; aspect-ratio: 1420 / 518.6; margin-top: 10px; overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 26%); mask-image: linear-gradient(to bottom, transparent 0, #000 26%); }
  .ap-360 .as-wrap:first-of-type { margin-top: 8px; }
  .as-bg-d.ap-none { display: none; }

  /* ---------- dark full-width bands with a caption ---------- */
  .ap-dark { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 1920 / 1240; margin: var(--gap) var(--gap) 0; border-radius: 16px; background: #000; text-align: left; }
  .ap-dark .hband__bg { position: absolute; inset: 0; height: 100%; z-index: 0; }
  .ap-dark .bgimg { object-position: 50% 0; }
  .ap-dark--b { margin-top: 0; }
  .ap-dark .pt { font-size: clamp(19px, 5.4vw, 28px); }
  .ap-end { padding-top: 0; }
}

@layer desktop {
  @media (min-width: 1100px) {
    .ap-hero { min-height: 0; background: #000; }
    .ap-hero .hw-hero__img::after { inset: auto 0 0 0; width: auto; height: 30%; background: linear-gradient(to top, rgba(45, 45, 65, .5), rgba(45, 45, 65, 0)); }
    .ap-sec { padding: 0; text-align: initial; }
    .ap-360 { padding: 0; }
    .ap-360m { display: none; }
    .ap-grid { margin: 0; }
    .ap-p { align-self: auto; }
    .ap-pil { padding: 0; }
    .ap-pi, .ap-ph, .ap-ps { max-width: none; margin: 0; }
    .ap-ph, .ap-ps { font-weight: inherit; }
    .ap-ph.b, .ap-ps.b { font-weight: 700; }
    .ap-pill { display: contents; margin: 0; }
    .ap-ic { position: absolute; left: calc(var(--u) * var(--px)); top: calc(var(--u) * var(--py)); width: calc(var(--u) * var(--pw)); height: calc(var(--u) * var(--ph)); aspect-ratio: auto; }
    .ap-dark { display: contents; margin: 0; aspect-ratio: auto; border-radius: 0; background: none; overflow: visible; }
    .ap-dark .pt { font-size: calc(var(--u) * var(--s)); }
    .ap-top { background: linear-gradient(#fff calc(var(--u) * 2197.5), var(--bg) 0); }
    .ap-full { --r: 0; }
    /* TeX Gyre Heros sits ~.035em higher than Helvetica Now in the same line box: nudge baselines onto the designer's */
    body.ap-page .t, body.ap-page .rt { top: calc(var(--u) * (var(--b) - var(--l) / 2 - .397 * var(--s))); }
  }
}