/**
 * Home need entry "Ko vēlaties izveidot?" (inc/need-entry.php). Loaded only where the block renders.
 * Every selector is scoped to the block wrapper .cr-section--need-entry.
 * One drawing moment: the theme motion system adds .is-pending below the fold and .is-drawn in view
 * ([data-cr-draw]); without JS or with reduced motion the icons and rules are simply complete.
 */

.cr-section--need-entry .cr-section__inner {
	display: grid;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	grid-template-columns: minmax(0, 1fr);
}

.cr-section--need-entry .cr-section__head {
	margin-bottom: 0;
}

@media (min-width: 60em) {
	.cr-section--need-entry .cr-section__inner {
		align-items: end;
		grid-template-columns: minmax(0, 1fr) auto;
	}

	.cr-section--need-entry .cr-need-entry__grid {
		grid-column: 1 / -1;
	}
}

.cr-section--need-entry .cr-need-entry__direct {
	display: grid;
	gap: 0.35rem;
	justify-items: start;
}

.cr-section--need-entry .cr-need-entry__note {
	color: var(--cr-muted);
	font-size: var(--wp--preset--font-size--sm, 0.875rem);
	margin: 0;
}

.cr-section--need-entry .cr-need-entry__grid {
	display: grid;
	gap: 0.75rem;
	/* 2 × 2 on mid widths (never 3 + 1); one column when the text is large; 4 columns from 60em (below) */
	grid-template-columns: repeat(auto-fit, minmax(min(100%, max(13rem, calc(50% - 0.4rem))), 1fr));
	list-style: none;
	margin: var(--wp--preset--spacing--30) 0 0;
	padding: 0;
}

@media (min-width: 60em) {
	.cr-section--need-entry .cr-need-entry__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.cr-section--need-entry .cr-need-entry__grid > li {
	display: flex; /* equal card heights per row without percentage heights */
	min-width: 0;
}

.cr-section--need-entry .cr-need-entry__card {
	background-color: var(--cr-surface);
	border: 1px solid var(--cr-line);
	border-top-right-radius: var(--cr-notch, 20px);
	color: var(--cr-text);
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	gap: 0.55rem;
	min-width: 0;
	padding: 1.1rem 1.1rem 1rem;
	position: relative;
	text-decoration: none;
	transition: border-color var(--cr-dur-fast) var(--cr-ease), background-color var(--cr-dur-fast) var(--cr-ease);
}

.cr-section--need-entry .cr-need-entry__card:hover,
.cr-section--need-entry .cr-need-entry__card:focus-visible {
	background: linear-gradient(160deg, color-mix(in srgb, var(--cr-violet) 28%, transparent), transparent 70%), var(--cr-surface);
	border-color: var(--cr-gold);
}

.cr-section--need-entry .cr-need-entry__card:focus-visible {
	outline: var(--cr-focus);
	outline-offset: 3px;
}

.cr-section--need-entry .cr-need-entry__icon {
	color: var(--cr-gold);
	fill: none;
	height: 44px;
	overflow: visible;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.2;
	width: 44px;
}

.cr-section--need-entry .cr-need-entry__icon :is(path, rect, circle) {
	stroke-dasharray: 1;
	stroke-dashoffset: 0;
}

.cr-section--need-entry .cr-need-entry__title,
.cr-section--need-entry .cr-need-entry__text {
	overflow-wrap: anywhere;
	min-width: 0;
}

.cr-section--need-entry .cr-need-entry__title {
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.25;
}

.cr-section--need-entry .cr-need-entry__text {
	color: var(--cr-muted);
	font-size: 0.875rem;
	line-height: 1.4;
}

.cr-section--need-entry .cr-need-entry__go {
	color: var(--cr-gold);
	display: block; /* not flex: the words may wrap (and break) on very narrow screens with large text */
	font-size: 0.875rem;
	margin-top: auto;
	overflow-wrap: anywhere;
	padding-top: 0.6rem;
}

.cr-section--need-entry .cr-need-entry__rule {
	background: var(--cr-gold);
	display: inline-block;
	height: 1px;
	margin-left: 0.5rem;
	position: relative;
	vertical-align: middle;
	transition: width var(--cr-dur) var(--cr-ease);
	width: 26px;
}

.cr-section--need-entry .cr-need-entry__rule::after {
	border-bottom: 4.5px solid transparent;
	border-left: 8px solid var(--cr-signal);
	border-top: 4.5px solid transparent;
	content: "";
	position: absolute;
	right: -7px;
	top: -4px;
}

.cr-section--need-entry .cr-need-entry__card:hover .cr-need-entry__rule,
.cr-section--need-entry .cr-need-entry__card:focus-visible .cr-need-entry__rule {
	width: 44px;
}

/* Drawing moment (motion on only — motion.js never adds these classes with reduced motion or without JS). */
.cr-section--need-entry .cr-need-entry__grid.is-pending .cr-need-entry__icon :is(path, rect, circle) {
	stroke-dashoffset: 1;
}

.cr-section--need-entry .cr-need-entry__grid.is-pending .cr-need-entry__rule {
	width: 0;
}

.cr-section--need-entry .cr-need-entry__grid.is-drawn .cr-need-entry__icon :is(path, rect, circle) {
	animation: cr-need-draw 700ms var(--cr-ease-out) both;
	animation-delay: calc(var(--n, 0) * 90ms);
}

.cr-section--need-entry .cr-need-entry__grid.is-drawn .cr-need-entry__rule {
	animation: cr-need-rule 520ms var(--cr-ease-out) both;
	animation-delay: calc(300ms + var(--n, 0) * 90ms);
}

@keyframes cr-need-draw {
	from {
		stroke-dashoffset: 1;
	}

	to {
		stroke-dashoffset: 0;
	}
}

@keyframes cr-need-rule {
	from {
		width: 0;
	}
}

/* Narrow: one column, icon beside the text — shorter and easier to scan. */
@media (max-width: 37.49875em) {
	.cr-section--need-entry .cr-need-entry__grid {
		gap: 0.6rem;
		grid-template-columns: minmax(0, 1fr);
	}

	.cr-section--need-entry .cr-need-entry__card {
		align-items: start;
		column-gap: 0.9rem;
		display: grid;
		grid-template-columns: 40px minmax(0, 1fr);
		padding: 0.95rem 1rem;
		row-gap: 0.25rem;
	}

	.cr-section--need-entry .cr-need-entry__icon {
		grid-row: 1 / span 3;
		height: 40px;
		width: 40px;
	}

	.cr-section--need-entry .cr-need-entry__go {
		padding-top: 0.35rem;
	}
}

/* Very narrow (320 px with 200 % text, or 200 % zoom): icon above the text, so the text keeps the full card width. */
@media (max-width: 22.5em) {
	.cr-section--need-entry .cr-need-entry__card {
		grid-template-columns: minmax(0, 1fr);
	}

	.cr-section--need-entry .cr-need-entry__icon {
		grid-row: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cr-section--need-entry .cr-need-entry__card,
	.cr-section--need-entry .cr-need-entry__rule {
		transition: none;
	}
}