/**
 * About / "Who We Are" page.
 *
 * Ported from the design's own <style> block plus the repeated inline
 * patterns in "Who We Are.dc.html". Everything is scoped under .ij-about
 * so it cannot leak onto the site's other pages.
 */

.ij-about {
	font-family: var(--font-sans);
	font-weight: 500;
	color: var(--color-text);
	-webkit-font-smoothing: antialiased;
}

.ij-about a { color: var(--color-link); text-decoration: none; }
.ij-about a:hover { color: var(--color-link-hover); }

/* ---- Repeated pattern: the pill eyebrow above each section heading ---- */

.ij-about .ij-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	border-radius: var(--radius-pill);
	background: var(--color-success-soft);
	color: var(--brand-green-dark);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.6px;
	text-transform: uppercase;
}

/* On the dark #values section the green pill has no contrast, so the
   design switches it to a translucent white chip. */
.ij-about .ij-eyebrow-inverse {
	background: rgba(255, 255, 255, 0.16);
	border: 1px solid rgba(255, 255, 255, 0.24);
	color: #fff;
}

/* ---- Repeated pattern: the primary pill button ---- */

.ij-about .ij-btn-primary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 20px;
	border-radius: var(--radius-pill);
	background: var(--brand-green);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	transition: background 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.ij-about .ij-btn-primary:hover { background: var(--brand-green-dark); color: #fff; }

/* ---- Repeated pattern: heading on the left, body on the right ---- */

.ij-about .ij-about-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	gap: clamp(40px, 6vw, 120px);
	align-items: start;
}

/* ---- #intro collage / #mission cards / #offer quilt ---- */

/* The design collapses all three of these grids at the same breakpoint. */
@media (max-width: 820px) {
	.ij-about .quilt,
	.ij-about .mvcards,
	.ij-about .collage { grid-template-columns: minmax(0, 1fr) !important; }
}

/* A quilt panel's image sits above its text once the grid is one column,
   which reads better than text-then-image for the alternating rows. */
@media (max-width: 820px) {
	.ij-about .quilt > div[style*="min-height:520px"] { min-height: 320px !important; }
}

.ij-about .ij-quilt-link {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 16px;
	font-weight: 600;
	color: var(--brand-green-dark);
}

.ij-about .ij-quilt-link:hover { color: var(--brand-green-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ---- #values stacking cards ---- */

.ij-about .ij-value-card {
	border-radius: 32px;
	background: #fff;
	border: 1px solid var(--color-border-strong);
	box-shadow: var(--shadow-card);
	padding: clamp(24px, 3vw, 36px);
	box-sizing: border-box;
}

/* The cards stack by sticking at staggered offsets. That only works when
   there is room to scroll past them; on short viewports it traps the
   section, so release it. */
@media (max-height: 700px), (max-width: 820px) {
	.ij-about .ij-value-card { position: static !important; }
	.ij-about .ij-about-values .ij-about-split > div:first-child { position: static !important; }
}

/* ---- #history rail and card scroller ---- */

.ij-about .scroller { scrollbar-width: none; }
.ij-about .scroller::-webkit-scrollbar { display: none; }
.ij-about .scroller:focus-visible { outline: 2px solid var(--brand-green-dark); outline-offset: 4px; }

.ij-about .tick {
	border-left: 2px solid var(--color-border);
	display: block;
	transition: border-color 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* assets/js/about.js sets this on the ticks the needle has passed. */
.ij-about .tick.is-past { border-left-color: var(--slate-900); }

.ij-about #hist-needle { transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); }

/* ---- Grid floor on the narrowest phones ----------------------------------
   These grids set a fixed track minimum, and auto-fit collapsing to one column
   does not shrink it: at 32px page padding a 340px track ends past the edge of a
   320px phone. tokens.css carries the same floor for the grids the templates
   set inline; these are declared here, so they need it here. */
@media (max-width: 420px) {
	.ij-about .ij-about-split { grid-template-columns: minmax(0, 1fr) !important; }
}

@media (prefers-reduced-motion: reduce) {
	.ij-about #hist-needle,
	.ij-about .tick { transition: none; }
}

/* ---- #faq accordion ---- */

.ij-about #faq details[open] .faq-chev { transform: rotate(45deg); }
.ij-about .faq-chev { transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1); }
.ij-about #faq summary::-webkit-details-marker { display: none; }
.ij-about #faq summary { list-style: none; }
.ij-about #faq summary:focus-visible { outline: 2px solid var(--brand-green-dark); outline-offset: 2px; }

/* ---- Small screens ---- */

@media (max-width: 600px) {
	.ij-about #intro h1 { font-size: 26px !important; letter-spacing: -1.1px !important; line-height: 1.14 !important; }
	.ij-about #mission h2,
	.ij-about #offer h2,
	.ij-about #faq h2,
	.ij-about #values h2 { font-size: 23px !important; letter-spacing: -0.8px !important; line-height: 1.2 !important; }
	.ij-about #history h2 { font-size: 23px !important; letter-spacing: -0.8px !important; line-height: 1.2 !important; }
	.ij-about #hist-cards > div { flex: 0 0 280px !important; }
}

/* /history-main/ and the "Our History" nav item land on #history; keep the
   sticky header from covering the section's eyebrow. */
.ij-about #history { scroll-margin-top: calc(var(--hdr-bottom, 143px) + 16px); }

/* Quilt photos show whole (2026-10-20): the 16:9 photos were cropped at the
   sides to fill the 520px rows. They now fit inside the box instead.
   !important because the template sets object-fit inline. */
.ij-about .quilt img { object-fit: contain !important; }