/* ==================================================================
   Single Post template (article.html design).
   Scoped under .fv-art-*; tokens come from colors_and_type.css. Loaded on
   single posts and pulled in by the Fox Valley article widgets.
   ================================================================== */

.fv-art-header * { box-sizing: border-box; }

/* ---------------- Header band ---------------- */
.fv-art-header { background: var(--cream); border-bottom: 1px solid var(--sand); }
.fv-art-header-inner { max-width: 820px; margin: 0 auto; padding: 48px 28px 40px; }
.fv-art-crumbs {
	display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
	margin-bottom: 26px; font-size: 13.5px; font-weight: 500;
}
.fv-art-crumbs a, .fv-art-crumbs a:link, .fv-art-crumbs a:visited { color: var(--ink-500); text-decoration: none; }
.fv-art-crumbs a:hover { color: var(--ink-700); }
.fv-art-crumbs [aria-current="page"] { color: var(--ink-700); }
.fv-art-crumbs .fv-pl-chev { color: var(--ink-300); flex: none; }
.fv-art-eyebrow {
	font-size: 12.5px; font-weight: 700; letter-spacing: 0.1em;
	text-transform: uppercase; color: var(--clay-600);
}
.fv-art-title {
	margin: 14px 0 22px; font-family: var(--font-display); font-weight: 700;
	letter-spacing: -0.02em; color: var(--ink-900);
	font-size: clamp(34px, 4.2vw, 50px); line-height: 1.08;
}
.fv-art-byline { display: flex; align-items: center; gap: 13px; }
/* !important beats Elementor's `.elementor img { border-radius:0; height:auto }`
   reset so the avatar stays a fixed 46px circle with a covered crop. */
.fv-art-byline-avatar { width: 46px; height: 46px !important; border-radius: 50% !important; object-fit: cover; flex: none; }
/* Tight line-heights so the name/meta read as one compact byline unit, without
   them they inherit the page's ~1.75 body leading and drift apart. */
.fv-art-byline-name { font-weight: 700; font-size: 15px; line-height: 1.35; color: var(--ink-800); }
.fv-art-byline-name a, .fv-art-byline-name a:link, .fv-art-byline-name a:visited { color: var(--ink-800); text-decoration: none; }
.fv-art-byline-name a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.fv-art-byline-meta { font-size: 13.5px; line-height: 1.4; color: var(--ink-500); }

/* ---------------- Pulled-up featured image ---------------- */
.fv-art-figure { max-width: 820px; margin: -24px auto 0; padding: 0 28px; }
/* !important beats Elementor's `.elementor img` reset (border-radius:0;
   box-shadow:none; height:auto) so the featured image keeps its rounded corners,
   shadow and 420px covered crop. */
.fv-art-figure img {
	display: block; width: 100%; height: 420px !important; object-fit: cover;
	border-radius: var(--radius-xl) !important; box-shadow: var(--shadow-lg) !important;
}

/* ---------------- Prose body (native Post Content styled to the design) ----
   Targets the content column (.fv-art-prose set on the Elementor column), so it
   styles WordPress block output, including .wp-block-quote / .wp-block-list. */
.fv-art-prose {
	font-family: var(--font-body); font-size: 17.5px; line-height: 1.75; color: var(--ink-700);
}

/* Side gutter. The design wraps this body in `<Section pad="56px 28px 80px">`
   (article.html:56), a 28px gutter AND the 760 measure, not just the measure. Here
   the 760 measure lives on the section's `.elementor-container` (max-width, margin
   auto), so the copy's only inset was that centring, which reaches 0 once the
   viewport drops under ~816px and left the text edge-to-edge on tablet and phone.
   The padding MUST sit on the section, OUTSIDE the max-width container: putting it
   on .fv-art-prose (the column, inside the container) shrinks the measure itself
   from 760 to 704 at every width, a desktop regression, not a gutter.
   Unconditional, because it only bites once the centring runs out; above ~816 the
   measure still centres and this is a no-op. `.elementor` prefix takes it to (0,4,0)
   so it clears post-273.css's (0,3,0) padding shorthand, which loads later. */
