/* Project grid block — token variables only. */

/* --- Section head (eyebrow → heading → intro) ---------------------------- */

.doryo-projects__head {
	max-width: 720px;
	margin-block-end: var(--wp--preset--spacing--6-xl);
}

/* On the project overview the block carries the page's own <h1> head, so it
   needs the title-area top spacing the template's page-head would give. */
.doryo-projects--archive {
	display: block;
	padding-block-start: var(--wp--preset--spacing--6-xl);
}

/* Breathing room before a following CTA (e.g. "Alle Projekte ansehen"), which
   otherwise sits flush against the grid — the section wrapper has no block gap. */
.doryo-projects + .doryo-button {
	margin-block-start: var(--wp--preset--spacing--5-xl);
}

.doryo-projects__heading {
	margin: var(--wp--preset--spacing--lg) 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-lg);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--tight);
}

.doryo-projects__intro {
	margin: var(--wp--preset--spacing--xl) 0 0;
	font-size: var(--wp--preset--font-size--text-lg);
	color: var(--wp--preset--color--fg-muted);
}

/* --- Grid ---------------------------------------------------------------- */

.doryo-project-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--6-xl) var(--wp--preset--spacing--8-xl);
}

@media (min-width: 600px) {
	.doryo-project-grid {
		grid-template-columns: repeat(2, 1fr);
		align-items: start;
		/* Reserve room for the offset column's overhang below the last row. */
		padding-block-end: var(--wp--preset--spacing--9-xl);
	}

	/* Staggered two-column layout (Cuberto-style): the right column drops by
	   a fixed offset. transform keeps it out of layout flow, so the left
	   column stays tight and rows don't grow. */
	.doryo-project-grid__item:nth-child(even) {
		transform: translateY(var(--wp--preset--spacing--9-xl));
	}
}

.doryo-project-grid__link {
	display: block;
	text-decoration: none;
	color: var(--wp--preset--color--fg);
	border-radius: var(--wp--custom--radius--2-xl);
}

.doryo-project-grid__media {
	display: block;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--2-xl);
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--border-subtle);
	margin-block-end: var(--wp--preset--spacing--lg);
}

.doryo-project-grid__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	transition: transform var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

.doryo-project-grid__link:hover .doryo-project-grid__media img,
.doryo-project-grid__link:focus-visible .doryo-project-grid__media img {
	transform: scale(1.02);
}

@media (prefers-reduced-motion: reduce) {
	.doryo-project-grid__media img {
		transition: none;
	}

	.doryo-project-grid__link:hover .doryo-project-grid__media img,
	.doryo-project-grid__link:focus-visible .doryo-project-grid__media img {
		transform: none;
	}
}

.doryo-project-grid__customer {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--fg-muted);
	margin-block-end: var(--wp--preset--spacing--xs);
}

.doryo-project-grid__title {
	display: block;
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-xs);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--tight);
}

.doryo-project-grid__link:hover .doryo-project-grid__title {
	color: var(--wp--preset--color--brand);
}

/* Teaser under the title — a short project excerpt for scent + GEO context.
   Shown in full (kept short editorially), not truncated. */
.doryo-project-grid__excerpt {
	display: block;
	margin-block-start: var(--wp--preset--spacing--sm);
	font-size: var(--wp--preset--font-size--text-md);
	line-height: var(--wp--custom--line-height--snug);
	color: var(--wp--preset--color--fg-muted);
}

/* --- Task tags (pills) --------------------------------------------------- */

/* Tags live OUTSIDE the card link (see render.php) so each can be its own
   link to the taxonomy archive without nesting <a> inside the card <a>. */
.doryo-project-grid__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--sm);
	margin: var(--wp--preset--spacing--lg) 0 0;
	padding: 0;
	list-style: none;
}

.doryo-project-grid__tag {
	display: inline-block;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	transform: translateZ(0);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--text-xs);
	line-height: 1.4;
	color: var(--wp--preset--color--fg-muted);
	padding: var(--wp--preset--spacing--xs) var(--wp--preset--spacing--lg);
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--border-subtle);
	border-radius: var(--wp--custom--radius--full);
	text-decoration: none;
	transition:
		color var(--wp--custom--motion--base) var(--wp--custom--motion--ease),
		border-color var(--wp--custom--motion--base) var(--wp--custom--motion--ease);
}

/* Same interaction as .doryo-button (its no-JS path): an ellipse wipes in from
   below on hover/focus and the text inverts — done with a pseudo-element so the
   pill needs no extra markup. Only links are interactive (WP_Error → span). */
a.doryo-project-grid__tag::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: -50%;
	left: -25%;
	width: 150%;
	height: 200%;
	border-radius: 50%;
	background: var(--wp--preset--color--brand);
	transform: translate3d(0, 101%, 0);
	transition: transform 600ms var(--wp--custom--motion--ease);
	pointer-events: none;
}

a.doryo-project-grid__tag:hover,
a.doryo-project-grid__tag:focus-visible {
	color: var(--wp--preset--color--fg-on-brand);
	border-color: var(--wp--preset--color--brand);
}

a.doryo-project-grid__tag:hover::before,
a.doryo-project-grid__tag:focus-visible::before {
	transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
	a.doryo-project-grid__tag::before {
		display: none;
	}

	a.doryo-project-grid__tag:hover,
	a.doryo-project-grid__tag:focus-visible {
		background: var(--wp--preset--color--brand);
		color: var(--wp--preset--color--fg-on-brand);
	}
}

/* --- Archive pagination -------------------------------------------------- */

.doryo-project-grid__pagination {
	margin-block-start: var(--wp--preset--spacing--7-xl);
}

.doryo-project-grid__pagination ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--sm);
}

.doryo-project-grid__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 var(--wp--preset--spacing--md);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--text-sm);
	color: var(--wp--preset--color--fg);
	text-decoration: none;
	border: var(--wp--custom--border--width) solid var(--wp--preset--color--border-subtle);
	border-radius: var(--wp--custom--radius--full);
	transition:
		border-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease),
		background-color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease),
		color var(--wp--custom--motion--fast) var(--wp--custom--motion--ease);
}

.doryo-project-grid__pagination a.page-numbers:hover {
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--brand);
}

.doryo-project-grid__pagination .page-numbers.current {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--fg-on-brand);
}

.doryo-project-grid__pagination .page-numbers.dots {
	border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
	.doryo-project-grid__pagination .page-numbers {
		transition: none;
	}
}