/**
 * HTG Card Grid — styles
 *
 * Pure content block. No background, no full-bleed — those belong to a
 * wrapping htg/section. Two card styles are supported:
 *  - flat: cards share the section background; optional separator rules
 *  - elevated: white cards with soft shadow on a colored section
 */

.htg-card-grid {
	width: 100%;
}

/* --- Grid layout -------------------------------------------------- */

.htg-card-grid__grid {
	display: grid;
	gap: 0;
}

.htg-card-grid--cols-2 .htg-card-grid__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.htg-card-grid--cols-3 .htg-card-grid__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.htg-card-grid--cols-4 .htg-card-grid__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* In elevated mode, the grid gets gaps between cards instead of borders */
.htg-card-grid--style-elevated .htg-card-grid__grid {
	gap: var(--sp-md);
}

/* --- Card item ---------------------------------------------------- */

.htg-card-grid__item {
	padding: var(--sp-lg) var(--sp-md);
	display: flex;
	flex-direction: column;
	gap: var(--sp-sm);
	min-width: 0;
}

/* Elevated variant: white card on the section's bg, soft shadow,
   square corners (no border-radius), no separators */
.htg-card-grid--style-elevated .htg-card-grid__item {
	background: var(--c-white);
	color: var(--c-ink);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
	border-radius: 0;
	padding: var(--sp-lg);
}

/* The first child (icon or number) gets a little extra space below */
.htg-card-grid__item > .htg-card-grid__number,
.htg-card-grid__item > .htg-card-grid__icon {
	margin-bottom: var(--sp-sm);
}

/* Number indicator (when no icon) */
.htg-card-grid__number {
	font-family: var(--ff-mono);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: 0.08em;
	color: var(--c-red);
	text-transform: uppercase;
}

/* Icon (when set) */
.htg-card-grid__icon {
	position: relative;
	width: 64px;
	height: 64px;
}

.htg-card-grid__icon-normal,
.htg-card-grid__icon-hover {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.htg-card-grid__icon-normal svg,
.htg-card-grid__icon-hover svg {
	width: 100%;
	height: 100%;
}

/* Default state: show black, hide red. The hidden state uses display:none
   so SMIL animations on the red SVG are paused/reset. They restart from
   frame 0 the moment we toggle to display: block on hover. */
.htg-card-grid__icon-hover {
	display: none;
}

.htg-card-grid__item--with-icon:hover .htg-card-grid__icon-normal,
.htg-card-grid__item--with-icon:focus-within .htg-card-grid__icon-normal {
	display: none;
}

.htg-card-grid__item--with-icon:hover .htg-card-grid__icon-hover,
.htg-card-grid__item--with-icon:focus-within .htg-card-grid__icon-hover {
	display: block;
}

/* Heading */
.htg-card-grid__heading {
	margin: 0;
	font-family: var(--ff-serif);
	font-weight: 400;
	line-height: 1.08;
	font-size: clamp(1.25rem, 1.5vw, 1.5rem);
}

/* Body */
.htg-card-grid__body {
	font-size: var(--fs-base);
	line-height: 1.55;
	flex: 1;
}

.htg-card-grid__body p { margin: 0 0 var(--sp-sm); }
.htg-card-grid__body p:last-child { margin-bottom: 0; }

/* Link */
.htg-card-grid__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-xs);
	margin-top: var(--sp-md);
	font-family: var(--ff-mono);
	font-size: var(--fs-xs);
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: inherit;
	text-decoration: none;
	transition: color var(--dur-base) var(--ease-out);
}

.htg-card-grid__link:hover,
.htg-card-grid__link:focus-visible {
	color: var(--c-red);
}

.htg-card-grid__link-arrow {
	transition: transform var(--dur-base) var(--ease-out);
}

.htg-card-grid__link:hover .htg-card-grid__link-arrow,
.htg-card-grid__link:focus-visible .htg-card-grid__link-arrow {
	transform: translateX(4px);
}

/* --- Separators (only apply to flat cardStyle) ------------------- */

.htg-card-grid--sep-top .htg-card-grid__grid {
	border-top: 1px solid var(--c-ink);
	padding-top: var(--sp-lg);
	margin-top: 0;
}

.htg-card-grid--sep-bottom .htg-card-grid__grid {
	border-bottom: 1px solid var(--c-ink);
	padding-bottom: var(--sp-lg);
	margin-bottom: var(--sp-lg);
}

