/**
 * WEPRO: Post Grid — Dynamic numbered card grid with CTA cell.
 *
 * Auto color palette: pick ONE accent color → cards alternate
 * dark (accent) and light (tinted) automatically.
 * Row heights alternate: tall → short → tall → short.
 */

/* ─── Section ─── */
.wsk-post-grid {
	background: var(--wsk-pg-bg, transparent);
}

/* ─── Grid — mobile-first: 1 column ─── */
.wsk-post-grid__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wsk-pg-gap, 16px);
}

/* ─── Header cell ─── */
.wsk-post-grid__header {
	padding: var(--wsk-pg-card-padding, clamp(1.5rem, 3vw, 2.5rem));
}

/* ─── Label typography ─── */
.wsk-post-grid__header .wsk-post-grid__label {
	font-weight: var(--wsk-pg-label-font-weight, 600);
	font-style: var(--wsk-pg-label-font-style, normal);
	font-size: var(--wsk-pg-label-font-size, 0.75rem);
	line-height: var(--wsk-pg-label-line-height, 1.4);
	letter-spacing: var(--wsk-pg-label-letter-spacing, 0.1em);
	text-transform: var(--wsk-pg-label-text-transform, uppercase);
	text-align: var(--wsk-pg-label-text-align, inherit);
	color: var(--wsk-pg-label-color, rgba(255,255,255,0.5));
	margin-top: var(--wsk-pg-label-margin-top, 0);
	margin-bottom: var(--wsk-pg-label-margin-bottom, 12px);
}

