/* ============================================================================
   JP-1093 — Help center (/de/hilfecenter, /en/help-center)

   Card chrome for the "Vplate-Row" card grid. Figma 1991:10268 shows each card
   as ONE white rounded box: the image is flush to the top edge with its corners
   rounded, the title and copy sit inside the card's padding, and the link sits
   flat on the white with an orange arrow.

   Scoped to the `help-center-cards` marker class the content script writes onto
   the row, so it cannot reach any other page. The marker is language-neutral
   and identical on both twins, so DE and EN are covered by one rule set.

   Deliberately NOT here: anything that paints the link. The link is the widget's
   is-card-nav style and the widget owns its appearance; giving the card a white
   background is what makes that style's white tile read as flat, which is the
   Figma look. Only layout (margins) is set on it below.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   Container width.

   The page is on the product-landing template, whose breadcrumb + header sit in
   a 1570px / 60px-gutter container. Match the main content sections to the same
   box so the breadcrumb, hero and every section share one left edge at the
   redesign width. At a 1440 viewport 1570 - 2x60 = ~1320px of content, which is
   the Figma section box (1324 inset 57.8px in a 1440 frame, e.g. the Vplate-Row
   "Box", 1991:10228), and it scales up gracefully on wider screens rather than
   pinning to a static 1324.

   Scoped to `page-id-427`, the DE original's id. WPML stamps that id on the
   translated twin as well, so this ONE rule covers /de/hilfecenter and
   /en/help-center and nothing else. That is normally the WPML twin trap; here
   it is exactly the intent, and it is written down so nobody "fixes" it later.
   Verified on both rendered twins: DE carries page-id-427, EN carries
   page-id-427 and page-id-293894.
   ---------------------------------------------------------------------------- */
body.page-id-427 main section .container {
    max-width: 1570px !important;
    padding-left: 60px;
    padding-right: 60px;
}

/* The light-sand ground behind the floating nav and breadcrumb, and the
   transparent page wrapper, now come from the product-landing template body
   class — so the white nav pill reads as a distinct bar over the sand, matching
   every other redesign page. No page-level background recolour is set here on
   purpose: painting the nav pill sand made it blend into the ground and the
   navbar lost its background. */

/* ----------------------------------------------------------------------------
   Hero photo — taller portrait blob (Figma "Product-Header" 1991:10181).

   Figma sizes the hero image at a portrait 613 x 694 blob that fills the hero
   height and bleeds off the right edge. The shared product-header renders it as
   a near-square `<img>` whose size is pinned by a cross-page cascade rule, so a
   page override on the `<picture>`/`<img>` has no effect. Repaint the photo as a
   background on the COLUMN instead — the same mechanism the sibling redesign
   heroes use (services / support) — and hide the `<img>`.

   `background-size: cover` anchored `left bottom` keeps the blob's left curve,
   the desk and the orange help badge in view while the crop takes from the
   right, reproducing the Figma bleed. The image ships as a committed theme asset
   so it is env-stable and travels with the theme (the rendered <img> pointed at
   a per-env upload URL).

   Scoped to the page id, which BOTH language twins carry, so only this hero
   changes. 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 {
        aspect-ratio: 613 / 694 !important;
        min-height: 0 !important;
        align-self: center !important;
        background-image: url("assets/jp-1093-assets/hilfecenter-hero.png");
        background-size: cover !important;
        background-position: left bottom !important;
        background-repeat: no-repeat !important;
    }
    body.page-id-427 .hero-product-section .hero-product-section__image picture,
    body.page-id-427 .hero-product-section .hero-product-section__image img {
        display: none !important;
    }
}

/* The column IS the card. Bootstrap's gutter padding is traded for a margin so
   the white box stops at the card edge instead of bleeding into the gutter. */
.help-center-cards .help-center-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    margin: 0 14px 28px;
    flex: 0 0 calc(33.3333% - 28px);
    max-width: calc(33.3333% - 28px);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;               /* rounds the top corners of the image */
}

/* Image sits flush to the top edge, full bleed across the card. */
.help-center-cards .help-center-card__image {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
    border-radius: 0;
}

/* Figma pads the text area 21.68px; 24px is the theme's nearest step. */
.help-center-cards .help-center-card__title {
    margin: 24px 24px 12px;
}

.help-center-cards .help-center-card__text {
    margin: 0 24px 16px;
}

/* Push the link to the bottom so cards of differing copy length line their
   links up, as they do in Figma. Layout only — the widget paints it. */
.help-center-cards .help-center-card .product-button-group__button--with-icon {
    margin: auto 12px 12px;
}

