/* ==========================================================================
   Luke Vasi Media — one-page portfolio
   Full-bleed rebuild of the client's Canva spec: the whole canvas scales to
   fill the viewport (left-aligned headlines, edge-to-edge media).
   ========================================================================== */

:root {
	--lvm-blue: #005edf;
	--lvm-blue-dark: #004aad;
	--lvm-navy: #0d356b;
	--lvm-gap: clamp(10px, 1vw, 18px);
	--lvm-pad-x: clamp(20px, 5.5vw, 120px);
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: #fff;
	color: #000;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img,
video {
	display: block;
	max-width: 100%;
}

/* Colour bands meet flush — strip the default block-gap so no white lines
   show through between full-width sections. */
.lvm-header,
.lvm-hero-wrap,
.lvm-section,
.lvm-footer {
	margin-top: 0;
	margin-bottom: 0;
}

/* Full-width sections — content spans the screen with a responsive side gutter */
.lvm-section {
	padding: clamp(40px, 6vw, 96px) var(--lvm-pad-x);
}

.lvm-section > * {
	max-width: none;
}

/* --------------------------------------------------------------------------
   Header — single left-aligned line
   -------------------------------------------------------------------------- */
.lvm-header {
	padding-top: clamp(22px, 3vw, 48px);
	padding-bottom: clamp(22px, 3vw, 48px);
}

.lvm-headline {
	font-family: var(--wp--preset--font-family--brand);
	font-weight: 400;
	font-size: clamp(1.25rem, 2.5vw, 3rem);
	line-height: 1.1;
	letter-spacing: 0.01em;
	margin: 0;
	color: #000;
}

.lvm-headline strong {
	font-weight: 800;
}

.lvm-headline .lvm-year {
	margin-left: 2.2em;
}

/* --------------------------------------------------------------------------
   Hero — full-bleed video, edge to edge
   -------------------------------------------------------------------------- */
.lvm-hero-wrap {
	padding: 0;
}

.lvm-hero {
	margin: 0;
}

.lvm-hero video {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Media helpers
   -------------------------------------------------------------------------- */
.lvm-section figure {
	margin: 0;
}

.lvm-section figure img,
.lvm-section figure video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   Display headings (MAKING YOUR VISION / VERTICAL PRODUCTIONS / etc.)
   -------------------------------------------------------------------------- */
.lvm-h-display {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: clamp(2.5rem, 7vw, 9rem);
	line-height: 0.94;
	letter-spacing: -0.015em;
	text-transform: uppercase;
	margin: 0 0 clamp(24px, 3vw, 56px);
	color: #fff;
}

/* --------------------------------------------------------------------------
   "Making your vision come alive" — video grid
   tall vertical (a) left, two landscape (b/c) stacked right, wide (d) below.
   -------------------------------------------------------------------------- */
.lvm-grid-1 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"a b"
		"a c"
		"d d";
	gap: var(--lvm-gap);
}

.lvm-grid-1 > figure:nth-of-type(1) { grid-area: a; }
.lvm-grid-1 > figure:nth-of-type(2) { grid-area: b; }
.lvm-grid-1 > figure:nth-of-type(3) { grid-area: c; }
.lvm-grid-1 > figure:nth-of-type(4) { grid-area: d; }

.lvm-grid-1 > figure:nth-of-type(2) video,
.lvm-grid-1 > figure:nth-of-type(3) video {
	aspect-ratio: 16 / 9;
}

.lvm-grid-1 > figure:nth-of-type(4) video {
	aspect-ratio: 16 / 7;
}

/* --------------------------------------------------------------------------
   "Vertical productions" — three portrait stills, edge to edge
   -------------------------------------------------------------------------- */
.lvm-grid-vert {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--lvm-gap);
}

.lvm-grid-vert figure img {
	aspect-ratio: 9 / 16;
}

/* --------------------------------------------------------------------------
   "Come see how I work" — collage + big CTA
   -------------------------------------------------------------------------- */
.lvm-collage {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"a b"
		"c cta";
	gap: var(--lvm-gap);
	align-items: start;
}

.lvm-collage > figure:nth-of-type(1) { grid-area: a; }
.lvm-collage > figure:nth-of-type(2) { grid-area: b; }
.lvm-collage > figure:nth-of-type(3) { grid-area: c; }
.lvm-collage .lvm-cta-wrap { grid-area: cta; align-self: start; }

/* two equal landscapes on top, tall portrait bottom-left */
.lvm-collage > figure:nth-of-type(1) img { aspect-ratio: 3 / 2; }
.lvm-collage > figure:nth-of-type(2) img { aspect-ratio: 3 / 2; }
.lvm-collage > figure:nth-of-type(3) img { aspect-ratio: 3 / 4; }

/* --------------------------------------------------------------------------
   Call-to-action button — large white block, navy text
   -------------------------------------------------------------------------- */
.lvm-cta-wrap {
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	margin: 0;
}

.lvm-cta-wrap .wp-block-button__link,
.lvm-cta-wrap .lvm-cta a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(1.1rem, 1.9vw, 2rem);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--lvm-navy);
	background: #fff;
	border: 2px solid #fff;
	border-radius: 0;
	padding: clamp(16px, 2.2vw, 30px) clamp(28px, 3.4vw, 60px);
	text-decoration: none;
	transition: background 0.18s ease, color 0.18s ease;
}

.lvm-cta-wrap .wp-block-button__link:hover {
	background: transparent;
	color: #fff;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.lvm-footer {
	background: #000;
	color: #fff;
	padding: clamp(36px, 5vw, 64px) var(--lvm-pad-x);
	text-align: center;
}

.lvm-footer .lvm-foot-name {
	font-family: var(--wp--preset--font-family--display);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: clamp(1.25rem, 2.4vw, 2rem);
	margin: 0 0 10px;
}

.lvm-footer p {
	margin: 0 0 8px;
}

.lvm-footer a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.lvm-footer .lvm-foot-small {
	font-size: clamp(11px, 1.1vw, 14px);
	letter-spacing: 0.05em;
	opacity: 0.6;
	margin-top: 16px;
}

/* --------------------------------------------------------------------------
   Mobile — stack the grids, keep the headline tidy
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
	.lvm-grid-1 {
		grid-template-columns: 1fr;
		grid-template-areas:
			"a"
			"b"
			"c"
			"d";
	}

	.lvm-grid-1 > figure:nth-of-type(1) video {
		aspect-ratio: 9 / 16;
	}

	.lvm-collage {
		grid-template-columns: 1fr;
		grid-template-areas:
			"a"
			"b"
			"c"
			"cta";
	}

	.lvm-collage > figure:nth-of-type(3) img {
		aspect-ratio: 4 / 3;
	}

	.lvm-cta-wrap {
		justify-content: center;
	}

	.lvm-headline .lvm-year {
		margin-left: 1.2em;
	}
}

@media (max-width: 460px) {
	.lvm-grid-vert {
		grid-template-columns: 1fr;
	}
}