/* ===================================================================
 * component.css — Atom site reusable component styles
 *
 * DESIGN.md tokens reference:
 *   button-primary: tertiary bg, white text, 8px radius, 12px 24px
 *   button-secondary: transparent, text color, border, 8px radius
 *   card: surface bg, md radius (12px), 24px padding, shadow
 *   tag: tertiary-15 bg, tertiary text, full radius
 * =================================================================== */

/* ------------------------------------------------------------------
 * Button system
 * ------------------------------------------------------------------ */
.atom-site__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	border-radius: var(--atom-radius-sm);
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
	line-height: 1.5;
}
.atom-site__button:hover {
	box-shadow: var(--atom-shadow-lg);
}

a.atom-site__button--primary,
button.atom-site__button--primary {
	color: var(--atom-white);
	background: var(--atom-primary);
	box-shadow: var(--atom-shadow);
}
a.atom-site__button--primary:hover,
button.atom-site__button--primary:hover {
	background: var(--atom-primary-dark);
}

a.atom-site__button--secondary,
button.atom-site__button--secondary {
	color: var(--atom-text);
	background: var(--atom-surface);
	border: 1px solid var(--atom-border);
}
a.atom-site__button--secondary:hover,
button.atom-site__button--secondary:hover {
	border-color: var(--atom-text);
}

.atom-site__button--light {
	color: var(--atom-text);
	background: var(--atom-surface);
}

button {
	border: 0;
	background: none;
	cursor: pointer;
}

/* ------------------------------------------------------------------
 * Text link
 * ------------------------------------------------------------------ */
.atom-site__text-link {
	color: var(--atom-primary);
	font-size: 0.88rem;
	font-weight: 700;
	text-decoration: none;
}

/* ------------------------------------------------------------------
 * Eyebrow label (section intro tag)
 * ------------------------------------------------------------------ */
.atom-site__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--atom-text-soft);
}

/* ------------------------------------------------------------------
 * Card system
 * ------------------------------------------------------------------ */
.atom-site__card,
.atom-site__rich-card,
.atom-site__contact-panel,
.atom-site__process-card,
.atom-site__cta-box {
	border: 1px solid var(--atom-border);
	border-radius: var(--atom-radius-md);
	background: var(--atom-surface);
	box-shadow: var(--atom-shadow);
	padding: 1.5rem;
}

.atom-site__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.8rem;
	height: 2.8rem;
	margin-bottom: 1rem;
	border-radius: var(--atom-radius-md);
	background: var(--atom-primary-soft);
	color: var(--atom-primary);
}
.atom-site__card-icon--soft {
	background: var(--atom-surface-soft);
	color: #59647f;
}

/* ------------------------------------------------------------------
 * Tag / Pill
 * ------------------------------------------------------------------ */
.atom-site__pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.34rem 0.65rem;
	border-radius: 4px;
	background: var(--atom-primary-soft);
	color: var(--atom-primary-dark);
	font-size: 0.72rem;
	font-weight: 700;
}
.atom-site__pill--light {
	background: #eef1f8;
	color: #525d78;
}

/* ------------------------------------------------------------------
 * Mini bullet list
 * ------------------------------------------------------------------ */
.atom-site__mini-list {
	display: grid;
	gap: 0.55rem;
	margin-top: 0.9rem;
	list-style: none;
	padding: 0;
	margin: 0;
}
.atom-site__mini-list li {
	position: relative;
	padding-left: 1rem;
	color: var(--atom-text-soft);
	font-size: 0.92rem;
}
.atom-site__mini-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7rem;
	width: 0.35rem;
	height: 0.35rem;
	border-radius: var(--atom-radius-full);
	background: var(--atom-primary);
}

/* ------------------------------------------------------------------
 * Pagination
 * ------------------------------------------------------------------ */
.atom-site__pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
	justify-content: center;
	margin-top: 2rem;
}

.atom-site__pagination-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--atom-border);
	border-radius: 4px;
	background: var(--atom-surface);
	font-size: 0.84rem;
	font-weight: 700;
	text-decoration: none;
}
.atom-site__pagination-link.is-current {
	background: var(--atom-primary);
	border-color: var(--atom-primary);
	color: var(--atom-white);
}

/* ------------------------------------------------------------------
 * Inline meta (index + tag row inside cards)
 * ------------------------------------------------------------------ */
.atom-site__library-inline-meta {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-bottom: 0.8rem;
}
.atom-site__library-inline-meta strong {
	font-size: 1.6rem;
	font-weight: 800;
	color: rgba(0, 0, 0, 0.06);
	line-height: 1;
}