/* Content/css/v2/sections/integrations-landing-page.css
   Powers Views/Home/Integrations.cshtml (the "Connect 3rd-party tools..."
   hero + "Native integrations" grid page — HomeController.Integrations(),
   confirmed real route per handoff). NOT the same page as:
     - sections/integrations.css        (Home page hub-and-spoke diagram)
     - sections/integration-detail-page.css (Office365/Stripe sub-pages)
   Three similarly-named, unrelated things by coincidence — see each
   file's own header comment.

   This page reuses .hero-title/.hero-title h1/.hero-dot/.animation-up/
   .no-gutter/.hero-area p already ported in product-page.css — load that
   file first. Below is only what's new here.

   Ported as-is from assets.3.0/css/style.1.0.6.css, in original order. */

.hero-area {
    position: relative;
}

.bg-vector {
    background: url("../../../../assets.3.0/img/bg-vector.png") no-repeat center left / cover !important;
}

.bg-half-light::after {
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    content: "";
    height: 100%;
    background: #F4FAFA !important;
}

.pt-88 {
    padding-top: 88px !important;
}

.pb-88 {
    padding-bottom: 88px !important;
}

/* --- Hero graphic crop fix ---
   integrations.gif has black letterboxing baked into the exported frame
   (confirmed - the asset itself loads fine, it's not a missing file).
   No legacy rule ever cropped this because the old container happened to
   match the gif's raw export dimensions exactly; the v2 Bootstrap 5
   column width doesn't, which is what exposed the bars. Fixed aspect-
   ratio + object-fit: cover crops them out regardless of column width.
   ADJUST the aspect-ratio below to match the actual visible (non-black)
   content once you can preview it — 16 / 10 is a placeholder guess based
   on the screenshot, not measured from the real file. */
/* .hero-image's position:relative/z-index/padding already come from the
   base rule in product-page.css - nothing extra needed here for layout,
   only the crop fix on the img itself below. */

/* Direct-child combinator (>) is deliberate here: .hero-dot's own img
   (dot-dark.png) lives one level deeper inside .hero-image, and the
   earlier descendant selector (.hero-image img) was matching it too -
   forcing the small decorative dot pattern to stretch to width:100% /
   aspect-ratio 16:10, distorting it. This scopes the crop to the gif
   only. */
.hero-image > img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: var(--ce-radius-md);
}

/* NEW rule, not a legacy port - Bootstrap 3's grid didn't need this,
   but Bootstrap 5's .row defaults to align-items: stretch, which left
   the text/image columns top-aligned instead of vertically balanced.
   Scoped to this page's specific hero class combo so it doesn't affect
   the Product pages, which already render correctly without it. */
.hero-area.bg-vector.bg-half-light .row.no-gutter {
    align-items: center;
}

.pr-70 {
    padding-right: 70px;
}

.pr-100 {
    padding-right: 100px;
}

.pt-115 {
    padding-top: 115px !important;
}

.pt-67 {
    padding-top: 67px !important;
}

.pb-60 {
    padding-bottom: 60px !important;
}

/* --- Service / "Native integrations" grid ---
   Most of this section's styling already lives inline in
   Integrations.cshtml's own @section CssScript block (.service-icon,
   .service-item, .coming-label, etc.) and doesn't need porting here —
   only what's missing from that inline block. */
.service-area {
    position: relative;
}

.service-area .section-title h2 {
    font-weight: 800;
    font-size: 2.1rem;
    color: var(--ce-color-navy);
    margin: 10px 0 14px;
}

.service-area .service-item {
    border-radius: var(--ce-radius-sm);
    padding: 24px;
    margin-bottom: 24px;
    transition: box-shadow .2s ease;
}

.service-area .service-item h4 {
    margin: 12px 0 8px;
    font-weight: 700;
    color: var(--ce-color-navy);
}