/* ----------------------------------------------------------------------------
   Doc-box grid — Figma "Box-grid-Desktop 1440 v2" (3610:24236).

   Figma lays these out as uniform 416x180 boxes, 24px padding, with the label
   and arrow pinned to the bottom edge. The theme renders them as auto-height
   cards with Bootstrap's p-3 (16px), so a box grew or shrank with its label —
   visible on EN, where five labels wrap to two lines and left the grid ragged
   against DE's uniform row.

   Fixing the BOX height is what makes those two-line labels harmless: every box
   is the same height whether its label wraps or not, and the link sits on the
   baseline either way.
   ---------------------------------------------------------------------------- */
/* Section heading. Figma gives it a 792x92 text box (3610:24242) — ~40/46 over
   two lines, capped well short of the container. The theme renders it as `h3`
   (28px) across the full 1294px container, so it read as a small single line. */
.help-center-boxes h2 {
    max-width: 792px;
    font-size: 40px;
    line-height: 46px;
}

.help-center-boxes .help-center-box > .card {
    height: 100%;
    border: 0;
    /* Figma 3610:24246 Logo-Box corner radius. */
    border-radius: 24px;
}

.help-center-boxes .help-center-box > .card > .card-body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 180px;
    /* Figma 3610:24246 box: 180px tall, 24px top/side padding, 18px bottom.
       Bootstrap 4's `pt-3 pr-3 pb-3 pl-3` on this element ships with
       `!important`, so matching those values needs the same weight. */
    padding: 24px 24px 18px !important;
}

/* Logo-Box head (Figma 3610:24246): the product-category name sits left in navy,
   its icon right, replacing the old product logo. It is the card-body's top row;
   the card-body's space-between drops the Guide link to the bottom edge. */
.help-center-boxes .help-center-box__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}

.help-center-boxes .help-center-box__title {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #0b1b45;
}

.help-center-boxes .help-center-box__icon {
    flex-shrink: 0;
    width: auto;
    height: 34px;
}

/* Logo-Box subtitle (Figma 3610:24246): the "… im Guide" line is Inter Regular
   14 — not the shared card-nav tile's 16/600 — and carries no inner padding, so
   it lines up under the title and sits on the card's bottom edge. Scoped to this
   one help-center link (the card-nav / doc-box tiles keep their own size). The
   extra chained classes out-weight the widget's `.is-card-nav.is-compact` rule. */
/* The widget's card-nav-compact rule repeats its base class
   (`…--with-icon.…--with-icon.is-card-nav.is-compact`) to raise its weight, so a
   single-hook selector only TIES it and then loses on load order. Repeating the
   `help-center-box__link` hook the same way puts these one class above it. */
.help-center-boxes .help-center-box__link.help-center-box__link.is-card-nav.is-compact {
    padding: 0;
    font-size: 14px;
    font-weight: 400;
}

.help-center-boxes .help-center-box__link.help-center-box__link.is-card-nav.is-compact .product-button-group__button--with-icon__text {
    font-size: 14px;
    font-weight: 400;
    /* Keep the subtitle left-aligned when it wraps to two lines (the card-nav
       tile otherwise centres a wrapped label). Colour stays the widget's
       #0b1b45 — not overridden here. */
    text-align: left;
}

@media (max-width: 991px) {
    .help-center-cards .help-center-card {
        flex: 0 0 calc(50% - 28px);
        max-width: calc(50% - 28px);
    }
}

@media (max-width: 575px) {
    .help-center-cards .help-center-card {
        flex: 0 0 calc(100% - 28px);
        max-width: calc(100% - 28px);
    }
}

/* ----------------------------------------------------------------------------
   Video row (Figma "Link-Box-3er", 1991:10286 / 10287).

   The three YouTube cards were a flat, full-width slate band (bg-primary) with a
   1px grey border on each card. The design puts them in a bright-blue #2722f8
   rounded box (radius + padding 41.5px, 29px gap) on the same light background as
   the boxes section above, with 22px-rounded, border-less cards. Scoped to the
   `help-center-videos` marker the content script writes onto the row, so it
   reaches nothing else and covers both language twins.
   ---------------------------------------------------------------------------- */
/* The whole page sits on one light-sand fill. The redesigned sections otherwise
   inherit the theme's mixed backgrounds — the cards section carries a legacy
   photo (hosting-shop-hintergrund.jpg), the boxes + video sections the slate
   bg-secondary/bg-primary (#f5f7fa). Flatten all of them to #eeeee7 so the page
   reads as a single surface; the hero + support sections already use it. The
   video row's blue box is an inner element and is unaffected. */
.help-center-cards,
.help-center-boxes,
.help-center-videos,
.help-center-support {
    background-color: #eeeee7 !important;
    background-image: none !important;
}

.help-center-videos > .container > .row {
    background-color: #2722f8;
    border-radius: 42px;
    padding: 42px;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 29px;
}

.help-center-videos > .container > .row > .col-lg-4 {
    flex: 1 1 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
}

