/**
 * Lemorau Site - presentation fixes from the client's feedback of 26/08 (WP-32).
 *
 * Rules live here rather than in the widgets that own them because a page is four
 * Elementor documents that share element ids without sharing settings: one rule
 * reaches all four. The cost is that rebuilding a widget changes its id and
 * silently stops the rule -- which shows up immediately, so it fails safely.
 */

/* The MEBR+ banner shows only on the "All" tab. The filter's markup carries the
   state and Elementor moves aria-pressed on click, so this covers both a fresh load
   and an AJAX re-render. Matched on data-filter, not position: "All" is rendered
   last and shown first. */
body:has( .elementor-element-888f5f3 .e-filter-item[aria-pressed="true"]:not( [data-filter="__all"] ) )
	.elementor-element-6199b55 {
	display: none;
}

/* An event's artwork is a fair's logo, not a photograph, and this band is 3.52:1
   with `cover`: a 601x525 logo came out upscaled 2.4x and cropped to 39% of its
   height. The client's word for it was "desconfigurada e cortada".
 *
 * Scoped to events because the same section shows a photograph on About Us, where
 * `cover` is right. !important because Elementor's own selector is (0,4,0), and all
 * three properties are needed: it sets the image through the `background` shorthand,
 * which resets colour and repeat in the same declaration. */
body.single-lemorau_event .elementor-element-b178c36 {
	background-size: contain !important;
	background-repeat: no-repeat !important;
	background-color: #fff !important;
}

/* And the band's "find out more" goes with it on events: it is a jump to #content,
   which on an event sits 620px down and needs no jump, and once the logo is drawn
   whole instead of cropped the button lands on top of the wide ones. The link to the
   fair itself is a separate button, further down the page. */
body.single-lemorau_event .elementor-element-6e5e7bf {
	display: none;
}

/* The same band on the events listing carries the countries map, and the band's
   height is in vh against the full viewport width, so its ratio moves with the
   device: 3.52:1 on a laptop, 1.88:1 on a tablet, 1.03:1 on a phone. `cover`
   scales until it covers, which leaves 57% of the artwork on a tablet and 31% on
   a phone -- two thirds of it off the screen.
 *
 * `contain` alone does not answer that, because the file is not the map: the map
 * occupies 1086x606 of a 2560x784 canvas, 42% of its width and off to the left,
 * and the empty right-hand side is where the gradient paints the title block on
 * desktop. Fitting that whole canvas into the band draws the map at 42% of the
 * screen -- smaller than the crop it was meant to fix. So below the desktop
 * breakpoint the band takes a cropped copy of the same artwork, which fills the
 * width it is given.
 *
 * The crop lives beside this file rather than in the media library. It exists only
 * to serve this rule, it is derived from the client's artwork rather than theirs to
 * manage, and a relative URL cannot drift between environments or 404 in silence
 * the way a hand-written uploads path can -- uploads are not versioned, so a fresh
 * checkout would not have had the file at all.
 *
 * How it was made, since nothing else records it: cut from the map's `.ai`, 1341x796,
 * reduced to a 32-colour palette with the near-whites snapped to pure white and that
 * index declared transparent. 238 KB down to 53, with no visible difference. The
 * transparency is what lets it sit on the band without drawing a rectangle of its
 * own; GD drops the alpha channel on quantisation, so it has to be put back
 * deliberately or the background comes out a near-white that shows.
 *
 * Above 1025px nothing changes. There the band is close to the canvas's own ratio,
 * `cover` barely crops, and that composition is deliberate.
 *
 * The white is the one the gradient already paints over the title block beside it,
 * and the crop's own background, so the fit reads as one surface. !important and
 * all four properties for the same reasons as the rule above: Elementor's selector
 * is (0,4,0), and it paints through the `background` shorthand, which resets the
 * image, the colour and the repeat in one declaration. */
@media (max-width: 1024px) {
	body.lemorau-page-events .elementor-element-b178c36 {
		background-image: url("lemorau-events-map.png") !important;
		/* Declared rather than inherited. Elementor paints this band through the
		   `background` shorthand, which carries `50% 50%`; replacing only the image
		   longhand leaves that position standing, so the crop happens to land
		   centred. Happens to is not a reason -- with a 1.73:1 crop inside a band
		   that goes to 1.03:1 on a phone, the vertical position is the difference
		   between a centred map and one stuck to the top. */
		background-position: center center !important;
		background-size: contain !important;
		background-repeat: no-repeat !important;
		background-color: #fff !important;
	}
}