/* =========================================================================
   BuyTides — sitewide responsive layer
   =========================================================================

   Loads after every page stylesheet (inc/responsive.php enqueues it at
   priority 100, on wp-login.php too, and /login/ links it after its inline
   <style>), so equal-specificity rules here win.

   Two jobs:

   1. Large screens. Every template is designed against a ~1920px viewport
      and laid out in fixed px, so on a 1440p, ultrawide or 4K screen the
      layout stopped growing and sat as a small island in empty space. Past
      2100px the whole page is zoomed so it renders as a proportional copy of
      the ~1920 x 1000 layout. The factor is the smaller of a width band and a
      height band: a 3440 x 1440 ultrawide gets 1.25, not 1.75, so the header
      does not eat a third of a short screen.

   2. Small screens. Fixes for the few places a column would not shrink
      below its content at 300-320px.

   Browsers without `zoom` (Firefox before 126) skip section 1 entirely and
   render the unscaled layout, which is what they did before. */


/* -------------------------------------------------------------------------
   1. Large-screen scaling
   ------------------------------------------------------------------------- */

@supports (zoom: 1) {
	:root {
		--bt-zw: 1;
		--bt-zh: 1;
		--bt-zoom: min(var(--bt-zw), var(--bt-zh));
	}

	/* Width bands keep the effective layout width between ~1900 and ~2200. */
	@media (min-width: 2100px) { :root { --bt-zw: 1.1; } }
	@media (min-width: 2400px) { :root { --bt-zw: 1.25; } }
	@media (min-width: 2700px) { :root { --bt-zw: 1.4; } }
	@media (min-width: 3000px) { :root { --bt-zw: 1.55; } }
	@media (min-width: 3400px) { :root { --bt-zw: 1.75; } }
	@media (min-width: 3800px) { :root { --bt-zw: 2; } }
	@media (min-width: 4600px) { :root { --bt-zw: 2.4; } }
	@media (min-width: 5100px) { :root { --bt-zw: 2.65; } }

	/* Height bands keep the effective viewport height around 1000px, which is
	   what a maximised browser on a 1080p screen shows. */
	@media (min-height: 1150px) { :root { --bt-zh: 1.1; } }
	@media (min-height: 1250px) { :root { --bt-zh: 1.25; } }
	@media (min-height: 1400px) { :root { --bt-zh: 1.4; } }
	@media (min-height: 1550px) { :root { --bt-zh: 1.55; } }
	@media (min-height: 1750px) { :root { --bt-zh: 1.75; } }
	@media (min-height: 1950px) { :root { --bt-zh: 2; } }
	@media (min-height: 2350px) { :root { --bt-zh: 2.4; } }
	@media (min-height: 2600px) { :root { --bt-zh: 2.65; } }

	@media (min-width: 2100px) {
		html {
			zoom: var(--bt-zoom);
		}

		/* Zoom multiplies viewport units too: a 100vh box inside a 1.25x page
		   renders 125% of the screen tall. Everything that sizes itself off
		   the viewport is divided back down here. */

		.bt-drawer {
			height: calc(100vh / var(--bt-zoom));
			height: calc(100dvh / var(--bt-zoom));
		}

		.af-reg,
		.wh-reg {
			min-height: calc(100vh / var(--bt-zoom));
			min-height: calc(100dvh / var(--bt-zoom));
		}

		.af-reg__aside,
		.wh-reg__aside {
			height: calc(100vh / var(--bt-zoom));
			height: calc(100dvh / var(--bt-zoom));
		}

		.bt-modal__panel,
		.rc-modal__card {
			max-height: calc(100vh / var(--bt-zoom) - 40px);
		}

		.bta-form_wrapper form.bta-paned > .gform-body > .gform_page.bta-paned {
			min-height: min(580px, calc(74vh / var(--bt-zoom)));
		}

		#lfw_point_convert_to_coupon_modal.bt-rw__modal .lfw_modal_content {
			margin-top: calc(8vh / var(--bt-zoom));
		}

		body.login,
		.lg-grid {
			min-height: calc(100vh / var(--bt-zoom));
		}
	}
}


/* -------------------------------------------------------------------------
   2. Small screens
   ------------------------------------------------------------------------- */

/* /login/: the single `1fr` column resolves to minmax(auto, 1fr), so it
   never shrinks below the form's min-content and ran 17px past a 300px
   screen. minmax(0, 1fr) lets it track the viewport; the remember/forgot
   row wraps rather than pushing out. */
@media (max-width: 700px) {
	.lg-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.lg-pane,
	.lg-inner {
		min-width: 0;
	}

	.lg-row {
		flex-wrap: wrap;
		row-gap: 10px;
	}

	/* Affiliate and wholesale registration: on a phone the aside turns
	   position: static, so its decorative ::after (absolute, right: -90px)
	   took the viewport as its containing block and pushed the page 90px
	   wide. Re-anchor it to the aside and clip it there. */
	.af-reg__aside,
	.wh-reg__aside {
		position: relative;
		overflow-x: clip;
	}
}