/* Single client page (Figma node 3296:20718) — one shared template for
   every client. The "Projects" grid reuses Our Work's own card/grid
   classes (.work-case-studies__grid, .work-case-study-card) directly, see
   work.css, rather than duplicating that component here. */

.client-intro {
	display: grid;
	grid-template-columns: minmax(0, 660fr) minmax(0, 633fr);
	gap: clamp(24px, 4vw, 48px);
	align-items: stretch;
	padding-top: clamp(88px, 9vw, 145px);
	/* No padding-bottom here — .client-projects__divider's own margin-top
	   is the ONLY thing controlling the gap to the photo below, per Figma
	   (2.3rem). Adding padding here too would stack on top of that instead
	   of matching it. */
}

/* justify-content: space-between (not gap) — the logo stays pinned to the
   top while __bottom anchors to the bottom, matching the bottom of the
   photo in the column next to it instead of leaving a gap under a short
   bio when the photo is the taller of the two columns. */
.client-intro__col {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	/* gap is a floor, not a fixed size — space-between only kicks in with
	   whatever room is left over above it. Without this, a long bio can
	   grow __bottom tall enough to butt straight up against the logo. */
	gap: 48px;
}

.client-intro__bottom {
	display: flex;
	flex-direction: column;
	gap: 30px;
}

/* Resets the browser's default h1 margin/font-size — this element is
   .client-intro__logo's own wrapper (template-parts/client/intro.php),
   purely so the page has a real, accessible <h1> without visually
   changing anything; the logo image is still what actually renders. */
.client-intro__logo-heading {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}

.client-intro__logo {
	max-width: 160px;
	max-height: 100px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.client-intro__meta {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px 40px;
}

.client-intro__meta-label {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 1.25rem;
	color: var(--color-ink);
}

.client-intro__meta-value {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 1.125rem;
	color: var(--color-ink);
}

.client-intro__content p {
	margin: 0 0 1.4em;
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 1.125rem;
	line-height: 1.5;
	color: var(--color-ink);
}

.client-intro__content p:last-child {
	margin-bottom: 0;
}

/* position:relative + absolute image (not height:100% directly) — a
   normal-flow img can't resolve a percentage height against this box,
   since the box's own height comes from the grid stretching to match
   .client-intro__col (auto height); same fix already established for
   .blog-header__media (blog.css) for the same underlying reason. */
.client-intro__media {
	position: relative;
	min-height: 400px;
	overflow: hidden;
	background: var(--color-offwhite, #fafafa);
}

.client-intro__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Nested INSIDE .client-projects (a .container) rather than carrying the
   .container class itself, or living outside it as a sibling — a
   border-top ignores its own element's padding-inline (border draws at
   the outer edge of the padding box, not inset by it), so putting the
   border directly on a .container-classed element would span its full
   max-width, past the padded content, all the way to the viewport edge on
   any screen ≤1440px. Nested here, it's a plain block with no padding of
   its own, so it just naturally fills the ALREADY-padded content width. Figma:
   2.3rem from the photo above to this line, 1.3rem from this line to the
   top of the down-arrow icon below. */
.client-projects__divider {
	margin: 2.3rem 0 1.3rem;
	border: none;
	border-top: 1px solid var(--color-ink);
}

.client-projects {
	padding-bottom: clamp(64px, 8vw, 120px);
}

.client-projects__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: clamp(24px, 3vw, 40px);
}

.client-projects__heading {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 1.625rem;
	color: var(--color-ink);
}

.client-projects__scroll-arrow {
	display: flex;
	flex-shrink: 0;
	width: 59px;
	height: 59px;
}

/* Stands in for the grid on clients with no public case studies (e.g.
   confidential/NDA work) — a large statement rather than body copy, per
   Figma (Roboto Medium, 35px/50px). */
.client-projects__note {
	margin: 0;
	max-width: 62rem;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 2.1875rem;
	line-height: 50px;
	color: var(--color-ink);
}

.client-projects__scroll-arrow img {
	width: 100%;
	height: 100%;
	display: block;
}

@media (max-width: 900px) {
	.client-intro {
		grid-template-columns: 1fr;
	}

	/* Figma's own mobile frame (node 4014:26762) puts the photo first,
	   full width, above the logo/meta/bio column — not below it in DOM
	   order the way the desktop side-by-side grid reads. order:-1 flips
	   that without touching the markup; the grid's own row-gap (the
	   shorthand `gap` above, shared with column-gap) already provides a
	   sensible break between the two once they're stacked as separate
	   rows instead of side-by-side columns. */
	.client-intro__media {
		order: -1;
		/* Breaks out of .client-intro's own container padding to reach the
		   viewport edges — a plain block with the default width:auto
		   grows to fill the extra space a negative margin exactly
		   matching that padding opens up, same technique used for Our
		   Work's case-study card images (work.css). min-height:400px was
		   sized to match the text column's own height side-by-side on
		   desktop; stacked full-width on mobile it doesn't need to match
		   anything, so a plain aspect-ratio (Figma's own ~393:305 photo)
		   replaces it instead. */
		margin-inline: calc(-1 * var(--gutter));
		min-height: 0;
		aspect-ratio: 393 / 305;
	}

	/* Deliberately NOT collapsed to one column here — Figma's own mobile
	   frame keeps Industry/Working with/Business Type/Revenue as a 2x2
	   grid, not a full single-column stack (this previously forced
	   grid-template-columns:1fr, which doesn't match that). */

	/* Existed as a manual scroll cue for desktop's own longer intro column
	   (jump straight past the logo/meta/bio to the grid) — not needed once
	   that column is short enough on mobile to just scroll past normally.
	   "Projects" itself stays; justify-content:space-between (base rule)
	   is happy with just the one child once this is gone. */
	.client-projects__scroll-arrow {
		display: none;
	}
}