/* ============================================================
   Application detail page — section layout
   Continues the solution detail page's grammar: a hero with the
   record picture and tags, alternating white / soft sections,
   cards with a 3px top edge, numbered flow steps, label/value
   rows in framed panels, and a blue closing band with the
   numbered checklist. Colours and type come from tokens.css;
   .eyebrow, .section-heading, .nz-chip, .nz-card, .text-link and
   the .nz-spec renderer are global. Local prefix: nz-app-.
   ============================================================ */

.nz-app {
  overflow-x: clip;
}

/* ---- Section rhythm (§5: 96px desktop, 52–68px phone) ---- */
.nz-app-section {
  padding: 96px 0;
}

.nz-app-section--soft {
  background: var(--gray-bg);
}

.nz-app-section--blue {
  background: var(--blue);
  color: var(--blue-soft);
}

.nz-app-section--tight {
  padding: 34px 0;
}

/* ---- A section ground that carries one faint photograph ----
   The scenario module may be given a single picture of the line it describes.
   It is a ground, not an image: a pseudo-element, so it never enters the
   reading order or the accessibility tree, and the section reads exactly the
   same without it. Unlike the about page's ground — a whole picture, contained,
   because it illustrates the copy — this one is the scenery the cards stand on,
   so it is cropped to the section (cover) and held very light: at 0.14 the
   photograph is a tint under the three white cards, and the heading keeps the
   contrast it needs. A narrow window keeps the plain ground rather than
   downloading a wide photograph that would be cropped away to nothing. */
.nz-app-section--veiled {
  position: relative;
  isolation: isolate;
}

@media (min-width: 701px) {
  .nz-app-section--veiled::before {
    position: absolute;
    z-index: -1;
    inset: 0;
    content: "";
    background-image: var(--nz-app-ground);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    opacity: 0.14;
    pointer-events: none;
  }
}

.nz-app-section .nz-related {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.nz-app-head {
  margin-bottom: 42px;
}

.nz-app-head .section-heading {
  margin-bottom: 0;
}

.nz-app-head .section-heading__copy h2 {
  max-width: 26ch;
  margin-bottom: 0;
}

/* A section whose note is read under the title rather than at the right of it:
   the note keeps the green rule and the muted colour it had as the heading's
   aside, and stays on the copy's own measure. */
.nz-app-head__lede {
  max-width: 62ch;
  margin: 16px 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--green);
  color: var(--gray-text);
  font-size: 13.5px;
  line-height: 1.55;
}

@media (max-width: 940px) {
  .nz-app-head {
    margin-bottom: 30px;
  }
}

@media (max-width: 900px) {
  .nz-app-section {
    padding: 68px 0;
  }
}

@media (max-width: 650px) {
  .nz-app-section {
    padding: 52px 0;
  }
}

/* ---- Page open: title, tags, actions beside the picture ---- */
.nz-app-hero {
  padding: 40px 0 76px;
  background: var(--white);
}

.nz-app-hero .nz-breadcrumbs {
  margin-bottom: 28px;
}

.nz-app-hero__grid {
  display: grid;
  gap: 56px;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
}

.nz-app-hero__copy {
  min-width: 0;
}

.nz-app-hero__title {
  max-width: 22ch;
  margin-bottom: 16px;
}

.nz-app-hero__lead {
  max-width: 62ch;
  margin-bottom: 0;
  font-size: 1.06rem;
  line-height: 1.65;
}

.nz-app-hero__media {
  margin: 0;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--gray-bg);
  overflow: hidden;
}

.nz-app-hero__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--white);
}

@media (max-width: 1024px) {
  .nz-app-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }
}

/* A record without a featured image prints no picture column at all, so the
   copy takes the whole width at every size and the column gap has nothing to
   separate. Declared after the breakpoint above so it holds at every width. */
.nz-app-hero__grid--text-only {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.nz-app-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.nz-app-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  margin-top: 30px;
}

/* ---- Body copy ---- */
.nz-app-prose {
  color: var(--text);
  font-size: 15px;
  line-height: 1.65;
}

.nz-app-prose > *:last-child {
  margin-bottom: 0;
}

