/* ------------------------------------------------------------------
 * JP-1100 — Hilfecenter Support page composition
 * /de/hilfecenter/support/ + /en/help-center/support/
 * Figma: file teRt2FXM9JffFSebtSTocH, frame 3694-4352.
 *
 * Scope: body.page-id-2179. Under WPML the ORIGINAL (DE) page id is stamped on
 * the translated body too, so this one id reaches BOTH twins — which is what
 * is wanted here, since the redesign applies to both. (Verified by reading the
 * rendered <body class> on each twin, not inferred from the post ids.)
 *
 * The card surfaces themselves are NOT here — they are the reusable
 * `info-card` component (overrides/component-info-card.css). This sheet only
 * composes the page: the hero artwork, the section bands, the blue Support-Tools
 * panel, the step-card grid and the vertical rhythm.
 *
 * The light-sand page ground, the wide 1570 container and the breadcrumb
 * alignment are NOT here either: they come from the product-landing page
 * template, which the DB script sets on both twins. Styling them per page is
 * the trap this page's ticket started out in.
 *
 * No button appearance is styled anywhere in this file. All ten CTAs are the
 * design-system button widget, which owns fill/border/label/hover for every
 * variant.
 * ------------------------------------------------------------------ */

/* -- 1. Hero ----------------------------------------------------------- */

/* The artwork is painted by a pseudo-element rather than as the column's own
 * background, because the design runs it out to the page edge and the column
 * cannot be widened to do that: it is a Bootstrap `.col-lg-6`, i.e.
 * `flex: 0 0 50%; max-width: 50%`, so a negative margin or a wider `width`
 * either does nothing or overflows the row and wraps it. The pseudo-element
 * overhangs instead, leaving the grid exactly as it is.
 *
 * Ratio 785/769 is the artwork's own, so the box never letterboxes it — the
 * same ratio the einstieg hero uses, since these hero exports share a frame
 * size. The blob clip and the orange headset badge are baked into the asset,
 * so there is no CSS mask or clip here. */
/* The hero artwork is a CONTENT image ([ImageStandard] in the right column),
 * not a CSS background — a <picture>/<img> whose blob mask and orange headset
 * badge are baked into the asset's alpha, so there is no CSS mask or clip here.
 * The column no longer needs to establish a containing block for a pseudo-
 * element: custom-clone.css already pins non-home hero image columns to
 * `position: static`, which leaves the theme's own `right: -15px` inert (no
 * horizontal scrollbar), so nothing is re-asserted on the column itself. */

/* The plugin default sizes the hero <picture> at 703/733 (the home hero). This
 * asset's frame is 785/769 — match it so the image is neither cropped nor
 * letterboxed, and let it fill the column width. */
body.page-id-2179 .hero-product-section__image picture,
body.page-id-2179 .hero-product-section__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 785 / 769;
    object-fit: contain;
}

/* The design hangs the artwork from the top of the band with the copy beside
 * it, rather than centring both. */
body.page-id-2179 .hero-product-section .row {
    align-items: flex-start;
}

@media (min-width: 992px) {
    /* Overhang by the product-landing container's 45px gutter so the artwork's
     * right edge lands on the viewport edge at the design's 1440 width (and on
     * the container edge above 1570, where the container stops growing). The
     * column stays in normal flow; only the picture shifts right, so it bleeds
     * into the gutter rather than past the viewport. */
    body.page-id-2179 .hero-product-section__image picture,
    body.page-id-2179 .hero-product-section__image img {
        position: relative;
        right: -45px;
    }
}

/* Figma sets the hero lead in bold navy directly above the intro paragraph. */
body.page-id-2179 .support-hero__lead {
    display: block;
    margin-bottom: 16px;
    font-weight: 700;
    color: #0b1b45;
}

/* -- 2. "Support-Ticket anlegen" step cards ---------------------------- */

/* The four screenshots are a GalleryGrid; the design turns each cell into a
 * white card with the shot inset on a pale ground and the caption below. */
body.page-id-2179 .support-steps-section .figure-square,
body.page-id-2179 .support-steps-section figure {
    background: #fff;
    border: 0;
    border-radius: 24px;
    overflow: hidden;
}

body.page-id-2179 .support-steps-section figcaption,
body.page-id-2179 .support-steps-section .figure-caption {
    padding: 16px 24px 24px;
    font-family: Inter, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #0b1b45;
    text-align: left;
    /* The theme truncates gallery captions to a single line with an ellipsis.
     * At the design's 20px the labels no longer fit the card, so three of the
     * four rendered as "1. Im JTL-Kundencenter …". The design wraps them onto
     * two lines instead. */
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}

