/* ── Ship Specs ── */
.ship-specs {
    padding: 3rem 2.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: rgba(24, 43, 119, 0.05);
}

.ship-specs__tab.is-active {
    background: hsla(228, 66%, 28%, 1);
    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: hsla(233, 29%, 94%, 1);
    border-radius: var(--radius-lg);
    padding: 0.5rem;
    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: hsla(228, 66%, 28%, 0.1);
}

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

/* ── Responsive ── */
@media (max-width: 768px) {
    .ship-specs {
        padding: 2rem 1rem;
    }

    .ship-specs__wrapper {
        flex-direction: column;
    }

    .ship-specs__tabs {
        flex: none;
        max-width: 100%;
        flex-direction: row;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-bottom: 2px solid var(--color-bg-light);
    }

    .ship-specs__tab {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 0.875rem 1.25rem;
        border-bottom: none;
        border-radius: 0;
    }

    .ship-specs__tab:first-child {
        border-top-left-radius: 0;
    }

    .ship-specs__tab:last-child {
        border-bottom-left-radius: 0;
    }

    .ship-specs__tab-arrow {
        display: none;
    }

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

    .ship-specs__panel {
        border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    }
}