/**
 * Nordplast — Component Library
 *
 * Every value below reads from the tokens in main.css (colour,
 * spacing, typography, radius). Every margin/padding/gap uses a
 * var(--space-*) token — no exceptions. Fixed UI dimensions that
 * aren't "spacing" (icon box sizes, border widths, min-heights,
 * breakpoints) are plain px on purpose — a separate design concern
 * from the spacing rhythm, not an oversight. If a component needs a
 * new spacing value, add the token to main.css first — don't invent
 * a one-off gap/margin number in this file.
 *
 * Naming: BEM. Mobile-first: base rules are the small-screen layout,
 * @media (min-width) blocks add the desktop layout on top.
 */

/* =========================================================================
 * 1. BUTTONS — Primary / Secondary / Text Link
 * (Primary also matches Bricks' Theme Styles default button — this class
 * exists so Primary Button is a portable, self-contained component even
 * if Theme Styles regresses.)
 * ====================================================================== */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	min-height: 48px;
	padding: 0 var(--space-4);
	border-radius: var(--radius-button);
	font-family: var(--font-family-base);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-heading);
	border: 1px solid transparent;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
	cursor: pointer;
	text-decoration: none;
}

.btn--primary {
	background-color: var(--color-steel-blue);
	color: var(--color-white);
}
.btn--primary:hover,
.btn--primary:focus-visible {
	background-color: var(--color-steel-blue-light);
	color: var(--color-white);
}

.btn--secondary {
	background-color: transparent;
	color: var(--color-text);
	border-color: var(--color-text);
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
	background-color: var(--color-text);
	color: var(--color-white);
}
.btn--secondary.btn--on-dark {
	color: var(--color-white);
	border-color: var(--color-white);
}
.btn--secondary.btn--on-dark:hover,
.btn--secondary.btn--on-dark:focus-visible {
	background-color: var(--color-white);
	color: var(--color-charcoal);
}

.btn--text {
	min-height: auto;
	padding: 0;
	background: none;
	border: none;
	color: var(--color-steel-blue);
	position: relative;
}
.btn--text::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: -2px;
	width: 0;
	height: 1px;
	background-color: currentColor;
	transition: width var(--transition-fast);
}
.btn--text:hover::after,
.btn--text:focus-visible::after {
	width: 100%;
}

.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.btn-group {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

/* =========================================================================
 * 2. SECTION HEADING
 * ====================================================================== */

.section-heading {
	max-width: var(--container-narrow);
	margin-bottom: var(--space-4);
}
.section-heading--center {
	margin-inline: auto;
	text-align: center;
}
.section-heading__eyebrow {
	display: inline-block;
	font-size: var(--font-size-eyebrow);
	font-weight: var(--font-weight-medium);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-eyebrow);
	color: var(--color-steel-blue);
	margin-bottom: var(--space-2);
}
.section-heading__title {
	margin-bottom: var(--space-2);
}
.section-heading__text {
	color: var(--color-text-muted);
	margin: 0;
}

/* =========================================================================
 * 3. HERO SECTION
 * ====================================================================== */

.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 60vh;
	background-color: var(--color-charcoal);
	background-size: cover;
	background-position: center;
	color: var(--color-text-on-dark);
	padding: var(--space-6) var(--space-3);
}
@media (min-width: 1024px) {
	.hero { min-height: 85vh; padding: var(--space-8) var(--space-4); }
}

.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(26,29,33,0.78) 0%, rgba(26,29,33,0.2) 55%, rgba(26,29,33,0) 100%);
	pointer-events: none;
}

.hero__content {
	position: relative;
	z-index: 1;
	max-width: var(--container-narrow);
}
.hero__eyebrow { color: var(--color-text-on-dark); opacity: 0.85; }
.hero__title { color: var(--color-white); margin-bottom: var(--space-2); }
.hero__text { font-size: 1.125rem; opacity: 0.9; margin-bottom: var(--space-3); }

.hero--center { align-items: center; text-align: center; }
.hero--center .hero__content { margin-inline: auto; }

/* =========================================================================
 * 4. PAGE HEADER — lighter than Hero, used on interior/utility pages
 * ====================================================================== */

.page-header {
	background-color: var(--color-cool-gray);
	padding: var(--space-5) var(--space-3);
	text-align: center;
}
@media (min-width: 1024px) { .page-header { padding: var(--space-7) var(--space-4); } }

.page-header__title { margin-bottom: var(--space-1); }
.page-header__text { color: var(--color-text-muted); max-width: var(--container-narrow); margin: 0 auto; }
.page-header .breadcrumb { justify-content: center; margin-bottom: var(--space-2); }

