/* ==========================================================================
   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 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-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 {
  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__media {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: 64px;
  height: 54px;
  border-radius: var(--no-r-sm);
  overflow: hidden;
}
.no-vtype__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.no-vtype--has-image .no-vtype__ico {
  position: relative;
  z-index: 1;
  width: 40px;
  height: 40px;
  color: #fff;
  background: rgba(11, 30, 44, .72);
  border-color: rgba(255, 255, 255, .24);
}
.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 var(--no-dur, .52s) 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

   Image-first cards: a prominent square photograph with the vessel title
   beneath it. The icon overlay is removed so the vessel image is the
   primary visual element.
   ========================================================================= */
.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 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-vcard:hover,
.no-vcard:focus-within {
  transform: translateY(-6px);
  box-shadow: var(--no-sh-lg);
  border-color: var(--no-card-hover);
}

.no-vcard__media {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--no-grad-deep);
  overflow: hidden;
}
.no-vcard__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-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--noimg .no-vcard__media::after {
  content: "";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  /* Ship icon drawn in CSS so a missing photo is not a blank box. */
  background: var(--no-grad-deep);
}

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

/* Body: title below the square image */
.no-vcard__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: .25rem;
  padding: clamp(1rem, .8rem + .6vw, 1.25rem);
  text-align: center;
}
.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;
  /* Allow long vessel names to wrap naturally. */
  overflow-wrap: break-word;
  word-break: break-word;
}
.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-card-hover); }
.no-vcard__type {
  font-size: var(--no-fs-sm);
  color: var(--no-text-muted);
}
.no-vcard__more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin-top: auto;
  padding-top: .5rem;
  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-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; }

/* =========================================================================
   SINGLE VESSEL: redesigned main/sidebar product layout
   ========================================================================= */
.no-vessel-detail {
  padding-block: clamp(2.5rem, 1.8rem + 2.8vw, 5rem);
  background: var(--no-white);
}

.no-vessel-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 33%);
  gap: clamp(2rem, 1.4rem + 2.8vw, 4rem);
  align-items: start;
}
@media (max-width: 1024px) {
  .no-vessel-layout { grid-template-columns: minmax(0, 1fr); }
}

.no-vessel-main,
.no-vessel-sidebar { min-width: 0; }

.no-vessel-hero {
  position: relative;
  margin: 0 0 clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem);
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--no-r-lg);
  background: var(--no-grad-deep);
  box-shadow: var(--no-sh-md);
}
.no-vessel-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.no-vessel-hero--noimg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px),
    var(--no-grad-deep);
  background-size: 34px 34px, 34px 34px, auto;
}

.no-vessel-hero__status {
  position: absolute;
  left: 1rem;
  top: 1rem;
  z-index: 2;
  padding: .375rem .7rem;
  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, .86);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--no-r-xs);
}
.no-vessel-hero__status--available { background: #0B5D33; }
.no-vessel-hero__status--on-charter { background: #7A4A06; }
.no-vessel-hero__status--maintenance { background: #7A2530; }

.no-vessel-title {
  margin-top: .75rem;
  font-size: clamp(1.875rem, 1.45rem + 1.8vw, 3.25rem);
  font-weight: 700;
  line-height: 1.12;
  color: var(--no-ink-800);
  overflow-wrap: anywhere;
}
.no-vessel-code {
  margin-top: .875rem;
  font-family: var(--no-font-mono);
  font-size: var(--no-fs-xs);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--no-text-muted);
}
.no-vessel-code strong { color: var(--no-primary-action); }

.no-vessel-portfolio {
  width: 100%;
  justify-content: center;
  margin-top: clamp(1.25rem, 1rem + .8vw, 1.75rem);
}

.no-vessel-block {
  margin-top: clamp(2.25rem, 1.65rem + 1.9vw, 3.25rem);
  padding-top: clamp(1.75rem, 1.25rem + 1.6vw, 2.5rem);
  border-top: 1px solid var(--no-border);
}
.no-vessel-block h2 {
  font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem);
  font-weight: 700;
  color: var(--no-ink-800);
}

.no-vessel-block .no-vfigs {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  margin-top: 1rem;
}
.no-vessel-block .no-vfig {
  background: var(--no-bg-soft);
}

.no-vessel-sidebar {
  position: sticky;
  top: calc(var(--no-header-h) + 1.5rem);
  display: grid;
  gap: clamp(1rem, .8rem + .8vw, 1.5rem);
}
@media (max-width: 1024px) {
  .no-vessel-sidebar { position: static; }
}

.no-vessel-sidecard,
.no-vessel-sidebar .no-vinq--compact {
  padding: clamp(1.125rem, .95rem + .9vw, 1.65rem);
  background: var(--no-bg-soft);
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-md);
}
.no-vessel-sidecard h2,
.no-vessel-sidecard h3 {
  font-size: var(--no-fs-lg);
  font-weight: 700;
  color: var(--no-ink-800);
}
.no-vessel-sidecard h3 {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--no-border);
}

.no-vessel-side-list {
  display: grid;
  gap: .55rem;
  margin: .875rem 0 1rem;
  padding: 0;
  list-style: none;
}
.no-vessel-side-list a {
  display: block;
  padding: .55rem .7rem;
  color: var(--no-ink-800);
  background: #fff;
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-xs);
}
.no-vessel-side-list a:hover,
.no-vessel-side-list a:focus-visible {
  color: var(--no-primary-action);
  border-color: var(--no-primary-300);
}

