/**
 * KINND Single & Archive template styles
 *
 * Modern, engaging layout for CPT single and archive pages.
 * Design inspiration: TOOOLS.design, UI Goodies, Dribbble, designresourc.es.
 *
 * Override order: this stylesheet is enqueued on wp_enqueue_scripts priority 5 (before
 * Elementor frontend / post CSS). Equal or higher-specificity rules from Elementor or
 * the theme therefore win in the cascade. To skip loading: kinnd_enqueue_template_styles.
 * To load after Elementor so KINND wins again: kinnd_template_styles_dependencies = array( 'elementor-frontend' ).
 *
 * @package KinndPlatform
 * @since 1.5.0
 */

/* ==========================================================================
   Design system tokens (shared with Elementor + JetEngine)
   ========================================================================== */

:root {
	--kinnd-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--kinnd-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
	--kinnd-duration-fast: 0.2s;
	--kinnd-duration-normal: 0.35s;
	--kinnd-duration-slow: 0.5s;
	--kinnd-radius-sm: 8px;
	--kinnd-radius-md: 12px;
	--kinnd-radius-lg: 16px;
	--kinnd-radius-xl: 24px;
	--kinnd-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
	--kinnd-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
	--kinnd-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
	--kinnd-shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 10px 20px -5px rgba(0, 0, 0, 0.1);
	--kinnd-shadow-card-hover: 0 12px 24px -8px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

/* Entrance animation - fade + slide up */
@keyframes kinnd-fade-slide-in {
	from {
		opacity: 0;
		transform: translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.kinnd-animate-in {
	opacity: 0;
	animation: kinnd-fade-slide-in var(--kinnd-duration-normal) var(--kinnd-ease) forwards;
}

/* Slight delay for content block after hero on single */
.kinnd-single__content.kinnd-animate-in {
	animation-delay: 0.12s;
}

/* Stagger delay for archive grid cards (used when motion is allowed) */
.kinnd-archive__grid .kinnd-archive__card.kinnd-animate-in:nth-child(1) { animation-delay: 0ms; }
.kinnd-archive__grid .kinnd-archive__card.kinnd-animate-in:nth-child(2) { animation-delay: 50ms; }
.kinnd-archive__grid .kinnd-archive__card.kinnd-animate-in:nth-child(3) { animation-delay: 100ms; }
.kinnd-archive__grid .kinnd-archive__card.kinnd-animate-in:nth-child(4) { animation-delay: 150ms; }
.kinnd-archive__grid .kinnd-archive__card.kinnd-animate-in:nth-child(5) { animation-delay: 200ms; }
.kinnd-archive__grid .kinnd-archive__card.kinnd-animate-in:nth-child(6) { animation-delay: 250ms; }
.kinnd-archive__grid .kinnd-archive__card.kinnd-animate-in:nth-child(7) { animation-delay: 300ms; }
.kinnd-archive__grid .kinnd-archive__card.kinnd-animate-in:nth-child(8) { animation-delay: 350ms; }
.kinnd-archive__grid .kinnd-archive__card.kinnd-animate-in:nth-child(9) { animation-delay: 400ms; }
.kinnd-archive__grid .kinnd-archive__card.kinnd-animate-in:nth-child(n+10) { animation-delay: 450ms; }

/* Container - max-width pattern from UI kits / Dribbble */
.kinnd-container {
	--kinnd-container-width: min(1200px, 100% - 2rem);
	--kinnd-focus-ring: 0 0 0 3px rgba(14, 165, 233, 0.45);
	width: var(--kinnd-container-width);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}

@media (min-width: 768px) {
	.kinnd-container {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
	}
}

/* ==========================================================================
   Single template
   ========================================================================== */

.kinnd-single {
	padding: 2rem 0 3rem;
}

.kinnd-single__header {
	margin-bottom: 2rem;
}

.kinnd-single__eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--kinnd-eyebrow, #64748b);
	margin: 0 0 0.5rem;
}

.kinnd-single__title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.03em;
	margin: 0 0 1.25rem;
}

.kinnd-single__media {
	border-radius: var(--kinnd-radius-lg);
	overflow: hidden;
	box-shadow: var(--kinnd-shadow-card);
	margin-bottom: 2rem;
}

.kinnd-single__image {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover;
}

/* Meta strip - chips (status, dates, type, venue) */
.kinnd-single__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	margin: 0 0 1.25rem;
}

.kinnd-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	padding: 0.35rem 0.75rem;
	background: var(--kinnd-chip-bg, rgba(14, 165, 233, 0.1));
	color: var(--kinnd-chip-text, #0c4a6e);
	border-radius: 9999px;
	border: 1px solid var(--kinnd-chip-border, rgba(14, 165, 233, 0.2));
	transition: background var(--kinnd-duration-fast) ease, border-color var(--kinnd-duration-fast) ease;
}

