/* Programs as data (GMA-321): program colors by palette key, the program photos and the
   featured-program bands (GMA-366).
   Loaded after landing.css so a rendered element's [data-color] wins over its [data-program]
   fallback. Every value comes from tokens.css. */

/* One rule per PricingProgramColor key (a server test checks this list against the palette). */
[data-color="red"] { --p-bg: var(--c-prog-red-bg); --p-text: var(--c-prog-red-text); }
[data-color="orange"] { --p-bg: var(--c-prog-orange-bg); --p-text: var(--c-prog-orange-text); }
[data-color="yellow"] { --p-bg: var(--c-prog-yellow-bg); --p-text: var(--c-prog-yellow-text); }
[data-color="magenta"] { --p-bg: var(--c-prog-magenta-bg); --p-text: var(--c-prog-magenta-text); }
[data-color="blue"] { --p-bg: var(--c-prog-blue-bg); --p-text: var(--c-prog-blue-text); }
[data-color="green"] { --p-bg: var(--c-prog-green-bg); --p-text: var(--c-prog-green-text); }
[data-color="teal"] { --p-bg: var(--c-prog-teal-bg); --p-text: var(--c-prog-teal-text); }
[data-color="gray"] { --p-bg: var(--c-prog-gray-bg); --p-text: var(--c-prog-gray-text); }

/* Program photo behind Ways to train (GMA-331). programs.js adds one .program-photo layer per
   program the visitor selects (so only that photo downloads) and crossfades to it. The layer
   paints a scrim over the photo, like the top hero. A program with no rule below gets no
   background at all (--program-photo stays unset, which drops the whole declaration) and the
   section keeps the plain navy page. No JS: no layer, plain navy.

   Phones and tablets: the section is tall (Adult stacks four plan cards, about 1140px at 390px
   wide), so covering all of it would zoom the photo onto one face and upscale it far past its
   source. There the photo is a band at the top (--program-band-h) behind the heading and the
   tabs, fading into the navy under the plan cards. From 1000px wide the section is short and
   wide, and the photo covers all of it with the hero's own scrim.

   The program to photo mapping: one rule per program tag (the API tag; the static "womens" key
   is mapped to "women" in programs.js), with the photo's focal point (faces) so the crop keeps
   them. Photos are JPEG at their source size, about 1600 x 1000, around 250 KB or less. The same
   rules give a featured program's band its photo (.featured-photo, below). */
[data-program-bg="adult"] { --program-photo: url("../img/programs/program-adult.jpg"); --program-photo-pos: 42% 20%; }
[data-program-bg="teen"] { --program-photo: url("../img/programs/program-teen.jpg"); --program-photo-pos: 52% 35%; }
[data-program-bg="superhero"] { --program-photo: url("../img/programs/program-superhero.jpg"); --program-photo-pos: 50% 15%; }
[data-program-bg="women"] { --program-photo: url("../img/programs/program-womens.jpg"); --program-photo-pos: 50% 30%; }

#pricing { position: relative; isolation: isolate; }
.program-photos { position: absolute; top: 0; left: 0; right: 0; height: var(--program-band-h); max-height: 100%; z-index: -1; overflow: hidden; }
.program-photo {
  position: absolute; inset: 0; opacity: 0; transition: opacity var(--photo-fade) ease;
  background-image: var(--c-scrim-band), var(--program-photo);
  background-size: cover; background-position: center, var(--program-photo-pos, center); background-repeat: no-repeat;
}
@media (min-width: 1000px) {
  .program-photos { bottom: 0; height: auto; max-height: none; }
  .program-photo { background-image: var(--c-scrim), var(--program-photo); }
}
.program-photo.is-on { opacity: 1; }

/* Over a photo, the muted text turns white (muted gray on the scrim is under AA) and the plan
   cards keep their solid surface, lifted off the photo. */
.has-program-photo .eyebrow,
.has-program-photo .section-sub,
.has-program-photo .pricing-footnote { color: var(--c-on-photo); }
.has-program-photo .plan-card { box-shadow: var(--shadow-card); }

@media (prefers-reduced-motion: reduce) { .program-photo { transition: none; } }

/* Featured program band (GMA-366). A featured program is its own full-width section right above
   Ways to train, never a tab: its photo (the [data-program-bg] mapping above) with a scrim, the
   Featured tag, the name (h2), the description and its plan cards with Buy buttons in the program
   color. The pricing section below keeps the selected tab's photo, so the two never overlap. A
   program without a photo rule keeps the plain band navy (--program-photo unset drops the
   background-image declaration). No JS: the section stays hidden and empty.

   Phones and tablets: like Ways to train, the photo is a band at the top (--program-band-h) that
   fades into the band navy under the plan cards, so a band with several plans does not zoom the
   photo onto one face. The scrim runs top to bottom there, since the text spans the full width.
   From 1000px the photo covers the whole band with a left to right scrim, like the approved mock:
   the copy is held to --featured-copy-max on the dark left side (see tokens.css for contrast). */
.featured-band {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--c-band); color: var(--c-on-photo);
  border-top: var(--line-w) solid var(--c-line); border-bottom: var(--line-w) solid var(--c-line);
  padding-top: var(--featured-band-y); padding-bottom: var(--featured-band-y);
}
.featured-band + .featured-band { border-top: 0; }
.featured-photo {
  position: absolute; top: 0; left: 0; right: 0; height: var(--program-band-h); max-height: 100%; z-index: -1;
  background-image: var(--c-scrim-featured-band), var(--program-photo);
  background-size: cover; background-position: center, var(--program-photo-pos, center); background-repeat: no-repeat;
}
@media (min-width: 1000px) {
  .featured-photo { bottom: 0; height: auto; max-height: none; background-image: var(--c-scrim-side), var(--program-photo); }
}
.featured-body { display: flex; flex-direction: column; gap: var(--gap-sm); }
.featured-tag {
  align-self: flex-start; background: var(--p-bg); color: var(--p-text);
  border-radius: var(--radius-pill); padding: 2px var(--gap-sm);
  font-size: var(--eyebrow-size); letter-spacing: var(--eyebrow-ls); text-transform: uppercase; font-weight: 700;
}
.featured-title { margin-bottom: 0; }
.featured-title, .featured-text { max-width: var(--featured-copy-max); }
.featured-band .plan-grid { margin-top: var(--gap-xs); }
.featured-band .plan-card { box-shadow: var(--shadow-card); color: var(--c-text); }
.featured-band .plan-actions { margin-top: var(--gap-xs); }
.featured-band .checkout-status { margin-top: 0; }