/* ── Ship Specs ── */
.ship-specs {
    padding-inline: 1rem;
    padding-block: 2.5rem;
}

@media (min-width: 48rem) {
    .ship-specs {
        padding-inline: 2.5rem;
        padding-block: 5rem;
    }
}

.ship-specs__wrapper {
    max-width: var(--container-max-width);
    margin: 0 auto;
    display: flex;
    gap: 6rem;
    align-items: stretch;
}

/* ── Tabs (left column) ── */
.ship-specs__tabs {
    display: flex;
    flex-direction: column;
    flex: 0 0 36%;
    max-width: 36%;
}

.ship-specs__tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.5rem;
    background: transparent;
    border: none;
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-heading);
    cursor: pointer;
    text-align: left;
    transition: background-color 0.2s ease, color 0.2s ease;
}


.ship-specs__tab:hover {
    background: color-mix(in srgb, var(--color-bg-dark) 10%, transparent);
}

.ship-specs__tab.is-active {
    background: var(--color-bg-dark);
    color: var(--color-white);
}

.ship-specs__tab.is-active .ship-specs__tab-arrow {
    color: var(--color-white);
}

.ship-specs__tab-label {
    flex: 1;
}

.ship-specs__tab-arrow {
    flex-shrink: 0;
    color: var(--color-text-heading);
    transition: color 0.2s ease;
}

/* ── Panels (right column) ── */
.ship-specs__panels {
    flex: 1;
    min-width: 0;
}

.ship-specs__panel {
    display: none;
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    padding: 1rem;
    min-height: 100%;
}

.ship-specs__panel.is-active {
    display: block;
}

/* ── Spec Rows ── */
.ship-specs__row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
}

.ship-specs__row:nth-child(odd) {
    background: color-mix(in srgb, var(--color-bg-dark) 10%, transparent);
}

.ship-specs__row-icon {
    flex-shrink: 0;
    width: 1.5rem;
    text-align: center;
    color: var(--color-primary);
    font-size: var(--font-size-base);
}

.ship-specs__row-label {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-heading);
    flex: 1;
}

.ship-specs__row-value {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-regular);
    color: var(--color-text-body);
    text-align: right;
}

/* ── Facility Type Header ── */
.ship-specs__panel--facilities .ship-specs__facility-group .ship-specs__row--type-header {
    background: color-mix(in srgb, var(--color-bg-dark) 10%, transparent);
}

.ship-specs__row--type-header .ship-specs__row-label {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-heading);
}

.ship-specs__row-label--facility {
    font-weight: var(--font-weight-regular);
    padding-left: 0.5rem;
}

/* ── Facilities Panel: two-column grid ── */
.ship-specs__facilities-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 1rem;
}

.ship-specs__facility-group .ship-specs__row {
    background: none;
}

/* ── Responsive: accordion layout ── */
@media (max-width: 48rem) {
    .ship-specs__wrapper {
        flex-direction: column;
        gap: 0;
    }

    /* Dissolve wrappers so tabs & panels interleave in flex flow */
    .ship-specs__tabs,
    .ship-specs__panels {
        display: contents;
    }

    /* Interleave: tab-0, panel-0, tab-1, panel-1 */
    #ship-specs-tab-0 { order: 0; }
    #ship-specs-panel-0 { order: 1; }
    #ship-specs-tab-1 { order: 2; }
    #ship-specs-panel-1 { order: 3; }

    /* Accordion header buttons */
    .ship-specs__tab {
        width: 100%;
        padding: 1.125rem 1.5rem;
        border-radius: var(--radius-md);
    }

    .ship-specs__tab.is-active {
        border-radius: var(--radius-md) var(--radius-md) 0 0;
    }

    /* Show arrow as down-chevron */
    .ship-specs__tab-arrow {
        display: block;
        transform: rotate(90deg);
        transition: transform 0.2s ease;
    }

    .ship-specs__tab.is-active .ship-specs__tab-arrow {
        transform: rotate(-90deg);
    }

    /* Panel connects to its tab */
    .ship-specs__panel {
        border-radius: 0 0 var(--radius-md) var(--radius-md);
        min-height: 0;
    }

    .ship-specs__facilities-grid {
        grid-template-columns: 1fr;
    }
}