/**
 * jp-1099-video-tutorials.css — Video-Tutorials page redesign (JP-1099)
 *
 * Page:  /de/hilfecenter/video-tutorials/  +  /en/help-center/video-tutorials/
 * Figma: https://www.figma.com/design/teRt2FXM9JffFSebtSTocH/JTL-Website-Modules?node-id=3610-25382
 *
 * Brings the page from the legacy design (white / pale-blue alternating bands,
 * Museo headings, orange underline rules, per-product colour buttons, network
 * pattern hero) onto the redesign: one continuous light-sand band, Kurdis/Inter
 * type in JTL Dark Blue, a Tech Blue uppercase overline, a masked hero photo
 * with the orange play badge, and the reusable orange Primary CTA.
 *
 * SCOPE — one body class deliberately covers BOTH language twins.
 * WPML stamps the ORIGINAL (German) page id onto the translated page as well, so
 * the rendered <body> carries:
 *     DE  …page-id-107195…
 *     EN  …page-id-293879 page-id-107195…
 * `body.page-id-107195` therefore matches the German page and its English twin,
 * and nothing else — which is exactly right here, because the redesign has to
 * land on both languages. Both values were read off the rendered pages, not
 * inferred from the post ids.
 *
 * Section hooks are the #anchor-jtl-* ids the product headings generate. Those
 * are product names, so they are byte-identical on both twins (verified on the
 * rendered DE and EN markup) and carry no German. They are used in preference to
 * :nth-of-type() because the number of sections above the first product section
 * changes whenever the promo banner is toggled, which would silently flip the
 * left/right alternation.
 *
 * The CTAs are NOT styled here. They were migrated to the reusable button
 * variant classes, whose stylesheet is the single source of truth for their
 * fill, label, radius and hover; only their spacing is set below.
 *
 * Tokens: sand #eeeee7 · tech blue #2722f8 · dark blue #0b1b45 · orange #fb581f
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. One continuous light-sand band
   The legacy page alternated .bg-secondary (#f5f7fa) / .bg-tertiary (white) /
   transparent per section, and the hero carried a network-pattern photo. Figma
   is a single flat sand field from the breadcrumb down to the footer.

   The page runs on the redesign page template (assigned by the DB script). Two
   different shared sheets hang off that, and it is worth keeping them apart:
   the wide 1570/60 content container comes from the widget plugin's global
   sheet, which loads only for allow-listed templates, while the sand body
   background comes from `custom-clone.css` keyed on the body class, which loads
   on every page. Only the container actually needed the template.

   The rules below are still needed on top of both: the sand is a body-level
   background, and these sections paint their own legacy fills over it.
   ═══════════════════════════════════════════════════════════════════════════ */
body.page-id-107195,
body.page-id-107195 #app {
    background-color: #eeeee7 !important;
}

/* The sections are nested in main#content, not directly under #app, and the only
   class the hero carries is a WPBakery utils-<hash> that is regenerated on every
   render — so this matches every section on the page and re-exempts the banner
   below, rather than naming any one of them. */
body.page-id-107195 #nav-breadcrumb,
body.page-id-107195 #app main section {
    background-color: #eeeee7 !important;
    background-image: none !important;
}

/* The promo banner above the header keeps its own orange fill. */
body.page-id-107195 #app section.connect-banner {
    background-color: #fb581f !important;
}

/* Breadcrumb reads as the top line of the sand band (Figma puts it inside the
   band, above the overline), so it loses its own padding-bottom gap. */
body.page-id-107195 #nav-breadcrumb {
    padding-top: 32px !important;
    padding-bottom: 0 !important;
}

body.page-id-107195 #nav-breadcrumb,
body.page-id-107195 #nav-breadcrumb a,
body.page-id-107195 #nav-breadcrumb span,
body.page-id-107195 #nav-breadcrumb li {
    color: #0b1b45 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. Hero — "Product-Header"
   ═══════════════════════════════════════════════════════════════════════════ */
