/*
=========================================================
ABOUT PAGE STYLESHEET - Joshua Dalton Media
=========================================================

Purpose
-------
This file contains the page-specific styles for the /about/ page on joshuadaltonmedia.com. It layers on top of global.css and process.css and should stay focused on the about page layout, intro profile block, bio copy, CTA overrides, and other about-only presentation.

What belongs in this file
-------------------------
- About page section spacing and page layout
- Intro profile row and portrait sizing
- Name, role, and bio copy presentation
- About-specific heading and CTA overrides
- About page breakpoint rules

Asset path usage
----------------
This stylesheet is intended to be referenced from pages with:

<link rel="stylesheet" href="/assets/css/about-page.css">

Relationship to page files
--------------------------
Page files should:
1. load this stylesheet after global.css and process.css
2. use it only on the /about/ page
3. keep shared process cards in process.css and shared utility patterns in global.css

Maintenance rule
----------------
If a selector is reusable across other pages, process sections, or shared cards, it should live in a shared stylesheet instead. Keep this file focused on about-page-specific layout and presentation.
*/

/* ================= BASE — 320px MOBILE ================= */

.about-page{padding:14px 0 24px}

/* ================= HEADINGS ================= */
.about-page h1{text-wrap:balance;font-size:20px}
.about-page h2{text-wrap:balance}
.about-page .lead{font-size:14px}

/* ================= INTRO ================= */
.about-intro{display:grid;gap:14px}

/* ================= PROFILE ================= */
.about-profile{display:grid;grid-template-columns:72px 1fr;gap:12px;align-items:center}
.about-portrait{width:72px;height:72px;object-fit:cover;border-radius:var(--radius);border:1px solid rgba(255,255,255,.08);box-shadow:0 8px 28px rgba(0,0,0,.4)}
.about-id{display:grid;gap:2px;min-width:0}
.about-name{margin:0;font-size:.96rem;line-height:1.2;color:var(--ink);font-weight:800}
.about-role{margin:0;font-size:12px;line-height:1.35;color:var(--accent);font-weight:700;letter-spacing:.02em}

/* ================= BIO ================= */
.about-bio{display:grid;gap:14px}
.about-bio p{margin:0;font-size:.84rem;line-height:1.7;color:var(--muted)}
.about-bio p strong{color:var(--ink)}

/* ================= CTA ================= */
.about-cta-title{margin:0;font-size:18px;line-height:1.2;color:var(--ink)}

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

@media(min-width:360px){
	/* ================= BASE ================= */
	.about-page{padding:18px 0 28px}
	.about-page h1{font-size:20px}
	/* ================= INTRO ================= */
	.about-intro{gap:16px}
	/* ================= PROFILE ================= */
	.about-profile{grid-template-columns:84px 1fr;gap:14px}
	.about-portrait{width:84px;height:84px}
	.about-name{font-size:1.05rem}
	.about-role{font-size:14px}
	/* ================= BIO ================= */
	.about-bio{gap:16px}
	.about-bio p{font-size:15px;line-height:1.7}
}

@media(min-width:700px){
	/* ================= BASE ================= */
	.about-page{padding:22px 0 36px}
	.about-page h1{font-size:28px}
	/* ================= INTRO ================= */
	.about-intro{grid-template-columns:180px 1fr;gap:22px;align-items:start}
	/* ================= PROFILE ================= */
	.about-profile{grid-template-columns:1fr;gap:10px;align-items:start}
	.about-portrait{width:100%;height:auto;aspect-ratio:1/1;max-width:none}
	.about-name{font-size:1.15rem}
	.about-role{font-size:.82rem;line-height:1.3}
	/* ================= BIO ================= */
	.about-bio{gap:18px}
	.about-bio p{font-size:.9rem;line-height:1.65}
	/* ================= CTA ================= */
	.about-page .process-grid.three{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(min-width:1024px){
	/* ================= BASE ================= */
	.about-page{padding:26px 0 44px}
	.about-page h1{font-size:36px}
	.about-page .lead{font-size:16px}
	/* ================= INTRO ================= */
	.about-intro{grid-template-columns:220px 1fr;gap:28px;margin-top:20px}
	/* ================= PROFILE ================= */
	.about-portrait{border-radius:16px}
	.about-name{font-size:1.3rem}
	.about-role{font-size:.82rem}
	/* ================= BIO ================= */
	.about-bio{gap:20px}
	.about-bio p{font-size:.94rem;line-height:1.65}
	/* ================= CTA ================= */
	.about-page .process-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
	.about-cta-title{font-size:1.22rem}
}