body.page-id-2179 .support-steps-section .figure-square-img {
    background: #f5f7fa;
}

/* -- 3. Status messages ------------------------------------------------ */

body.page-id-2179 .support-status-section {
    text-align: center;
}

/* The stored markup opens this section with an `<hr class="mb-7">` — a legacy
 * separator that puts ~72px of empty space between the previous section and
 * the heading. The design has no rule and no such gap here. */
body.page-id-2179 .support-status-section hr {
    display: none;
}

/* The intro is stored as a SECOND `<h2>` carrying `.h5`, not as a paragraph,
 * so the theme renders it as a heading — larger and semi-bold. The design
 * (node 3694-4425) sets it as plain body copy: Inter Regular 18/28, navy,
 * centred, on a ~696px measure.
 *
 * `!important` on the weight and family because `.h5` is a theme heading class
 * that carries both, and the global `h2 { font-family: Kurdis … !important }`
 * would otherwise keep the display face. The classes are stored per instance
 * in the page content, so a stylesheet is the only place to correct this. */
body.page-id-2179 #content .support-status-section h2.h5 {
    max-width: 700px;
    margin: 0 auto;
    font-family: Inter, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 28px !important;
    letter-spacing: 0;
    color: #0b1b45;
}

/* 15px under the headline, 29px above the buttons — the design's rhythm, much
 * tighter than the theme default. Scoped to `.h3` so it hits the headline and
 * not the intro, which is also an h2. */
body.page-id-2179 .support-status-section h2.h3 {
    margin-bottom: 15px;
}

body.page-id-2179 .support-status-section .product-buttons-group {
    justify-content: center;
    margin-top: 29px;
}

/* -- 4. Support-Tools: the blue panel ---------------------------------- */

/* A full-bleed row would run the blue to the viewport edge; the design insets
 * it as a rounded panel within the content width. The row's own container is
 * the panel. */
body.page-id-2179 .support-tools-section > .container {
    background: #2722f8;
    border-radius: 32px;
    padding: 64px;
    max-width: 1312px;
}

/* Heading and intro sit on the blue, so both are white and left-aligned.
 *
 * `!important` is needed because the heading carries Bootstrap's
 * `.text-tertiary` / `.text-center` utilities, which ship `!important`.
 *
 * The `#content` id is needed for a second, less obvious reason: the
 * product-landing template this page now uses brings its own
 * `body.page-template-product-landing main section:not(.section-1690) h2
 * { color: #0b1b45 !important }`. That is specificity (0,2,4) and so beats a
 * plain `body.page-id-2179 .support-tools-section h2` at (0,2,2) even with
 * `!important` on both — the heading stayed navy on the blue panel on BOTH
 * twins. The id lifts this rule to (1,2,2) and settles it. */
body.page-id-2179 #content .support-tools-section h2,
body.page-id-2179 #content .support-tools-section h2 a,
body.page-id-2179 #content .support-tools-section > .container > .row > [class^="col"] > span {
    color: #fff !important;
    text-align: left !important;
}

/* The panel's own heading block sits left, above the two cards. */
body.page-id-2179 .support-tools-section .info-card-grid {
    margin-top: 40px;
}

/* Card icons are defined together at the foot of this sheet. */

@media (max-width: 767px) {
    body.page-id-2179 .support-tools-section > .container {
        padding: 32px 24px;
        border-radius: 24px;
    }
}

/* -- 5. Support options / entitlement / levels ------------------------- */

body.page-id-2179 .support-options-section {
    text-align: center;
}

/* Cards inside the section keep their own left-aligned copy — only the
 * section's headings and intro are centred. */
body.page-id-2179 .support-options-section .info-card {
    text-align: left;
}

body.page-id-2179 .support-options-section .product-buttons-group {
    justify-content: center;
}

/* The intro CTA ("Zu den Editionen von JTL") sat flush against the last
 * paragraph (0px). Give it a little air below the copy, matching the button
 * rhythm used elsewhere on the page. */
body.page-id-2179 .support-options-section .support-options-cta {
    margin-top: 32px;
}

body.page-id-2179 .support-options-section .info-card .product-buttons-group {
    justify-content: flex-start;
}

/* The two sub-headings ("Wer ist support-berechtigt?", "Support-Level …")
 * open their own blocks, so they need air above the grid that follows. */
body.page-id-2179 .support-options-section h3 {
    margin-top: 64px;
    margin-bottom: 40px;
}

/* -- 6. "Fragen zur Bedienung" ---------------------------------------- */

