/* ==========================================================================
   Northtrack Studio — product detail template
   Shared by the app/web detail pages (Roost, Moto centre, Maintenance
   tracker, Rider fitness). Foundation (nav, footer, plate, reveal) is in
   base.css; this file adds the detail-only sections.
   ========================================================================== */

@import url("base.css");

/* WEB category pages (e.g. Moto centre) lead with teal instead of orange.
   Flipping --nt-accent re-tints every accent-driven element (badge plate, WEB
   tag, CTA, hazard strip, feature highlights, CTA band, section dots). Fixed
   signals — the brand mark, "in build" pills, app pager plates — reference
   --nt-orange / --nt-teal directly, so they stay put. */
.nt-theme-web { --nt-accent: var(--nt-teal); }

/* -------------------------------------------------------------------------- */
/* Hero                                                                       */
/* -------------------------------------------------------------------------- */
.nt-detail-hero { border-bottom: 1px solid var(--nt-border); }
.nt-detail-hero__inner { padding-top: 104px; }

/* Breadcrumb. */
.nt-crumbs {
  padding-top: 22px;
  font-size: 13.5px;
}
.nt-crumbs__back {
  font-weight: 600;
  color: var(--nt-text-muted);
  text-decoration: none;
  transition: color 0.2s var(--nt-ease);
}
.nt-crumbs__back:hover,
.nt-crumbs__back:focus-visible { color: var(--nt-ink); }
.nt-crumbs__sep { color: var(--nt-text-faint); }
.nt-crumbs__current { font-weight: 600; color: var(--nt-ink); }

/* Badge row: number plate + category tag + status pill. */
.nt-badgerow {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 40px 0 28px;
}
.nt-badgerow__num {
  font-size: 32px;
  padding: 8px 16px;
  border-radius: 7px;
  box-shadow: 3.5px 3.5px 0 var(--nt-accent);
}
.nt-tag {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--nt-on-accent);
  background: var(--nt-accent);
  padding: 6px 12px;
  border-radius: var(--nt-radius-chip);
}
.nt-tag--web { background: var(--nt-teal); }
.nt-status-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--nt-teal);
  border: 1px solid rgba(46, 156, 137, 0.55);
  padding: 5px 12px;
  border-radius: var(--nt-radius-chip);
}
.nt-status-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nt-teal);
}
/* Orange "in build" variant of the status pill (orange is a fixed signal —
   it stays orange even on the teal WEB pages). */
.nt-status-pill--build {
  color: var(--nt-orange);
  border-color: rgba(201, 127, 61, 0.55);
}
.nt-status-pill--build .nt-status-pill__dot { background: var(--nt-orange); }
/* Muted "in design" variant — earliest stage, no accent yet. */
.nt-status-pill--design {
  color: var(--nt-text-muted);
  border-color: rgba(232, 230, 222, 0.3);
}
.nt-status-pill--design .nt-status-pill__dot { background: var(--nt-text-muted); }

/* Big Anton display title, second line stroked/outlined. */
.nt-display {
  font-family: var(--nt-font-display);
  font-size: clamp(72px, 11vw, 138px);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
/* Smaller display for longer single-word titles (e.g. "Maintenance"). */
.nt-display--md { font-size: clamp(52px, 8.5vw, 112px); }
.nt-display__outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--nt-ink);
}
/* Fallback where text-stroke is unsupported: keep the word visible. */
@supports not ((-webkit-text-stroke: 2px #000) or (text-stroke: 2px #000)) {
  .nt-display__outline { color: var(--nt-ink); }
}

/* Tagline + primary CTA row under the title. */
.nt-hero-lead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin: 30px 0 38px;
}
.nt-hero-lead__text {
  margin: 0;
  font-family: var(--nt-font-serif);
  font-style: italic;
  font-size: 21px;
  color: var(--nt-text-body);
  max-width: 480px;
}
.nt-hero-lead__cta {
  display: flex;
  align-items: center;
  gap: 16px;
}
.nt-cta__note {
  font-size: 12.5px;
  color: var(--nt-text-muted);
  line-height: 1.5;
}

