/* JP-1094 — Hilfecenter "Services" page redesign.
 *
 * Skins the CardSliderMobile output (written by
 * scripts/db/jp-1094-hilfecenter-services.php) into the Figma card layout,
 * plus the closing partner CTA box and the hero service badge.
 *
 * Scope: body.page-id-6174 also matches the EN twin — WPML stamps the DE
 * page-id onto the English page's <body>, so this one page-id covers both
 * /de/hilfecenter/services/ and /en/help-center/services/ with identical
 * styling (which is exactly what we want here). The .post-card-grid /
 * .services-cta-buttons hooks are English/neutral and written identically
 * onto both twins by the DB script.
 *
 * The card look itself lives in the reusable overrides/component-post-card.css
 * (opted in via the .post-card-grid class); only page composition — the
 * light-sand band, the heading gap, the hero and the CTA box — is here.
 *
 * Figma: file teRt2FXM9JffFSebtSTocH, node 2089-7079.
 */

/* ============================================================
 * 0. Hero — product-header (matches /de/ki/)
 *
 * The row carries the shared `hero-product-section orange` classes, so the
 * theme's global non-home hero rules supply the light-sand band + navy
 * Kurdis title. The provided PNG already bakes in the blob-clipped photo +
 * orange service badge, so it drops straight into the image column as a
 * background (no CSS mask), the way the /de/einstieg-und-start-up hero does.
 * ============================================================ */
body.page-id-6174 .hero-product-section__image {
    aspect-ratio: 1570 / 1538;
    min-height: 0 !important;
    align-self: center !important;
    background-image: url("assets/jp-1094-assets/jtl-hilfecenter-services-hero.png");
    background-size: contain !important;
    background-position: center right !important;
    background-repeat: no-repeat !important;
}
body.page-id-6174 .hero-product-section__image picture,
body.page-id-6174 .hero-product-section__image img {
    display: none !important;
}
/* The nav wrapper + breadcrumb sit on light-sand (one band with the hero) and
 * the breadcrumb aligns to the wide page edge — both come from the
 * product-landing template the DB script assigns (light-sand body + 1570
 * container), the same mechanism /de/ki uses. No extra CSS needed here. */
/* Overline stays JTL Tech-Blue. Higher specificity (#content + hero scope)
 * than the page's blanket navy-heading rule so the eyebrow isn't flattened. */
body.page-id-6174 #content section.hero-product-section h2.product-support-section__subtitle {
    color: #2722f8 !important;
    -webkit-text-fill-color: #2722f8 !important;
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
}
/* Lead line + intro paragraph — navy, readable. */
body.page-id-6174 section.hero-product-section .hero-product-section__content .h5,
body.page-id-6174 section.hero-product-section .hero-product-section__content .product-management-section__text,
body.page-id-6174 section.hero-product-section .hero-product-section__content .product-management-section__text p {
    color: #0b1b45 !important;
    -webkit-text-fill-color: #0b1b45 !important;
}
body.page-id-6174 section.hero-product-section .hero-product-section__content .h5 {
    font-weight: 700;
    margin-bottom: 12px;
}
@media (max-width: 767px) {
    body.page-id-6174 .hero-product-section__image {
        aspect-ratio: 1570 / 1400;
        background-position: center !important;
        margin-top: 24px;
    }
}

/* ============================================================
 * 1. Post-card grid — page placement
 *
 * The three service card rows use the reusable post-card component
 * (overrides/component-post-card.css); the DB script gives each
 * [card_mobile_widget] the `post-card-grid` class, so the card look, the 3-up
 * layout and the arrow CTA all come from that sheet. Only the page-level
 * composition lives here: the breathing room under each section heading (the
 * widget renders the heading flush against the card row) and the light-sand
 * band the cards sit on. #content lifts both above the widget/theme rules
 * without an !important-specificity war.
 * ============================================================ */
body.page-id-6174 #content section:has(.post-card-grid) .post-card-grid.slider-mobile-items-wrapper {
    margin-top: 40px !important;
}
/* Drop the first card row's container top padding (theme default 64px) so the
   row sits directly under the hero — this first row only, not the rows below. */