body.page-id-2179 .support-questions-section {
    text-align: center;
}

body.page-id-2179 .support-questions-section .info-card {
    text-align: left;
}

body.page-id-2179 .support-questions-section .info-card .product-buttons-group {
    justify-content: flex-start;
}

/* -- 7. Band rhythm ---------------------------------------------------- */

/* Every section shares the page's light-sand ground, so the separation is
 * vertical space rather than alternating fills.
 *
 * The spacing lives on the CONTAINER, not on the section. The theme already
 * gives every `.container` 64px top and bottom padding, so adding section
 * padding on top of it stacked two paddings between every pair of sections —
 * with the heading's own 32px top margin that came to ~224px of empty band
 * above "Statusmeldungen einsehen". The design's section padding is ~40px
 * (its status section is 270px tall around a 190px text block), so the
 * container padding is reduced to that and the section itself adds none. */
body.page-id-2179 .support-steps-section,
body.page-id-2179 .support-status-section,
body.page-id-2179 .support-tools-section,
body.page-id-2179 .support-options-section,
body.page-id-2179 .support-questions-section {
    padding-top: 0;
    padding-bottom: 0;
    background: transparent;
}

body.page-id-2179 .support-steps-section > .container,
body.page-id-2179 .support-status-section > .container,
body.page-id-2179 .support-options-section > .container,
body.page-id-2179 .support-questions-section > .container {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* The tools section's container IS the blue panel and keeps its own 64px
 * inset, so its outer spacing goes on the section instead. */
body.page-id-2179 .support-tools-section {
    padding-top: 40px;
    padding-bottom: 40px;
}

/* The theme opens each section's first heading with a 32px top margin, which
 * doubles the container padding. The container already provides the space. */
body.page-id-2179 .support-steps-section .container > .row > [class*="col"] > h2:first-child,
body.page-id-2179 .support-status-section h2.h3,
body.page-id-2179 .support-options-section .container > .row > [class*="col"] > h2:first-child,
body.page-id-2179 .support-questions-section .container > .row > [class*="col"] > h2:first-child {
    margin-top: 0;
}

@media (max-width: 767px) {
    body.page-id-2179 .support-steps-section > .container,
    body.page-id-2179 .support-status-section > .container,
    body.page-id-2179 .support-options-section > .container,
    body.page-id-2179 .support-questions-section > .container,
    body.page-id-2179 .support-tools-section {
        padding-top: 28px;
        padding-bottom: 28px;
    }
}

/* -- 8. Card icons ----------------------------------------------------- */

/* The eight design glyphs, exported from the Figma frame and committed under
 * assets/jp-1100-assets/. The component supplies the pseudo-element's box,
 * position and (for the compact cards) the navy disc; this only names the
 * artwork per instance.
 *
 * Relative URLs resolve against this stylesheet, so they stay correct on any
 * environment regardless of what the content directory is called — which is
 * why the glyph lives here and not as a path written into post_content.
 *
 * The four disc glyphs ship white, as the design draws them on navy. The four
 * standalone glyphs were exported with a #171717 stroke and were recoloured to
 * the navy #0b1b45 the design actually uses. */

/* Support-Tools (nodes 3694-4439 / 3694-4446) */
body.page-id-2179 .info-card--icon-monitor::after {
    background-image: url("assets/jp-1100-assets/icon-monitor.svg");
}

body.page-id-2179 .info-card--icon-link::after {
    background-image: url("assets/jp-1100-assets/icon-link.svg");
}

/* Wer ist support-berechtigt? — white glyphs on the navy disc
   (nodes 3694-4467 / 3694-4480 / 3694-4491 / 3694-4501) */
body.page-id-2179 .info-card--icon-user-group::after {
    background-image: url("assets/jp-1100-assets/icon-user-group.svg");
}

body.page-id-2179 .info-card--icon-clock::after {
    background-image: url("assets/jp-1100-assets/icon-clock.svg");
}

body.page-id-2179 .info-card--icon-mail-edit::after {
    background-image: url("assets/jp-1100-assets/icon-mail-edit.svg");
}

body.page-id-2179 .info-card--icon-call-ringing::after {
    background-image: url("assets/jp-1100-assets/icon-call-ringing.svg");
}

/* Support-Level der kostenpflichtigen Editionen (nodes 3694-4514 / 3694-4521) */
body.page-id-2179 .info-card--icon-sms::after {
    background-image: url("assets/jp-1100-assets/icon-sms.svg");
}

body.page-id-2179 .info-card--icon-call::after {
    background-image: url("assets/jp-1100-assets/icon-call.svg");
}