/* ─── Section title typography (inside header) ─── */
.wsk-post-grid__header .wsk-post-grid__title {
	font-weight: var(--wsk-pg-title-font-weight, 700);
	font-style: var(--wsk-pg-title-font-style, normal);
	font-size: var(--wsk-pg-title-font-size, clamp(1.5rem, 4vw, 2.5rem));
	line-height: var(--wsk-pg-title-line-height, 1.2);
	letter-spacing: var(--wsk-pg-title-letter-spacing, normal);
	text-transform: var(--wsk-pg-title-text-transform, none);
	text-align: var(--wsk-pg-title-text-align, inherit);
	color: var(--wsk-pg-title-color, #1a1a1a);
	margin-top: var(--wsk-pg-title-margin-top, 0);
	margin-bottom: var(--wsk-pg-title-margin-bottom, 0);
}

/* ─── Section description typography (inside header) ─── */
.wsk-post-grid__header .wsk-post-grid__description {
	font-weight: var(--wsk-pg-description-font-weight, 400);
	font-style: var(--wsk-pg-description-font-style, normal);
	font-size: var(--wsk-pg-description-font-size, 0.95rem);
	line-height: var(--wsk-pg-description-line-height, 1.7);
	letter-spacing: var(--wsk-pg-description-letter-spacing, normal);
	text-transform: var(--wsk-pg-description-text-transform, none);
	text-align: var(--wsk-pg-description-text-align, inherit);
	color: var(--wsk-pg-description-color, rgba(0,0,0,0.55));
	margin-top: var(--wsk-pg-description-margin-top, 12px);
	margin-bottom: var(--wsk-pg-description-margin-bottom, 0);
}

/* ─── Card link reset ─── */
.wsk-post-grid__card-link,
.wsk-post-grid__card-link:link,
.wsk-post-grid__card-link:visited {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	text-decoration: none !important;
	color: inherit !important;
	height: 100%;
	border-bottom: none !important;
	box-shadow: none !important;
}

.wsk-post-grid__card-link:hover,
.wsk-post-grid__card-link:focus,
.wsk-post-grid__card-link:active {
	text-decoration: none !important;
	color: inherit !important;
	border-bottom: none !important;
	box-shadow: none !important;
}

.wsk-post-grid__card-link .wsk-post-grid__card-title,
.wsk-post-grid__card-link .wsk-post-grid__card-text {
	text-decoration: none !important;
	border-bottom: none !important;
}

/* ═══════════════════════════════════════════
   AUTO COLOR PALETTE — from single accent
   ═══════════════════════════════════════════ */

/* ─── Card base ─── */
.wsk-post-grid__card {
	border-radius: var(--wsk-pg-card-radius, 16px);
	padding: var(--wsk-pg-card-padding, clamp(1.5rem, 3vw, 2.5rem));
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 220px;
	position: relative;
	overflow: hidden;
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

/* LIGHT variant (odd cards: 1st, 3rd, 5th...) */
.wsk-post-grid__card:nth-of-type(odd) {
	background: color-mix(in srgb, var(--wsk-pg-accent, #4a5568) 8%, #f3f4f6);
}

.wsk-post-grid__card:nth-of-type(odd) .wsk-post-grid__number {
	color: color-mix(in srgb, var(--wsk-pg-accent, #4a5568) 10%, transparent);
}

.wsk-post-grid__card:nth-of-type(odd) .wsk-post-grid__card-title {
	color: #1a1a1a;
}

.wsk-post-grid__card:nth-of-type(odd) .wsk-post-grid__card-text {
	color: rgba(0,0,0,0.55);
}

/* DARK variant (even cards: 2nd, 4th, 6th...) */
.wsk-post-grid__card:nth-of-type(even) {
	background: var(--wsk-pg-accent, #4a5568);
}

.wsk-post-grid__card:nth-of-type(even) .wsk-post-grid__number {
	color: rgba(255,255,255,0.12);
}

.wsk-post-grid__card:nth-of-type(even) .wsk-post-grid__card-title {
	color: #ffffff;
}

.wsk-post-grid__card:nth-of-type(even) .wsk-post-grid__card-text {
	color: rgba(255,255,255,0.7);
}

/* ─── Number — large, faded ─── */
.wsk-post-grid__number {
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-weight: 600;
	line-height: 1;
	display: block;
	margin-bottom: auto;
}

/* ─── Card content ─── */
.wsk-post-grid__card-title {
	font-weight: 700;
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	line-height: 1.3;
	margin: 0 0 8px;
}

.wsk-post-grid__card-text {
	font-weight: 400;
	font-size: clamp(0.85rem, 1.5vw, 0.95rem);
	line-height: 1.6;
	margin: 0;
}

/* ─── CTA cell ─── */
.wsk-post-grid__cta {
	position: relative;
	overflow: hidden;
	border-radius: var(--wsk-pg-card-radius, 16px);
	min-height: 220px;
}

.wsk-post-grid__cta-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: absolute;
	top: 0;
	left: 0;
}

.wsk-post-grid__cta-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-end;
	gap: 12px;
	padding: var(--wsk-pg-card-padding, clamp(1.5rem, 3vw, 2.5rem));
	background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 60%);
}

.wsk-post-grid__cta-title {
	color: #ffffff;
	font-size: clamp(1.1rem, 2vw, 1.4rem);
	font-weight: 600;
	line-height: 1.3;
	margin: 0 0 12px;
}

.wsk-post-grid__cta-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 24px;
	background: color-mix(in srgb, var(--wsk-pg-accent, #4a5568) 90%, black);
	color: #ffffff;
	border-radius: 999px;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: background 0.3s ease;
	min-height: 44px;
}

.wsk-post-grid__cta-btn svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.wsk-post-grid__cta-btn:hover {
	background: var(--wsk-pg-accent, #4a5568);
	color: #ffffff;
	text-decoration: none;
}

/* ─── Focus states ─── */
.wsk-post-grid__card:focus-within {
	box-shadow: 0 0 0 2px var(--wsk-pg-accent, #4a5568);
}

.wsk-post-grid__cta-btn:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

/* ─── Touch devices ─── */
@media (hover: none) {
	.wsk-post-grid__card:active {
		transform: translateY(-2px);
		box-shadow: 0 8px 24px rgba(0,0,0,0.25);
	}
}

/* ═══════════════════════════════════════════
   TABLET: 2 columns (640px+)
   ═══════════════════════════════════════════ */
@media (min-width: 640px) {
	.wsk-post-grid__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.wsk-post-grid__header {
		grid-column: 1 / -1;
	}
}

/* ─── Responsive typography: tablet ─── */
@media (min-width: 640px) and (max-width: 1024px) {
	.wsk-post-grid__header .wsk-post-grid__label {
		font-size: var(--wsk-pg-label-font-size-md, var(--wsk-pg-label-font-size, 0.75rem));
		text-align: var(--wsk-pg-label-text-align-md, var(--wsk-pg-label-text-align, inherit)) !important;
	}
	.wsk-post-grid__header .wsk-post-grid__title {
		font-size: var(--wsk-pg-title-font-size-md, var(--wsk-pg-title-font-size, clamp(1.5rem, 4vw, 2.5rem)));
		text-align: var(--wsk-pg-title-text-align-md, var(--wsk-pg-title-text-align, inherit)) !important;
	}
	.wsk-post-grid__header .wsk-post-grid__description {
		font-size: var(--wsk-pg-description-font-size-md, var(--wsk-pg-description-font-size, 0.95rem));
		text-align: var(--wsk-pg-description-text-align-md, var(--wsk-pg-description-text-align, inherit)) !important;
	}
}

/* ═══════════════════════════════════════════
   DESKTOP: var columns (1025px+)
   ═══════════════════════════════════════════ */
@media (min-width: 1025px) {
	.wsk-post-grid__grid {
		grid-template-columns: repeat(var(--wsk-pg-columns, 3), 1fr);
	}

	/* Header: 1 cell, its content height drives row 1 */
	.wsk-post-grid__header {
		grid-column: auto;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* Hover: subtle lift */
	.wsk-post-grid__card:hover {
		transform: translateY(-4px);
		box-shadow: 0 12px 32px rgba(0,0,0,0.3);
	}

	/* Responsive typography: desktop */
	.wsk-post-grid__header .wsk-post-grid__label {
		font-size: var(--wsk-pg-label-font-size, 0.75rem);
		text-align: var(--wsk-pg-label-text-align, inherit);
	}
	.wsk-post-grid__header .wsk-post-grid__title {
		font-size: var(--wsk-pg-title-font-size, clamp(1.5rem, 4vw, 2.5rem));
		text-align: var(--wsk-pg-title-text-align, inherit);
	}
	.wsk-post-grid__header .wsk-post-grid__description {
		font-size: var(--wsk-pg-description-font-size, 0.95rem);
		text-align: var(--wsk-pg-description-text-align, inherit);
	}
}

/* ─── Small screens: typography ─── */
@media (max-width: 639px) {
	.wsk-post-grid__header .wsk-post-grid__label {
		font-size: var(--wsk-pg-label-font-size-sm, var(--wsk-pg-label-font-size-md, var(--wsk-pg-label-font-size, 0.75rem)));
		text-align: var(--wsk-pg-label-text-align-sm, var(--wsk-pg-label-text-align-md, var(--wsk-pg-label-text-align, inherit))) !important;
	}
	.wsk-post-grid__header .wsk-post-grid__title {
		font-size: var(--wsk-pg-title-font-size-sm, var(--wsk-pg-title-font-size-md, var(--wsk-pg-title-font-size, clamp(1.5rem, 4vw, 2.5rem))));
		text-align: var(--wsk-pg-title-text-align-sm, var(--wsk-pg-title-text-align-md, var(--wsk-pg-title-text-align, inherit))) !important;
	}
	.wsk-post-grid__header .wsk-post-grid__description {
		font-size: var(--wsk-pg-description-font-size-sm, var(--wsk-pg-description-font-size-md, var(--wsk-pg-description-font-size, 0.95rem)));
		text-align: var(--wsk-pg-description-text-align-sm, var(--wsk-pg-description-text-align-md, var(--wsk-pg-description-text-align, inherit))) !important;
	}
}

/* ─── Staggered reveal animation ─── */
.wsk-post-grid__card,
.wsk-post-grid__cta {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
	            transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.wsk-post-grid__card.is-visible,
.wsk-post-grid__cta.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
	.wsk-post-grid__card,
	.wsk-post-grid__cta {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.wsk-post-grid__card:hover {
		transform: none;
		box-shadow: none;
	}
	.wsk-post-grid__cta-btn {
		transition: none;
	}
}