/**
 * Layout fixes for medium viewports (roughly 636px–1380px).
 *
 * Loaded after main.min.css, which is linked directly in header.php.
 *
 * Three problems, all specific to widths below the 1380px breakpoint:
 *
 *  1. The hero banner has a hard `height` while its content wrapper is
 *     absolutely positioned, so the copy could not push the box taller and
 *     was clipped by the search card that overlaps the banner.
 *  2. In the advantages section the text column and the image column add up
 *     to exactly 100%, leaving no gutter, so the list text touched the image.
 *  3. Only 40px separated the search card from the full-bleed gradient of
 *     the directions section, which reads as the two blocks colliding.
 */

/* ---------------------------------------------------------------------------
 * 1. Hero banner: let the box grow with its content.
 *
 * main.min.css sets `.front-sec__banner-sec { height: 405px }` and makes
 * `.front-sec__banner-sec-wrapepr` absolute, so a title that wraps onto an
 * extra line (or a wrapped advantages row) overflowed and was cut off.
 * Putting the wrapper back into normal flow and absolutely positioning the
 * background image instead means the banner is at least as tall as its
 * content. `min-height` keeps the original proportions when the copy fits.
 * ------------------------------------------------------------------------- */
@media only screen and (max-width: 1380px) {
	.front-sec__banner-sec {
		height: auto;
		min-height: 405px;
	}

	.front-sec__banner-sec-wrapepr {
		position: relative;
		height: auto;
	}

	.front-sec__bg {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
}

/* Keep the shorter banner these widths already used. */
@media only screen and (max-width: 635px) {
	.front-sec__banner-sec {
		min-height: 360px;
	}
}

/* The search card is pulled up over the banner by 35px, but the banner's own
   bottom padding is only 35px, so the last line of copy ended up flush against
   the card. Reserve room for the overlap. */
@media only screen and (min-width: 769px) and (max-width: 1380px) {
	.front-sec__banner-sec-wrapepr {
		padding-bottom: 80px;
	}
}

/* Same overlap at 636–768px, where main.min.css leaves only 45px of padding
   against a 35px pull-up. Below 636px the advantages row is hidden and the
   existing 80px padding is already enough. */
@media only screen and (min-width: 636px) and (max-width: 768px) {
	.front-sec__banner-sec-wrapepr {
		padding-bottom: 70px;
	}
}

/* The down-search variant keeps its own fixed wrapper height in main.min.css;
   allow it to grow as well rather than clip. */
@media only screen and (max-width: 1380px) {
	.down-search-sec .front-sec__banner-sec-wrapepr {
		height: auto;
		min-height: 405px;
	}
}

/* ---------------------------------------------------------------------------
 * 2. Advantages section: add the missing gutter between text and image.
 *
 * `.advantages-sec__info` is `calc(100% - 435px)` and `.advantages-sec__images`
 * is `435px`, so the columns met with no gap. box-sizing is border-box
 * globally, so padding here shrinks the text rather than widening the column.
 * ------------------------------------------------------------------------- */
@media only screen and (min-width: 769px) and (max-width: 1380px) {
	.advantages-sec__info {
		padding-right: 40px;
	}
}

/* Below 769px the two columns stack, so the gutter has to go away again. */
@media only screen and (max-width: 768px) {
	.advantages-sec__info {
		padding-right: 0;
	}
}

/* ---------------------------------------------------------------------------
 * 3. Put the gap back between stacked route cards.
 *
 * `.direction-element` has `margin-bottom: 20px` above 1380px and `16px`
 * below 768px, but the 1380px block resets it to 0. In between the cards
 * stack edge to edge, so their 30px rounded corners notch against each
 * other and the column reads as broken spacing rather than separate cards.
 * ------------------------------------------------------------------------- */
@media only screen and (min-width: 769px) and (max-width: 1380px) {
	.direction-element {
		margin-bottom: 20px;
	}

	/* The trailing margin would otherwise add a stray 20px to the column. */
	.direction-sec__direction .direction-element:last-child,
	.direction-sec__direction-archive .direction-element:last-child {
		margin-bottom: 0;
	}
}

/* ---------------------------------------------------------------------------
 * 4. Let the promo card follow the scroll instead of leaving a void.
 *
 * The promo is 376px tall next to a much longer card column, leaving ~454px
 * of empty gradient at 1320px. main.min.css already applies exactly this
 * treatment to `.delivery-price-sec .direction-sec__sale`, so this reuses
 * that pattern for the other direction sections.
 *
 * `position: relative` on the container gives the sticky element a
 * containing block, so it stops travelling at the end of the column.
 * ------------------------------------------------------------------------- */
@media only screen and (min-width: 769px) and (max-width: 1380px) {
	/* A global `section { overflow: hidden }` makes the section a non-scrolling
	   scrollport, which silently disables sticky inside it. (The theme's own
	   sticky rule for .delivery-price-sec has never taken effect for this
	   reason.) Nothing in this section overflows horizontally at these widths
	   -- the inset .direction-sec__bg is display:none below 1380px -- so the
	   clipping is not needed here. */
	.direction-sec,
	.delivery-price-sec {
		overflow: visible;
	}

	.direction-sec__container {
		position: relative;
	}

	.direction-sec__sale {
		position: -webkit-sticky;
		position: sticky;
		top: 100px;
	}
}

/* ---------------------------------------------------------------------------
 * 5. Separate the search card from the full-bleed directions gradient.
 *
 * Scoped to min-width 769px so the existing mobile paddings (86px at 768px,
 * 80px at 635px) are left untouched.
 * ------------------------------------------------------------------------- */
@media only screen and (min-width: 769px) and (max-width: 1380px) {
	.front-sec {
		padding-bottom: 72px;
	}
}