/**
 * Blue Frame Films: about.css
 *
 * Purpose:  About page: portrait and bio (#about), and the "How we work" steps.
 * Used by:  template-parts/about/bio.php, profile.php (v2.7.1), approach.php.
 * To edit:  Portrait crop: .photo img object-position. Portrait size on phones: max-width below.
 */

/* ==========================================================================
   About layout
   ========================================================================== */
.about {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: 52px;
	align-items: center;
}

.photo {
	aspect-ratio: 4/5;
	border-radius: var(--r);
	border: 1px solid rgba(30,123,255,.35);
	background: radial-gradient(circle at 50% 35%,rgba(30,123,255,.45),rgba(10,15,28,1) 70%);
	display: grid;
	place-items: center;
	align-items: end;
	padding: 0;
	overflow: hidden;
}

.photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	display: block;
}

.bio-text {
	margin: 1rem 0 1.6rem;
	font-size: 1.05rem;
	color: var(--text);
	max-width: 60ch;
}

.about h1 {
	font-size: clamp(2rem,4vw,3rem);
	margin: .5rem 0 .6rem;
}

/* ==========================================================================
   How we work (approach.php)
   ========================================================================== */
.steps {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: 20px;
}

.steps li {
	padding: 22px 20px 24px;
	border-top: 2px solid rgba(30,123,255,.45);
	background: linear-gradient(180deg,rgba(30,123,255,.06),transparent 70%);
	border-radius: 0 0 var(--r) var(--r);
}

.steps .num {
	font-size: .75rem;
	font-weight: 800;
	color: var(--elec2);
	letter-spacing: .1em;
}

.steps h3 {
	font-size: 1.05rem;
	margin: .55rem 0 .4rem;
}

.steps p {
	color: var(--muted);
	font-size: .9rem;
}


/* ==========================================================================
   Profile (profile.php, v2.7.1): titles, Fresh52, experience, skills, education
   ========================================================================== */