/* Accent CTA with hard chalk offset shadow (nudges on hover). */
.nt-cta {
  flex: none;
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--nt-on-accent);
  background: var(--nt-accent);
  padding: 16px 30px;
  border-radius: var(--nt-radius-btn);
  box-shadow: 4px 4px 0 var(--nt-ink);
  text-decoration: none;
  transition: transform 0.2s var(--nt-ease), box-shadow 0.2s var(--nt-ease);
}
.nt-cta:hover,
.nt-cta:focus-visible {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 var(--nt-ink);
}

/* -------------------------------------------------------------------------- */
/* Hazard strip divider                                                       */
/* -------------------------------------------------------------------------- */
.nt-hazard {
  height: 14px;
  background: repeating-linear-gradient(
    -45deg,
    var(--nt-accent) 0 20px,
    var(--nt-bg) 20px 40px
  );
  border-top: 1px solid var(--nt-border-strong);
  border-bottom: 1px solid var(--nt-border-strong);
}

/* -------------------------------------------------------------------------- */
/* Browser frame + screenshot                                                 */
/* -------------------------------------------------------------------------- */
.nt-frame { padding-top: 44px; padding-bottom: 52px; }
.nt-frame__window {
  border: 1px solid var(--nt-border-strong);
  border-radius: var(--nt-radius-card);
  overflow: hidden;
  background: var(--nt-bg-sunken);
  box-shadow: var(--nt-elevation);
}
.nt-frame__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--nt-border-row);
}
.nt-frame__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(232, 230, 222, 0.25);
}
.nt-frame__url {
  margin-left: 10px;
  font-size: 12px;
  color: var(--nt-text-faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.nt-frame__caption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--nt-text-faint);
}

/* Screenshot slot — holds the <img>; shows a skeleton until the asset exists. */
.nt-shot-slot {
  position: relative;
  min-height: 300px;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(232, 230, 222, 0.02) 0 12px,
      transparent 12px 24px
    ),
    var(--nt-bg-sunken);
}
.nt-shot-slot.is-empty::after {
  content: "Screenshot";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nt-text-faint);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nt-shot {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}
.nt-shot.is-missing { display: none; }

/* Fixed-ratio slot — for frames whose screenshot isn't shot yet (the design's
   image-slot placeholders). Holds proportions with no image; crops-to-fill if
   one is later added. */
.nt-shot-slot--ratio {
  aspect-ratio: 1.72;
  min-height: 0;
}
.nt-shot-slot--ratio .nt-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* -------------------------------------------------------------------------- */
/* Plate stats                                                                */
/* -------------------------------------------------------------------------- */
.nt-stats {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.nt-stat {
  padding: 36px 20px;
  text-align: center;
  border-right: 1px solid var(--nt-border);
}
.nt-stat:last-child { border-right: none; }
.nt-stat__num {
  font-family: var(--nt-font-display);
  font-size: 52px;
  line-height: 1;
}
.nt-stat__num--teal { color: var(--nt-teal); }
.nt-stat__label {
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nt-text-muted);
  margin-top: 10px;
}

/* -------------------------------------------------------------------------- */
/* Features grid                                                              */
/* -------------------------------------------------------------------------- */
.nt-section__body { padding-top: 80px; padding-bottom: 80px; }

.nt-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 44px 56px;
}
.nt-feature__title {
  font-family: var(--nt-font-display);
  font-size: 26px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}
.nt-feature__body {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--nt-text-body);
  max-width: 440px;
}

/* -------------------------------------------------------------------------- */
/* Roadmap                                                                    */
/* -------------------------------------------------------------------------- */
.nt-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 26px;
}
.nt-section-title {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.03em;
  font-size: clamp(28px, 4vw, 44px);
}
.nt-road__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 17px 0;
  border-bottom: 1px solid var(--nt-border-row);
  font-size: 16px;
}
.nt-road__row:last-child { border-bottom: none; }
.nt-road__label { color: var(--nt-text-body); }
.nt-road__status { font-weight: 600; }
.nt-road__status--live { color: var(--nt-teal); }
.nt-road__status--build { color: var(--nt-orange); }
.nt-road__status--next { color: var(--nt-text-muted); }

