/* =========================================================================
   Specialism — desktop: Figma "SPECIALISM1" (1235:1119, 1728); mobile: 1287:510 (440).
   Page intro is the shared block (component defaults match Specialism's y exactly,
   just 4px off on desktop — fixed below). No Insights block: straight into the dark
   footer (body.has-dark-end, functions.php ruh_dark_end()).
   Only "Content & Design" has Figma copy/image (the open-by-default panel); the other
   three services reuse its image and match its copy style — HANDOFF "Decisions" 2026-09-29.
   ========================================================================= */

@media (min-width: 1200px) {
	.page-intro--specialism { padding-top: calc(533 * var(--u)); }
	.page-intro--specialism .page-intro__label { margin-top: 0; }
}

/* Hero — mobile y709 400×420 r5; desktop y953 1598×751 r10 (same column as every other frame) */
.specialism-hero { margin: calc(60 * var(--u)) auto 0; }
.specialism-hero img,
.specialism-hero video { width: 100%; aspect-ratio: 400 / 420; object-fit: cover; border-radius: 5px; }

@media (min-width: 1200px) {
	.specialism-hero { margin-top: calc(100 * var(--u)); }
	.specialism-hero img,
.specialism-hero video { aspect-ratio: 1598 / 751; border-radius: 10px; }
}

/* Accordion rows — mobile: rect y+65 (Content & Design y+727), title offset y32, no inset (x20 = row x20).
   desktop: rect y+139 (open y+1039), title offset y60, text inset x60 (title/panel start x123, row x63). */
/* A closed title's own line-height box runs past its row (96/139 desktop, 40/65 mobile — normal
   leading around large display text, invisible against the next white row); give the section a
   little clearance before the black footer so a closed last row's descenders never meet it. */
.specialism-accordion { margin-top: calc(60 * var(--u)); padding-bottom: calc(70 * var(--u)); }

