/* ==========================================================================
   Suppliers page (/about/suppliers/)
   No Lovable route exists for this page, so it follows the same furniture as
   About and Contact: hero, one white section, one tinted grid, brand band.
   ========================================================================== */

.naa-suppliers-hero__ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 32px;
}

.naa-page-hero .naa-page-btn--invert {
	background: var(--naa-brand-fg);
	color: var(--naa-brand) !important;
}

.naa-page-hero .naa-page-btn--ghost {
	background: transparent;
	color: var(--naa-brand-fg) !important;
	border: 1px solid color-mix(in srgb, var(--naa-brand-fg) 35%, transparent);
}

.naa-page-hero .naa-page-btn--ghost:hover {
	border-color: var(--naa-brand-fg);
	box-shadow: none;
}

/* --------------------------------------------------------------------------
   Selected with purpose
   -------------------------------------------------------------------------- */
.naa-suppliers-why {
	background: #fff;
	border-bottom: 1px solid var(--naa-border);
}

.naa-suppliers-why__grid {
	display: grid;
	gap: 40px;
}

@media (min-width: 900px) {
	.naa-suppliers-why__grid {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		align-items: start;
	}
}

.naa-lean-chrome .naa-suppliers-why .naa-page-h2,
.naa-suppliers-why .naa-page-h2 {
	max-width: 14ch;
}

.naa-suppliers-text {
	margin: 0 0 20px;
	max-width: 68ch;
	color: color-mix(in srgb, var(--naa-fg) 65%, transparent);
	font-size: 16px;
	line-height: 1.7;
}

.naa-suppliers-pull {
	margin: 28px 0 0;
	padding-left: 20px;
	border-left: 2px solid var(--naa-brand);
	color: var(--naa-brand);
	font-size: 18px;
	font-weight: 600;
	line-height: 1.5;
}

/* --------------------------------------------------------------------------
   Brand grid
   -------------------------------------------------------------------------- */
.naa-suppliers-brands {
	background: color-mix(in srgb, var(--naa-brand-soft) 40%, #fff);
}

.naa-suppliers-brands__head {
	max-width: 672px;
	margin: 0 auto;
	text-align: center;
}

.naa-suppliers-brands__lead {
	margin: 16px 0 0;
	color: color-mix(in srgb, var(--naa-fg) 60%, transparent);
	font-size: 15px;
	line-height: 1.6;
}

.naa-suppliers-grid {
	display: grid;
	gap: 24px;
	margin-top: 48px;
}

@media (min-width: 640px) {
	.naa-suppliers-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.naa-suppliers-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.naa-suppliers-card {
	display: flex;
	flex-direction: column;
	padding: 28px;
	border: 1px solid var(--naa-border);
	border-radius: var(--naa-radius);
	background: #fff;
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.naa-suppliers-card:hover {
	transform: translateY(-4px);
	border-color: color-mix(in srgb, var(--naa-brand) 30%, transparent);
	box-shadow: 0 18px 36px rgba(9, 20, 15, 0.08);
}

/* The logos arrive at wildly different shapes, so the box is fixed and the
   image is contained inside it rather than cropped. */
.naa-suppliers-card__logo {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 56px;
	margin-bottom: 20px;
}

.naa-suppliers-card__logo img {
	max-height: 100%;
	max-width: 70%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.naa-lean-chrome .naa-suppliers-card__name,
.naa-suppliers-card .naa-suppliers-card__name {
	margin: 0;
	color: var(--naa-fg);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.naa-suppliers-card__name a {
	color: inherit;
	text-decoration: none;
}

.naa-suppliers-card__name a:hover {
	color: var(--naa-brand);
}

.naa-suppliers-card__text {
	margin: 12px 0 0;
	color: color-mix(in srgb, var(--naa-fg) 60%, transparent);
	font-size: 14px;
	line-height: 1.625;
}

.naa-suppliers-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 24px;
}

.naa-suppliers-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 2px;
	border-bottom: 1px solid color-mix(in srgb, var(--naa-brand) 30%, transparent);
	color: var(--naa-brand);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.naa-suppliers-card__more:hover {
	border-bottom-color: var(--naa-brand);
}

.naa-suppliers-card__site {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: color-mix(in srgb, var(--naa-fg) 55%, transparent);
	font-size: 13px;
	text-decoration: none;
}

.naa-suppliers-card__site:hover {
	color: var(--naa-brand);
}

.naa-suppliers-empty {
	margin: 48px 0 0;
	text-align: center;
	color: var(--naa-muted);
}