/**
 * qa14-en-ai-contact.css
 * Page:  /en/ai  (page-id 310462)
 *        section#beratung-vereinbaren — "CONTACT AND CONSULTATION /
 *        Too much time spent on tasks AI could handle?"
 * Batch #14 item 1.
 *
 * PART ONE — remove the anchor link on the heading.
 *
 * The theme appends a permalink anchor (`<a class="far fa-link headline-link">`)
 * to headings that carry an id. On this page it renders as a small chain icon
 * next to the h2 and links to #too-much-time-spent-on-tasks-ai-could-handle.
 * The ticket asks for it to go.
 *
 * Hidden rather than unhooked from the template: `.headline-link` is emitted by
 * the shared heading partial for every id'd heading site-wide, so removing it in
 * PHP would strip the anchor from every page.
 *
 * MATCHED BY `href`, not by section id, on purpose. The obvious selector
 *     body.page-id-310462 section#beratung-vereinbaren .headline-link
 * silently no-ops if the section id drifts — and it already does: the dev clone's
 * /en/ai has no `#beratung-vereinbaren` at all, yet still renders one
 * `.headline-link` elsewhere on the page, which that selector would have missed
 * while a laxer one would have hidden the WRONG link. The href is the thing the
 * ticket actually names, so match on it: exactly one element, on this page only,
 * whatever the surrounding markup is called.
 *
 * The heading keeps its `id`, so the #anchor still resolves for anyone who has the
 * URL, and the in-page FAQ link "Our team of experts will be happy to advise you"
 * (href="#beratung-vereinbaren") is unaffected.
 *
 * `body.page-id-310462` is the EN page only — the DE page /de/ki carries
 * page-id-302458 alone.
 *
 * PART TWO — the panel restyle (Figma 248:4150).
 *   Figma splits the Kontakt-Box into a navy left half and a light-blue #89d2ff
 *   right half, divided by a curved edge that bows into the navy, with the blue
 *   running flush to the card's top, right and bottom (clipped by its 46px radius).
 *   The live card is solid navy with the form sitting in a small rounded blue box
 *   floating inside it — a box-in-box that Figma does not have.
 *
 *   THE FORM FIELDS ARE NOT TOUCHED HERE, and do not need to be. The form is a
 *   HubSpot embed inside a same-origin `iframe#hs-form-iframe-0`; parent-page CSS
 *   cannot cross that document boundary. It is already skinned to Figma (white
 *   fills, #89d2ff borders, navy labels, orange pill submit) by the deployable
 *   injector `theme/jtl/includes/hubspot-form-skin.php`, which appends a <style>
 *   to the iframe's contentDocument on every front-end page. So the only thing
 *   missing was the panel behind it — which IS reachable from page CSS. Verified
 *   with getComputedStyle inside contentDocument before writing this.
 *
 *   The curve is a `background-image` on the card, not a pseudo-element:
 *     - The path is TRACED FROM THE FIGMA RASTER (248:4150), 41 samples of the
 *       navy->blue boundary, symmetrised about the vertical centre, expressed as
 *       percentages of the card box. It is not an eyeballed `ellipse()`; the best
 *       ellipse fit was off by up to 10px at the quarter heights.
 *     - `preserveAspectRatio="none"` + `background-size: 100% 100%` is what makes
 *       it exact at any card size: the SVG's y axis maps to the card's height, so
 *       every sampled row lands back on its measured x fraction no matter how the
 *       card grows. A `clip-path: path()` would NOT do this (path() is in px and
 *       does not scale), and a pseudo-element would need its own stacking fix.
 *     - The card's own `border-radius: 46px` + the SVG reaching x=100 clips the
 *       blue into the two right corners for free.
 *
 *   DESKTOP ONLY (`min-width: 992px`). Below `lg` Bootstrap stacks the two
 *   `.col-lg-6` columns, so a left/right split is meaningless — the form would sit
 *   on top of the navy half. Under 992px the card keeps its current appearance and
 *   the form keeps its own rounded blue box.
 */
/* WHY THE CLASS IS REPEATED ×3 — do not "simplify" this selector.
   custom-clone.css already pins this element visible with an !important of its own:
       section.product-support-section.orange .product-support-section__title a.headline-link{
           display: inline-block !important; ... }
   that is specificity (0,4,2). The natural selector here,
       body.page-id-310462 a.headline-link[href="…"]
   is only (0,3,2) — important-vs-important is decided by specificity, so it LOSES
   and the icon stays visible. (Verified on prod: the rule matched, and the element
   still computed `display: inline-block`.) Repeating `.headline-link` lifts this to
   (0,5,2) so it wins outright, without needing the section id. */
