/*
 * Competitors hub (page-competitors-hub.php), Figma "Competitors | Index" 22819:815.
 * Desktop frame 22821:76, mobile frame 22821:583. Typography comes from the global
 * sd-type-* primitives; this file owns layout, colours and component states only.
 */
.competitors-hub-page {
    --cph-ink: #262626;
    --cph-secondary: rgba(0, 0, 0, 0.75);
    --cph-tertiary: rgba(0, 0, 0, 0.55);
    --cph-border: rgba(0, 0, 0, 0.1);
    --cph-border-hover: rgba(0, 0, 0, 0.4);
    --cph-sand: #faf7f5;
    --cph-tab-active: #f5f5f5;
    background: #fff;
    color: var(--cph-ink);
}

.competitors-hub-page,
.competitors-hub-page * {
    box-sizing: border-box;
}

.competitors-hub-page h1,
.competitors-hub-page h2,
.competitors-hub-page p {
    margin: 0;
    padding: 0;
}

.competitors-hub-page figure {
    margin: 0;
}

.competitors-hub-page .compare-v2-text-width-control[data-compare-width="1"] {
    max-width: var(--compare-v2-max-width);
}

/* ---------- Hero ---------- */

.cph-hero {
    padding: 80px 0;
    background: var(--cph-sand);
}

.cph-hero__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 64px;
}

.cph-hero__content {
    display: flex;
    flex: 0 1 548px;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
    padding-right: 36px;
}

.cph-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 11px;
    border: 1px solid var(--cph-border);
    border-radius: 999px;
    color: var(--cph-secondary);
    white-space: nowrap;
}

.cph-hero__message {
    display: flex;
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.cph-hero__title {
    color: var(--cph-ink);
}

.cph-hero__text {
    color: var(--cph-secondary);
}

.cph-hero__cta {
    align-self: flex-start;
}

.cph-hero__media {
    display: flex;
    flex: 0 1 588px;
    min-width: 0;
    padding: 20px;
    border-radius: 8px;
    background: #fff;
}

.cph-hero__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 548 / 373;
    object-fit: contain;
}

/* G2 widget embed (switch ON + code): same white card as the preview; the embed keeps its
   own height, it only has to fit the column. */
.cph-hero__media--widget {
    display: block;
    overflow: hidden;
}

.cph-hero__media--widget iframe,
.cph-hero__media--widget img {
    display: block;
    max-width: 100%;
}

/* Placeholder (switch OFF): the All Solutions hero figure (.smv2-hero__figure): no card,
   radius 16, image covers the box. Figma alt frame 22945:1767, 584 x 345. */
.cph-hero__placeholder {
    flex: 0 1 584px;
    min-width: 0;
    aspect-ratio: 584 / 345;
    border-radius: 16px;
    overflow: hidden;
}

.cph-hero__placeholder img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- Catalog: category tabs + cards ----------
   Same hooks as All Solutions (.smv2-filter / .smv2-grid) so js/solutions-main-v2.js
   drives the filter. The tabs are the global tabs component (.sd-tabs / .sd-tab in
   style.min.css) and the cards the shared Resource card (.in-new-card,
   template-parts/integrations-new/integration-card.css), so only layout lives here,
   never tab or card colours. */

/* Height follows the active tab's cards; the old one-screen min-height was dropped
   on design review (12.10.2026), it left a big empty area under short tabs.
   Space above the first tab/card and below the catalog is symmetric (design review
   13-14.10.2026): 48 + the 32px padding-top of the filter and grid = 80 on top. */
.cph-catalog {
    box-sizing: border-box;
    padding: 48px 0 80px;
}

.cph-catalog__inner {
    display: flex;
    align-items: flex-start;
    gap: 64px;
}

.cph-filter.sd-tabs {
    position: sticky;
    top: 120px;
    flex: 0 0 220px;
    padding-top: 32px;
}

.cph-grid {
    display: grid;
    flex: 1 1 auto;
    min-width: 0;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    padding-top: 32px;
}

.competitors-hub-page .in-new-card.is-hidden {
    display: none;
}

/* ---------- Responsive ---------- */

@media (max-width: 1100px) {
    .cph-hero__inner {
        gap: 40px;
    }

    .cph-hero__content {
        padding-right: 0;
    }

    .cph-catalog__inner {
        gap: 32px;
    }

    .cph-filter.sd-tabs {
        flex-basis: 200px;
    }
}

@media (max-width: 1024px) {
    .cph-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 767px) {
    .cph-hero {
        padding: 32px 0;
    }

    .cph-hero__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }

    .cph-hero__content {
        flex-basis: auto;
        gap: 20px;
    }

    .cph-hero__message {
        gap: 20px;
    }

    /* Figma mobile hero heading is 32/36 (the Heading/2xl mobile step), one step above
       sd-type-heading-xl's own 28/32 mobile size. */
    .cph-hero .cph-hero__title {
        font-size: 32px !important;
        line-height: 36px !important;
        letter-spacing: -0.48px !important;
    }

    .cph-hero__media {
        flex-basis: auto;
        padding: 8px;
    }

    .cph-hero__placeholder {
        flex-basis: auto;
        width: 100%;
    }

    .cph-catalog {
        padding: 48px 0;
    }

    .cph-catalog__inner {
        flex-direction: column;
        align-items: stretch;
        gap: 24px;
    }

    .competitors-hub-page .cph-filter.sd-tabs {
        position: static;
        flex-basis: auto;
        width: auto;
        max-width: none;
        margin: 0 -20px;
        padding-top: 0;
    }

    .competitors-hub-page .cph-filter .sd-tabs__list {
        box-sizing: border-box;
        padding: 0 20px;
    }

    .cph-grid {
        padding-top: 0;
    }

}