/* =========================================================================
 * 5. BREADCRUMB
 * ====================================================================== */

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--font-size-small);
}
.breadcrumb__item { display: flex; align-items: center; gap: var(--space-1); }
.breadcrumb__item:not(:last-child)::after {
	content: '/';
	color: var(--color-text-muted);
	margin-left: var(--space-1);
}
.breadcrumb__link { color: var(--color-text-muted); }
.breadcrumb__link:hover { color: var(--color-steel-blue); }
.breadcrumb__current { color: var(--color-text); }

/* =========================================================================
 * 6. CTA BANNER (full section) + FOOTER CTA (compact)
 * ====================================================================== */

.cta-banner {
	background-color: var(--color-charcoal);
	color: var(--color-text-on-dark);
	padding: var(--space-6) var(--space-3);
	text-align: center;
}
@media (min-width: 1024px) { .cta-banner { padding: var(--space-7) var(--space-4); } }
.cta-banner__title { color: var(--color-white); margin-bottom: var(--space-3); }
.cta-banner .btn-group { justify-content: center; }

.footer-cta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-2);
	padding: var(--space-4);
	background-color: var(--color-cool-gray);
	border-radius: var(--radius-card);
}
@media (min-width: 640px) {
	.footer-cta {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}
.footer-cta__title { margin: 0; }
.footer-cta__text { color: var(--color-text-muted); margin: 0; }

/* =========================================================================
 * 7. CARDS — Feature / Service / Product
 * ====================================================================== */

.card-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
}
@media (min-width: 640px)  { .card-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .card-grid--4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px)  { .card-grid--5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .card-grid--5 { grid-template-columns: repeat(5, 1fr); } }

/* Feature Card — text-led, numeral instead of icon/photo */
.feature-card { }
.feature-card__number {
	font-size: 2.5rem;
	font-weight: 300;
	color: var(--color-steel-blue);
	line-height: 1;
	margin-bottom: var(--space-2);
}
.feature-card__title { margin-bottom: var(--space-1); }
.feature-card__text { color: var(--color-text-muted); margin: 0; }

/* Service Card — icon/photo-led */
.service-card {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: var(--space-4);
	transition: border-color var(--transition-fast);
}
.service-card:hover,
.service-card:focus-within { border-color: var(--color-steel-blue); }
.service-card__icon { width: 40px; height: 40px; color: var(--color-steel-blue); margin-bottom: var(--space-2); }
.service-card__title { margin-bottom: var(--space-1); }
.service-card__text { color: var(--color-text-muted); margin-bottom: var(--space-2); }

/* Product Card — photo-led, card container with image */
.product-card {
	display: block;
	border-radius: var(--radius-card);
	overflow: hidden;
	border: 1px solid var(--color-border);
	transition: border-color var(--transition-fast);
}
.product-card:hover,
.product-card:focus-within { border-color: var(--color-steel-blue); }
.product-card__image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.product-card__body { padding: var(--space-3); }
.product-card__title { margin-bottom: var(--space-1); }
.product-card__subtitle { color: var(--color-text-muted); font-size: var(--font-size-small); margin: 0; }

/* =========================================================================
 * 8. STATISTIC COUNTER
 * ====================================================================== */

.stats {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
	text-align: center;
}
@media (min-width: 768px) { .stats { grid-template-columns: repeat(4, 1fr); } }

.stat__number {
	display: block;
	font-size: var(--font-size-h2);
	font-weight: var(--font-weight-heading);
	color: var(--color-steel-blue);
}
.stat--on-dark .stat__number { color: var(--color-steel-blue-light); }
.stat__label { font-size: var(--font-size-small); color: var(--color-text-muted); margin-top: var(--space-1); }
.stat--on-dark .stat__label { color: var(--color-text-on-dark); opacity: 0.85; }

/* =========================================================================
 * 9. TIMELINE (dated/editorial) vs PROCESS STEPS (numbered/how-it-works)
 * ====================================================================== */

.timeline {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	border-left: 2px solid var(--color-border);
	padding-left: var(--space-4);
}
@media (min-width: 1024px) {
	.timeline {
		flex-direction: row;
		border-left: none;
		border-top: 1px solid var(--color-border);
		padding-left: 0;
		padding-top: var(--space-4);
	}
	.timeline__item { flex: 1; position: relative; }
	.timeline__item::before {
		content: '';
		position: absolute;
		top: calc(var(--space-4) * -1 - 5px);
		left: 0;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: var(--color-steel-blue);
	}
}
.timeline__date {
	font-size: var(--font-size-small);
	font-weight: var(--font-weight-medium);
	color: var(--color-steel-blue);
	margin-bottom: var(--space-1);
}
.timeline__title { margin-bottom: var(--space-1); }
.timeline__text { color: var(--color-text-muted); margin: 0; }

.process-steps {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
}
@media (min-width: 768px) { .process-steps { grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } }

@media (min-width: 640px)  { .process-steps--5 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .process-steps--5 { grid-template-columns: repeat(5, 1fr); gap: var(--space-3); } }