body.page-id-107195 #app section:has(> .container h1) {
    padding: 56px 0 72px !important;
}

/* The copy sits at the TOP of the hero row, level with the top of the photo,
   rather than optically centred against a taller image. flex-start pins the
   overline/headline to the top edge; the media column's mt-auto/mb-auto in the
   markup no longer has free space to centre against, so the photo stays at the
   top too. */
body.page-id-107195 #app section:has(> .container h1) > .container > .row > .col > .row {
    align-items: flex-start;
}

/* Overline — Inter SemiBold 18/24, 5% tracking, uppercase, Tech Blue.
   Rendered as <span class="h3">, so the theme's h3 sizing has to be undone. */
body.page-id-107195 #app section:has(> .container h1) span.h3 {
    display: block;
    margin: 0 0 6px !important;
    font-family: Inter, sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
    color: #2722f8 !important;
}

/* H1 — Kurdis Wide Bold 40/56, Dark Blue. */
body.page-id-107195 #app section:has(> .container h1) h1 {
    margin: 0 0 32px !important;
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 56px !important;
    letter-spacing: normal !important;
    color: #0b1b45 !important;
}

/* Hero body — Inter 20/28, Dark Blue. */
body.page-id-107195 #app section:has(> .container h1) .col-lg-6:first-child p {
    margin: 0 !important;
    font-family: Inter, sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 28px !important;
    color: #0b1b45 !important;
}

/* 2.1 Hero media — masked photo + orange play badge.
   Laid out the way the /de/warenwirtschaftssystem-software/ hero is: the photo
   stays INSIDE the grid column, so its right edge lands on the container's
   content edge with the normal gutter instead of bleeding to the viewport
   edge, and the row's align-items centres it against the copy.

   The photo and the badge are drawn as two background layers on one ::before
   box rather than on the column itself. The column's border box includes the
   15px grid gutters, so a percentage measured against it is not a percentage
   of the photo; a full-width ::before IS the photo box, which keeps every
   number below a plain fraction of the image and keeps the badge anchored to
   the photo's corner at any viewport width.

   Desktop only, on purpose: the media column is authored `d-none d-lg-block`,
   so below the lg breakpoint it is hidden by the page's own markup and the
   hero is text-only — as it was before this redesign, when the column held a
   YouTube glyph. The media query keeps this block from applying to a hidden,
   zero-sized box rather than relying on that class to neutralise it. */
@media (min-width: 992px) {

body.page-id-107195 #app section:has(> .container h1) .col-lg-6:last-child::before {
    content: "";
    display: block;
    width: 100%;
    /* The consolidated hero artwork's own pixel ratio, so `contain` fills the
       box exactly. This single asset already carries the sweeping leaf-edge
       mask, the rounded right-hand corners and the orange play badge baked in,
       so no separate badge layer, corner-radius or position hacks are needed. */
    aspect-ratio: 1570 / 1538;

    background-image: url("assets/jtl-video-tutorials-hero.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* The legacy Font Awesome YouTube glyph the photo replaces. Suppressed only
   where the photo actually renders, so below lg the hero media column is left
   exactly as it was before this sheet existed. */
body.page-id-107195 #app section:has(> .container h1) .col-lg-6:last-child .fa-stack {
    display: none !important;
}

}   /* end min-width: 992px */

/* ═══════════════════════════════════════════════════════════════════════════
   3. Product sections — "Text-Media"
   ═══════════════════════════════════════════════════════════════════════════ */
/* The theme gives the .container inside every section its own 64px top/bottom
   padding, which would stack with the section padding below and make each band
   ~290px of vertical whitespace instead of Figma's ~160px. Zero it so the
   section padding is the single control for the band rhythm. */
body.page-id-107195 #app main section > .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.page-id-107195 #app section:has(.youtube-standard) {
    padding: 80px 0 !important;
}

/* Overline — the product name, moved into the text column and marked
   is-section-overline. Same treatment as the hero overline. */
