/* ==========================================================================
   NAVAL ORIENTATION: Vessels

   Archive, category and type archives, and the single vessel page. Built from
   the existing tokens, buttons, cards and reveal system. No new colours, no
   new fonts, no libraries. Loads only on vessel views.

   The showcase layout this page uses is now shared with Projects, so the
   breadcrumb strip, the media-and-facts grid, the write-up band and the
   related band live in pages.css. What stays here is what is actually about a
   vessel: the type tiles, the vessel card, the key figures, the availability
   colours, the specifications list and the inquiry form.
   ========================================================================== */

/* =========================================================================
   TYPE TILES
   ========================================================================= */
.no-vtypes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--no-s-4);
  margin: clamp(2rem, 1.4rem + 2vw, 3rem) 0 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 980px) { .no-vtypes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .no-vtypes { grid-template-columns: minmax(0, 1fr); } }

.no-vtype a {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding: 1.125rem 1.25rem;
  color: var(--no-ink-800);
  background: #fff;
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-md);
  box-shadow: var(--no-sh-xs);
  transition: transform .25s var(--no-ease-out),
              box-shadow .28s var(--no-ease),
              border-color .28s var(--no-ease);
}
.no-vtype a:hover,
.no-vtype a:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--no-sh-md);
  border-color: var(--no-primary-300);
}
.no-vtype__ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: var(--no-r-sm);
  color: var(--no-primary-action);
  background: rgba(19, 134, 179, .08);
  border: 1px solid rgba(19, 134, 179, .16);
}
.no-vtype__body { flex: 1; min-width: 0; }
.no-vtype__body b {
  display: block;
  font-family: var(--no-font-display);
  font-size: var(--no-fs-base);
  line-height: 1.3;
}
.no-vtype__body small {
  display: block;
  margin-top: .25rem;
  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-vtype__arrow { flex: none; color: var(--no-primary-action); transition: transform .3s var(--no-ease-out); }
.no-vtype a:hover .no-vtype__arrow { transform: translateX(4px); }

.no-vlist--soft { background: var(--no-bg-soft); }

/* Two category blocks in a row on the archive stacked their padding, which put
   about 175px of nothing between them. They share a background, so the lower
   one can drop its top padding and still read as a separate block. */
.no-vcat + .no-vcat { padding-top: 0; }

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

.no-vcard {
  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 .3s var(--no-ease-out),
              box-shadow .32s var(--no-ease),
              border-color .28s var(--no-ease);
}
.no-vcard:hover,
.no-vcard:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--no-sh-lg);
  border-color: transparent;
}

.no-vcard__media {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--no-grad-deep);
  overflow: hidden;
}
.no-vcard__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 1s var(--no-ease-out);
}
.no-vcard:hover .no-vcard__media img { transform: scale(1.05); }

/* A vessel without a photograph keeps the brand plate rather than a blank box. */
.no-vcard--noimg .no-vcard__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-vcard__ico {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: var(--no-r-sm);
  color: var(--no-accent);
  background: rgba(11, 30, 44, .72);
  border: 1px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
}

.no-vcard__status {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  padding: .3125rem .625rem;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-3xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: var(--no-r-xs);
  background: rgba(11, 30, 44, .82);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
}
.no-vcard__status--available { background: #0B5D33; border-color: rgba(255, 255, 255, .3); }
.no-vcard__status--on-charter { background: #7A4A06; border-color: rgba(255, 255, 255, .3); }
.no-vcard__status--maintenance { background: #7A2530; border-color: rgba(255, 255, 255, .3); }

.no-vcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .375rem;
  padding: clamp(1.125rem, .9rem + .7vw, 1.5rem);
}
.no-vcard__code {
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-3xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--no-primary-action);
}
.no-vcard__title { font-size: var(--no-fs-md); line-height: 1.3; }
.no-vcard__title a { color: inherit; }
.no-vcard__title a::after { content: ""; position: absolute; inset: 0; }
.no-vcard:hover .no-vcard__title a { color: var(--no-primary-action); }
.no-vcard__type { font-size: var(--no-fs-sm); color: var(--no-text-muted); }
.no-vcard__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 .28s var(--no-ease-out);
}
.no-vcard:hover .no-vcard__more { gap: .875rem; }


