/* ─────────────────────────────────────────────────────────────
   cv.css — CV page template only (enqueued conditionally)
   Ground truth: ui-blueprints/cv-96-723.txt + cv-96-723-mobile.txt
   (live computed-style dumps, /dr-ziyad-jalbout-curriculum-vitae/).
   Shared .odx-page-header band comes from components.css.

   Live rail: inner-wrap 1120px (margin 0 160px @1440), NO side
   padding — the opener photo goes full-bleed at ≤767. Content colors
   #333333 (rich-text body) and #0097ff (rich-text link) are live's
   literal values; no variables.css token matches either — kept
   literal per extract-precise-hex rule.
   ─────────────────────────────────────────────────────────── */

.odx-cv__inner {
	max-width: 1120px;
	margin: 0 auto;
	padding-bottom: 75px;
}

/* ── OPENER — div_block-97-723: 2-col grid 550/550, gap 20 ── */
.odx-cv__intro {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

/* live: image-99-723 550×823, fills its column, 5px rounded corners
   (5px is live's literal value — --radius-sm is 4px, not a match) */
.odx-cv__photo {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 5px;
}

/* live: div_block-100-723 pad 30px, flex col, vertically centred */
.odx-cv__intro-panel {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	padding: 30px;
}

/* ── HEADINGS — .our-office-heading: navy, 35.2px (2.2em), fw 500,
   lh 1.6, no margin (list sits flush beneath) ── */
.odx-cv__heading {
	color: var(--color-navy);
	font-size: 2.2em;
	font-weight: 500;
	line-height: 1.6;
	margin: 0;
}

/* live: headlines 134/138 ("Membership…", "Research…") have lowercase
   source text + text-transform:capitalize (Oxygen author band-aid) */
.odx-cv__heading--caps {
	text-transform: capitalize;
}

/* ── RICH TEXT — live .oxy-rich-text inline paint:
   color #333333, 18px 'Helvetica Neue' (inline on the live ULs — NOT
   Merriweather; the serif face wraps extra lines), lh 1.6; ul pad-left
   40 / mb 10; li pad-left 10; nested ul disc, no bottom margin;
   link #0097ff ── */
.odx-cv__text {
	color: #333333;
	font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 1.6;
}

.odx-cv__text ul {
	margin: 0 0 10px;
	padding-left: 40px;
}

.odx-cv__text li {
	padding-left: 10px;
}

.odx-cv__text li ul {
	list-style: disc;
	margin-bottom: 0;
}

.odx-cv__text p {
	margin: 0 0 10px;
}

.odx-cv__text a {
	color: #0097ff;
	text-decoration: none;
}

/* ── LOWER SECTIONS — div_block-104-723: 896px centred, mt 30;
   each block (our-office-textdiv) mt 25 ── */
.odx-cv__sections {
	display: flex;            /* live wrapper is flex-col — also prevents the
	                             first block's margin-top collapsing into ours */
	flex-direction: column;
	align-items: stretch;
	width: 896px;
	max-width: 100%;
	margin: 30px auto 0;
}

.odx-cv__block {
	margin-top: 25px;
}

/* ── RESPONSIVE — 767px (mobile flip) ────────────────────────
   live @767: rail goes full width (margins drop), photo full-bleed,
   Education panel keeps its 30px padding, lower column gets 30px
   side gutters (x:30, w:707). Heading size unchanged.
   ─────────────────────────────────────────────────────────── */
@media ( max-width: 767px ) {
	/* live @767: wrap bottom padding drops 75px → 30px */
	.odx-cv__inner {
		padding-bottom: 30px;
	}

	/* live @767: stacks with the 20px grid gap retained between photo
	   and Education panel */
	.odx-cv__intro {
		grid-template-columns: 1fr;
	}

	/* live @767: div_block-104 sits flush under the opener (no 30px
	   top margin) with 30px side gutters */
	.odx-cv__sections {
		width: auto;
		margin: 0 30px;
	}
}