body.page-id-107195 #app .is-section-overline {
    margin: 0 0 6px !important;
    font-family: Inter, sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    letter-spacing: 0.9px !important;
    text-transform: uppercase !important;
    text-align: left !important;
    color: #2722f8 !important;
}

/* Section headline — Kurdis Wide Bold 32/46, 2% tracking, Dark Blue. */
body.page-id-107195 #app section:has(.youtube-standard) h3 {
    margin: 0 0 24px !important;
    font-family: "Kurdis", "Kurdis Wide", Inter, sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 46px !important;
    letter-spacing: 0.64px !important;
    color: #0b1b45 !important;
}

/* Body — Inter 18/28, Dark Blue. */
body.page-id-107195 #app section:has(.youtube-standard) .col-lg-6 p {
    margin: 0 !important;
    font-family: Inter, sans-serif !important;
    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 28px !important;
    color: #0b1b45 !important;
}

/* The legacy orange rule under the headings. Figma has none anywhere on the
   page, and the heading widget no longer emits its line-color-* class once a
   display class is set — this covers the generic ::after regardless. */
body.page-id-107195 #app h1::after,
body.page-id-107195 #app h2::after,
body.page-id-107195 #app h3::after {
    display: none !important;
    content: none !important;
}

/* 3.0 Column split.
   Figma divides the row 540 video / 144 gutter / 640 text at a 1440 viewport,
   not the 50/50 that two col-lg-6 produce. That is the same 6 / gutter / 5
   split every other redesign Text-Media section carries as
   `col-lg-6 col-xl-5 offset-xl-1` (measured on /de/ki/: 645 text, 142.5 gutter,
   532.5 media).

   It is expressed here as proportions rather than by adding those utility
   classes to the markup because `offset-xl-1` resolves to margin-LEFT, which
   lands on the wrong side of the rows that 3.1 reverses. Letting
   space-between own the gutter is direction-agnostic, so both alternation
   states get the identical geometry.

   Applied from xl up, matching where the utility pair itself changes the split;
   below that the row stays 50/50, as it does on every other redesign page. */
@media (min-width: 1200px) {
    body.page-id-107195 #app section:has(.youtube-standard) .row.d-flex {
        justify-content: space-between;
    }

    /* The video column is always FIRST in the markup — the alternation is done
       by reversing the flex direction, never by reordering the source — so
       :first-child is the video on every section, reversed or not. */
    body.page-id-107195 #app section:has(.youtube-standard) .row.d-flex > [class*="col-"]:first-child {
        flex: 0 0 41.6667%;
        max-width: 41.6667%;
    }

    body.page-id-107195 #app section:has(.youtube-standard) .row.d-flex > [class*="col-"]:last-child {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/* 3.1 Alternating media side.
   The markup always renders the video column first; Figma alternates. Applied
   only from the lg breakpoint up, where the row is a horizontal flex row —
   below it the row is flex-column-reverse and the stacking order (overline,
   headline, body, CTA, then video) is already what the design wants, and must
   stay identical on every section. */
@media (min-width: 992px) {
    body.page-id-107195 #app section:has(#anchor-jtl-eazyauction) .row.d-flex,
    body.page-id-107195 #app section:has(#anchor-jtl-shop) .row.d-flex,
    body.page-id-107195 #app section:has(#anchor-jtl-pos) .row.d-flex,
    body.page-id-107195 #app section:has(#anchor-jtl-wms) .row.d-flex {
        flex-direction: row-reverse !important;
    }
}

/* 3.2 Video thumbnail — the theme already rounds it to 24px; only the legacy
   pale-blue letterbox behind a not-yet-loaded poster needs to go sand. */
body.page-id-107195 #app .youtube-standard.bg-secondary {
    background-color: #eeeee7 !important;
}