.profile .head { margin-bottom: 28px; }
.profile .confirm { color: var(--draft); font-size: .72em; font-weight: 700; letter-spacing: .04em; }
.pf-titles { list-style: none; display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; margin: 0 0 34px; padding: 0; }
.pf-titles li { position: relative; padding: 22px 18px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.pf-titles li::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: var(--film-holes) 0 50% / auto 100% repeat-x, var(--film-base); border-bottom: 1px solid rgba(30,123,255,.35); }
.pf-titles strong { display: block; font-size: 1rem; color: var(--text); margin-top: 4px; }
.pf-titles span { display: block; color: var(--elec2); font-size: .85rem; margin-top: .3rem; }
.pf-feature { position: relative; padding: 30px 32px; margin: 0 0 40px; border-radius: var(--r); border: 1px solid rgba(30,123,255,.35); background: radial-gradient(circle at 0% 0%,rgba(30,123,255,.22),transparent 60%), var(--bg2); box-shadow: 0 0 40px rgba(30,123,255,.12); }
.pf-feature::before { content: ""; position: absolute; left: 0; top: 18px; bottom: 18px; width: 3px; border-radius: 3px; background: linear-gradient(var(--elec),var(--elec2)); }
.pf-feature h3 { font-size: clamp(1.3rem,2.4vw,1.7rem); margin: .4rem 0 .7rem; }
.pf-feature p { color: var(--text); max-width: 75ch; font-size: 1.02rem; }
.pf-cols { display: grid; grid-template-columns: 1fr 1.15fr; gap: 44px; }
.pf-h { font-size: .8rem; text-transform: uppercase; letter-spacing: .14em; color: var(--elec2); margin: 0 0 16px; }
.pf-cols > div > .pf-h:not(:first-child) { margin-top: 30px; }
.pf-exp ol { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 2px solid rgba(30,123,255,.35); }
.pf-exp li { position: relative; padding: 0 0 22px; }
.pf-exp li::before { content: ""; position: absolute; left: -29px; top: 5px; width: 12px; height: 12px; border-radius: 3px; background: var(--elec); box-shadow: 0 0 12px var(--glow); }
.pf-exp h4 { font-size: 1.02rem; margin: 0; }
.pf-exp .role { color: var(--elec2); font-size: .85rem; margin: .15rem 0 .35rem; }
.pf-exp p { color: var(--muted); font-size: .9rem; margin: 0; }
.pf-skills { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pf-skill { padding: 16px 16px 14px; border-top: 2px solid rgba(30,123,255,.45); background: linear-gradient(180deg,rgba(30,123,255,.06),transparent 75%); border-radius: 0 0 var(--r) var(--r); }
.pf-skill h4 { font-size: .92rem; margin: 0 0 .6rem; }
.pf-skill ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pf-skill li { font-size: .78rem; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line); color: var(--text); background: rgba(14,21,38,.8); }
.pf-edu { display: flex; gap: 16px; align-items: flex-start; padding: 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.pf-edu .deg { flex: none; padding: 8px 10px; border-radius: 10px; font-weight: 800; font-size: .78rem; color: #fff; background: linear-gradient(135deg,var(--elec),var(--elec2)); }
.pf-edu strong { display: block; }
.pf-edu .role { color: var(--elec2); font-size: .85rem; margin-top: .2rem; }
.pf-edu p { color: var(--muted); font-size: .9rem; margin: .3rem 0 0; }


/* ==========================================================================
   Collage frames (v2.7.1): photos spread through the About page
   ========================================================================== */
.bf-shot { position: relative; margin: 0; padding: 8px 8px 0; background: var(--film-base); border: 1px solid rgba(30,123,255,.55); border-radius: 10px; box-shadow: 0 0 22px rgba(30,123,255,.28), 0 10px 26px rgba(0,0,0,.5); transition: transform .25s ease, box-shadow .25s ease; }
.bf-shot::before { content: ""; display: block; height: 8px; margin: -2px -2px 6px; background: var(--film-holes) 0 50% / auto 100% repeat-x; opacity: .9; }
.bf-shot img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; }
.bf-shot figcaption { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--elec2); padding: 7px 2px 9px; }
.bf-shot.tilt-l { transform: rotate(-1.6deg); }
.bf-shot.tilt-r { transform: rotate(1.6deg); }
.bf-shot:hover { transform: rotate(0) translateY(-3px); box-shadow: 0 0 32px rgba(0,194,255,.4), 0 12px 30px rgba(0,0,0,.55); }
.pf-shots { display: grid; gap: 18px; margin: 16px 0 6px; }
.pf-shots-2 { grid-template-columns: 1fr 1fr; }
.pf-shots-3 { grid-template-columns: repeat(3,1fr); margin-top: 24px; }
.pf-shots-1 .bf-shot img { aspect-ratio: auto; }
.pf-design-shot { margin: 22px 0 8px; }
.bio-shot { max-width: 380px; margin-top: 26px; }
.bio-shot .bf-shot img { aspect-ratio: auto; }
@media (prefers-reduced-motion: reduce) { .bf-shot { transition: none; } }

/* v2.7.1: lead line and promises row under the steps. */
.approach-lead { color: var(--muted); max-width: 68ch; margin: .7rem 0 0; font-size: 1.02rem; }
.promises { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 0; padding: 0; }
.promises li { font-size: .8rem; font-weight: 600; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(30,123,255,.45); background: rgba(30,123,255,.08); color: var(--text); box-shadow: 0 0 14px rgba(30,123,255,.15); }
.promises li::before { content: "\25B8"; color: var(--elec2); margin-right: 7px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width:1000px) {
	.pf-titles { grid-template-columns: 1fr 1fr; }
	.pf-cols { grid-template-columns: 1fr; }

	.steps {
		grid-template-columns: 1fr 1fr;
	}

	.about {
		grid-template-columns: 1fr;
	}

	.photo {
		max-width: 320px;
	}
}
@media (max-width:760px) {
	.pf-shots-2, .pf-shots-3 { grid-template-columns: 1fr; }
	.bf-shot.tilt-l { transform: rotate(-1deg); }
	.bf-shot.tilt-r { transform: rotate(1deg); }
	.bio-shot { max-width: none; }

	.pf-titles, .pf-skills { grid-template-columns: 1fr; }
	.pf-feature { padding: 24px 20px 24px 24px; }

	.steps {
		grid-template-columns: 1fr;
	}

	.photo {
		max-width: 240px;
	}
}