.specialism-row:last-child { border-bottom: 1px solid #c3c3c3; }
/* Figma's closed rows sit 1px (mobile) / 3px (desktop) closer together than their own rect
   height — each one runs into the next row's fill, presumably so adjacent 1px borders never
   leave a subpixel gap. The open row doesn't (its neighbour starts exactly at its bottom). */
.specialism-row:not(.is-open):not(:last-child) { margin-bottom: calc(-1 * var(--u)); }

.specialism-row__head { margin: 0; }
.specialism-row__trigger {
	position: relative;
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: calc(65 * var(--u));
	border-top: 1px solid #c3c3c3;
	text-align: left;
}
/* The title mask: a fixed-position window onto the title, animated by accordion.js (GSAP, not
   this transition). Closed, it ends exactly on the next row's divider — in Figma each title sits
   *under* the following row's opaque white rect, which cuts it there: 32 of 40 (mobile) / 76 of 96
   (desktop) show, so the baseline and the feet of every letter disappear behind the line. Only rows
   *above* the open one are clipped (user call, 2026-10-13). The open row shows its whole title at
   Figma's y; rows below it (or every row, when none is open) sit centred between their lines (below).
   accordion.js animates top + height between these states. Clicks pass through to the button. */
.specialism-row__title-mask {
	position: absolute;
	left: 0;
	right: 0;
	top: calc(31 * var(--u));
	height: calc(32 * var(--u));
	clip-path: inset(0 -100vw 0 0); /* crops top/bottom only — a title may run a few px past the column */
	pointer-events: none;
}
.specialism-row.is-open .specialism-row__title-mask {
	height: calc(50 * var(--u));
}
/* Unclipped closed rows (below the open one, or every row when none is open) read as a plain list:
   the title sits centred between its two lines instead of Figma's y32 (which only works clipped or
   open). Inter Tight 300 36/40: ink 6.4 → 40.8 of the line box (cap/ascender top → descender), so
   ink 34.4 centred in the 63 between dividers puts the box at row+9. Deviation — no Figma frame
   shows a closed row below the open one (user call, 2026-10-13). */
.specialism-row.is-open ~ .specialism-row .specialism-row__title-mask,
.specialism-accordion:not(:has(.is-open)) .specialism-row__title-mask {
	top: calc(9 * var(--u) - 1px);
	height: calc(50 * var(--u));
}
.specialism-row__title {
	display: inline-block;
	white-space: nowrap; /* Figma's "Experientia" is 397 wide; with its missing "l" it's ~5px over the 400 column — keep one line */
	font-family: var(--font);
	font-weight: 300;
	font-size: calc(36 * var(--u));
	line-height: calc(40 / 36);
	letter-spacing: 0.02em;
	color: var(--black);
}
.specialism-row.is-open .specialism-row__title { color: var(--teal); }

.specialism-row__panel { overflow: hidden; height: 0; }
.specialism-row.is-open .specialism-row__panel { height: auto; }

/* accordion.js fades + rises these in (motion.creamy) on open; pre-hide so JS users never see
   a flash of the fully-open state before that plays. No-JS / no-.js: shown immediately. */
.js .specialism-row__media,
.js .specialism-row__body > * { opacity: 0; }

.specialism-row__content { padding: calc(31 * var(--u)) 0 calc(40 * var(--u)); }
.specialism-row__media img,
.specialism-row__media video { width: 100%; aspect-ratio: 400 / 255; object-fit: cover; border-radius: 5px; }
.specialism-row__body { margin-top: calc(32 * var(--u)); }
.specialism-row__desc { font-family: var(--font); font-weight: 400; font-size: calc(24 * var(--u)); line-height: calc(30 / 24); }
.specialism-row__services-label { margin-top: calc(32 * var(--u)); font-weight: 400; font-size: calc(20 * var(--u)); line-height: calc(28 / 20); }
.specialism-row__lists { display: grid; grid-template-columns: calc(118 * var(--u)) calc(118 * var(--u)); column-gap: calc(88 * var(--u)); margin-top: calc(16 * var(--u)); }
.specialism-row__list { color: #4e4e4e; font-size: calc(16 * var(--u)); line-height: calc(24 / 16); }
.specialism-row__list li + li { margin-top: calc(12 * var(--u)); }
.specialism-row__media { margin: 0; }

@media (min-width: 1200px) {
	/* last row → footer: Figma 150 (row ends y3274, footer y3424) — less 1px for the bottom border */
	.specialism-accordion { margin-top: calc(120 * var(--u)); padding-bottom: calc(149 * var(--u)); }

	.specialism-row:not(.is-open):not(:last-child) { margin-bottom: calc(-3 * var(--u)); }

	/* desktop dividers are 2px (rect stroke top 2, inside; mobile 1) */
	.specialism-row__trigger { height: calc(139 * var(--u)); border-top-width: 2px; }
	.specialism-row__title-mask {
		left: calc(60 * var(--u));
		top: calc(60 * var(--u) - 2px);
		height: calc(76 * var(--u));
	}
	.specialism-row.is-open .specialism-row__title-mask {
		height: calc(120 * var(--u));
	}
	/* centred between the lines: 96/96 ink 12.2 → 103.7, centred in the 134 between dividers → row+11 */
	.specialism-row.is-open ~ .specialism-row .specialism-row__title-mask,
	.specialism-accordion:not(:has(.is-open)) .specialism-row__title-mask {
		top: calc(11 * var(--u) - 2px);
		height: calc(120 * var(--u));
	}
	.specialism-row__title {
		font-size: calc(96 * var(--u));
		line-height: 1;
		letter-spacing: 0;
	}

	.specialism-row__content {
		display: grid;
		grid-template-columns: calc(864 * var(--u)) 1fr;
		column-gap: calc(80 * var(--u));
		padding: calc(137 * var(--u)) 0 calc(120 * var(--u)) calc(60 * var(--u));
	}
	.specialism-row__body { margin-top: 0; }
	.specialism-row__media img,
.specialism-row__media video { aspect-ratio: 864 / 643; border-radius: 10px; }
	.specialism-row__desc { font-weight: 300; font-size: calc(56 * var(--u)); line-height: calc(64 / 56); }
	.specialism-row__services-label { margin-top: calc(136 * var(--u)); font-size: calc(32 * var(--u)); line-height: calc(45 / 32); letter-spacing: 0.02em; }
	.specialism-row__lists { grid-template-columns: calc(154 * var(--u)) calc(155 * var(--u)); column-gap: calc(119 * var(--u)); margin-top: calc(40 * var(--u)); justify-content: start; }
	.specialism-row__list { color: #333; font-size: calc(20 * var(--u)); line-height: calc(30 / 20); letter-spacing: 0.02em; }
	.specialism-row__list li + li { margin-top: calc(20 * var(--u)); }
}