/* ==========================================================================
   Product page only — the six capabilities and their static product mocks.
   Loaded after styles.css on product.html. Tokens only, no new colours
   except the functional redline red (already a template UI token).
   ========================================================================== */

/* Section lead photograph ------------------------------------------------ */
.np-lead {
  margin-bottom: var(--spacing--48, 3rem);
  border-radius: var(--radius-general-default);
  overflow: hidden;
  aspect-ratio: 21 / 8;
}
.np-lead img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Capability grid -------------------------------------------------------- */
/* The six read one at a time: each card sticks under the header and the next
   slides over it, leaving a sliver of the one beneath so the pile is legible. */
.np-cap-grid { display: block; }
.np-cap {
  position: sticky;
  top: var(--np-stack-top, 6rem);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: 3.25rem;
  /* Every card is the same height. With unequal heights a taller card behind a
     shorter one hangs out below it, which reads as seeing through the stack.
     Sized to the tallest natural card (Create studio) with a little room.
     Recheck this if a mockup grows. */
  height: 680px;
  margin-bottom: 1.25rem;
  padding: 2rem;
  /* Strong enough to read when one card lies over another. */
  border: 1px solid rgba(247, 247, 245, 0.18);
  border-radius: var(--radius-general-default);
  background-color: var(--color-base-lift-dark);
  color: rgba(247, 247, 245, 0.88);
}
.np-cap:nth-of-type(1) { --np-stack-top: 6rem; }
.np-cap:nth-of-type(2) { --np-stack-top: 6.5rem; }
.np-cap:nth-of-type(3) { --np-stack-top: 7rem; }
.np-cap:nth-of-type(4) { --np-stack-top: 7.5rem; }
.np-cap:nth-of-type(5) { --np-stack-top: 8rem; }
.np-cap:nth-of-type(6) { --np-stack-top: 8.5rem; margin-bottom: 0; }

/* Copy gets room to breathe now that it is not sharing a narrow column. */
.np-cap .np-cap_text { max-width: 34rem; }
.np-cap .np-cap_tag { font-size: 1.25rem; }
.np-cap .np-cap_body { font-size: 1.0625rem; }
.np-cap > :first-child { align-self: center; }
/* The card keeps a single height so the stack stays even, but the mock inside
   hugs its own content and sits centred in that space. */
.np-cap > .np-panel, .np-cap > .nicholii-mock { min-height: 0; height: auto; flex: 0 0 auto; }
/* Create and Nexus fill the column so their chrome matches the taller mocks. */
.np-cap > .nicholii-mock[data-nm="create"],
.np-cap > .nicholii-mock[data-nm="nexus"] {
  align-self: stretch;
  height: 100%;
  min-height: 0;
}
.np-cap h3 { color: var(--color-base-base-light-100); margin: 0; }

