/* Integrations Page — page-specific styles
 * Use this file for styles Tailwind cannot handle:
 * keyframe animations, complex selectors, pseudo-elements, library overrides.
 * All other styling should use Tailwind utility classes directly in PHP templates.
 */

body.page-integration:has(iframe[name="intercom-banner-frame"]) .mobile-menu .main-navigation {
    margin-bottom: var(--intercomBanner);
}

.page-integration .primary-menu.has-current-page > li > a {
    opacity: 1;
}

/* ─── Features Section — panel inset at tablet ───────────────────────────── */
/* At 768px panels are stacked (flex-col) with alternating side inset:        */
/*   image-left panels: 200px right padding (content left-aligned)            */
/*   image-right panels: 200px left padding (content right-aligned)           */
/* Reset at 1024px when layout switches to side-by-side (flex-row).           */

@media (min-width: 768px) {
    .integration-features .features-panel-left  { padding-right: 200px; }
    .integration-features .features-panel-right { padding-left:  200px; }
}

@media (min-width: 1024px) {
    .integration-features .features-panel-left,
    .integration-features .features-panel-right { padding-right: 0; padding-left: 0; }
}

/* ─── Cross-promo Swiper ──────────────────────────────────────────────────── */
/* Slide widths are set inline via Tailwind (!w-[320px] md:!w-[420px]
   2xl:!w-[calc((100%-20px)/3)]). Spacing via Swiper's spaceBetween: 10.
   At 1440+ all 3 cards fit, Swiper auto-disables via watchOverflow. */

/* Pagination lives OUTSIDE .swiper (sibling, not child) so Swiper's
   overflow:hidden can't clip it. Override Swiper's default position:absolute
   to flow in normal block layout. 30×4px pill bars, 2px gap, inactive at 20%. */
.page-integration .cross-promo-pagination.swiper-pagination {
    position: static;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2px;
    width: 100%;
    bottom: auto;
    left: auto;
    line-height: 0;
}

.page-integration .cross-promo-pagination .swiper-pagination-bullet {
    width: 30px;
    height: 4px;
    background-color: #333;
    opacity: 0.2;
    border-radius: 99px;
    margin: 0 !important;
    transition: opacity 0.2s ease;
}

.page-integration .cross-promo-pagination .swiper-pagination-bullet-active {
    opacity: 1;
}

/* Hide pagination when all 3 cards fit (Swiper sets .swiper-pagination-lock
   on the bullets container when watchOverflow locks the swiper). */
.page-integration .cross-promo-pagination.swiper-pagination-lock {
    display: none;
}

.page-integration footer {
    background-color: #F6F6F6;
}

/* Form-related styles (invalid state, autofill, button loading) live in
   the reusable component file: `assets2/css/components/email-form.css`.
   Forms on this page carry the `.ef-email-form` class to opt in. */