/* 3.3 CTA spacing only — appearance belongs to the button widget's stylesheet.
   Figma leaves 56px between the last line of body copy and the top of the pill.
   The wrapper is 8px taller than the pill it holds and centres it, so 4px of
   that sits above the pill and the margin supplies the remaining 52px. */
body.page-id-107195 #app section:has(.youtube-standard) .btn-wrapper {
    margin-top: 52px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. Responsive
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    body.page-id-107195 #app section:has(> .container h1) {
        padding: 32px 0 48px !important;
    }

    body.page-id-107195 #app section:has(> .container h1) h1 {
        font-size: 32px !important;
        line-height: 42px !important;
        margin-bottom: 24px !important;
    }

    body.page-id-107195 #app section:has(> .container h1) .col-lg-6:first-child p {
        font-size: 18px !important;
        line-height: 26px !important;
    }

    body.page-id-107195 #app section:has(.youtube-standard) {
        padding: 48px 0 !important;
    }

    body.page-id-107195 #app section:has(.youtube-standard) h3 {
        font-size: 26px !important;
        line-height: 34px !important;
        margin-bottom: 16px !important;
    }

    body.page-id-107195 #app section:has(.youtube-standard) .col-lg-6 p {
        font-size: 16px !important;
        line-height: 24px !important;
    }

    body.page-id-107195 #app .is-section-overline {
        font-size: 16px !important;
        line-height: 22px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. Product row — fixed card geometry (Figma "Text-Media-Desktop 1440",
   node 3610-25430)

   The product "Text-Media" row matches the design frame exactly: a 1300.6-wide
   box, min 536.48 tall, inset 57.8 side / 75.87 top / 72.26 bottom, with a
   130.06 gutter between the video and the copy. This supersedes the proportional
   6/gutter/5 split in section 3.0. The video display sits at a fixed
   487.73 x 274.35 (16:9) with 24px rounded corners; the copy column takes the
   remaining width.

   Comes after section 3.0 on purpose so it overrides that split. Same body-class
   scope (page-id-107195) covers both language twins, and it targets every
   product row (each shares .row.d-flex), not just one section. Desktop only —
   below the split breakpoint the rows stay responsive and stack.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
    body.page-id-107195 #app section:has(.youtube-standard) .row.d-flex {
        max-width: 1300.6px !important;
        min-height: 536.48px !important;
        margin: 0 auto !important;
        padding: 75.87px 57.8px 72.26px !important;
        gap: 130.06px !important;
        /* Top-align the video with the copy column so its top edge is level
           with the section overline/heading, rather than optically centred
           against the taller text column. */
        align-items: flex-start !important;
        flex-wrap: nowrap !important;
        box-sizing: border-box !important;
    }

    /* Video column — fixed to the design width; the video display then fills it
       at 16:9. Overrides the 41.67% from section 3.0. The video is always the
       first column in the markup (reversed sections flip direction, not order). */
    body.page-id-107195 #app section:has(.youtube-standard) .row.d-flex > [class*="col-"]:first-child {
        flex: 0 0 487.73px !important;
        max-width: 487.73px !important;
        padding: 0 !important;
    }

    /* Copy column — takes the remaining width beside the fixed video. */
    body.page-id-107195 #app section:has(.youtube-standard) .row.d-flex > [class*="col-"]:last-child {
        flex: 1 1 auto !important;
        max-width: none !important;
        padding: 0 !important;
    }

    /* Video display — 487.73 x 274.35, 24px radius. The column width already
       gives the 487.73; the 16:9 embed box supplies the height. Radius + clip
       are asserted so the poster and any letterbox stay inside the rounded box. */
    body.page-id-107195 #app section:has(.youtube-standard) .row.d-flex .youtube-standard {
        width: 487.73px !important;
        height: 274.35px !important;
        /* The embed box makes its height from padding-bottom: 56.25%; zero it so
           the explicit height is the box height instead of stacking on top of it. */
        padding-bottom: 0 !important;
        border-radius: 24px !important;
        overflow: hidden !important;
        flex: none !important;
    }
}