/* -------------------------------------------------------------------------- */
/* Story + second shot                                                        */
/* -------------------------------------------------------------------------- */
.nt-story {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 56px;
  align-items: center;
}
.nt-story__title {
  font-family: var(--nt-font-display);
  font-size: clamp(26px, 3.4vw, 38px);
  text-transform: uppercase;
  line-height: 1.08;
  margin-bottom: 18px;
}
.nt-pricing {
  display: flex;
  gap: 20px;
  margin-top: 22px;
  font-size: 14.5px;
}
.nt-pricing__key { color: var(--nt-text-muted); }
.nt-pricing__val { font-weight: 700; }
.nt-pricing__val--teal { color: var(--nt-teal); }
.nt-pricing__sep { color: var(--nt-text-faint); }

/* Rotated screenshot with a hard teal offset shadow. */
.nt-story__shot {
  border: 1px solid var(--nt-border-strong);
  border-radius: 10px;
  overflow: hidden;
  transform: rotate(1.2deg);
  box-shadow: var(--nt-shot-shadow);
}
.nt-story__shot .nt-shot-slot { min-height: 260px; }
/* WEB pages use the complementary (orange) offset shadow on the story shot. */
.nt-story__shot--orange { box-shadow: 6px 6px 0 rgba(201, 127, 61, 0.55); }

/* -------------------------------------------------------------------------- */
/* CTA band                                                                   */
/* -------------------------------------------------------------------------- */
.nt-cta-band {
  background: var(--nt-accent);
  color: var(--nt-on-accent);
}
.nt-cta-band__inner {
  padding-top: 72px;
  padding-bottom: 72px;
  text-align: center;
}
.nt-cta-band__title {
  font-family: var(--nt-font-display);
  font-size: clamp(36px, 5.5vw, 58px);
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 24px;
}
.nt-cta-band__btn {
  display: inline-block;
  font-size: 15px;
  font-weight: 700;
  color: var(--nt-ink);
  background: var(--nt-bg);
  padding: 16px 36px;
  border-radius: var(--nt-radius-btn);
  text-decoration: none;
  transition: background 0.2s var(--nt-ease);
}
.nt-cta-band__btn:hover,
.nt-cta-band__btn:focus-visible { background: #1A1D18; }
.nt-cta-band__note {
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(34, 37, 31, 0.7);
}

/* -------------------------------------------------------------------------- */
/* Prev / Next pager                                                          */
/* -------------------------------------------------------------------------- */
.nt-pager-wrap { border-top: 1px solid var(--nt-border); }
.nt-pager {
  max-width: var(--nt-container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.nt-pager__link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 36px 32px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s var(--nt-ease);
}
.nt-pager__link--prev {
  align-items: flex-start;
  border-right: 1px solid var(--nt-border);
}
.nt-pager__link--next { align-items: flex-end; }
.nt-pager__link:hover,
.nt-pager__link:focus-visible { background: var(--nt-surface-card); }
.nt-pager__dir {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--nt-text-muted);
}
.nt-pager__item {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Pager plate shadow reflects the TARGET's category (app = orange, web = teal),
   not the current page's accent — so both are fixed colors. */
.nt-pager__num {
  font-size: 16px;
  padding: 4px 9px;
  border-radius: var(--nt-radius-chip);
  box-shadow: 2px 2px 0 var(--nt-orange);
}
.nt-pager__num--teal { box-shadow: 2px 2px 0 var(--nt-teal); }
.nt-pager__name {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------------------------- */
/* Detail breakpoint tweaks                                                   */
/* -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  /* Column dividers become row dividers (stat grid, pager). */
  [data-m-divide] > * {
    border-right: none !important;
    border-bottom: 1px solid var(--nt-border);
  }
  [data-m-divide] > *:last-child { border-bottom: none; }

  /* Pager items left-align once stacked. */
  .nt-pager__link--next { align-items: flex-start; }

  /* Ease the hero lead so the CTA doesn't crowd the tagline. */
  .nt-hero-lead { align-items: flex-start; }
}