/*
 * Public vessel detail page — calm, compressed, brand-aligned.
 * Rides on top of holiday-show.css (.hol base, hero, facts, chips, cards).
 * Brand: green #53d690, red #e44d3a, white, black. Scoped under .hol.
 */

/* Status pill */
.vd-status { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 20px; font-size: 13px; font-weight: 700; margin-bottom: 14px; }
.vd-status i { font-size: 12px; }
.vd-status.is-operational { background: rgba(83,214,144,0.15); color: var(--green-ink); }
.vd-status.is-wrecked { background: rgba(228,77,58,0.10); color: var(--red); }
.vd-status.is-retired { background: #eef0f3; color: var(--muted); }
.vd-status.is-museum { background: rgba(83,214,144,0.12); color: var(--green-ink); }

/* Hero image */
.vd-image { position: relative; margin: 24px 0 4px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); }
.vd-image img { width: 100%; max-height: 420px; object-fit: cover; display: block; }
.vd-image__badge { position: absolute; top: 14px; left: 14px; }
.vd-image--placeholder { display: flex; align-items: center; justify-content: center; height: 240px; background: var(--surface-2); color: #c3c8d0; font-size: 64px; }

/* Specifications — two-column label/value list */
.vd-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 28px; border: 1px solid var(--line); border-radius: 14px; padding: 6px 20px; background: var(--surface); }
.vd-spec { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.vd-spec__label { color: var(--muted); font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.vd-spec__label i { color: var(--green-ink); width: 16px; text-align: center; }
.vd-spec__value { font-weight: 700; color: var(--ink); font-size: 14.5px; text-align: right; }
/* last row in each column has no border */
@media (min-width: 641px) {
    .vd-specs .vd-spec:nth-last-child(1), .vd-specs .vd-spec:nth-last-child(2) { border-bottom: none; }
}
@media (max-width: 640px) {
    .vd-specs { grid-template-columns: 1fr; }
    .vd-specs .vd-spec:last-child { border-bottom: none; }
}

/* Service timeline (visual track) */
.vd-timeline { border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; background: var(--surface); }
.vd-tl-track { position: relative; height: 8px; background: var(--surface-2); border-radius: 6px; margin: 34px 0 10px; }
.vd-tl-fill { position: absolute; top: 0; height: 100%; border-radius: 6px; min-width: 4px; }
.vd-tl-fill.operational { background: var(--green); }
.vd-tl-fill.wrecked { background: var(--red); }
.vd-tl-fill.decommissioned { background: #d39e00; }
.vd-tl-fill.unknown { background: #9aa1ab; }
.vd-tl-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 15px; height: 15px; border-radius: 50%; background: #fff; border: 3px solid var(--green-ink); z-index: 2; }
.vd-tl-marker.wrecked { border-color: var(--red); }
.vd-tl-marker.decommissioned { border-color: #d39e00; }
.vd-tl-marker.unknown { border-color: #9aa1ab; }
.vd-tl-marker__yr { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.vd-tl-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); }
.vd-tl-stats { display: flex; align-items: center; gap: 26px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.vd-tl-stat__num { font-size: 24px; font-weight: 800; color: var(--green-ink); line-height: 1; }
.vd-tl-stat__label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; margin-top: 3px; }
.vd-tl-stat__status { font-size: 17px; font-weight: 800; }
.vd-tl-stat__status.operational { color: var(--green-ink); }
.vd-tl-stat__status.wrecked { color: var(--red); }
.vd-tl-stat__status.decommissioned { color: #b07d00; }
.vd-tl-stat__status.unknown { color: var(--muted); }

/* At a glance — derived highlights (shown once) */
.vd-glance { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.vd-glance__item { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--surface); }
.vd-glance__icon { width: 36px; height: 36px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(83,214,144,0.12); color: var(--green-ink); flex-shrink: 0; font-size: 15px; }
.vd-glance__label { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.vd-glance__value { display: block; font-weight: 700; color: var(--ink); font-size: 14px; }

/* Related vessels with thumbnails */
.vd-related { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.vd-card { display: flex; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: 12px; background: var(--surface); text-decoration: none; color: var(--ink); transition: border-color .15s, box-shadow .15s, transform .12s; }
.vd-card:hover { border-color: var(--green); box-shadow: 0 6px 18px rgba(0,0,0,0.06); transform: translateY(-2px); color: var(--ink); text-decoration: none; }
.vd-card__thumb { width: 62px; height: 62px; border-radius: 10px; object-fit: cover; flex-shrink: 0; background: var(--surface-2); }
.vd-card__thumb--ph { display: flex; align-items: center; justify-content: center; color: #c3c8d0; font-size: 24px; }
.vd-card__name { font-weight: 700; font-size: 15px; line-height: 1.25; margin: 0 0 3px; }
.vd-card__meta { font-size: 12.5px; color: var(--muted); }

/* Browse links */
.vd-navlinks { display: flex; flex-wrap: wrap; gap: 10px; }