/*
 * Brand layer — additions that are not part of the carried-over source stylesheet.
 *
 * Kept in its own file so assets/css/main.css stays the verbatim original and every
 * deliberate deviation from it is visible in one place.
 */

/* ------------------------------------------------------------------ site logo */

/*
 * The logo is two stacked layers, which is how the source theme handled its own mark:
 * the coloured part is fixed, the rest takes the header's current colour, so the
 * lockup stays legible white-on-dark over the hero and dark-on-light everywhere else.
 *
 *   .logo__ink     the wordmark and the N stroke, painted with currentColor through a
 *                  mask, so it follows --color exactly as the old .logo__text did
 *   .logo__accent  the brand blue, identical on both backgrounds
 */
.logo__lockup {
	position: relative;
	display: block;
	width: var( --logo-width, 150px );
	aspect-ratio: 700 / 173;
}

/* The header lockup has no tagline line, so its box is a touch wider per unit height. */
.logo__lockup--compact {
	aspect-ratio: 620 / 144;
}

.logo__lockup > * {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.logo__accent {
	object-fit: contain;
	object-position: left center;
}

.logo__ink {
	background-color: var( --logo-ink, currentColor );
	-webkit-mask: url( ../images/logo-ink.png ) no-repeat left center / contain;
	mask: url( ../images/logo-ink.png ) no-repeat left center / contain;
}

.logo__lockup--compact .logo__ink {
	-webkit-mask-image: url( ../images/logo-ink-compact.png );
	mask-image: url( ../images/logo-ink-compact.png );
}

.main-footer .logo__lockup {
	--logo-width: 176px;
}

@media ( max-width: 768px ) {
	.logo__lockup {
		--logo-width: 128px;
	}

	.main-footer .logo__lockup {
		--logo-width: 148px;
	}
}

/* --------------------------------------------------- background media treatment */

/*
 * A section background — still or video — can carry a treatment so bright footage
 * reads as a backdrop rather than competing with the copy over it. Both values are
 * set as inline custom properties by bluesoft/bg-image, so swapping the video never
 * means touching CSS.
 *
 *   --bs-media-filter  applied to the <img>/<video> itself (desaturate, dim)
 *   --bs-overlay       painted over it (tint, vignette)
 */
.bg-image img,
.bg-image video {
	filter: var( --bs-media-filter, none );
}

.bg-image__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var( --bs-overlay, none );
}

/* ------------------------------------------------------- grouped technology catalogue */

/*
 * The source grid puts its columns on .archive-technology__results directly, which
 * works for one flat list of logos. The catalogue is grouped by category, so the
 * outer element becomes a stack of groups and each group carries the grid instead.
 * Guarded by :has() so an ungrouped list keeps the original layout untouched.
 */
.archive-technology__results:has( .archive-technology__group ) {
	display: flex;
	flex-direction: column;
	gap: clamp( 32px, 3.2vw, 48px );
}

.archive-technology__items {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( var( --item-min-size ), 1fr ) );
	gap: clamp( 8px, 1.07vw, 16px );
}

.archive-technology__category {
	margin-bottom: 16px;
	/* Follows the surrounding ink so the catalogue reads on light and dark alike. */
	color: inherit;
	opacity: 0.6;
}

/*
 * Every .section paints background-color: var(--color-white). The archive blocks
 * render their own nested .section, so dropping one into a dark section repainted a
 * white panel over it — and the inherited white text then vanished. Nested archives
 * go transparent unless they declare a background of their own.
 */
.has-bg-black .section[class*="archive-"]:not( [class*="has-bg-" ] ) {
	background-color: transparent;
}

/*
 * The source also sets `.section:has(.section){padding:0}`, on the assumption that a
 * section wrapping another section lets the inner one supply the rhythm. That holds
 * for archive-service, which bakes pt-9 pb-9 into its own markup, but the generic
 * archive blocks carry no padding — so a section wrapping a heading plus an archive
 * collapsed to zero and its band ran straight into its neighbours.
 *
 * Restoring it here rather than through the wrapper's own padding utilities, because
 * :has() outranks a plain utility class and CSS gives no way to hand the cascade back.
 * That does mean the pt- and pb- classes on those wrappers are inert: change the scale
 * below, not the block's class, if this rhythm ever needs adjusting.
 */
.section:has( > [class*="archive-"] ) {
	padding: calc( var( --spacing-base ) * 14 ) var( --body-padding );
}

/*
 * The source's reset also zeroes the side gutters, which is why it exists: the inner
 * section supplies them, and restoring both would indent the archive twice. The
 * wrapper takes the gutter back (so its heading lines up with every other section on
 * the page) and the nested archive gives its own up.
 */
.section:has( > [class*="archive-"] ) > .section[class*="archive-"] {
	padding-left: 0;
	padding-right: 0;
}

/*
 * A partner with no logo yet renders as a named tile. It keeps the logo tile's
 * footprint so the grid stays aligned once artwork is uploaded, but centres the name
 * instead of leaving an empty figure pushing it to the bottom edge.
 */