.np-cap_name { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
.np-cap_beta {
  font-family: var(--typography-font-label);
  font-size: 10px; letter-spacing: .08em; text-transform: uppercase;
  padding: .2rem .55rem; border-radius: 999px;
  border: 1px solid rgba(247, 247, 245, 0.32);
  color: rgba(247, 247, 245, 0.72);
  white-space: nowrap;
}
.np-cap_text { display: flex; flex-direction: column; gap: .5rem; min-height: 9.25rem; }
.np-cap_tag { font-size: 1.0625rem; font-weight: 500; color: var(--color-base-base-light-100); }
.np-cap_body { font-size: .9375rem; line-height: 1.55; color: rgba(247, 247, 245, 0.66); }

/* Placeholder inside a charcoal card ------------------------------------- */
.np-cap .nicholii-ph {
  flex: 1 1 auto; min-height: 240px; aspect-ratio: auto;
  border-color: rgba(247, 247, 245, 0.28);
  background-color: rgba(247, 247, 245, 0.06);
  color: rgba(247, 247, 245, 0.72);
}

/* Responsive ------------------------------------------------------------- */
@media screen and (max-width: 991px) {
  .np-lead { aspect-ratio: 16 / 9; }
  /* Stacking needs a viewport tall enough to hold a card; below that it is a
     plain vertical list. */
  .np-cap {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    height: auto;
    padding: 1.25rem;
  }
  .np-cap .np-cap_text { max-width: none; }
  .np-cap_text { min-height: 0; }
  .np-panel, .np-cap .nicholii-ph { min-height: 200px; }
  /* Keep implied UIs to a phone-friendly slot rather than full desktop height. */
  .np-cap > .nicholii-mock,
  .np-cap > .nicholii-mock[data-nm="create"],
  .np-cap > .nicholii-mock[data-nm="nexus"] {
    align-self: stretch;
    width: 100%;
    height: min(52vh, 22rem);
    max-height: 22rem;
    min-height: 0;
    overflow: hidden;
  }
  .np-cap .np-cap_tag { font-size: 1.05rem; }
  .np-cap .np-cap_body { font-size: .9rem; line-height: 1.45; }
}
@media screen and (max-width: 767px) {
  .np-cap {
    padding: 1rem;
    gap: 1rem;
    margin-bottom: 1rem;
  }
  .np-cap > .nicholii-mock,
  .np-cap > .nicholii-mock[data-nm="create"],
  .np-cap > .nicholii-mock[data-nm="nexus"] {
    height: min(48vh, 19.5rem);
    max-height: 19.5rem;
  }
  .np-cap .np-cap_tag { font-size: 1rem; }
  .np-cap .np-cap_body { font-size: .875rem; }
}
/* A pinned card needs a viewport tall enough to hold it, or its foot is never
   readable. Short windows get the plain list. */
@media screen and (max-height: 819px) {
  .np-cap { position: static; height: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .np-cap { position: static; height: auto; }
}

/* Success stories: the stat + case-study row is gone, so centre the quote ---- */
.nicholii-testi_body { justify-content: center; }
@media screen and (max-width: 767px) { .nicholii-testi_body { justify-content: flex-start; } }

/* Recognition row. The selector on this rule had been lost in an earlier edit,
   leaving two orphaned declarations and a stray closing brace, which made every
   rule after it unparseable. Restored to match css/page-home.css. */
.nicholii-recog_row { display: flex; flex-wrap: wrap; gap: var(--spacing--32); }
.nicholii-recog_item {
  flex: 1 1 20rem;
  display: flex;
  align-items: center;
  gap: var(--spacing--24);
}
.nicholii-recog_item .award_card { flex: none; padding: var(--spacing--16); }
.nicholii-recog_item .award_logo { height: 4rem; }
.nicholii-recog_text { display: flex; flex-direction: column; gap: 4px; }
@media screen and (max-width: 479px) {
  .nicholii-recog_item { flex: 1 1 100%; }
  .nicholii-recog_item .award_logo { height: 3rem; }
}

/* Roulette: keep the photographs upright ---------------------------------
   The template spins .roulette_container a full 360deg on a 45s loop, and the
   four columns sit at 0/90/45/-45deg. Left alone every photograph passes
   through upside down. Each card cancels its column angle and the live wheel
   angle, so the cards orbit like gondolas: the arrangement still turns, the
   faces stay the right way up. --wheel-rot is written by js/nicholii-roulette.js. */
.roulette_column                 { --col-rot: 0deg; }
.roulette_column._90-column      { --col-rot: 90deg; }
.roulette_column._45-column      { --col-rot: 45deg; }
.roulette_column._45-column-rev  { --col-rot: -45deg; }

.roulette_card {
  transform: rotate(calc(-1 * (var(--wheel-rot, 0deg) + var(--col-rot, 0deg))));
  transform-origin: 50% 50%;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .roulette_card { will-change: auto; }
}
/* Jack Rathie has no quotation on record, only the description the client
   supplied, so his card carries that as a supporting line rather than dressing
   it up as something he said. */
.nicholii-testi_note {
  margin: .75rem 0 0;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(247, 247, 245, 0.74);
}

/* Item 20. The customer logos on the story cards are forced to solid white and
   sit directly on the photograph. Against a dark portrait that reads; against a
   light one, such as Emma Franco's, the logo disappears entirely, which is why
   the EatClub logo looked missing. A soft shadow gives white an edge on any
   photograph, without putting a plate behind it. */
.nicholii-testi_logo {
  filter: brightness(0) invert(1)
          drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 10px rgba(0, 0, 0, 0.35));
}