/* ==========================================================================
   AKUMED — archive-poradnia
   Header (heading + intro) + 3-col responsive card grid.
   ========================================================================== */

/* Section wrapper — adds bottom breathing room scaled per breakpoint. */
.poradnie-archive {
	padding-bottom: 40px;
}
@media (min-width: 768px) {
	.poradnie-archive {
		padding-bottom: 60px;
	}
}
@media (min-width: 1024px) {
	.poradnie-archive {
		padding-bottom: 80px;
	}
}

/* Header */
.poradnie-archive__header {
	margin-bottom: var(--space-xl, 32px);
}
.poradnie-archive__heading {
	font-family: var(--font-base);
	font-size: var(--fs-h1);
	font-weight: 700;
	line-height: 1.15;
	color: var(--color-text);
	margin: 0 0 12px;
}
.poradnie-archive__intro {
	color: var(--color-text-muted, #6B7280);
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
	max-width: 640px;
}

.poradnie-grid {
	display: grid;
	grid-template-columns: 1fr; /* mobile: full-width card list */
	gap: var(--space-md, 16px);
}

@media (min-width: 600px) {
	.poradnie-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.poradnie-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-lg, 20px);
	}
}

.poradnie-card {
	background: var(--color-surface, #f6f7f7);
	border-radius: var(--radius-xl, 32px);
	padding: 28px 28px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0; /* prevent content (long titles) from blowing the grid column */
}

/* Divider — mobile-only element used to draw a horizontal line between
 * the description and the stats/link row. Hidden on desktop. */
.poradnie-card__divider {
	display: none;
}

/* Head (icon + title) wrapper. On desktop `display: contents` so the
 * children flow into the card's flex column as if no wrapper existed.
 * On mobile a real flex row puts icon and title side by side with tight
 * gap, independent of the card's grid layout. */
.poradnie-card__head {
	display: contents;
}

@media (max-width: 600px) {
	.poradnie-card {
		padding: 20px;
		padding-bottom: 24px; /* room for absolute arrow */
		gap: 12px;
		border-radius: var(--radius-lg, 20px);
		position: relative;
	}
}

/* Icon */
.poradnie-card__icon-wrap {
	width: 56px;
	height: 56px;
	border-radius: 14px;
	flex-shrink: 0;
}

/* Icon painted in brand green via CSS mask. Source SVG provided via `--icon`
 * inline var on the span. Note: 11 of the legacy poradnia icons are
 * PNG-in-SVG wrappers and won't mask cleanly — they'll show as solid color
 * shapes. Tracked in PROJECT_STATE backlog (replace with real vectors). */
.poradnie-card__icon {
	width: 48px;
	height: 48px;
	display: inline-block;
	background-color: var(--color-brand, #007e6e);
	-webkit-mask-image: var(--icon);
	mask-image: var(--icon);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* Title */
.poradnie-card__title {
	font-family: var(--font-base);
	font-size: 1.375rem; /* 22px desktop */
	font-weight: 500;
	line-height: 1.25;
	margin: 0;
	color: var(--color-text-body, #3C3C3B);
	/* Break long single words (np. "Psychoseksuologia") so they don't
	 * overflow card padding on narrow mobile columns. */
	overflow-wrap: anywhere;
	word-break: break-word;
	hyphens: auto;
}

@media (max-width: 600px) {
	.poradnie-card__title {
		font-size: 1.0625rem; /* 17px mobile */
		line-height: 1.3;
	}
}

.poradnie-card__title a {
	color: inherit;
	text-decoration: none;
}

.poradnie-card__title a:hover,
.poradnie-card__title a:focus-visible {
	color: var(--color-brand, #007e6e);
}

/* Description — 3-line clamp */
.poradnie-card__desc {
	color: var(--color-text-muted, #646970);
	font-size: 15px;
	line-height: 1.55;
	margin: 0;
	flex: 1;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Stats row */
.poradnie-card__stats {
	display: flex;
	gap: 20px;
	font-size: 15px;
	color: var(--color-text-muted, #646970);
	flex-wrap: wrap;
}

.poradnie-card__stat strong {
	color: var(--color-text);
	font-weight: 700;
	margin-right: 4px;
}

/* "Zobacz poradnię →" link */
.poradnie-card__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-brand, #007e6e);
	text-decoration: none;
	font-weight: 400;
	font-size: 15px;
	margin-top: auto;
	padding-top: 6px;
}

.poradnie-card__link svg {
	width: 16px;
	height: 16px;
	transition: transform 0.15s ease;
}

.poradnie-card__link:hover,
.poradnie-card__link:focus-visible {
	color: #006658;
}

.poradnie-card__link:hover svg,
.poradnie-card__link:focus-visible svg {
	transform: translateX(4px);
}

/* ==========================================================================
   Mobile overrides — placed at the end so they win over base rules above.
   Mobile card: full-width 1-col list item. CSS grid splits the card into:
     row 1: icon | title       (small icon next to bold title)
     row 2: description (2-line clamp)
     row 3: stats | link       (counts left, "Dowiedz się więcej →" right)
   Background is white with a subtle border (no surface fill on mobile).
   ========================================================================== */
@media (max-width: 600px) {
	.poradnie-card {
		aspect-ratio: auto;
		background: #fff;
		border: 1px solid var(--color-border, #d0d4d8);
		border-radius: var(--radius-lg, 20px);
		padding: 18px 20px;
		display: grid;
		grid-template-areas:
			"head"
			"desc"
			"divider"
			"stats-row";
		grid-template-columns: 1fr;
		row-gap: 12px;
		text-align: left;
	}
	/* Head is a tight flex row — icon hugs title with small gap */
	.poradnie-card__head {
		grid-area: head;
		display: flex;
		align-items: center;
		gap: 12px;
	}
	.poradnie-card__icon-wrap {
		width: 44px;
		height: 44px;
		background: var(--color-surface, #f6f7f7);
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		margin: 0;
	}
	.poradnie-card__icon {
		width: 26px;
		height: 26px;
	}
	.poradnie-card__title {
		display: block;
		min-height: 0;
		margin: 0;
		font-size: 1.125rem; /* 18px */
		font-weight: 600;
		line-height: 1.25;
		color: var(--color-text);
		text-align: left;
		align-items: initial;
		justify-content: initial;
	}
	/* Remove the stretched-link pseudo — visible "Dowiedz się więcej" is the CTA now */
	.poradnie-card__title a::before {
		display: none;
	}
	.poradnie-card__desc {
		grid-area: desc;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		max-height: calc(1.55em * 2); /* hard cap — even if line-clamp falls back, the 3rd line is fully clipped */
		margin: 0;
		font-size: 14px;
		line-height: 1.55;
		color: var(--color-text-muted, #6B7280);
		overflow-wrap: anywhere;
		word-break: break-word;
	}
	/* Mobile-only horizontal divider between desc and bottom row */
	.poradnie-card__divider {
		grid-area: divider;
		display: block;
		width: 100%;
		margin: 0;
		border: none;
		border-top: 1px solid var(--color-border, #e5e7eb);
		height: 0;
	}
	.poradnie-card__stats {
		grid-area: stats-row;
		justify-self: start;
		display: flex;
		gap: 10px;
		font-size: 13px;
		align-self: center;
	}
	.poradnie-card__link {
		grid-area: stats-row;
		justify-self: end;
		display: inline-flex;
		position: static;
		align-self: center;
		margin: 0;
		padding: 0;
		gap: 6px;
		font-size: 14px;
		font-weight: 400;
	}
	.poradnie-card__link svg {
		width: 16px;
		height: 16px;
	}
	.poradnie-card__link-text {
		display: inline;
	}
}