/* ============================================================
   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;
}

.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;
}

@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 card beside the material photograph ---- */
.nz-app-material {
  display: grid;
  gap: 40px;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
}

.nz-app-material__media {
  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: 4 / 3;
  object-fit: contain;
  background: var(--white);
}

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

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

/* No material photograph: the text card is the only column, so the grid is one
   track at every width and the 40px column gap is dropped. The card keeps its
   own reading measure (.nz-app-card--wide). */
.nz-app-material--text-only {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* ---- 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;
}