/*
 * components.css
 * CityPress – Komponenty wielokrotnego użytku
 */

/* ---- Stretched link — pokrywa cały element-rodzic (position:relative) ---- */
.card-link {
	position: absolute;
	inset: 0;
	z-index: 3; /* Wyżej niż wszystkie body (z:2) — klik w tekst = klik w obrazek */
	border-radius: inherit;
}

/* Elementy interaktywne wewnątrz karty (buttony, linki) ponad overlayem */
.card-link~* a,
.card-link~* button,
.card-link+* a,
.card-link+* button {
	position: relative;
	z-index: 4;
}

/* ---- Kontener ---- */
.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* ---- Nagłówek sekcji ---- */
.section-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-5);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--color-border);
	position: relative;
}

.section-head::before {
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 52px;
	height: 3px;
	background: var(--color-accent);
	border-radius: var(--radius-xs);
}

.section-head__title {
	display: flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--font-body);
	font-size: var(--fs-11);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-text-muted);
}

.section-icon {
	width: 1.3em;
	height: 1.3em;
	flex-shrink: 0;
	opacity: 0.8;
}

[data-theme="dark"] .section-icon {
	filter: invert(1);
}

.section-head__more {
	font-size: var(--fs-12);
	font-weight: 600;
	color: var(--color-accent);
	white-space: nowrap;
	transition: color var(--ease-base);
}

.section-head__more:hover {
	color: var(--cp-red-light);
}

/* Wariant z większym tytułem (dla głównych sekcji) */
.section-head--lg .section-head__title {
	font-size: var(--fs-13);
	color: var(--color-text);
}

/* ---- Badge (etykieta kategorii) ---- */
.badge {
	display: inline-block;
	padding: 0.2em 0.55em;
	font-family: var(--font-body);
	font-size: var(--fs-10);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: #fff;
	border-radius: var(--radius-xs);
	line-height: 1.6;
	white-space: nowrap;
}

.badge--news {
	background: var(--cat-news);
}

.badge--city {
	background: var(--cat-city);
}

.badge--events {
	background: var(--cat-events);
}

.badge--alert {
	background: var(--cat-alert);
}

.badge--magazine {
	background: var(--cat-magazine);
}

.badge--guide {
	background: var(--cat-guide);
}

.badge--health {
	background: var(--cat-health);
}

.badge--tech {
	background: var(--cat-tech);
}

.badge--finance {
	background: var(--cat-finance);
}

.badge--auto {
	background: var(--cat-auto);
}

.badge--home {
	background: var(--cat-home);
}

.badge--kitchen {
	background: var(--cat-kitchen);
}

.badge--biz {
	background: var(--cat-biz);
}

.badge--sponsored {
	background: var(--cat-sponsored);
	font-style: italic;
}

/* ---- Link maskowany (data-cpl) ---- */
[data-cpl] {
	cursor: pointer;
}

[data-cpl]:focus-visible {
	outline: 2px solid var(--cp-red);
	outline-offset: 3px;
}

/* ---- Przycisk "Wróć na górę" ---- */
.back-to-top {
	position: fixed;
	bottom: var(--sp-6);
	right: var(--sp-6);
	width: 42px;
	height: 42px;
	background: var(--cp-navy);
	color: #fff;
	border-radius: var(--radius-sm);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-md);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity var(--ease-med), visibility var(--ease-med), transform var(--ease-med);
	z-index: 50;
}

.back-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover {
	background: var(--cp-red);
}

/* ---- Linia pozioma sekcji ---- */
.section-sep {
	border: none;
	border-top: 1px solid var(--color-border);
	margin: 0;
}

/* ---- Placeholder reklamy ---- */
.ad-slot {
	background: var(--color-surface-alt);
	border: 1px dashed var(--color-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-faint);
	font-size: var(--fs-11);
	font-family: var(--font-body);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: var(--radius-sm);
	flex-shrink: 0;
}