/* =========================================================
   ABOUT - Joshua Dalton Media
   =========================================================
   About page styles. Loads after global.css.
   All @media at bottom. Breakpoints: 360px / 700px / 1024px.
*/

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

.about-hero {
	position: relative;
	isolation: isolate;
	min-height: 320px;
	display: grid;
	align-items: end;
	overflow: clip;
}

.about-hero__bg {
	position: absolute;
	inset: 0;
	background: url("/images/posters/auckland-wedding-videographer-couple-portrait-bastion-point.webp") center/cover no-repeat;
	filter: brightness(.55) saturate(1.05);
	z-index: -2;
}

.about-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg,rgba(13,13,13,.65) 0%,rgba(13,13,13,.25) 40%,rgba(13,13,13,.55) 100%);
	z-index: -1;
}

.about-hero__content {
	position: relative;
	z-index: 1;
	padding: 60px 0 100px;
}

.about-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 13px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: #fff;
}

.about-hero__eyebrow::before {
	content: "";
	width: 22px;
	height: 2px;
	background: var(--jdm-accent);
	flex-shrink: 0;
}

.about-hero__h1 {
	margin: 14px 0 16px;
	font-size: clamp(28px,5.5vw,56px);
	font-weight: 800;
	line-height: 1.08;
	color: #fff;
	max-width: 18ch;
	letter-spacing: -.005em;
}

.about-hero__lead {
	margin: 0 0 24px;
	font-size: clamp(14px,1.4vw,18px);
	line-height: 1.55;
	color: rgba(239,239,239,.85);
	max-width: 52ch;
}

/* ================= SECTION WRAPPERS ================= */

.about-section {
	padding: 52px 0;
	border-top: 1px solid var(--jdm-line);
}

.about-section--tighter {
	padding: 40px 0;
}

.about-section .section-header {
	padding-top: 0;
	margin-bottom: 28px;
}

.about-section .section-header h2 {
	font-size: clamp(22px, 3.5vw, 34px);
	font-weight: 800;
	color: var(--jdm-ink);
	line-height: 1.12;
	letter-spacing: -.01em;
	max-width: 24ch;
}

#philosophy-title {
	max-width: none;
	white-space: nowrap;
}

.about-section__header p {
	max-width: 60ch;
}

/* ================= STORY ================= */

.story__grid {
	display: grid;
	gap: 48px;
	align-items: start;
}

.story__text h2 {
	font-size: clamp(22px, 3vw, 32px);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.01em;
	color: var(--jdm-ink);
	margin-bottom: 20px;
	max-width: 22ch;
	text-wrap: balance;
}

.story__text p {
	margin-bottom: 16px;
}

.story__text p:last-child {
	margin-bottom: 0;
}

.story__avail-link {
	font-weight: 700;
	color: var(--jdm-accent);
	text-decoration: none;
}

.story__avail-link:hover {
	text-decoration: underline;
}

.story__photo-wrap {
	position: relative;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid var(--jdm-a-white-08);
	box-shadow: 0 18px 60px rgba(0,0,0,.55);
	max-width: 196px;
	margin-inline: auto;
}

.story__photo-wrap::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 50%, rgba(13,13,13,.55));
	pointer-events: none;
}

.story__photo-wrap img {
	width: 100%;
	aspect-ratio: 3/4;
	object-fit: cover;
	object-position: center top;
	display: block;
	filter: brightness(.9) saturate(.92);
}

/* ================= PHILOSOPHY ================= */

.philosophy__grid {
	display: grid;
	gap: 2px;
}

.philosophy__step {
	padding: 32px;
	background: linear-gradient(180deg, rgba(20,20,20,.9), rgba(20,20,20,.74));
	border: 1px solid var(--jdm-a-white-06);
	border-radius: 14px;
	transition: border-color .2s ease;
}

.philosophy__step:hover {
	border-color: var(--jdm-a-white-12);
}

.philosophy__num {
	width: 32px;
	height: 32px;
	border-radius: 999px;
	background: var(--jdm-accent);
	display: inline-grid;
	place-items: center;
	font-size: 13px;
	font-weight: 800;
	color: #fff;
	margin-bottom: 20px;
}

