/**
 * AiProp - Single Listing Cover Slider: phone sizing.
 *
 * THE PROBLEM (measured on the live site, listing 2222, 390x844 viewport)
 * ---------------------------------------------------------------------
 * The theme styles each slide photo like this:
 *
 *     .single-job_listing-cover-gallery img {
 *       display:block; float:left; min-height:100%; width:auto;
 *     }
 *
 * width:auto means the photo renders at its NATURAL width (450px or 800px),
 * so its height is the natural height as well (600px). The cover band that
 * contains it gets its height from padding only (.listing-cover has
 * padding:5em 0 3em -> 80px + 48px, plus 179px of content = 307px) and hides
 * the rest with overflow:hidden. Net result on a 390px phone:
 *
 *     slide width 450px  >  viewport 390px   (horizontal overflow)
 *     photo height 600px >  band 307px       (about 51% of the photo visible)
 *
 * Slick is initialised with variableWidth + centerMode, so it takes each
 * slide's width from the photo's natural width and writes it as an INLINE
 * style on the slide. An inline width can only be beaten with !important,
 * which is why the slide rule below carries it.
 *
 * THE FIX
 * -------
 * On small screens, size the slide and its photo to the viewport, and give
 * the band enough height for a portrait photo at full width (3:4 -> 133.33vw).
 *
 *     a 390px viewport  ->  520px band, photo 100% visible, no h-overflow
 *     a 430px viewport  ->  573px band, photo 100% visible
 *     a 360px viewport  ->  480px band, photo 100% visible
 *
 * Photos that are already 3:4 portrait (the common case on this site) are
 * shown COMPLETE. Landscape photos (e.g. 800x600) fill the frame with
 * object-fit:cover and are cropped horizontally - that is inherent to asking
 * for both full width and full height; letterboxing them instead would look
 * unfinished against a photo band.
 *
 * SCOPE
 * -----
 * Everything is inside the breakpoint media query, so tablets and desktop
 * keep the layout that was already signed off. The band's height is capped
 * with min() so a wide "phone" viewport cannot produce a hero taller than the
 * screen. The bare 133.33vw line precedes it as a fallback for browsers
 * without min()/svh support.
 *
 * No theme file is touched: this loads as a separate stylesheet, so a theme
 * update cannot wipe it.
 */

@media (max-width: 767px) {

	/* 1. Room for a portrait photo at full width (3:4 => 133.33vw). */
	.listing-cover.content-single-job_listing-hero {
		min-height: 133.33vw !important;
		min-height: min(133.33vw, 90svh) !important;
	}

	/* 2. One slide == one viewport width.
	   !important is required: slick writes the slide width as an inline
	   style, derived from the photo's natural width (450px/800px). */
	.single-job_listing-cover-gallery .slick-slide {
		width: 100vw !important;
	}

	/* 3. The photo fills the slide instead of rendering at its natural size
	   and being clipped by the band. */
	.single-job_listing-cover-gallery .slick-slide img {
		width: 100% !important;
		height: 100% !important;
		min-height: 0 !important;      /* theme sets min-height:100% */
		max-width: none !important;    /* theme sets max-width via woo rules */
		object-fit: cover !important;
		object-position: center center !important;
		float: none !important;        /* theme floats the img */
	}
}