/**
 * Company data datasheet (template-parts/company/company-data.php).
 *
 * The first page with no hero: it opens on the light page background under
 * the in-flow header, so the section carries its own top spacing rather than
 * inheriting a band's.
 */

.cd {
	padding-block: var(--section-pad-y);
}

.cd .eyebrow {
	margin-bottom: 32px;
}

.cd__name {
	margin-bottom: 96px;
	color: var(--color-heading-text);
}

/* --------------------------------------------------------------------
 * Two columns of groups
 * -------------------------------------------------------------------- */

.cd__sheet {
	display: grid;
	grid-template-columns: 1fr 1fr;
	/* The site's two-column gap, the one every section header uses. 164px was
	   the hero's, which pairs a headline with an aside rather than two columns
	   of the same kind of thing. */
	column-gap: 124px;
	align-items: start;
}

.cd__column {
	display: flex;
	flex-direction: column;
	gap: 64px;
	min-width: 0;
}

/* --------------------------------------------------------------------
 * Group
 *
 * No label and no rule above it any more, so no padding-top either: that
 * space was clearance for a rule that no longer exists. The 64px between
 * groups in a column is now the only thing that separates them.
 * -------------------------------------------------------------------- */

.cd__rows {
	margin: 0;
}

/* --------------------------------------------------------------------
 * Rows
 *
 * A fixed label column so every label in the sheet starts and ends on the
 * same line, and baseline alignment so a one-line label sits on the first
 * line of a value that wraps to four.
 * -------------------------------------------------------------------- */

.cd__row {
	display: grid;
	grid-template-columns: 170px 1fr;
	gap: 24px;
	align-items: baseline;
	padding-block: 16px;
}

.cd__row + .cd__row {
	border-top: 1px solid var(--color-border-subtle);
}

/* Nothing under the last row of a group: the group's own gap separates it
   from the next, and a closing rule would read as a second group label. */
.cd__row:last-child {
	padding-bottom: 0;
}

.cd__row:first-child {
	padding-top: 0;
}

.cd__label {
	margin: 0;
	font-size: var(--type-card-body-size);
	line-height: 1.45;
	font-weight: var(--type-card-body-weight);
	color: var(--color-text-secondary);
}

.cd__value {
	margin: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 12px;
	min-width: 0;
	color: var(--color-heading-text);
}

/* Identifiers, the phone and the IBAN: machine values, read and transcribed
   rather than read as prose. */
.cd__value--mono {
	font-family: var(--font-mono);
	font-size: var(--type-card-body-size);
	line-height: 1.45;
	font-weight: 500;
}

.cd__value--text {
	font-size: var(--type-card-body-size);
	line-height: 1.45;
	font-weight: var(--type-card-body-weight);
}

/* Running text: the register entry and the bank's legal name are sentences,
   not values, so they step back to secondary. */
.cd__value--prose {
	font-size: var(--type-body-size);
	line-height: var(--type-body-line);
	font-weight: var(--type-body-weight);
	color: var(--color-text-secondary);
}

.cd__value > span {
	min-width: 0;
	overflow-wrap: anywhere;
}

.cd__link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--color-border-subtle);
	transition: border-color 150ms ease, color 150ms ease;
}

.cd__link:hover,
.cd__link:focus-visible {
	color: var(--color-accent);
	border-bottom-color: var(--color-accent);
}

/* --------------------------------------------------------------------
 * Copy button
 * -------------------------------------------------------------------- */

.cd__copy {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
	padding: 4px 8px;
	border: 1px solid var(--color-border-subtle);
	border-radius: 6px; /* the site's only radius */
	background: none;
	cursor: pointer;
	/* Type comes from .type-label on the element: this is a label like any
	   other on the site, and labels here are mono. Only the colour is the
	   button's own. */
	color: var(--color-text-secondary);
	transition: color 150ms ease, border-color 150ms ease;
}

/* Tracked type leaves a trailing letter-space after the last glyph, which
   would push the text off-centre inside the padding. */
.cd__copy-text {
	margin-right: calc(var(--type-label-spacing) * -1);
}

.cd__copy:hover,
.cd__copy:focus-visible {
	color: var(--color-heading-text);
	border-color: var(--color-border-strong);
}

.cd__copy.is-copied {
	color: var(--color-accent);
	border-color: var(--color-accent);
}

.cd__copy-icon {
	display: flex;
}

.cd__copy.is-copied .cd__copy-icon {
	display: none;
}

/* --------------------------------------------------------------------
 * Below 1024: one column, and the label moves above its value
 * -------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.cd__name {
		margin-bottom: 48px;
	}

	.cd__sheet {
		grid-template-columns: 1fr;
		row-gap: 64px;
	}

	.cd__row {
		display: block;
	}

	.cd__label {
		margin-bottom: 6px;
	}
}