.process-steps__step { position: relative; }
.process-steps__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--color-steel-blue);
	color: var(--color-white);
	font-weight: var(--font-weight-heading);
	margin-bottom: var(--space-2);
}
.process-steps__title { margin-bottom: var(--space-1); }
.process-steps__text { color: var(--color-text-muted); font-size: var(--font-size-small); margin: 0; }

/* =========================================================================
 * 10. FAQ ACCORDION
 * ====================================================================== */

.accordion { border-top: 1px solid var(--color-border); }
.accordion-item { border-bottom: 1px solid var(--color-border); }

.accordion-item__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-2);
	padding: var(--space-3) 0;
	background: none;
	border: none;
	text-align: left;
	font-family: var(--font-family-base);
	font-size: 1.0625rem;
	font-weight: var(--font-weight-heading);
	color: var(--color-text);
	cursor: pointer;
}
.accordion-item__icon {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	position: relative;
}
.accordion-item__icon::before,
.accordion-item__icon::after {
	content: '';
	position: absolute;
	background-color: currentColor;
}
.accordion-item__icon::before { top: 9px; left: 2px; right: 2px; height: 2px; }
.accordion-item__icon::after { left: 9px; top: 2px; bottom: 2px; width: 2px; transition: opacity var(--transition-fast); }
.accordion-item__trigger[aria-expanded="true"] .accordion-item__icon::after { opacity: 0; }

.accordion-item__panel {
	overflow: hidden;
	max-height: 0;
	transition: max-height var(--transition-medium) ease;
}
.accordion-item__panel-inner {
	padding-bottom: var(--space-3);
	color: var(--color-text-muted);
}

/* =========================================================================
 * 11. TESTIMONIAL CARD
 * ====================================================================== */

.testimonial {
	background-color: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-card);
	padding: var(--space-4);
}
.testimonial__quote {
	font-size: 1.125rem;
	line-height: 1.5;
	margin: 0 0 var(--space-3);
}
.testimonial__quote::before { content: '\201C'; }
.testimonial__quote::after { content: '\201D'; }
.testimonial__author { font-weight: var(--font-weight-heading); }
.testimonial__role { color: var(--color-text-muted); font-size: var(--font-size-small); }

/* =========================================================================
 * 12. LOGO GRID
 * ====================================================================== */

.logo-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--space-4);
	align-items: center;
}
@media (min-width: 768px) { .logo-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .logo-grid { grid-template-columns: repeat(6, 1fr); } }

.logo-grid__item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-2);
}
.logo-grid__image {
	max-height: 40px;
	width: auto;
	filter: grayscale(100%);
	opacity: 0.6;
	transition: filter var(--transition-medium), opacity var(--transition-medium);
}
.logo-grid__item:hover .logo-grid__image,
.logo-grid__item:focus-within .logo-grid__image {
	filter: grayscale(0%);
	opacity: 1;
}

/* =========================================================================
 * 13. CONTACT CARD
 * ====================================================================== */

.contact-card {
	display: flex;
	align-items: flex-start;
	gap: var(--space-2);
	padding: var(--space-3);
}
.contact-card__icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--color-steel-blue);
}
.contact-card__label {
	display: block;
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
	margin-bottom: var(--space-1);
}
.contact-card__value { font-weight: var(--font-weight-medium); }
.contact-card__value a { color: inherit; }
.contact-card__value a:hover { color: var(--color-steel-blue); }

/* =========================================================================
 * 14. TEAM CARD
 * ====================================================================== */

.team-card { text-align: left; }
.team-card__photo {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--radius-card);
	margin-bottom: var(--space-2);
}
.team-card__name { margin-bottom: var(--space-1); }
.team-card__role { color: var(--color-text-muted); font-size: var(--font-size-small); margin-bottom: var(--space-2); }
.team-card__bio { color: var(--color-text-muted); margin: 0; }

/* =========================================================================
 * 15. NEWSLETTER BLOCK
 * ====================================================================== */

.newsletter {
	background-color: var(--color-cool-gray);
	border-radius: var(--radius-card);
	padding: var(--space-4);
}
.newsletter__title { margin-bottom: var(--space-1); }
.newsletter__text { color: var(--color-text-muted); margin-bottom: var(--space-3); }
.newsletter__form {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
}
@media (min-width: 640px) { .newsletter__form { flex-direction: row; } }

.newsletter__input {
	flex: 1;
	min-height: 48px;
	padding: 0 var(--space-2);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-button);
	font-family: var(--font-family-base);
	font-size: var(--font-size-body);
	background-color: var(--color-white);
}
.newsletter__input:focus-visible { border-color: var(--color-steel-blue); }
.newsletter__consent {
	font-size: var(--font-size-small);
	color: var(--color-text-muted);
	margin-top: var(--space-1);
}