/* The NASTAR app launch article (/news/nastar-app).
 *
 * Loaded via layout.php's pageStylesheet mechanism, keyed by slug in
 * public/index.php, render_content_item(), the same way yullr.css and
 * nationals.css are. Because this file loads on this one page only, it may
 * restyle the article template's own wrapper (.article, .article__header,
 * .article__hero) without touching any other article. It is NOT in
 * nastar.css, which is a matched pair with skiracing's theme_2026/css/nastar.css.
 *
 * Design ("the filmstrip", chosen 2026-11-07 from three directions mocked up
 * at skiracing.nastar.com/mockup/app-launch/): a NASTAR-blue opening, then the
 * app's five screens in race-day order as a filmstrip that breaks out of the
 * blue onto the white page. On phones and narrow tablets the filmstrip becomes
 * a swipe strip with position dots and previous/next buttons. Everything after
 * it is quiet: one snow band for setup, one blue closing band, one gold action.
 *
 * Colour. The opening and the top of the filmstrip use a soft red-and-blue
 * gradient after the App Store's own header for the app (Katie's pick, 2026-11-07),
 * built from NASTAR's two brand colours. Tried and set aside the same day: flat
 * red (the logo sank into it and it left the site's colours), all NASTAR blue
 * (consistent but it blended into the homepage), and red race stripes from the
 * logo (they read as motorsport, not ski racing).
 *   Band  --launch-band            the opening and the filmstrip band
 *   Blue  var(--nastar-blue-dark)  headings and the closing band
 *   Gold  var(--nastar-gold)       the call-to-action button, the active dot
 *   Snow  #f3f5f8                  the setup band
 *
 * Full-bleed bands: the article column stays in normal flow and each band
 * paints its background with a ::before that reaches the viewport edges. The
 * site already sets overflow-x: hidden on <html>, so the reach never causes a
 * horizontal scroll. The opening is painted by two of them (the template's
 * header and the first section), one flat colour, so they meet with no seam.
 */

.article:has(.launch-hero) {
  /* Apple's App Store header for the app is a soft gradient blended from
     the icon's red and blue; this is the same idea in NASTAR's colours.
     It varies left to right only, so the separate pieces of the opening
     (the template header, the first section, the top of the filmstrip)
     line up with no seam. Every stop holds white text at 5.1:1 or more. */
  --launch-band: linear-gradient(90deg, #34407f 0%, #5d3a78 22%, #8a2f5c 45%, #b0304d 68%, #c63a4b 82%, #a91f33 100%);
  /* The brighter glow, top right of the opening only, where the only text
     is the large headline. It fades out inside the header, so it never meets
     a seam or sits behind small text. */
  --launch-glow: radial-gradient(55% 130% at 82% 0%, rgba(255, 150, 150, 0.5), rgba(255, 150, 150, 0) 70%);
  --launch-blue: var(--nastar-blue-dark);
  --launch-snow: #f3f5f8;
  --launch-ink: var(--gray-900);
  /* A launch page needs more width than a reading column. Text blocks keep
     their own measure, so lines stay short. */
  max-width: 1200px;
}

/* The template hero image is for news cards and the homepage carousel. On
   the page itself the blue opening replaces it. */
.article:has(.launch-hero) .article__hero { display: none; }

.article:has(.launch-hero) .article__header,
.launch-hero {
  position: relative;
  isolation: isolate;
  color: #fff;
}
.article:has(.launch-hero) .article__header::before,
.launch-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  background: var(--launch-band);
}
.article:has(.launch-hero) .article__header { padding-block: var(--space-7) var(--space-4); }
.article:has(.launch-hero) .article__header::before { background: var(--launch-glow), var(--launch-band); }
.article:has(.launch-hero) .article__header h1 {
  margin: 0;
  max-width: 13ch;
  font-family: var(--font-heading);
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.015em;
  color: #fff;
}
.article:has(.launch-hero) .article__byline {
  margin-top: var(--space-3);
  color: rgba(255, 255, 255, 0.85);
}

/* .richtext gives every h2/h3 a top margin; the sections set their own. */
.richtext .launch-film h2,
.richtext .launch-alerts h2,
.richtext .launch-close h2 {
  margin: 0 0 var(--space-3);
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--launch-blue);
}

/* --- The phone ---------------------------------------------------------- */

/* A CSS phone rather than a framed image: crisp at any size, and the
   screenshots stay plain screen captures that can be swapped one by one. */
