/* ==========================================================================
   NAVAL ORIENTATION: Projects

   The archive, the category archives and the single project page. Built from
   the existing tokens, buttons and reveal system, and from the shared detail
   primitives in pages.css that this layer has in common with Vessels. Nothing
   here introduces a new colour, type step, radius or easing curve. Loads only
   on project views.
   ========================================================================== */

/* =========================================================================
   ARCHIVE SHELL
   ========================================================================= */
.no-plist { padding-block: var(--no-section-y-tight); }

/* The archive ends on the grid rather than on a CTA band, so the last section
   needs the page's own closing space; without it the pagination would sit hard
   against the footer. */
.no-plist:last-child { padding-bottom: var(--no-section-y); }

/* =========================================================================
   CATEGORY FILTER

   Real links, not a script. The chips are laid out as a wrapping row so a
   client adding a fifteenth category cannot break the line, and each chip
   keeps a 44px hit area on a touch screen.
   ========================================================================= */
.no-pfilter {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.no-pfilter__chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 44px;
  padding: 0 1rem;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-3xs);
  font-weight: 700;
  letter-spacing: var(--no-tr-wide);
  text-transform: uppercase;
  color: var(--no-ink-700);
  background: #fff;
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-pill);
  transition: color var(--no-dur) var(--no-ease),
              background-color var(--no-dur) var(--no-ease),
              border-color var(--no-dur) var(--no-ease);
}
.no-pfilter__chip:hover,
.no-pfilter__chip:focus-visible {
  color: var(--no-primary-action);
  border-color: var(--no-primary-300);
  background: var(--no-bg-soft);
}
.no-pfilter__chip.is-active {
  color: #fff;
  background: var(--no-ink-800);
  border-color: var(--no-ink-800);
}

/* The count sits in its own pill so the category name stays readable. */
.no-pfilter__chip span {
  display: inline-grid;
  place-items: center;
  min-width: 1.5rem;
  padding: .0625rem .3125rem;
  font-size: var(--no-fs-3xs);
  line-height: 1.4;
  color: var(--no-text-muted);
  background: var(--no-bg-soft);
  border-radius: var(--no-r-xs);
}
.no-pfilter__chip.is-active span {
  color: var(--no-ink-800);
  background: rgba(255, 255, 255, .9);
}

/* =========================================================================
   PROJECT CARDS
   ========================================================================= */
.no-pgrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1rem, .6rem + 1.2vw, 1.5rem);
  margin-top: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
}
@media (max-width: 980px) { .no-pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .no-pgrid { grid-template-columns: minmax(0, 1fr); } }

/* The related band is shared with Vessels; only the grid inside it differs. */
.no-related .no-pgrid { margin-top: 1.25rem; }

.no-pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-lg);
  overflow: hidden;
  box-shadow: var(--no-sh-xs);
  transition: transform var(--no-dur, .52s) var(--no-ease-out),
              box-shadow var(--no-dur, .52s) var(--no-ease),
              border-color var(--no-dur, .52s) var(--no-ease);
}
.no-pcard:hover,
.no-pcard:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--no-sh-lg);
  border-color: var(--no-card-hover);
}

.no-pcard__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--no-grad-deep);
  overflow: hidden;
}
.no-pcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform var(--no-dur-cine, 1.6s) var(--no-ease-out);
}
.no-pcard:hover .no-pcard__media img { transform: scale(1.05); }

/* A project without a photograph keeps the brand plate rather than a blank box. */
.no-pcard--noimg .no-pcard__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 34px 34px;
}

.no-pcard__cat {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  z-index: 2;
  max-width: calc(100% - 2rem);
  padding: .3125rem .625rem;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-3xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(11, 30, 44, .82);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--no-r-xs);
  backdrop-filter: blur(6px);
}

.no-pcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .5rem;
  padding: clamp(1.125rem, .9rem + .7vw, 1.5rem);
}
.no-pcard__title {
  font-size: var(--no-fs-md);
  line-height: 1.3;
  overflow-wrap: break-word;
  word-break: break-word;
}
.no-pcard__title a { color: inherit; }
/* Stretched link: the whole card is the target, the anchor stays the label. */
.no-pcard__title a::after { content: ""; position: absolute; inset: 0; }
.no-pcard:hover .no-pcard__title a { color: var(--no-primary-action); }

.no-pcard__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem 1rem;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-3xs);
  letter-spacing: var(--no-tr-wide);
  text-transform: uppercase;
  color: var(--no-text-muted);
}
.no-pcard__meta span { display: inline-flex; align-items: center; gap: .375rem; min-width: 0; }
.no-pcard__meta svg { flex: none; color: var(--no-primary-action); }

.no-pcard__excerpt {
  font-size: var(--no-fs-sm);
  line-height: var(--no-lh-relaxed);
  color: var(--no-text-muted);
}

.no-pcard__more {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: .625rem;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-3xs);
  font-weight: 700;
  letter-spacing: var(--no-tr-wide);
  text-transform: uppercase;
  color: var(--no-primary-action);
  transition: gap var(--no-dur, .52s) var(--no-ease-out);
}
.no-pcard:hover .no-pcard__more { gap: .875rem; }

/* =========================================================================
   SINGLE PROJECT

   The showcase, breadcrumb strip, write-up band and related band all come
   from the shared primitives in pages.css. Only the two blocks that are
   particular to a project are defined here.
   ========================================================================= */
.no-pshow__intro {
  margin-top: 1rem;
  font-size: var(--no-fs-base);
  line-height: var(--no-lh-relaxed);
  color: var(--no-text-muted);
  max-width: 56ch;
}

/* Scope of work, one line each, beside the photograph rather than in a band
   of its own further down: it is what a client has come to the page to read. */
.no-ppoints {
  display: grid;
  gap: .5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
.no-ppoints li {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  min-width: 0;
  font-size: var(--no-fs-sm);
  line-height: var(--no-lh-relaxed);
  color: var(--no-ink-700);
}
.no-ppoints li > span:first-child {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: .125rem;
  border-radius: 50%;
  color: var(--no-primary-action);
  background: rgba(19, 134, 179, .1);
}
.no-ppoints li > span:last-child { min-width: 0; }

/* =========================================================================
   PROJECT VIDEO
   -------------------------------------------------------------------------
   A 16:9 frame carrying the client's own footage of the operation. The iframe
   is lazily loaded and pointed at youtube-nocookie, so nothing reaches a third
   party until the visitor has scrolled to the player.
   ========================================================================= */
.no-pvideo__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  margin-top: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  overflow: hidden;
  border-radius: var(--no-r-lg);
  background: var(--no-ink-900);
  border: 1px solid var(--no-border);
  box-shadow: var(--no-sh-md);
}
.no-pvideo__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}