.philosophy__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--jdm-ink);
	margin-bottom: 10px;
}

.philosophy__body {
	font-size: 14px;
	color: var(--jdm-muted);
	line-height: 1.65;
}


/* ================= PULL QUOTE ================= */

.pullquote {
	position: relative;
	padding: 52px 0 60px;
	text-align: center;
	overflow: hidden;
}

.pullquote__bg {
	position: absolute;
	inset: 0;
	background: url("/images/backgrounds/auckland-wedding-videographer-hibiscus-coast-beach.avif") center/cover no-repeat;
	filter: brightness(.28) saturate(.8);
}

.pullquote__scrim {
	position: absolute;
	inset: 0;
	background: rgba(13,13,13,.65);
}

.pullquote__inner {
	position: relative;
	z-index: 1;
}

.pullquote__mark {
	position: absolute;
	top: -24px;
	left: 0;
	font-family: var(--jdm-serif-accent);
	font-size: clamp(100px, 16vw, 160px);
	line-height: 1;
	color: rgba(255,77,77,.18);
	user-select: none;
	pointer-events: none;
	z-index: 0;
}

.pullquote__inner::after {
	content: '"';
	position: absolute;
	top: -24px;
	right: 0;
	font-family: var(--jdm-serif-accent);
	font-size: clamp(100px, 16vw, 160px);
	line-height: 1;
	color: rgba(255,77,77,.18);
	user-select: none;
	pointer-events: none;
	z-index: 0;
}

.pullquote__inner blockquote {
	position: relative;
	z-index: 1;
}

.pullquote__text {
	font-size: clamp(18px, 3vw, 26px);
	font-weight: 600;
	color: #fff;
	line-height: 1.45;
	max-width: 680px;
	margin: 0 auto;
	letter-spacing: -.005em;
	text-wrap: pretty;
}

.pullquote__attribution {
	margin-top: 24px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--jdm-faint);
}

/* ================= CTA STRIP ================= */

.cta-strip {
	padding: 40px 0 0;
	text-align: center;
	border-top: 1px solid var(--jdm-line);
}

.cta-strip h2 {
	font-size: clamp(22px, 3.5vw, 36px);
	font-weight: 800;
	color: var(--jdm-ink);
	letter-spacing: -.01em;
	margin-bottom: 14px;
	text-wrap: balance;
}

.cta-strip p {
	margin: 0 auto 32px;
	max-width: 50ch;
}

.cta-strip__btns {
	display: flex;
	justify-content: center;
	gap: 12px;
	flex-wrap: wrap;
}

/* ================= RESPONSIVE BREAKPOINTS ================= */

@media(min-width:360px){
	/* ================= HERO ================= */
	.about-hero { min-height: clamp(340px,80vw,420px); }
	.about-hero__content { padding: 52px 0 90px; }
}

@media(min-width:700px){
	/* ================= HERO ================= */
	.about-hero { min-height: clamp(380px,55vw,500px); }

	/* ================= STORY ================= */
	.story__grid {
		grid-template-columns: 1fr 340px;
		gap: 64px;
		align-items: center;
	}

	.story__photo-wrap {
		max-width: none;
	}

	/* ================= PHILOSOPHY ================= */
	.philosophy__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.philosophy__step:first-child {
		border-radius: 14px 0 0 14px;
	}

	.philosophy__step:not(:first-child):not(:last-child) {
		border-radius: 0;
	}

	.philosophy__step:last-child {
		border-radius: 0 14px 14px 0;
	}

}

@media(min-width:1024px){
	/* ================= HERO ================= */
	.about-hero { height: clamp(480px,60svh,640px); min-height: 480px; align-items: start; }
	.about-hero__content { padding: 48px 0 40px; margin-inline-start: 48px; margin-inline-end: auto; }

	/* ================= SECTION ================= */
	.about-section {
		padding: 104px 0;
	}

	.about-section--tighter {
		padding: 80px 0;
	}
}