/* ---- Card rows: the scenario, the requirements, the fit boundary ---- */
.nz-app-cards {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.nz-app-card {
  padding: 24px 26px;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--white);
}

.nz-app-card--wide {
  max-width: 900px;
}

/* The fit boundary keeps the solution page's edge language, with a third
   state: a condition that needs assessment before an answer. */
.nz-app-card--fit {
  border-top: 3px solid var(--green);
}

.nz-app-card--assess {
  border-top: 3px solid var(--focus);
}

.nz-app-card--nofit {
  border-top: 3px solid var(--gray-line);
}

.nz-app-card__label {
  margin: 0 0 12px;
  color: var(--blue);
  font-size: 1.05rem;
}

/* ---- Material: the profile and its photograph in one panel ----
   A material profile is three or four lines, so the module used to leave a
   panel half empty whatever the text did: two columns top-aligned meant the
   photograph set the row's height (it is always taller than the copy) and the
   section's background showed under the card. Two things are done about that:
   · the note that floated at the right of the heading — squeezed into a narrow
     column over the picture — is read under the title on the left, see
     .nz-app-head__lede above;
   · the profile and the photograph are one panel, 1000px at most, with the
     picture a 300px inset on its right — small beside the text rather than the
     element the row is measured by — and the copy centred against it. What is
     between them is the panel's own 26px gutter, not a hole in the section. */
.nz-app-material {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
}

/* The panel spans the section, so its edges line up with the heading above it
   and the flow figure below; the wide card's own 900px measure is lifted here
   because the picture already shortens the copy's line. */
.nz-app-material__card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  max-width: none;
}

.nz-app-material__body {
  flex: 1 1 320px;
  min-width: 0;
}

.nz-app-material__media {
  display: flex;
  flex-direction: column;
  flex: 0 0 300px;
  margin: 0;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--gray-bg);
  overflow: hidden;
}

.nz-app-material__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

.nz-app-material__cap {
  flex: none;
  padding: 10px 14px;
  border-top: 1px solid var(--gray-line);
  background: var(--white);
  color: var(--gray-text);
  font-size: 13px;
  line-height: 1.5;
}

/* One column below the two-column width: the photograph wraps under the
   profile, takes the panel's width and a landscape 16:10. */
@media (max-width: 1024px) {
  .nz-app-material__media {
    flex: 1 1 100%;
  }

  .nz-app-material__img {
    aspect-ratio: 16 / 10;
  }
}

/* No material photograph: the panel is the text alone, so there is no picture
   column and no gutter to separate it from one. */
.nz-app-material--text-only .nz-app-material__card {
  display: block;
}

/* ---- Process steps: the order the material moves ---- */
.nz-app-steps {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nz-app-step {
  display: flex;
  gap: 20px;
  padding: 24px 0;
  border-top: 1px solid var(--gray-line);
}

.nz-app-step:first-child {
  border-top: 0;
  padding-top: 0;
}

.nz-app-step:last-child {
  padding-bottom: 0;
}

.nz-app-step__num {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--blue);
  color: var(--white);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.nz-app-step__body {
  flex: 1 1 auto;
  min-width: 0;
}

.nz-app-step__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.nz-app-step__name {
  margin: 0;
  color: var(--blue);
  font-size: 1.12rem;
}

.nz-app-step__stage {
  margin: 6px 0 0;
  color: var(--gray-text);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.nz-app-step__purpose {
  margin: 12px 0 0;
  max-width: 68ch;
}

/* ---- The flow or layout drawing above the step ladder ---- */
.nz-app-flow {
  margin: 0 0 26px;
  padding: 14px 14px 0;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--white);
  overflow: hidden;
}

.nz-app-flow__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: calc(var(--radius) - 2px);
  background: var(--white);
}

.nz-app-flow__cap {
  padding: 10px 4px;
  color: var(--gray-text);
  font-size: 13px;
  line-height: 1.5;
}

@media (max-width: 650px) {
  .nz-app-flow {
    padding: 8px 8px 0;
  }
}

/* ---- Photos: the scenario in practice ---- */
.nz-app-media {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.nz-app-media__item {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--gray-bg);
  overflow: hidden;
}