.app-phone {
  --phone-w: 200px;
  position: relative;
  width: var(--phone-w);
  max-width: 100%;
  padding-top: calc(var(--phone-w) * 0.13);
  background: #f9fafb; /* the app header's own grey */
  border: calc(var(--phone-w) * 0.035) solid #15171a;
  border-radius: calc(var(--phone-w) * 0.18);
  overflow: hidden;
  box-shadow:
    0 2px 4px rgba(8, 20, 45, 0.18),
    0 26px 50px -14px rgba(8, 20, 45, 0.5);
}
/* The camera island, in the status-bar strip above the app screen. */
.app-phone::before {
  content: "";
  position: absolute;
  top: calc(var(--phone-w) * 0.038);
  left: 50%;
  width: calc(var(--phone-w) * 0.28);
  height: calc(var(--phone-w) * 0.065);
  transform: translateX(-50%);
  border-radius: 999px;
  background: #15171a;
}
.richtext .app-phone__screen {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 0;
}

/* --- Opening ------------------------------------------------------------ */

.launch-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: end;
  padding: var(--space-3) 0 var(--space-7);
}
.richtext .launch-hero__dek {
  margin: 0;
  max-width: 34rem;
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  line-height: 1.3;
  color: #fff;
}
.launch-hero__get { display: flex; align-items: center; gap: var(--space-4); }
.launch-badge { flex: 0 0 auto; display: inline-block; border-radius: 10px; }
.richtext .launch-badge img {
  display: block;
  width: 150px;
  height: 50px;
  margin: 0;
  border-radius: 0;
}
.launch-badge:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.richtext .launch-hero__note {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: #fff;
}

/* --- The filmstrip ------------------------------------------------------ */

/* The blue continues behind the top of the phones, then stops, so the phones
   break out of it onto the white page. */
.launch-film {
  position: relative;
  isolation: isolate;
  padding-bottom: var(--space-8);
}
.launch-film::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  height: 330px;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: var(--launch-band);
}
/* The section heading sits on the blue, so it is white here. Visually it
   reads as the caption for the strip; it stays an h2 for the outline. */
.richtext .launch-film h2 {
  margin-bottom: var(--space-5);
  font-size: clamp(1.4rem, 2.4vw, 1.75rem);
  font-weight: 700;
  color: #fff;
}
.richtext .launch-film__intro {
  max-width: 40rem;
  margin: calc(-1 * var(--space-3)) 0 var(--space-5);
  font-size: 1.05rem;
  line-height: 1.5;
  color: #fff;
}
.launch-film__hint { display: none; }

.film {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
/* Phones centred in their column; the captions are several sentences, so
   they are left-aligned for reading. */
.film__shot {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.film__shot h3,
.film__shot p { align-self: stretch; }
/* Every other phone sits a little lower: the strip reads as a sequence of
   frames rather than a row of identical cards. */
.film__shot--low { padding-top: var(--space-7); }
.richtext .film__shot h3 {
  margin: var(--space-5) 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--launch-ink);
}
.richtext .film__shot p {
  margin: 0 0 var(--space-2);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--gray-700);
}
.richtext .film__shot p:last-child { margin-bottom: 0; }

.film__controls { display: none; }

/* --- Setup band --------------------------------------------------------- */

.launch-alerts {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
  padding-block: var(--space-8);
}
.launch-alerts::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw);
  background: var(--launch-snow);
}
.launch-alerts__setup { max-width: 38rem; }

.launch-steps {
  margin: var(--space-5) 0;
  padding: 0;
  list-style: none;
  counter-reset: launch-step;
}
.richtext .launch-steps li {
  position: relative;
  margin: 0 0 var(--space-4);
  padding-left: 3rem;
  counter-increment: launch-step;
}
.launch-steps li::before {
  content: counter(launch-step);
  position: absolute;
  left: 0;
  top: -0.2rem;
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: var(--launch-blue);
}
.richtext .launch-alerts__help { font-size: 0.95rem; }

.launch-sms {
  padding-left: var(--space-4);
  border-left: 3px solid var(--launch-blue);
}
.richtext .launch-sms h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-heading);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--launch-ink);
}
.richtext .launch-sms p { font-size: 0.95rem; }
.richtext .launch-sms p:last-child { margin-bottom: 0; }

/* --- Closing band ------------------------------------------------------- */

.launch-close {
  position: relative;
  isolation: isolate;
  padding-block: var(--space-8);
  text-align: center;
  color: #fff;
}
/* The blue runs on through the site footer's 64px top margin, so there is
   no white strip between the closing band and the footer. */
