/**
 * qa17-partner-suchen-search-hero.css
 * Batch #17 · Task 1 — partner-finder (both twins, structural selectors, env-agnostic):
 *   DE  /de/partner-suchen   (body.page-id-234980)  #technologiepartner + #steuerberater
 *   EN  /en/find-a-partner   (body.page-id-263117)  #technology-partners + #tax-consultants
 *
 * ── (A) Search bar not aligned with the filter row; must sit on the same
 *        baseline AND be equal to the filter fields. ─────────────────────────
 * The Search & Filter form row is a flex-wrap grid (custom-clone.css:8847). Each
 * taxonomy `<li>` renders an <h4> label ABOVE its 47px control (QA batch #12 made
 * those labels visible again), so a filter `<li>` is ~72px tall and carries a 16px
 * `margin-bottom`. The `sf-field-search` `<li>` has NO label — it is only the 47px
 * control — and custom-clone.css:7066-7069 (a JP-457 fix for the OLD label-hidden
 * layout) zeroes its `margin-bottom`. The row is bottom-aligned
 * (`align-items:flex-end`, error-batch16-partner-filter-align.css), which lines up
 * the flex items' MARGIN-box bottoms — so the filters' visible control ends 16px
 * ABOVE the line-box bottom (their margin sits below it) while the margin-less
 * search control ends AT the line-box bottom, i.e. 16px LOWER than its row-mates.
 * Measured on the Steuerberater tab (search shares the wrapped 2nd row with the
 * "Land"/tag_3 dropdown): tag_3 control bottom = 871, search control bottom = 887.
 *
 * Fix: give the search `<li>` the SAME 16px `margin-bottom` as the filter `<li>`s,
 * so flex-end lines up the *controls* (both then end 16px above the line box). The
 * search field is already the same 304px width (calc(25% − 24px)) and the same 47px
 * pill as the dropdowns, so this makes it fully equal to — and level with — the
 * filters on every tab, both languages. Overrides custom-clone.css:7068 (same
 * specificity, later source order via the overrides loader → needs no !important,
 * but app.css sets this `!important` so we match it).
 *
 * ── (B) Hero image renders a different size on /de/ vs /en/. ─────────────────
 * Both pages render the same `.partner-search-hero__image` half-column with the
 * same `[ImageStandard image="327009"]` (attachment 805×760) — but the markup is
 * NOT identical: the DE page (234980) carries a WPBakery per-page Custom CSS block
 * (`_wpb_post_custom_css`, emitted as `<style data-type="vc_custom-css">` in <head>)
 * containing
 *     .partner-search-hero__image picture img { max-height: 390px; width: auto; }
 * and the EN page (263117) does not. Verified on PROD, not just the clone:
 *   www.jtl-software.com/de/partner-suchen   -> rule present (1 hit)
 *   www.jtl-software.com/en/find-a-partner/  -> rule absent  (0 hits)
 * So DE clamps the hero to 390px tall (≈413×390 at width:auto) while EN is
 * unclamped and fills the column (660×623). That is exactly the size mismatch the
 * ticket reports.
 *
 * The 390px clamp is the DELIBERATE design on the German page (it has shipped that
 * way); the English page is the one missing it. So the fix is to replicate DE's
 * intent on BOTH page-ids rather than invent a third size — the client then sees
 * one identical hero on both languages.
 *
 * NB: do NOT force `width:100%` here. Combined with the surviving `max-height:390px`
 * it letterboxes the DE hero into a 660×390 box (transparent gutters left/right).
 * `width:auto` + `max-height` is what actually reproduces the DE rendering.
 * We restate `max-height` explicitly so the EN page (which has no vc_custom-css
 * block of its own) gets the same clamp.
 *
 * Scope: `section.partner-search-tabs` + `.partner-search-hero__image` exist ONLY
 * on the two partner-finder pages, so nothing else is touched. Per rule 18 the fix
 * is applied to BOTH languages.
 */

/* (A) search field aligns with the filter controls on every tab -------------- */
section.partner-search-tabs .partner-tabs-widget__content-item form.searchandfilter > ul > li.sf-field-search {
    margin-bottom: 16px !important;
}

/* (B) hero image — identical fixed rendering on both /de/ and /en/ ------------ */
body:is(.page-id-234980, .page-id-263117) .partner-search-hero__image picture img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 390px !important;
}