.nz-app-media__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.nz-app-media__cap {
  padding: 10px 14px;
  color: var(--gray-text);
  font-size: 13px;
  line-height: 1.5;
}

/* ---- Selection and variants: framed panels with label/value rows ---- */
.nz-app-panels {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.nz-app-panel {
  padding: 24px 26px;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--white);
}

.nz-app-panel__label {
  margin: 0 0 14px;
  color: var(--blue);
  font-size: 1.05rem;
}

.nz-app-rows {
  margin: 0;
}

.nz-app-rows__row {
  display: grid;
  gap: 2px 18px;
  grid-template-columns: minmax(130px, 190px) minmax(0, 1fr);
  padding: 11px 0;
  border-top: 1px solid var(--gray-line);
}

.nz-app-rows__row:first-child {
  border-top: 0;
  padding-top: 0;
}

.nz-app-rows dt {
  color: var(--blue);
  font-size: 13px;
  font-weight: 600;
}

.nz-app-rows dd {
  margin: 0;
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.6;
}

@media (max-width: 560px) {
  .nz-app-rows__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* ---- The blue band: what we confirm before a quotation ----
   Same band grammar as the solution page: white on #1B3770 is about 11.5:1
   and #B9C7E4 about 6.8:1, so the copy passes AA; the numbered list is a
   sequence, not a badge. */
.nz-app-section--blue h2,
.nz-app-section--blue .eyebrow,
.nz-app-section--blue .nz-app-checklist__name {
  color: var(--white);
}

.nz-app-section--blue .section-heading__aside,
.nz-app-section--blue .nz-app-checklist__note,
.nz-app-section--blue .nz-app-bluecta__note {
  color: var(--blue-soft);
}

/* The band's two columns: the heading, the checklist and its call to action on
   the left, one photograph on the right. The photograph's box is a stretched
   grid item, so it is exactly as tall as the column beside it and the picture
   is cropped inside that box (object-fit: cover) instead of being shrunk into a
   strip under a tall list. Below the two-column width the picture takes a fixed
   16:10 and closes the band. */
.nz-app-quote {
  display: grid;
  grid-template-columns: minmax(0, 1.24fr) minmax(0, 1fr);
  gap: 0 56px;
  align-items: stretch;
}

.nz-app-quote__main {
  min-width: 0;
}

.nz-app-quote__media {
  margin: 0;
  min-height: 380px;
  overflow: hidden;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
}

.nz-app-quote__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.nz-app-confirm {
  max-width: 880px;
}

.nz-app-checklist {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nz-app-checklist__item {
  display: flex;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.06);
}

.nz-app-checklist__num {
  flex: none;
  color: var(--yellow);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.nz-app-checklist__name {
  display: block;
  font-size: 15px;
  font-weight: 600;
}

.nz-app-checklist__note {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.55;
}

.nz-app-bluecta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 22px;
  margin: 40px 0 0;
}

.nz-app-bluecta__note {
  margin: 0;
  max-width: 52ch;
  font-size: 14px;
}

@media (max-width: 1024px) {
  .nz-app-quote {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px 0;
  }

  .nz-app-quote__media {
    aspect-ratio: 16 / 10;
    min-height: 0;
  }
}

/* No scenario photograph: the checklist is the only column, so the band is one
   track at every width and the 56px column gap is dropped. */
.nz-app-quote--text-only {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* ---- Where the record points: its own solutions and equipment ---- */
.nz-app-pointgroup + .nz-app-pointgroup {
  margin-top: 40px;
}

.nz-app-pointgroup__title {
  margin: 0 0 18px;
  color: var(--blue);
  font-size: 1.12rem;
}

/* ---- A record with no details yet ---- */
.nz-app-empty {
  max-width: 60ch;
  margin: 0 auto;
  padding: 40px 32px;
  border: 1px solid var(--gray-line);
  border-radius: var(--radius);
  background: var(--white);
  text-align: center;
}

.nz-app-empty__title {
  margin: 0 0 12px;
}

.nz-app-empty__text {
  margin: 0 0 22px;
  color: var(--gray-text);
  line-height: 1.65;
}

.nz-app-empty__cta {
  margin: 0;
}