.launch-close::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 calc(50% - 50vw) calc(-1 * var(--space-8));
  background: var(--launch-blue);
}
.richtext .launch-close h2 { color: #fff; font-size: clamp(2.25rem, 5vw, 3.5rem); }
.richtext .launch-close p { margin: 0 auto var(--space-4); max-width: 34rem; color: #fff; }
/* .richtext's link colour would otherwise win over .btn--accent's. */
.richtext .launch-close__button { color: var(--gray-900); text-decoration: none; font-size: 1.05rem; padding: 0.85em 1.6em; }
.richtext .launch-close__button:hover { color: #fff; text-decoration: none; }
.launch-close__button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.richtext .launch-close .launch-close__note { font-size: 0.95rem; color: rgba(255, 255, 255, 0.85); }
.richtext .launch-close .launch-close__feedback {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.9);
}
.richtext .launch-close a:not(.btn) { color: #fff; }

/* The article body's own bottom padding would leave a white strip between
   the closing band and the footer. */
.article:has(.launch-hero) .article__body { padding-bottom: 0; }

/* Between the swipe strip and full desktop width, five phones still fit
   in a row, at a smaller frame so its proportions stay right. */
@media (min-width: 901px) and (max-width: 1150px) {
  .app-phone { --phone-w: 168px; }
}

/* --- Narrow screens: the filmstrip becomes a swipe strip ---------------- */

@media (max-width: 900px) {
  .launch-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); padding-bottom: var(--space-6); }

  .launch-film::before { height: 300px; }
  .richtext .launch-film h2 { margin-bottom: var(--space-1); }
  .richtext .launch-film__intro { margin: var(--space-2) 0 var(--space-1); font-size: 0.98rem; }
  .richtext .launch-film__hint {
    display: block;
    margin: 0 0 var(--space-4);
    font-size: 0.95rem;
    color: #fff;
  }
  /* Full-bleed strip: it runs to both screen edges so the next phone shows
     half on screen, which is what tells people there is more to swipe. */
  .film {
    display: flex;
    gap: var(--space-4);
    margin-inline: calc(-1 * var(--space-4));
    padding: 0 var(--space-4) var(--space-2);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-4);
    scrollbar-width: none;
  }
  .film::-webkit-scrollbar { display: none; }
  .film__shot { flex: 0 0 230px; scroll-snap-align: start; }
  .film__shot--low { padding-top: 0; }
  .app-phone { --phone-w: 190px; }

  .film__controls:not([hidden]) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-5);
  }
  .film__nav {
    width: 44px;
    height: 44px;
    border: 2px solid var(--launch-blue);
    border-radius: 50%;
    background: #fff;
    color: var(--launch-blue);
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
  }
  .film__nav:disabled { opacity: 0.35; cursor: default; }
  .film__nav:focus-visible { outline: 3px solid var(--nastar-gold); outline-offset: 2px; }
  .film__dots { display: flex; gap: var(--space-2); }
  .film__dots span { width: 9px; height: 9px; border-radius: 50%; background: #c9d2de; }
  .film__dots span.is-on { background: var(--nastar-gold); }

  .launch-alerts { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .launch-close { padding-block: var(--space-7); }
}

/* Phones: the Android note goes under the badge instead of squeezing
   beside it. */
@media (max-width: 600px) {
  .launch-hero__get { flex-direction: column; align-items: flex-start; gap: var(--space-3); }
}

@media (max-width: 900px) and (prefers-reduced-motion: no-preference) {
  .film { scroll-behavior: smooth; }
}

/* --- Phone install bar -------------------------------------------------- */

/* Phones only: people reading this on a phone are one tap from installing,
   so the App Store link stays within reach on a long page. The script at the
   end of body.html shows it only between the opening badge and the closing
   panel, and never on Android. Without the script it stays hidden. */
.launch-sticky { display: none; }

@media (max-width: 720px) {
  .launch-sticky:not([hidden]) {
    position: fixed;
    z-index: 50;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    padding-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
    background: var(--launch-blue);
    color: #fff;
    box-shadow: 0 -6px 20px rgba(16, 33, 64, 0.25);
    transform: translateY(110%);
    transition: transform 0.25s ease;
  }
  .launch-sticky.is-shown { transform: none; }
  .richtext .launch-sticky__icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: 0;
    border-radius: 10px;
  }
  .richtext .launch-sticky__text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.85);
  }
  .launch-sticky__text strong { display: block; font-size: 1rem; color: #fff; }
  .richtext .launch-sticky__get {
    flex: 0 0 auto;
    padding: 0.7em 1.1em;
    border-radius: 999px;
    background: var(--nastar-gold);
    color: var(--gray-900);
    font-weight: 700;
    text-decoration: none;
  }
  .launch-sticky__get:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  .launch-sticky:not([hidden]) { transition: none; }
}