/* Webinare "On-Demand" accordion — CTA wrapper LAYOUT only.
 *
 * The CTA is the reusable Primary button widget, which owns its entire
 * appearance (fill, label, radius, hover). Nothing in this file may set fill,
 * border, colour, shadow or hover — only where the button sits.
 *
 * WHY THE WRAPPER WAS RENAMED OUT OF `.btn-wrapper`
 * The compiled theme sheet styles `.webinare-rebuild-filter .btn-wrapper a` with
 * the legacy grey outline chrome the old bordered link used: 10px radius, an
 * inset #333 ring, font-weight 700, a fixed 50px height, and a
 * `background: #333 !important` hover. That selector outranks the button
 * widget's, so any reusable button placed in a `.btn-wrapper` here gets
 * repainted and its hover turns grey. The compiled sheet has no source in this
 * repo and its build output is not deployed from here, so the competing rule
 * cannot be edited away — the button is moved out of its reach instead. That
 * leaves the widget as the single owner of the button's look, with no second
 * copy of that look anywhere.
 *
 * WHY THE DECLARATIONS BELOW LOOK REDUNDANT
 * `.webinare-rebuild-filter .accordion-body .row div:not(.btn-wrapper)` force-
 * stacks every other div in the accordion body: `flex: 0 0 100% !important;
 * max-width: 100% !important; padding: 0 !important; margin: 0 !important`,
 * plus body-text colour/size/line-height. Leaving `.btn-wrapper` opts this
 * wrapper INTO that rule, so its geometry has to be restated here.
 *
 * The hook class is REPEATED on purpose: that makes this selector (0,5,1) against
 * the legacy rule's (0,4,1), so it wins outright. Writing it once would only TIE
 * at (0,4,1), and a tie is broken by source order — which nothing here
 * guarantees: `overrides/*.css` is enqueued with a dependency on
 * `custom-clone.css` and none on `app`, so the compiled sheet can print after it
 * and take the tie (`includes/general.php` adds an explicit `app` dependency
 * exactly where a sheet needs to beat it, which only makes sense because the
 * default is the other way round). Out-specifying removes the question entirely.
 * `!important` is still required on the four properties the legacy rule marks
 * `!important` — importance is settled before specificity — and the rest win on
 * specificity alone.
 *
 * The values reproduce what `.btn-wrapper` plus its
 * webinare-filter override produced before, so spacing and alignment are
 * unchanged: 32px vertical padding, 32px gap, and `row-reverse` + `flex-end`.
 *
 * That pair is not redundant and neither half can be dropped. `row-reverse` runs
 * the main axis right-to-left, so `flex-end` resolves to the LEFT edge — the
 * button sits left, and a second button would sit to its right in source order
 * reversed. Keeping only `justify-content: flex-end` silently moves the button to
 * the right-hand edge. (It also means the template's `justify-content-start` /
 * `justify-content-md-end` utilities were inert here long before this change —
 * the webinare-filter rule overrode them at every breakpoint.)
 *
 * `line-height` is set because the button's label inherits it: the legacy rule
 * hands down 22px, which renders the pill 46px tall instead of the 24px/48px the
 * button is specified at. This is the wrapper's inherited context, not the
 * button's own typography — the widget still owns font, size, weight, spacing.
 *
 * Both language twins share the on-demand item template, so
 * /de/hilfecenter/webinare/ and /en/help-center/webinars/ get the same hook.
 */
.webinare-rebuild-filter .accordion-body .row div.webinare-ondemand-cta.webinare-ondemand-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 32px;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    padding: 32px 0 !important;
    margin: 0 !important;
    line-height: 24px;
}