.elementor .elementor-section:has(> .elementor-container > .fv-art-prose) {
	padding-left: 28px;
	padding-right: 28px;
}
.fv-art-prose > .elementor-widget-container > * { max-width: 760px; margin-inline: auto; }
.fv-art-prose p { margin: 0 0 20px; }
.fv-art-prose strong { color: var(--ink-900); font-weight: 700; }
.fv-art-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.fv-art-prose h2, .fv-art-prose h3 {
	font-family: var(--font-display); font-size: 27px; font-weight: 700;
	letter-spacing: -0.02em; color: var(--ink-900); margin: 38px 0 14px;
}
/* Design list: no markers, sage dot bullets */
.fv-art-prose ul { margin: 0 0 22px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.fv-art-prose ul li { position: relative; padding-left: 30px; }
.fv-art-prose ul li::before {
	content: ''; position: absolute; left: 4px; top: 9px;
	width: 8px; height: 8px; border-radius: 50%; background: var(--sage-500);
}
.fv-art-prose ol { margin: 0 0 22px; padding-left: 22px; }
.fv-art-prose ol li { margin: 0 0 8px; }
/* Design quote: clay left rule, italic display serif */
.fv-art-prose blockquote {
	margin: 28px 0; padding: 4px 0 4px 26px; border-left: 3px solid var(--clay-400);
	font-family: var(--font-display); font-style: italic; font-size: 23px; line-height: 1.5; color: var(--ink-800);
}
.fv-art-prose blockquote p { margin: 0; }
.fv-art-prose blockquote cite { display: block; margin-top: 10px; font-size: 15px; font-style: normal; color: var(--ink-500); }

/* ---------------- More from our team ---------------- */
.fv-art-related { background: var(--cream); }
.fv-art-related-inner { max-width: 1200px; margin: 0 auto; padding: 80px 28px; }
.fv-art-related-head { text-align: center; margin-bottom: 44px; }
.fv-art-related-eyebrow {
	display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.14em;
	text-transform: uppercase; color: var(--sage-700); margin-bottom: 14px;
}
.fv-art-related-title {
	margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.024em;
	color: var(--ink-900); font-size: var(--text-4xl, 40px); line-height: 1.1;
}
.fv-art-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.fv-art-related-card {
	display: flex; flex-direction: column; height: 100%; text-decoration: none;
	background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
	overflow: hidden; box-shadow: var(--shadow-xs);
	transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.fv-art-related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.fv-art-related-photo { height: 168px; overflow: hidden; background: var(--sage-mist); }
.fv-art-related-photo img { width: 100%; height: 100%; object-fit: cover; }
.fv-art-related-photo--blank { display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--sage-100), var(--navy-50)); }
.fv-art-related-photo--blank img { width: 46px; height: 46px; object-fit: contain; opacity: 0.5; }
.fv-art-related-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.fv-art-related-grid .fv-art-related-name {
	margin: 0 0 14px; font-family: var(--font-display); font-size: 20px;
	font-weight: 600; color: var(--ink-900); line-height: 1.3;
}
.fv-art-related-more {
	display: inline-flex; align-items: center; gap: 7px; margin-top: auto;
	color: var(--accent); font-weight: 600; font-size: 14.5px;
}
.fv-art-related-more svg { color: var(--accent); }

/* ---------------- "Ready when you are" admissions CTA ---------------- */
/* Fixed white ground (full-bleed, switcher-independent, literal #fff, not a
   theme token the colour-scheme switcher can repaint). */
.fv-art-adm { background: #fff; }
.fv-art-adm-inner { max-width: 1200px; margin: 0 auto; padding: 40px 28px 96px; }
.fv-art-adm-card {
	position: relative; overflow: hidden; background: var(--navy-700);
	border-radius: var(--radius-xl); padding: 60px 56px; box-shadow: var(--shadow-lg);
	display: grid; grid-template-columns: 1.3fr 1fr; gap: 40px; align-items: center;
}
.fv-art-adm-card::before {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(90% 130% at 8% 110%, rgba(206,124,87,0.34), transparent 52%);
}
.fv-art-adm-card::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(100% 140% at 100% 0%, rgba(123,165,147,0.4), transparent 55%);
}
.fv-art-adm-mark { position: absolute; width: 300px; top: -50px; right: -30px; opacity: 0.07; transform: rotate(-8deg); pointer-events: none; }
.fv-art-adm-lede { position: relative; }
/* Scoped under .fv-art-adm-card so the white beats the Elementor kit's
   `.elementor-kit-5 h2 { color:#1F4E79 }` rule (which otherwise hides "Ready"). */
.fv-art-adm-card .fv-art-adm-title { margin: 0; font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; font-size: var(--text-4xl, 40px); line-height: 1.1; color: #fff; }
.fv-art-adm-card .fv-art-adm-accent { color: var(--clay-300); }
.fv-art-adm-text { margin: 16px 0 0; max-width: 470px; color: var(--navy-100); font-size: 18px; line-height: 1.6; }
.fv-art-adm-btns { position: relative; display: flex; flex-direction: column; gap: 12px; }
.fv-art-adm-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 15px 22px; border-radius: var(--radius-pill);
	font-family: var(--font-body); font-size: 16px; font-weight: 600;
	text-decoration: none; cursor: pointer; border: 1px solid transparent;
	transition: transform var(--dur-base) var(--ease-standard), background var(--dur-base) var(--ease-standard);
}
.fv-art-adm-btn:hover { transform: translateY(-1px); }
.fv-art-adm-btn--solid { background: #fff; color: var(--navy-800); }
.fv-art-adm-btn--solid:hover { background: var(--navy-50); }
.fv-art-adm-btn--outline, .fv-art-adm-btn--outline:link, .fv-art-adm-btn--outline:visited { background: transparent; color: #fff; border-color: rgba(255,255,255,0.42); }
.fv-art-adm-btn--outline:hover { background: rgba(255,255,255,0.08); }

/* ---------------- Responsive ---------------- */
@media (max-width: 980px) {
	.fv-art-related-grid { grid-template-columns: 1fr 1fr; }
	.fv-art-adm-card { grid-template-columns: 1fr; gap: 28px; padding: 44px 34px; }
}
@media (max-width: 600px) {
	.fv-art-figure img { height: 260px !important; }
	.fv-art-related-inner { padding: 60px 20px; }
	.fv-art-related-grid { grid-template-columns: 1fr; }
	.fv-art-adm-inner { padding: 32px 20px 72px; }
}