/**
 * Block: HC Intro
 *
 * @package HeadAndCode\Core
 */

/* ── Section ─────────────────────────────────────────────────────────────── */

.hc-intro {
	background-color: #f2f0eb;
	padding-block: var(--hc-space-16);
}

/* ── Inner: zweispaltig ──────────────────────────────────────────────────── */

.hc-intro__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: var(--hc-space-16);
	align-items: center;
}

/* ── Linke Spalte ────────────────────────────────────────────────────────── */

.hc-intro__content {
	display: flex;
	flex-direction: column;
	gap: var(--hc-space-8);
}

/* Text */
.hc-intro__text {
	font-size: var(--hc-font-size-lg);
	line-height: var(--hc-line-height-normal);
	color: var(--hc-color-text);
}

.hc-intro__text p {
	margin: 0;
}

/* ── Pills ───────────────────────────────────────────────────────────────── */

.hc-intro__pills {
	display: flex;
	flex-direction: column;
	gap: var(--hc-space-3);
	align-items: flex-start;
}

.hc-intro__pill {
	display: inline-flex;
	align-items: center;
	padding: var(--hc-space-3) var(--hc-space-6);
	border: 1.5px solid var(--hc-color-accent);
	border-radius: var(--hc-radius-full);
	color: var(--hc-color-accent);
	font-size: var(--hc-font-size-md);
	font-weight: var(--hc-font-weight-medium);
	text-decoration: none;
	background: transparent;
	white-space: nowrap;

	/* Gestaffelte horizontale Versetzung per CSS Custom Property */
	margin-inline-start: calc( var(--pill-index, 0) * 80px );

	transition: background-color var(--hc-transition-fast),
	            color            var(--hc-transition-fast);
}

a.hc-intro__pill:hover {
	background-color: var(--hc-color-accent);
	color: var(--hc-color-white);
}

/* ── Rechte Spalte: Bild ─────────────────────────────────────────────────── */

.hc-intro__image-wrap {
	flex-shrink: 0;
}

.hc-intro__image {
	display: block;
	width: 260px;
	height: auto;
	border-radius: var(--hc-radius-lg);
	object-fit: cover;
	box-shadow: var(--hc-shadow-md);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
	.hc-intro__inner {
		grid-template-columns: 1fr;
		gap: var(--hc-space-8);
	}

	/* Bild vor Text auf Mobile */
	.hc-intro__image-wrap {
		order: -1;
	}

	.hc-intro__image {
		width: 100%;
		max-width: 320px;
		margin-inline: auto;
	}

	.hc-intro__pill {
		/* Auf Mobile keine Versetzung */
		margin-inline-start: 0 !important;
	}
}