/**
 * Compare editorial system responsive layouts.
 */
.cp-pair:not(:has(.cp-pair__stage)) {
    grid-template-columns: 1fr;
}

@media (max-width: 1040px) {
    .cp-title {
        font-size: clamp(3.8rem, 10vw, 6.5rem);
    }

    .cp-builder {
        grid-template-columns: minmax(12rem, 0.32fr) minmax(0, 1fr);
        gap: 2.5rem;
    }

}

@media (max-width: 820px) {
    .cp-hero__row,
    .cp-builder,
    .cp-panel,
    .compare-page .ep-panel:has(.ep-faq) {
        grid-template-columns: 1fr;
    }

    .cp-hero__row {
        gap: 2rem;
    }

    .cp-hero__cta {
        align-items: center;
    }

    .cp-builder {
        gap: 2rem;
    }

    .cp-builder__title {
        max-width: 18ch;
    }

    .cp-pair-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .cp-pair__stage {
        aspect-ratio: 16 / 6;
    }

    .cp-panel {
        gap: 1.5rem;
    }

    .cp-panel--accent::before {
        top: 2.5rem;
        bottom: auto;
        height: 2.5rem;
    }

    .compare-page .ep-panel:has(.ep-faq) {
        gap: 1.5rem;
    }
}

@media (max-width: 639px) {
    body:has(.compare-hub),
    body:has(.compare-page) {
        background: var(--cp-surface);
    }

    .seo-flight-shell:has(.compare-hub),
    .seo-flight-shell:has(.compare-page) {
        max-width: none;
        padding: 0;
    }

    .seo-flight-shell:has(.compare-hub) > .entity-page.content-page,
    .seo-flight-shell:has(.compare-page) > .entity-page.content-page {
        padding: 0 1rem 1.5rem;
    }

    .compare-hub .ej-breadcrumb,
    .compare-page .ej-breadcrumb {
        padding-top: 0.75rem;
    }

    .cp-hero {
        padding: 2.25rem 0 2.5rem;
    }

    .cp-title,
    .cp-title--wide {
        max-width: 12ch;
        font-size: clamp(3.15rem, 16vw, 5rem);
        line-height: 0.9;
    }

    .cp-lede {
        margin-top: 1.15rem;
        font-size: 1rem;
    }

    .cp-hero__cta,
    .cp-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .cp-btn {
        width: 100%;
        box-sizing: border-box;
    }

    .compare-page .ep-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem 0;
    }

    .compare-page .ep-metrics__item {
        padding-right: 0.6rem;
    }

    .cp-builder {
        padding: 2.5rem 0;
    }

    .cp-builder__slots {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }

    .cp-builder__vs {
        min-height: auto;
        margin: 0;
        padding: 0.3rem;
    }

    .cp-builder__actions {
        align-items: stretch;
        flex-direction: column;
    }

    .cp-builder__actions .cp-btn {
        order: 2;
    }

    .cp-filters-wrap {
        top: 60px;
    }

    .cp-hub-panel {
        padding-top: 2.5rem;
    }

    .cp-hub-panel__head {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }

    .cp-pair__stage {
        aspect-ratio: 16 / 7.5;
    }

    .cp-pair__copy {
        padding: 0.9rem 1rem 1rem;
    }

    .cp-pair__title {
        font-size: 1.15rem;
    }

    .cp-duel {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 2.5rem 0;
    }

    .cp-duel__vs {
        min-height: 1rem;
    }

    .cp-duel__image {
        aspect-ratio: 16 / 9;
    }

    .cp-panel,
    .compare-page .ep-panel:has(.ep-faq) {
        padding: 2.5rem 0;
    }

    .cp-panel--accent::before {
        top: 2.5rem;
        height: 2rem;
    }

    .cp-panel--accent .cp-panel__title {
        padding-left: 1rem;
    }

    .compare-page .ep-table-wrap {
        overflow: visible;
    }

    .compare-page .ep-table thead {
        display: none;
    }

    .compare-page .ep-table tbody,
    .compare-page .ep-table tbody tr {
        display: grid;
    }

    .compare-page .ep-table tbody tr {
        grid-template-columns: 1fr;
        padding: 0.8rem 0;
        border-top: 1px solid var(--cp-line);
    }

    .compare-page .ep-table tbody tr:last-child {
        border-bottom: 1px solid var(--cp-line);
    }

    .compare-page .ep-table th,
    .compare-page .ep-table td {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.35rem 0;
        border: 0;
        text-align: right;
    }

    .compare-page .ep-table tbody th {
        display: block;
        padding-bottom: 0.65rem;
        color: var(--cp-text);
        font-weight: 650;
        text-align: left;
    }

    .compare-page .ep-table td::before {
        content: attr(data-label);
        color: var(--cp-muted);
        font: 500 0.64rem/1.5 var(--cp-data);
        text-align: left;
    }

    .cp-related__link {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }
}