/* Classification groups use the full card width, without a table inside a cell. */
.vessel-classification { font-size: 14px; }
.vessel-classification-item {
    display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 8px 16px; padding: 10px 0; border-bottom: 1px solid #f1f5f9;
}
.vessel-classification dt { color: #64748b; overflow-wrap: anywhere; }
.vessel-classification dd { margin: 0; color: #0f172a; text-align: right; overflow-wrap: anywhere; }
.vessel-classification-subrows > div {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px; padding: 4px 0;
}
.vessel-classification-subrows dt { text-align: left; }
.vessel-hero-photo[hidden] { display: none !important; }
@media (max-width: 639px) {
    .td-vessel-detail { padding: 12px; }
    .td-vessel-detail .vessel-identity { flex-direction: column; gap: 16px; }
    .td-vessel-detail .vessel-hero-photo {
        display: block; width: 100%; height: auto; max-height: 200px;
        aspect-ratio: 16 / 9; object-fit: contain; background: #0f172a;
    }
    /* The header now shows this photo; the Gallery tab retains all photos. */
    .td-vessel-detail .vessel-overview-photo { display: none; }
    .td-vessel-detail .vessel-data-body { padding: 12px; }
    .td-vessel-detail .vessel-data-heading { padding: 12px; }
    .td-vessel-detail .vessel-facts { table-layout: fixed; }
    .td-vessel-detail .vessel-facts > tbody > tr > td {
        overflow-wrap: anywhere; padding-left: 0; padding-right: 0;
    }
    .td-vessel-detail .vessel-facts > tbody > tr > td:first-child { width: 40%; padding-right: 12px; }
    .td-vessel-detail .vessel-property {
        display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px;
    }
    .td-vessel-detail .vessel-property > span { overflow-wrap: anywhere; max-width: none; }
    .td-vessel-detail .vessel-property > span:last-child { text-align: right; }
    .vessel-classification-item.has-subrows { grid-template-columns: minmax(0, 1fr); }
    .vessel-classification-item.has-subrows > dt { font-weight: 600; color: #334155; }
    .vessel-classification-subrows > div { padding: 7px 0; border-top: 1px solid #f1f5f9; }
}