/* ---------------------------------------------------------------------------
   Skinsavvy Essentials — landing page
   Background photo (scrimmed) + foreground "Taking a Little Breather" card.
   Pure HTML + CSS, no JavaScript.
   --------------------------------------------------------------------------- */

:root {
	/* Layout */
	--hero-padding-x: 50px;
	--hero-padding-y: 50px;
	--content-max-width: 1140px;

	/* Background */
	--hero-background: url("images/background.jpg");
	--hero-overlay-opacity: 0.5;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html,
body {
	height: 100%;
}

body {
	margin: 0;
	background-color: #000;
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	padding: 0 var(--hero-padding-x);

	background-image: var(--hero-background);
	background-size: cover;
	background-position: 0 0;
	background-repeat: no-repeat;
}

/* 50% black scrim over the background photo (mirrors the original overlay) */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: #000;
	opacity: var(--hero-overlay-opacity);
	pointer-events: none;
}

/* --- Foreground card ----------------------------------------------------- */

.hero__inner {
	position: relative;
	z-index: 1;

	flex: 1;
	width: 100%;
	max-width: var(--content-max-width);
	margin: 0 auto;
	padding: var(--hero-padding-y) 0;

	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.hero__card {
	display: block;
	height: 85vh;
	width: auto;
	max-width: 100%;
	object-fit: contain;
	object-position: center center;
}

/* --- Small screens ------------------------------------------------------- */

/* Uses the dynamic viewport on mobile so the hero is never taller than the
   visible area when browser chrome collapses. Remove if you want the exact
   100vh behaviour of the original site. */
@supports (height: 100dvh) {
	.hero {
		min-height: 100dvh;
	}
}