@media (min-width: 992px) {
    .help-center-videos > .container > .row > .col-lg-4 {
        flex: 1 1 0;
    }
}

.help-center-videos .youtube-standard {
    border: 0 !important;
    border-radius: 22px;
    margin: 0 !important;
}

/* ----------------------------------------------------------------------------
   Support / services media rows (Figma "Text-Media", 1991:10383).

   The "Support, Services, Schulungen / Gemeinsam(e) Ziele erreichen" block:
   Figma centres the header (overline in tech-blue + uppercase, no underline),
   sits the section on light-sand, and enlarges each media into a big rounded
   borderless image beside vertically-centred copy. The CTAs are the reusable
   Primary/Secondary buttons — owned by the widget, so there are no button rules
   here. Scoped to the `help-center-support` marker the content script writes on
   the row, so it reaches nothing else and covers both language twins.
   ---------------------------------------------------------------------------- */
/* The section fill (light-sand) is set with the other sections near the top. */

/* Centre the header block (overline + heading), as Figma does. */
.help-center-support__overline,
.help-center-support__heading {
    text-align: center;
}

/* Overline: tech-blue, uppercase, SemiBold at 16px — replacing the grey,
   normal-weight, 24px theme heading default. */
.help-center-support__overline {
    color: #2722f8;
    font-size: 16px;
    font-weight: 600 !important;   /* beats the widget's .font-weight-normal */
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

/* Heading: navy, and drop the theme's short orange underline (Figma has none). */
.help-center-support__heading {
    color: #0b1b45;
    margin-bottom: 44px;
}
/* The theme paints a 58x6 orange ::after underline on every H2 with
   `!important`; Figma has none, so it must be killed with the same weight. */
.help-center-support__heading::after,
.help-center-support__heading::before {
    content: none !important;
    border: 0 !important;
    background: none !important;
    display: none !important;
}

/* Block titles share the header's navy (the theme renders them slate). */
.help-center-support__text h3 {
    color: #0b1b45;
}

/* Vertically centre the copy against the image, as Figma does. */
.help-center-support__item {
    align-items: center;
}

/* Body copy: Inter Regular 14px, navy (Figma). The inline <strong> runs the
   editor left in the copy ("Support:", "Services:", "JTL-IssueTracker") are
   flattened to the same regular weight — Figma shows no bold in the body. */
.help-center-support__text p,
.help-center-support__text p strong,
.help-center-support__text p b {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    color: #0b1b45;
}

/* The design alternates the image side (block 1 left, 2 right, 3 left, 4 right).
   Every row is authored image-column-first (so it stacks image-on-top on mobile);
   the image-right blocks carry `--flip`, reversed only on desktop where the row
   is a two-up flex. On mobile the reverse is intentionally NOT applied, keeping
   the image above the copy for all blocks. */
@media (min-width: 992px) {
    /* Figma content box (1324): image 528 + 132 gap + text 664. Trade Bootstrap's
       column gutter for a real 132px flex gap, and size the two columns to that
       528:664 ratio so the proportion holds as the container flexes. */
    .help-center-support__item {
        flex-wrap: nowrap;
        gap: 132px;
        margin: 0;
    }
    .help-center-support__item > .help-center-support__media {
        flex: 528 1 0;
        max-width: none;
        padding: 0;
    }
    .help-center-support__item > .help-center-support__text {
        flex: 664 1 0;
        max-width: none;
        padding: 0;
    }
    .help-center-support__item--flip {
        flex-direction: row-reverse;
    }
}

/* Media: one big square borderless photo — Figma drops the theme's grey frame
   and uses square corners. */
.help-center-support__media img {
    width: 100%;
    border: 0 !important;
    border-radius: 0;
}

/* ----------------------------------------------------------------------------
   Support CTA pairs — keep the filled + outline pill on ONE line.

   Each support row pairs a filled and an outline CTA. The English labels are the
   widest on the page — "The JTL-IssueTracker in the video" next to "To the
   JTL-IssueTracker" — and together they were a few pixels wider than the copy
   column, so the second pill dropped onto a second row. The German twin's
   shorter labels already fit, so only the English row broke, but the fix is
   written to cover both.

   The pills nearly fill the column on their own, so a smaller gap alone can't
   recover the room; the pill side-padding is trimmed a touch as well. Desktop
   only — below lg the widget stacks the pair full-width by design, which is
   correct. Scoped to the section marker, which both language twins carry, and
   to the group + pill (layout only — fill / border / hover stay the widget's). */
@media (min-width: 992px) {
    .help-center-support .product-buttons-group {
        gap: 16px;
    }
    .help-center-support .product-buttons-group .product-button-group__button--with-icon {
        padding-left: 16px;
        padding-right: 16px;
    }
}