.kinnd-chip--labeled .kinnd-chip__label {
	font-weight: 600;
	color: var(--kinnd-chip-label, #64748b);
}

.kinnd-single__summary {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--kinnd-summary-text, #475569);
	margin: 0 0 1.25rem;
}

.kinnd-single__summary p:first-child {
	margin-top: 0;
}

.kinnd-single__summary p:last-child {
	margin-bottom: 0;
}

/* Elementor single template summary widget (class: kinnd-single-summary) */
.kinnd-single-summary {
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--kinnd-summary-text, #475569);
	margin: 0 0 1.25rem;
}

.kinnd-single__cta-wrap {
	margin: 0 0 1.5rem;
}

.kinnd-single__cta.kinnd-cta {
	display: inline-flex;
	align-items: center;
	font-size: 0.9375rem;
	font-weight: 600;
	color: #fff;
	background: var(--kinnd-cta-bg, #0ea5e9);
	padding: 0.5rem 1.25rem;
	border-radius: var(--kinnd-radius-md);
	text-decoration: none;
	transition: background var(--kinnd-duration-fast) ease, transform var(--kinnd-duration-fast) var(--kinnd-ease);
}

.kinnd-single__cta.kinnd-cta:hover {
	background: var(--kinnd-cta-hover, #0284c7);
}

.kinnd-single__cta.kinnd-cta:focus-visible {
	outline: none;
	box-shadow: var(--kinnd-focus-ring);
}

/* Prose - readable body content */
.kinnd-prose {
	font-size: 1.0625rem;
	line-height: 1.75;
	color: var(--kinnd-prose-text, #1e293b);
}

.kinnd-prose > * + * {
	margin-top: 1.25em;
}

.kinnd-prose p {
	margin: 0 0 0.75em;
}

.kinnd-prose p:last-child {
	margin-bottom: 0;
}

.kinnd-prose a {
	color: var(--kinnd-link, #0ea5e9);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.kinnd-prose a:hover {
	text-decoration-thickness: 2px;
}

.kinnd-prose a:focus-visible {
	outline: none;
	box-shadow: var(--kinnd-focus-ring);
	border-radius: 4px;
}

.kinnd-single__content {
	font-size: 1.0625rem;
	line-height: 1.75;
}

.kinnd-single__content > * + * {
	margin-top: 1.25em;
}

.kinnd-single__content a:focus-visible {
	outline: none;
	box-shadow: var(--kinnd-focus-ring);
	border-radius: 4px;
}

/* ==========================================================================
   Archive template
   ========================================================================== */

.kinnd-archive {
	padding: 2rem 0 3rem;
}

.kinnd-archive__header {
	text-align: center;
	margin-bottom: 2.5rem;
}

.kinnd-archive__title {
	font-size: clamp(1.5rem, 3.5vw, 2.25rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 0.5rem;
}

.kinnd-archive__description {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--kinnd-archive-desc, #64748b);
	max-width: 42rem;
	margin: 0 auto;
}

.kinnd-archive__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
	gap: 1.5rem;
}

.kinnd-archive__card {
	border-radius: var(--kinnd-radius-lg);
	overflow: hidden;
	background: #fff;
	box-shadow: var(--kinnd-shadow-sm);
	border: 1px solid rgba(0, 0, 0, 0.06);
	transition: transform var(--kinnd-duration-normal) var(--kinnd-ease), box-shadow var(--kinnd-duration-normal) var(--kinnd-ease);
}

.kinnd-archive__card:hover {
	transform: translateY(-4px);
	box-shadow: var(--kinnd-shadow-card-hover);
}

.kinnd-archive__link {
	display: block;
	text-decoration: none;
	color: inherit;
	padding: 0;
}

.kinnd-archive__media {
	position: relative;
	overflow: hidden;
}

.kinnd-archive__image {
	width: 100%;
	height: 200px;
	object-fit: cover;
	display: block;
	transition: transform var(--kinnd-duration-slow) var(--kinnd-ease);
}

.kinnd-archive__card:hover .kinnd-archive__image {
	transform: scale(1.04);
}

.kinnd-archive__card-title {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	margin: 1rem 1.25rem 0.5rem;
}

.kinnd-archive__excerpt {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: #64748b;
	margin: 0 1.25rem 1rem;
}

.kinnd-archive__cta {
	display: inline-block;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--kinnd-archive-cta, #0ea5e9);
	margin: 0 1.25rem 1.25rem;
	transition: gap 0.2s ease;
}

.kinnd-archive__link:hover .kinnd-archive__cta {
	text-decoration: underline;
}

.kinnd-archive__link:focus-visible {
	outline: none;
	box-shadow: var(--kinnd-focus-ring);
	border-radius: 0.5rem;
}

.kinnd-archive__card:focus-within .kinnd-archive__link {
	box-shadow: var(--kinnd-focus-ring);
	border-radius: 0.5rem;
}

/* Empty state - Dribbble / UI Goodies style */
.kinnd-archive__empty {
	text-align: center;
	padding: 3rem 1.5rem;
	background: rgba(0, 0, 0, 0.02);
	border-radius: 1rem;
	border: 1px dashed rgba(0, 0, 0, 0.08);
}

.kinnd-archive__empty-text {
	margin: 0;
	font-size: 1.0625rem;
	color: var(--kinnd-archive-desc, #64748b);
}

.kinnd-archive__pagination {
	margin-top: 2.5rem;
	display: flex;
	justify-content: center;
}

.kinnd-archive__pagination .nav-links {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

.kinnd-archive__pagination a:focus-visible,
.kinnd-archive__pagination span.current {
	outline: none;
	box-shadow: var(--kinnd-focus-ring);
	border-radius: 6px;
}

/* Reduced motion - designresourc.es / Laws of UX */
@media (prefers-reduced-motion: reduce) {
	.kinnd-animate-in,
	.kinnd-archive__grid .kinnd-archive__card.kinnd-animate-in {
		animation: none;
		animation-delay: 0ms;
		opacity: 1;
		transform: none;
	}
	.kinnd-archive__card {
		transition: none;
	}
	.kinnd-archive__card:hover {
		transform: none;
	}
	.kinnd-archive__card:hover .kinnd-archive__image {
		transform: none;
	}
}