/* Availability colour on the shared facts row. */
.no-show__status--available { color: #0B5D33; }
.no-show__status--on-charter { color: #7A4A06; }
.no-show__status--maintenance { color: #7A2530; }

/* The related band's grid: the band itself is shared, the grid inside is not. */
.no-related .no-vgrid { margin-top: 1.25rem; }

/* =========================================================================
   SINGLE VESSEL: key figures

   Six cards beside the photograph. Two columns on a desktop so all six sit in
   the first screen; the client fills as many as they have and empty rows are
   dropped upstream, so four figures render as four cards.
   ========================================================================= */
.no-vfigs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .625rem;
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}
/* Two columns down to the narrowest common phone: six figures stacked one per
   row was three screens of scrolling on its own. */
@media (max-width: 359px) { .no-vfigs { grid-template-columns: minmax(0, 1fr); } }

.no-vfig {
  min-width: 0;
  padding: .75rem .875rem;
  background: #fff;
  border: 1px solid var(--no-border);
  border-left: 3px solid var(--no-primary-action);
  border-radius: var(--no-r-sm);
}
.no-vfig b {
  display: block;
  font-family: var(--no-font-display);
  font-size: var(--no-fs-lg);
  line-height: 1.15;
  color: var(--no-ink-800);
  overflow-wrap: anywhere;
}
.no-vfig span {
  display: block;
  margin-top: .1875rem;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-3xs);
  letter-spacing: var(--no-tr-wide);
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--no-text-muted);
}



.no-detail__specs dl { margin: .875rem 0 0; display: grid; gap: 0; }
.no-detail__specs dl > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .625rem 0;
  border-bottom: 1px solid var(--no-border);
}
.no-detail__specs dl > div:first-child { border-top: 1px solid var(--no-border); }
.no-detail__specs dt { font-size: var(--no-fs-sm); color: var(--no-text-muted); min-width: 0; }
.no-detail__specs dd {
  margin: 0;
  font-family: var(--no-font-display);
  font-weight: 700;
  font-size: var(--no-fs-sm);
  color: var(--no-ink-800);
  text-align: right;
  min-width: 0;
  overflow-wrap: anywhere;
}


/* =========================================================================
   SINGLE VESSEL: inquiry

   One centred column. The two-column version left a tall empty gap beside the
   form, because the intro column ran out of content long before the form did.
   ========================================================================= */
.no-vinq {
  padding-block: clamp(2rem, 1.5rem + 2.4vw, 3.5rem);
  background: var(--no-grad-deep);
}
.no-vinq__grid { max-width: 720px; margin-inline: auto; }
.no-vinq__intro { text-align: center; }
.no-vinq__intro h2 { margin-top: .5rem; font-size: var(--no-fs-2xl); color: #fff; }
.no-vinq__intro .no-lead { margin: .75rem auto 0; max-width: 56ch; color: var(--no-text-invert-muted); }
.no-vinq__direct {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: 1.25rem;
}
@media (max-width: 520px) {
  .no-vinq__direct { flex-direction: column; }
  .no-vinq__direct .no-btn { width: 100%; }
}

.no-vinq__form { margin-top: 1.5rem; }

/* The vessel this enquiry is about, so the sender can see it is carried. */
.no-form__vessel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .625rem;
  margin-bottom: 1.25rem;
  padding: .625rem .875rem;
  font-size: var(--no-fs-sm);
  font-weight: 650;
  color: var(--no-ink-800);
  background: rgba(19, 134, 179, .07);
  border: 1px solid rgba(19, 134, 179, .18);
  border-radius: var(--no-r-sm);
}
.no-form__vessel svg { color: var(--no-primary-action); flex: none; }
.no-form__vessel span { min-width: 0; overflow-wrap: anywhere; }