.no-vessel-sidebar .no-vinq {
  padding-block: 0;
  background: transparent;
}
.no-vessel-sidebar .no-vinq__form { margin-top: 0; }
.no-vessel-sidebar .no-form {
  box-shadow: none;
  border: 0;
  background: transparent;
  padding: 0;
}
.no-vessel-sidebar .no-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .9rem;
}
.no-vessel-sidebar .no-form__vessel {
  justify-content: flex-start;
  margin-bottom: 1rem;
}

/* =========================================================================
   PHASE POLISH: visual vessel browsing and detail hierarchy
   ========================================================================= */
.no-vfleet {
  background: linear-gradient(180deg, var(--no-white) 0%, var(--no-bg-soft) 100%);
}
.no-vfleet + .no-vcat { padding-top: clamp(2rem, 1.5rem + 2vw, 3rem); }

.no-phero--vessel .no-phero__media img {
  object-position: center 48%;
}
.no-phero--vessel .no-phero__scrim {
  background:
    linear-gradient(180deg, rgba(11, 30, 44, .56) 0%, rgba(11, 30, 44, .42) 52%, rgba(6, 15, 23, .76) 100%),
    linear-gradient(90deg, rgba(11, 30, 44, .64) 0%, rgba(11, 30, 44, .2) 72%, transparent 100%);
}

.no-vgrid { align-items: stretch; }
.no-vcard {
  height: 100%;
  border-radius: var(--no-r-md);
}
.no-vcard__media {
  aspect-ratio: 16 / 11;
}
.no-vcard__body {
  text-align: left;
  gap: .45rem;
}
.no-vcard__title {
  font-size: clamp(1.125rem, 1.02rem + .35vw, 1.375rem);
}
.no-vcard__type {
  min-height: 1.4em;
}
.no-vcard__more {
  justify-content: flex-start;
}
@media (max-width: 620px) {
  .no-vcard__media { aspect-ratio: 16 / 10; }
}

.no-vessel-hero {
  aspect-ratio: 16 / 9;
  min-height: clamp(260px, 34vw, 560px);
  border-radius: var(--no-r-lg);
  box-shadow: 0 28px 70px -36px rgba(11, 30, 44, .55);
}
.no-vessel-hero img {
  object-fit: cover;
  object-position: center center;
}
@media (max-width: 620px) {
  .no-vessel-hero {
    aspect-ratio: 4 / 3;
    min-height: 240px;
  }
}

.no-vessel-block .no-vfigs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(.75rem, .6rem + .5vw, 1rem);
  margin-top: 1.25rem;
}
.no-vessel-block .no-vfigs--count-1 { grid-template-columns: minmax(0, 1fr); }
.no-vessel-block .no-vfigs--count-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.no-vessel-block .no-vfigs--count-3,
.no-vessel-block .no-vfigs--count-4,
.no-vessel-block .no-vfigs--count-5,
.no-vessel-block .no-vfigs--count-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 720px) {
  .no-vessel-block .no-vfigs,
  .no-vessel-block .no-vfigs--count-3,
  .no-vessel-block .no-vfigs--count-4,
  .no-vessel-block .no-vfigs--count-5,
  .no-vessel-block .no-vfigs--count-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .no-vessel-block .no-vfigs,
  .no-vessel-block .no-vfigs--count-2,
  .no-vessel-block .no-vfigs--count-3,
  .no-vessel-block .no-vfigs--count-4,
  .no-vessel-block .no-vfigs--count-5,
  .no-vessel-block .no-vfigs--count-6 { grid-template-columns: minmax(0, 1fr); }
}

.no-vfig {
  display: flex;
  min-height: 128px;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(1rem, .85rem + .55vw, 1.35rem);
  border: 1px solid var(--no-border);
  border-top: 3px solid var(--no-primary-action);
  border-left: 1px solid var(--no-border);
}
.no-vfig b {
  font-size: clamp(1.5rem, 1.22rem + 1vw, 2.25rem);
}
.no-vfig span {
  margin-top: .75rem;
}

.no-detail__specs dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
  margin-top: 1.25rem;
}
.no-detail__specs dl > div,
.no-detail__specs dl > div:first-child {
  display: grid;
  gap: .35rem;
  padding: 1rem;
  background: var(--no-bg-soft);
  border: 1px solid var(--no-border);
  border-radius: var(--no-r-sm);
}
.no-detail__specs dd {
  text-align: left;
}
@media (max-width: 720px) {
  .no-detail__specs dl { grid-template-columns: minmax(0, 1fr); }
}

.no-vessel-side-list {
  gap: .625rem;
}
.no-vessel-side-list a {
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: color var(--no-dur, .52s) var(--no-ease), border-color var(--no-dur, .52s) var(--no-ease), transform var(--no-dur, .52s) var(--no-ease-out), background-color var(--no-dur, .52s) var(--no-ease);
}
.no-vessel-side-list a:hover,
.no-vessel-side-list a:focus-visible {
  background: rgba(19, 134, 179, .06);
  transform: translateX(3px);
}

.no-vessel-sidebar .no-vinq--compact {
  padding: clamp(1.125rem, .95rem + .7vw, 1.5rem);
}
.no-vessel-sidebar .no-field input,
.no-vessel-sidebar .no-field textarea,
.no-vessel-sidebar .no-btn {
  width: 100%;
}
.no-vessel-sidebar .no-field {
  gap: .35rem;
}
.no-vessel-sidebar .no-field input {
  min-height: 44px;
  padding-block: .7rem;
}
.no-vessel-sidebar .no-field textarea {
  min-height: 6rem;
}
.no-vessel-sidebar .no-form__consent {
  line-height: 1.45;
}
.no-vessel-sidebar .no-field--consent {
  margin-bottom: -.15rem;
}
.no-vessel-sidebar .no-field--submit {
  margin-top: 0;
}
.no-vessel-sidebar .no-form__note {
  margin-top: .75rem;
}