/* EdgeRift — page CSS for the discontinued apps and Apple Special Offers (owner, 2026-10-13; the approved mockups in
   proposal/discontinued/). Loaded by templates/pages/discontinued.twig (/allsecure, /emergencyradio, /fastcall,
   /realsolitaire/chrome) and pages/apple-offers.twig (/appleoffers, which also loads company.css for its art strip).
   The hero (an app's original icon, never rounded or shadowed like the other app icons), the two app cards
   (pages/_dc-games.twig) and Apple Special Offers' numbered steps.
   Tokens only (no colour values); uppercase only through the shared classes. */

@layer pages {

  /* ---------- The hero ---------- */
  .dc-hero { padding-bottom: calc(var(--section-y) * .8); }
  .dc-hero.dc-hero--art { padding-bottom: 0; }   /* Apple Special Offers: the art strip meets the next band */
  /* The app's original 512 px artwork, shape baked in: no border-radius, no box-shadow. A drop shadow that follows
     its own corners, except a Mac icon, which carries its own (data/discontinued.json macIcon) */
  .dc-icon { display: block; width: clamp(148px, 4.4vw + 124px, 196px); margin: 0 auto clamp(26px, 1.2vw + 20px, 38px); }
  .dc-icon picture { display: block; }
  .dc-icon img { display: block; width: 100%; height: auto; filter: var(--filter-icon-lift); }
  .dc-icon--mac img { filter: none; }
  .dc-hero .headline { max-width: 15em; margin-inline: auto; }
  .dc-hero .eyebrow--product + .headline, .dc-hero .eyebrow--product + .display { margin-top: 14px; }
  .dc-hero .sub { max-width: 30em; margin: var(--gap-head-sub) auto 0; color: var(--c-muted); }
  .dc-hero .cta-row { margin-top: var(--gap-sub-cta); }

  /* ---------- "Play our latest": white under a hairline, so the page ends on white above the grey footer ---------- */
  .dc-more { padding-top: 0; }
  .dc-more::before {
    content: ""; display: block; max-width: var(--w-content); height: 1px;
    margin: 0 auto calc(var(--section-y) * .6); background: var(--c-hairline);
  }

  /* ---------- Two app cards (each one link) ---------- */
  .dc-games {
    display: grid; grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; gap: var(--tile-gap);
    margin: clamp(28px, 1.4vw + 20px, 44px) 0 0; padding: 0; list-style: none;
  }
  .dc-games li { display: flex; }
  .dc-game {
    flex: 1; display: flex; flex-direction: column; align-items: center; padding: 32px 24px 28px;
    border-radius: 18px; background: var(--c-band); color: var(--c-ink); text-align: center; text-decoration: none;
  }
  .dc-game:hover { text-decoration: none; }
  .dc-game:hover .cta { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .24em; }
  .band--grey .dc-game { background: var(--c-bg); box-shadow: var(--shadow-tile); }
  .dc-game img { width: 96px; height: 96px; border-radius: 22.37%; box-shadow: var(--shadow-device); }
  .dc-game .title { margin-top: 18px; }
  .dc-game p { margin: 6px 0 0; font-size: var(--t-body); color: var(--c-muted); text-wrap: balance; }
  .dc-game .cta { margin-top: auto; padding-top: 16px; }

  /* ---------- Apple Special Offers: How it works, three numbered cards ---------- */
  .dc-steps {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--tile-gap);
    max-width: var(--w-content); margin: clamp(28px, 1.4vw + 20px, 44px) auto 0; padding: 0; list-style: none;
    counter-reset: step; text-align: left;
  }
  .dc-steps li { counter-increment: step; padding: 28px 26px 26px; border-radius: 18px; background: var(--c-bg); box-shadow: var(--shadow-tile); }
  .dc-steps li::before {
    content: counter(step); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
    background: var(--c-red); color: var(--c-on-red); font-family: var(--f-display); font-weight: 700; font-size: 19px;
  }
  .dc-steps .title { margin-top: 16px; }
  .dc-steps p { margin: 8px 0 0; color: var(--c-muted); }

  @media (max-width: 767px) {
    .dc-games, .dc-steps { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin-inline: auto; }
  }
}