body.page-id-6174 #content > section:nth-child(2) > .container {
    padding-top: 0 !important;
}

/* ============================================================
 * 2. Card-row band — page background
 *
 * The card rows sit on the page's light-sand ground so the white cards read
 * as cards (Figma --jtl-sand #eeeee7). Two rows carry a "secondary" WPBakery
 * bg that paints them white/grey and flattens that contrast — repaint to sand.
 * #content lifts this above the theme utility without an !important war.
 * ============================================================ */
body.page-id-6174 #content section:has(.post-card-grid) {
    background-color: #eeeee7 !important;
}

/* ============================================================
 * 3. Partner CTA box — white rounded panel, left aligned
 *
 * The theme renders the row as a plain <section> and drops any vc_row
 * el_id/el_class, so the whole box is keyed off the language-neutral
 * .services-cta-buttons class (written identically onto both twins by the
 * DB script) via :has(). Structure:
 *   section:has(.services-cta-buttons) > .container > .row > .col
 *     span.h6 (overline) + span.h4 (headline) + .services-cta-buttons
 * ============================================================ */
body.page-id-6174 #content section:has(.services-cta-buttons) {
    /* No section background — the band stays the page's light-sand so the white
     * rounded CTA panel (.col below) reads as a card on the ground, not a white
     * strip. */
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}
/* The .col becomes the white rounded panel. */
body.page-id-6174 #content section:has(.services-cta-buttons) .row > .col {
    position: relative;
    background: #ffffff;
    border: 1px solid #eeeee7;
    border-radius: 46px;
    padding: 46px 64px;
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(11, 27, 69, 0.06);
}
/* Decorative blue shapes on the right (Figma node 2113:2415 approximation). */
body.page-id-6174 #content section:has(.services-cta-buttons) .row > .col::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -40px;
    width: 340px;
    height: 190px;
    background: #2722f8;
    border-radius: 0 0 0 260px;
    transform: rotate(-8deg);
    z-index: 0;
}
body.page-id-6174 #content section:has(.services-cta-buttons) .row > .col::after {
    content: "";
    position: absolute;
    bottom: -70px;
    right: -30px;
    width: 260px;
    height: 220px;
    background: #7cc0f8;
    border-radius: 220px 0 0 0;
    z-index: 0;
}
/* Keep the text/button above the shapes and clear of them. */
body.page-id-6174 #content section:has(.services-cta-buttons) .row > .col > * {
    position: relative;
    z-index: 1;
    max-width: 640px;
}
/* Hide the auto "copy anchor" link icons on the headings. */
body.page-id-6174 #content section:has(.services-cta-buttons) .headline-link {
    display: none !important;
}
/* Overline (span.h6). */
body.page-id-6174 #content section:has(.services-cta-buttons) .h6 {
    display: block !important;
    color: #2722f8 !important;
    -webkit-text-fill-color: #2722f8 !important;
    font-family: Inter, sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
    text-align: left !important;
    margin: 0 0 6px !important;
}
/* Headline (span.h4) — Kurdis navy, left aligned. */
body.page-id-6174 #content section:has(.services-cta-buttons) .h4 {
    display: block !important;
    color: #0b1b45 !important;
    -webkit-text-fill-color: #0b1b45 !important;
    font-family: "Kurdis Wide", "Kurdis", Inter, sans-serif !important;
    font-weight: 700 !important;
    font-size: 32px !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    text-align: left !important;
    margin: 0;
}
/* Button group left-aligned, spaced under the headline. */
body.page-id-6174 #content section:has(.services-cta-buttons) .services-cta-buttons {
    display: flex !important;
    justify-content: flex-start !important;
    margin-top: 32px !important;
}

@media (max-width: 991.98px) {
    body.page-id-6174 #content section:has(.services-cta-buttons) .row > .col {
        padding: 32px 24px;
        border-radius: 24px;
    }
    body.page-id-6174 #content section:has(.services-cta-buttons) .h4 {
        font-size: 26px !important;
        line-height: 34px !important;
    }
    body.page-id-6174 #content section:has(.services-cta-buttons) .row > .col::before,
    body.page-id-6174 #content section:has(.services-cta-buttons) .row > .col::after {
        display: none;
    }
}