/* 1. Global Setup & Variables
------------------------------------- */
:root {
	--bg-color: #171616;
	--text-color: #ede5dd;
	--text-color-light: #f5e5d5;
	--accent-color: #ede5dd;
	/* Used for borders, buttons, and captions */

	--caption-bg: #ede5dd;
	--caption-text: #171616;

	--font-primary: 'Inter', sans-serif;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: var(--font-primary);
	background-color: var(--bg-color);
	color: var(--text-color);
	line-height: 1.6;

	/* Subtle grid background from the template */
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
	background-size: 60px 60px;
}

h1,
h2 {
	font-weight: 500;
	line-height: 1.2;
}

p {
	font-weight: 200;
	font-size: 1.125rem;
	/* 18px */
	line-height: 1.8;
	color: var(--text-color-light);
	max-width: 65ch;
}

a {
	color: inherit;
	text-decoration: none;
}

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

ul {
	list-style: none;
}


/* 2. Layout
------------------------------------- */
.container {
	width: 90%;
	max-width: 1200px;
	/* More standard max-width */
	margin-left: auto;
	margin-right: auto;
	padding-top: 5rem;
	padding-bottom: 5rem;
}

/* Add a separator line */
.container+.container,
.footer {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}


/* 3. Components
------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 1rem;
	font-weight: 200;
	padding: 0.75rem 2rem;
	border-radius: 100px;
	transition: all 0.3s ease;
}

.btn--outline {
	border: 2px solid var(--accent-color);
	color: var(--accent-color);
}

.btn--outline:hover {
	background-color: var(--accent-color);
	color: var(--bg-color);
}

.btn svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}


/* 4. Header
------------------------------------- */
header.container {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

header h1 {
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--accent-color);
}


/* 5. Hero Section
------------------------------------- */
.hero {
	min-height: 60vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.hero h2 {
	font-size: clamp(3rem, 10vw, 6.5rem);
	/* Responsive font size */
	letter-spacing: -0.04em;
	margin-bottom: 2rem;
}

.hero p {
	margin-bottom: 2.5rem;
}


/* 6. Work & Gallery
------------------------------------- */
.work h2 {
	font-size: clamp(2.5rem, 6vw, 3.5rem);
	margin-bottom: 3rem;
}

.gallery-grid {
	display: grid;
	/* This creates a responsive grid that tries to fit 350px columns */
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	gap: 2rem;
}

.gallery-item {
	border: 3px solid var(--accent-color);
	border-radius: 8px;
	overflow: hidden;
	/* Ensures image respects the border-radius */
	position: relative;
	background-color: var(--accent-color);
	/* Fallback bg */
}

.gallery-item a {
	display: block;
	overflow: hidden;
	/* For zoom-on-hover effect */
}

.gallery-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.gallery-item a:hover img {
	transform: scale(1.1);
}

.gallery-item figcaption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--caption-bg);
	color: var(--caption-text);
	padding: 1.25rem 2rem;
	font-size: 1.125rem;
	font-weight: 500;

	/* Slight margin to match the template's look */
	margin: 3px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}


/* 7. Footer & Contact
------------------------------------- */
.footer {
	background-color: #111;
	/* Slightly darker to stand out */
}

.contact h2 {
	font-size: clamp(2.5rem, 6vw, 3.5rem);
	margin-bottom: 2rem;
}

.contact p {
	margin-bottom: 2.5rem;
}

.social-links {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	margin-top: 3.5rem;
}

.social-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background-color: var(--accent-color);
	border-radius: 50%;
	transition: all 0.3s ease;
}

.social-icon:hover {
	transform: scale(1.1);
	opacity: 0.85;
}

.social-icon svg {
	width: 55%;
	height: 55%;
	fill: var(--bg-color);
}

/* 8. Legal Footer
------------------------------------- */
.legal-footer {
	padding-top: 3rem;
	padding-bottom: 3rem;
	text-align: center;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.legal-footer p {
	font-size: 0.875rem;
	/* 14px */
	font-weight: 200;
	line-height: 1.6;
	color: var(--text-color);
	opacity: 0.6;
	max-width: none;
	/* Override default p max-width */
	margin-bottom: 0.5rem;
}

.legal-footer a {
	text-decoration: underline;
	opacity: 0.8;
	transition: opacity 0.3s;
}

.legal-footer a:hover {
	opacity: 1;
}