/* ============================================================================
   JP-1204 — Hilfecenter (/de/hilfecenter, /en/help-center)

   One spacing defect on the JTL-Forum landing vs Figma (node 1991:10180):
   the vertical gap between stacked widgets was ~128px (double the design).

   Breadcrumb alignment is no longer handled here: the page is on the
   product-landing template, whose breadcrumb container is already the wide
   1570px / 60px-gutter box (theme app.css), so it shares the hero's left edge
   with no page CSS. jp-1093 matches the content sections to the same box.

   Scoped to `page-id-427`, the DE original's id. WPML stamps that id onto the
   translated twin as well, so this ONE sheet covers /de/hilfecenter AND
   /en/help-center and nothing else. Verified on both rendered twins: DE carries
   page-id-427, EN carries page-id-427 and page-id-293894. (Same page-id hook and
   rationale as jp-1093-help-center.css, which owns this page's other chrome.)
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. Vertical spacing between stacked widgets.

   Every section's `.container` inherits 64px top + 64px bottom padding — a value
   sized for pages whose sections alternate coloured background bands. On this
   page all sections render on the one light-sand ground (jp-1093 flattens the
   bg-secondary/primary/tertiary bands), so 64+64 collapses into ~128px of dead
   whitespace between visually identical grounds — twice the Figma spacing, whose
   sections abut with ~72px between one widget's last content and the next
   widget's heading (e.g. the card grid → "Hilfen für Einsteiger", 1991:10227 →
   3610:24236).

   Halve the container padding to 36px so adjacent widgets stack 36+36 = 72px,
   matching Figma. The hero is left untouched (`:not(.hero-product-section)`):
   its top padding is the breadcrumb→hero gap and its bottom padding clears the
   tall hero photo — neither is the "between stacked widgets" spacing this fixes.
   ---------------------------------------------------------------------------- */
body.page-id-427 main section:not(.hero-product-section) > .container {
    padding-top: 36px;
    padding-bottom: 36px;
}

/* ----------------------------------------------------------------------------
   2. Drop the floating table-of-contents rail.

   The theme pins a fixed `#nav-toc` icon column to the left edge (a section
   jump-list). The Figma for this page shows no such rail, so hide it here. It is
   `position: fixed`, so removing it causes no reflow of the page content.
   ---------------------------------------------------------------------------- */
body.page-id-427 #nav-toc {
    display: none;
}

/* ----------------------------------------------------------------------------
   3. Hero photo — updated right-column image.

   jp-1093 paints the hero photo as a `background-image` on the image column
   (the shared product-header pins the `<img>` size via a cross-page cascade, so
   a background on the column is the only reliable override). Swap in the updated
   blob photo; the crop geometry (portrait aspect ratio, cover, left-bottom
   anchor) is unchanged, so only the image itself changes. Committed theme asset
   so it is env-stable and travels with the theme. Desktop only — below lg the
   column stacks full-width and the base image renders.
   ---------------------------------------------------------------------------- */
@media (min-width: 992px) {
    body.page-id-427 .hero-product-section .hero-product-section__image {
        background-image: url("assets/jp-1204-assets/hilfecenter-hero.png") !important;
    }
}