body.page-id-310462 a.headline-link.headline-link.headline-link[href="#too-much-time-spent-on-tasks-ai-could-handle"] {
    display: none !important;
}

/* ---------------------------------------------------------------------------
   Part two — Figma 248:4150 Kontakt-Box: navy left / light-blue right, curved.
   Scoped to /en/ai and to >=lg, where the two .col-lg-6 sit side by side.
   --------------------------------------------------------------------------- */
@media (min-width: 992px) {

    /* The navy stays as the base colour; the traced SVG paints the blue half on
       top of it. `background-size: 100% 100%` (not `cover`) is load-bearing —
       `cover` would preserve the SVG's 1:1 aspect ratio and crop the curve. */
    body.page-id-310462 section.product-support-section .basic-card-widget {
        background-color: #0b1b45 !important;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22 preserveAspectRatio=%22none%22><path d=%22M47.74,0.00 L46.86,2.50 L46.09,5.00 L45.21,7.50 L44.39,10.00 L43.56,12.50 L42.68,15.00 L41.86,17.50 L41.03,20.00 L40.15,22.50 L39.27,25.00 L38.50,27.50 L37.84,30.00 L37.29,32.50 L36.74,35.00 L36.36,37.50 L35.97,40.00 L35.75,42.50 L35.53,45.00 L35.42,47.50 L35.42,50.00 L35.42,52.50 L35.53,55.00 L35.75,57.50 L35.97,60.00 L36.36,62.50 L36.74,65.00 L37.29,67.50 L37.84,70.00 L38.50,72.50 L39.27,75.00 L40.15,77.50 L41.03,80.00 L41.86,82.50 L42.68,85.00 L43.56,87.50 L44.39,90.00 L45.21,92.50 L46.09,95.00 L46.86,97.50 L47.74,100.00 L100,100 L100,0 Z%22 fill=%22%2389d2ff%22/></svg>") !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        background-size: 100% 100% !important;
    }

    /* Figma centres the navy column's copy against the full height of the card,
       which is driven by the (taller) form column. */
    body.page-id-310462 section.product-support-section .basic-card-widget .card-body > .row {
        align-items: center;
    }

    /* The copy column MUST be narrower than its Bootstrap `.col-lg-6` (50%), or it
       runs across the curve and sets white text on the light-blue half — the curve
       reaches in to x=35.4% of the CARD at mid-height, well inside 50%.
       Figma's copy block ends at 31.4% of the card.

       Careful with the units: `flex-basis: N%` resolves against the ROW, which is
       the card minus its 2x64px padding, not against the card. So the text's right
       edge as a fraction of the card is (64 + N%*(cardW-128) - 15px)/cardW, the 15px
       being the column's own gutter. At the live 1320px card, N=30.5% lands the text
       at 31.3% of the card — Figma's 31.4% — and leaves ~55px of navy before the
       curve. (N=34% looked right but measured only 2px of clearance: that mistake is
       exactly why this is checked with getClientRects() and not by eye.)
       The form column keeps its own 50% and does not move. */
    body.page-id-310462 section.product-support-section .basic-card-widget .card-body > .row > .col-lg-6:first-child {
        flex: 0 0 30.5%;
        max-width: 30.5%;
    }

    /* …and `margin-left: auto` on the form column is REQUIRED, not cosmetic.
       `.row` is a flexbox, so narrowing the first column from 50% to 30.5% pulls the
       second one left with it — the form landed at 32.4% of the card, straddling the
       curve, with its labels on the navy. Pushing the free space into a left auto
       margin puts the form back on the right half (content edge ~51% of the card,
       Figma 53.8%) and keeps it there at every width. */
    body.page-id-310462 section.product-support-section .basic-card-widget .card-body > .row > .col-lg-6:last-child {
        margin-left: auto;
    }

    /* Kill the floating blue box: on the blue half it would read as a box-in-box.
       custom-clone.css:12831 gives it `background:#89d2ff; border-radius:20px;
       padding:28px` for EVERY .product-support-section.orange on the site, so this
       has to be an override rather than an edit — the same rule is what makes the
       form legible on the pages that do NOT have the split panel. Overriding it
       here only, per the ticket's "don't touch other pages" rule. */
    body.page-id-310462 section.product-support-section .basic-card-widget .hbspt-form {
        background-color: transparent !important;
        border-radius: 0 !important;
        padding: 0 !important;
    }
}