/*
  Component: section header.
  Figma: "section header" (62:2595).

  Horizontal divider line + label row (bullet + uppercase title on left,
  "see all" link with arrow icon on right).
*/

.c-section-header {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
}

.c-section-header__rule {
	display: block;
	height: 1px;
	width: 100%;
	background: var(--c-fg);
}

.c-section-header__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
}

.c-section-header__title {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 0;
	font-size: var(--fs-heading-14);
	line-height: var(--lh-heading-14);
	font-weight: var(--fw-bold);
	letter-spacing: -0.42px;       /* Figma -3 → -0.42px at 14pt */
	text-transform: uppercase;
	color: var(--c-fg);
}

.c-section-header__bullet {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--c-accent);   /* red dot — adds brand color to every section */
	flex-shrink: 0;
}

.c-section-header__more {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: var(--fs-link-14);
	line-height: var(--lh-link-14);
	font-weight: var(--fw-semibold);
	color: var(--c-fg);
	text-decoration: none;
}
.c-section-header__more:hover,
.c-section-header__more:focus-visible {
	text-decoration: none;
}
.c-section-header__more:hover .c-section-header__arrow {
	transform: translateX(2px);
}

.c-section-header__arrow {
	display: inline-flex;
	width: 20px;
	height: 20px;
	transition: transform 200ms ease;
	color: var(--c-fg);
}

/* Featured variant — Figma 308:4766 / 1:2319. Red label + red "Shiko të gjitha" + tilted arrow. */
.c-section-header--featured .c-section-header__title {
	color: var(--c-accent);
}
.c-section-header--featured .c-section-header__more {
	color: var(--c-accent);
}
.c-section-header--featured .c-section-header__arrow {
	color: var(--c-accent);
}
.c-section-header--featured .c-section-header__more:hover .c-section-header__arrow {
	transform: translate(2px, -2px);
}

/* On mobile, the "see all" link wraps under the title with extra spacing. */
@media (max-width: 480px) {
	.c-section-header__row {
		flex-wrap: wrap;
		gap: var(--space-2);
	}
	.c-section-header__more { margin-left: auto; }
}