/**
 * Hayder Voice — Page Styles
 */

@layer components {

	/* ============================================================
	 * PAGE HERO
	 * ============================================================ */

	.page-hero {
		padding: calc(var(--header-height) + 4rem) var(--container-pad) 3rem;
		background: var(--c-abyss);
		border-bottom: 1px solid var(--c-border);
		position: relative;
		overflow: hidden;
	}

	.page-hero__image {
		width: 100%;
		margin-bottom: 2rem;
	}

	.page-hero__image img {
		width: 100%;
		max-height: 60svh;
		object-fit: cover;
		border-radius: var(--radius-lg);
	}

	.page-hero__title {
		font-size: clamp(2rem, 5vw, 4rem);
		font-weight: 300;
		line-height: var(--lh-snug);
		color: var(--c-heading);
		letter-spacing: -0.025em;
	}

	/* ============================================================
	 * PAGE BODY
	 * ============================================================ */

	.page-body {
		padding: 4rem var(--container-pad);
	}

	/* ============================================================
	 * ABOUT PAGE
	 * ============================================================ */

	.about-hero {
		position: relative;
		padding: calc(var(--header-height) + 5rem) var(--container-pad) 4rem;
		overflow: hidden;
		background: var(--c-abyss);
	}

	.about-hero__grain {
		position: absolute;
		inset: 0;
		background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
		pointer-events: none;
	}

	.about-hero > .container-md {
		position: relative;
		z-index: 1;
	}

	.about-hero__title {
		font-size: clamp(3rem, 7vw, 6rem);
		font-weight: 300;
		color: var(--c-heading);
		letter-spacing: -0.03em;
	}

	.about-intro {
		padding: 5rem 0;
	}

	.about-intro__grid {
		display: grid;
		grid-template-columns: 1fr 2fr;
		gap: 5rem;
		align-items: start;
	}

	.about-intro__photo {
		position: sticky;
		top: calc(var(--header-height) + 2rem);
	}

	.about-intro__img {
		width: 100%;
		border-radius: var(--radius-lg);
		border: 1px solid var(--c-border);
		filter: grayscale(30%);
		transition: filter var(--duration-slow) var(--ease-smooth);
	}

	.about-intro__img:hover {
		filter: grayscale(0%);
	}

	/* ============================================================
	 * CONTACT PAGE
	 * ============================================================ */

	.contact-hero {
		padding: calc(var(--header-height) + 4rem) var(--container-pad) 3rem;
	}

	.contact-hero__desc {
		font-family: var(--font-sans);
		font-size: var(--text-md);
		color: var(--c-muted);
		max-width: 55ch;
		margin-top: 1rem;
		line-height: var(--lh-relaxed);
	}

	.contact-body {
		padding: 4rem var(--container-pad);
	}

	.contact-form-wrap {
		margin-top: 3rem;
	}

	/* ============================================================
	 * PAGE LINKS (pagination within page)
	 * ============================================================ */

	.page-links {
		display: flex;
		align-items: center;
		gap: 0.5rem;
		flex-wrap: wrap;
		padding: 2rem 0;
		font-family: var(--font-sans);
		font-size: var(--text-sm);
		color: var(--c-muted);
	}

	.page-number {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		border-radius: var(--radius-full);
		border: 1px solid var(--c-border);
		transition: var(--transition-base);
	}

	.page-number:hover {
		border-color: var(--c-amber-border);
		color: var(--c-amber);
	}

} /* @layer components */