.archive-partner__item:not( :has( img ) ) {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.archive-partner__item:not( :has( img ) ) > figure {
	display: none;
}

/*
 * A technology with no logo is a name, not a tile: the source's 235/170 aspect ratio
 * would leave most of the box empty, so those collapse to a compact chip.
 */
.archive-technology__group {
	--item-min-size: 170px;
}

.archive-technology__item:not( :has( img ) ) {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: auto;
	padding: 14px 20px;
	text-align: center;
}

.archive-technology__item:not( :has( img ) ) > figure {
	display: none;
}

.archive-technology__empty,
.archive-partner__empty {
	color: var( --color-gray-50 );
}

/* ------------------------------------------------------ hero with the logos removed */

/*
 * Temporary, while the client logo row is out of the homepage hero. Above 1280px the
 * hero's lower band is a flex row of two auto-width columns, so the copy was being
 * shrunk by the logos beside it — emptying that column would let the paragraph run
 * the full width and reflow the hero. Pinning the copy to half the row keeps the
 * layout exactly as it was.
 *
 * Scoped to :has(.hero__logos:empty), so the moment logos are put back the rule stops
 * matching and removes itself. Nothing to undo here.
 */
@media ( min-width: 1280px ) {
	.hero__bottom:has( .hero__logos:empty ) > .column:first-child {
		flex: 0 1 50%;
		max-width: 50%;
	}
}

/*
 * The linkless industry card is a div rather than an anchor, so it needs the hover
 * affordances switching off rather than restyling.
 */
.img-block--static {
	cursor: default;
}

/* --------------------------------------------------------------- profile link row */

/*
 * The founder profile's website / LinkedIn row. Each entry is a bluesoft/item-icon-text
 * rather than hand-written SVG, because the page only inlines the sprite symbols that
 * bluesoft_get_icon() registered — a raw <use href="#icon-…"> would resolve to nothing.
 * This just lays the entries out side by side and matches the footer's hover.
 */
.profile-links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 40px;
	margin-top: 8px;
}

.profile-links a {
	transition-duration: 0.3s;
	transition-property: opacity;
}

.profile-links a:hover {
	opacity: 0.75;
}

/* ------------------------------------------------------------- empty archive state */

/*
 * An archive with nothing to list used to emit a bare, unstyled paragraph. It now
 * renders as a panel built from the same ingredients as the cards it stands in for
 * — white, 1px gray-20 border, 16px radius — so an empty listing still looks like
 * part of the page rather than a rendering failure.
 */
.listing__empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	padding: clamp( 40px, 5vw, 72px ) clamp( 24px, 4vw, 56px );
	border: 1px solid var( --color-gray-20 );
	border-radius: 16px;
	background: var( --color-white );
	text-align: center;
}

.listing__empty-text {
	max-width: 60ch;
	line-height: 1.6;
	color: var( --color-gray-50 );
}

.listing__empty-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 8px;
}

.listing__empty-cta .icon {
	width: 1em;
	height: 1em;
}

/* ------------------------------------------------------------------- hero button */

/*
 * Page heroes now stack their label, title and lead flush, the way the post-hero
 * on a Service page does. That reads well for text, but a button hard against the
 * lead above it does not — this restores the 24px the old .hero__inner flex gap
 * used to provide. Only a hero that actually carries a button is affected.
 */
.hero > .ctx > .btn:not( :first-child ) {
	margin-top: 24px;
}

/* ----------------------------------------------------- service sub-listing cards */

/*
 * The sub-service links under a top-level service read as cards rather than as a
 * bare list: one tile per child, equal height within a row, with the "Read more"
 * affordance pinned to the bottom edge so the links line up however long the
 * excerpts run.
 *
 * Scoped to .archive-service so the compact .sub-listing the service-group card
 * uses elsewhere keeps its own (source) styling.
 */
.archive-service .sub-listing__item {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
	padding: 40px;
	border-radius: 16px;
	background: var( --color-gray-10 );
	color: var( --color-black );
	transition-duration: 0.3s;
	transition-property: background-color;
}

.archive-service .sub-listing__item:hover {
	background: var( --color-gray-20 );
}

.archive-service .sub-listing__excerpt {
	/* Pushes the "Read more" line to the bottom of the tile. */
	flex: 1 1 auto;
	line-height: 1.5;
}

.archive-service .sub-listing__more {
	position: relative;
	padding-bottom: 2px;
	/* A permanent rule, unlike .hover-line__line, which only draws on hover. */
	box-shadow: inset 0 -1px 0 0 currentColor;
	transition-duration: 0.3s;
	transition-property: color;
}

.archive-service .sub-listing__item:hover .sub-listing__more {
	color: var( --color-blue );
}

@media ( max-width: 768px ) {
	.archive-service .sub-listing__item {
		gap: 24px;
		padding: 32px 24px;
	}
}

/* ------------------------------------------------------------------ FAQ spacing */

/*
 * A plain stacked FAQ sits 24px apart, while the two-column variant the source used on
 * its own service pages ends up 40px apart — 16px of row gap plus the 24px margin its
 * items carry. Stacked items looked cramped next to that, so they use the same rhythm.
 * The variants keep their own spacing.
 */
@media ( min-width: 769px ) {
	.faq:not( .faq--columnar ):not( .faq--with-image ) {
		gap: 40px;
	}
}