/* Home page only (views/pages/home.ejs), loaded after bundle.min.css.

   Hero (FR-165). The theme lays the hero out in a block of fixed height
   (.main-search-container.plain-color: 635px, 700px at max-width 991px)
   and places its parts inside it as if their heights were known. They are
   not: they depend on the language and on line wraps. Here the hero is laid
   out in flow, and the block grows with its content. There are two layouts:
   the theme switches them at max-width 992px.

   Desktop (wider than 992px): .main-search-inner was centred with
   top: 50% + translate(0, -50%). The home hero is taller than the block:
   ~715px in English and ~770px in Spanish at 993-1279px, where the text
   wraps more. So it spilled out evenly above and below the block: the
   "Findpet ID" h1 went under the header, the app badges onto the next
   section. Now the content can no longer start above the block's top. With
   today's texts the content is always the taller one, so the block is
   exactly as tall as the text column, and the column starts at the top,
   level with the photo slider (absolutely positioned at top 15-20px). Flex
   centring with the theme's height as min-height only matters for content
   shorter than that: it is then centred as before. "not all and" is the
   exact complement of the theme's query, so no fractional width falls
   between the two layouts. */
@media not all and (max-width: 992px) {
	.main-search-container.plain-color {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height: auto;
		min-height: 635px;
	}
	.main-search-container.plain-color .main-search-inner {
		top: 0;
		transform: none;
	}
}

/* Phone and tablet (992px and narrower): the desktop hero is hidden, and
   the theme shows the photo slider and below it .under-banner-mob-btns
   (microchip search, buttons, app badges). Both were absolutely positioned:
   the slider from the top, the buttons block from the bottom with
   margin-bottom: -120px, and #how2work got margin-top: 180px to make room
   for the overhang. The buttons block is 310-356px tall, depending on the
   language and on whether the buttons wrap, so its top crept up 15-80px
   into the slider: the slider's dots (bottom: -25px, below the photo) were
   under the search field. Now the slider and the buttons block follow each
   other in flow. 45px under the slider = the dots' 25px + a 20px gap
   (js_autotests home-hero.spec.js checks the dots stay whole and above the
   buttons). The next section keeps its 60px gap (180 - 120). */
@media (max-width: 992px) {
	.main-search-container.plain-color {
		height: auto;
	}
	.main-search-container.plain-color .msps-container {
		position: relative;
		height: auto;
		padding-bottom: 45px;
	}
	/* the theme's top: 20px as a margin, so it pushes what follows; the
	   theme's centring (left: 50%; margin-left: -160px) stays: unlike auto
	   margins it also centres the 320px slider on screens narrower than that */
	.main-search-container.plain-color .main-search-photo-slider {
		position: relative;
		top: auto;
		margin-top: 20px;
	}
	.main-search-container.plain-color .under-banner-mob-btns {
		position: relative;
		bottom: auto;
		margin-bottom: 0;
	}
	/* the theme's #how2work { margin-top: 180px !important } at the same width;
	   "~", not "+": something rendered in between must not bring the 180px back */
	.main-search-container.plain-color ~ #how2work {
		margin-top: 60px !important;
	}
}

/* Both layouts: the hero now takes its content height, so an image that
   arrives late would push the rest of the page down (layout shift). The
   AAHA badge and the app QR code carry width/height in home.ejs, so their
   space is reserved before they load; height: auto keeps their proportions
   where the theme's img { max-width: 100% } makes them narrower (the badge is
   35px wide on a 300px phone). */
.main-search-container.plain-color .microchip-lookup img,
.main-search-container.plain-color img.hero-qr {
	height: auto;
}