/* band.css — the three service cards on the brand field.
   A grid, not a carousel. The frame's markup is a carousel track but it renders
   three cards filling the row with no controls and no overflow, so a grid is the
   honest reproduction; a carousel would add JS, focus-management and an ARIA
   contract that the design does not ask for. */

.gnt-band__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-6);
}

.gnt-bandcard {
	display: flex;
	flex-direction: column;
	min-height: 40rem; /* 640px */
	background-color: var(--color-surface-page);
	border-bottom-right-radius: var(--space-20); /* 80px */
	overflow: hidden;
}

.gnt-bandcard__media {
	position: relative;
	display: flex;
	align-items: center;
	height: 31.25rem; /* 500px */
	padding: var(--space-12);
	background-color: var(--color-surface-raised);
}

/* Scrim over the photograph. Contrast for the white title depends on the image
   behind it, so this needs a re-check once real photography lands — noted in
   docs/DESIGN_TOKENS.md. */
.gnt-bandcard__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: var(--color-surface-overlay);
}

.gnt-bandcard__bar {
	position: absolute;
	left: 0;
	top: 12.125rem; /* 194px */
	z-index: 1;
	/* Local, not the token: --accent-bar-width is now a 40px horizontal rule for
	   section headings, and this is a narrow vertical bar. */
	width: 0.8rem;
	height: 7rem; /* 112px */
	background-color: var(--brass-500);
}

.gnt-bandcard__title {
	position: relative;
	z-index: 1;
	margin: 0;
	font-size: var(--text-h2);
	line-height: var(--text-h2-lh);
	color: var(--color-text-inverse);
}

.gnt-bandcard__foot {
	display: flex;
	flex: 1;
	align-items: center;
	padding: var(--space-12) var(--space-14);
}

@media (max-width: 1024px) {
	.gnt-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Odd card out spans the row rather than sitting in a lonely half. */
	.gnt-band__grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }

	.gnt-bandcard        { min-height: 0; }
	.gnt-bandcard__media { height: 22rem; padding: var(--space-8); }
	.gnt-bandcard__bar   { top: 50%; transform: translateY(-50%); height: 5.5rem; }
	.gnt-bandcard__foot  { padding: var(--space-8) var(--space-8); }
}

@media (max-width: 767px) {
	.gnt-band__grid { grid-template-columns: minmax(0, 1fr); }
	.gnt-bandcard__media { height: 17rem; }
	.gnt-bandcard__title { font-size: 1.625rem; line-height: 1.2; }
	.gnt-bandcard { border-bottom-right-radius: var(--space-12); }
}