/* Vertical column rules — pseudo-element so they don't visually intersect row rules */
.htg-card-grid--sep-columns.htg-card-grid--cols-2 .htg-card-grid__item:not(:nth-child(2n)),
.htg-card-grid--sep-columns.htg-card-grid--cols-3 .htg-card-grid__item:not(:nth-child(3n)),
.htg-card-grid--sep-columns.htg-card-grid--cols-4 .htg-card-grid__item:not(:nth-child(4n)) {
	position: relative;
}

.htg-card-grid--sep-columns.htg-card-grid--cols-2 .htg-card-grid__item:not(:nth-child(2n))::after,
.htg-card-grid--sep-columns.htg-card-grid--cols-3 .htg-card-grid__item:not(:nth-child(3n))::after,
.htg-card-grid--sep-columns.htg-card-grid--cols-4 .htg-card-grid__item:not(:nth-child(4n))::after {
	content: "";
	position: absolute;
	right: 0;
	top: var(--sp-md);
	bottom: var(--sp-md);
	width: 1px;
	background: var(--c-ink-10);
}

/* Horizontal row rules */
.htg-card-grid--sep-rows.htg-card-grid--cols-2 .htg-card-grid__item:nth-child(n+3) {
	border-top: 1px solid var(--c-ink-10);
}

.htg-card-grid--sep-rows.htg-card-grid--cols-3 .htg-card-grid__item:nth-child(n+4) {
	border-top: 1px solid var(--c-ink-10);
}

.htg-card-grid--sep-rows.htg-card-grid--cols-4 .htg-card-grid__item:nth-child(n+5) {
	border-top: 1px solid var(--c-ink-10);
}

/* On dark Section parents, separators flip to a light tone */
.htg-section--bg-dark-grey .htg-card-grid--sep-top .htg-card-grid__grid,
.htg-section--bg-navy      .htg-card-grid--sep-top .htg-card-grid__grid,
.htg-section--bg-dark-grey .htg-card-grid--sep-bottom .htg-card-grid__grid,
.htg-section--bg-navy      .htg-card-grid--sep-bottom .htg-card-grid__grid {
	border-color: var(--c-white);
}

.htg-section--bg-dark-grey .htg-card-grid--sep-columns .htg-card-grid__item::after,
.htg-section--bg-navy      .htg-card-grid--sep-columns .htg-card-grid__item::after,
.htg-section--bg-dark-grey .htg-card-grid--sep-rows .htg-card-grid__item,
.htg-section--bg-navy      .htg-card-grid--sep-rows .htg-card-grid__item {
	border-color: rgba(255, 255, 255, 0.15);
	background: transparent;
}

.htg-section--bg-dark-grey .htg-card-grid--sep-columns .htg-card-grid__item::after,
.htg-section--bg-navy      .htg-card-grid--sep-columns .htg-card-grid__item::after {
	background: rgba(255, 255, 255, 0.15);
}

/* --- Responsive --------------------------------------------------- */

@media (max-width: 900px) {
	.htg-card-grid--cols-3 .htg-card-grid__grid,
	.htg-card-grid--cols-4 .htg-card-grid__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.htg-card-grid--sep-columns.htg-card-grid--cols-3 .htg-card-grid__item::after,
	.htg-card-grid--sep-columns.htg-card-grid--cols-4 .htg-card-grid__item::after {
		display: none;
	}
	.htg-card-grid--sep-columns.htg-card-grid--cols-3 .htg-card-grid__item:not(:nth-child(2n))::after,
	.htg-card-grid--sep-columns.htg-card-grid--cols-4 .htg-card-grid__item:not(:nth-child(2n))::after {
		display: block;
	}

	.htg-card-grid--sep-rows.htg-card-grid--cols-3 .htg-card-grid__item,
	.htg-card-grid--sep-rows.htg-card-grid--cols-4 .htg-card-grid__item {
		border-top: none;
	}
	.htg-card-grid--sep-rows.htg-card-grid--cols-3 .htg-card-grid__item:nth-child(n+3),
	.htg-card-grid--sep-rows.htg-card-grid--cols-4 .htg-card-grid__item:nth-child(n+3) {
		border-top: 1px solid var(--c-ink-10);
	}
}

@media (max-width: 560px) {
	.htg-card-grid__grid {
		grid-template-columns: 1fr !important;
	}

	.htg-card-grid--sep-columns .htg-card-grid__item::after {
		display: none !important;
	}

	.htg-card-grid--sep-rows .htg-card-grid__item:not(:first-child) {
		border-top: 1px solid var(--c-ink-10);
	}
}