/* workshop-connections — one workshop as a course-map row: the workshop
   card, then milestones, on the page, supplemental, practice.
   See templates/components/workshop-connections.php.

   Markup is in stacked reading order (card, milestones first). Up to full
   width it's flex, so a missing column just lets the next one move up —
   no empty rows adding up gaps: stacked on phones, two across (card beside
   milestones) as it widens. At full width it's one fixed grid row with
   milestones last, so columns line up across rows and a missing one leaves
   a blank cell you can scan past (Derek's sketch, 2026-09-28).

   $todo Temp styles — a boxy pass to see how it feels (Derek, 2026-09-28):
   the card and each item are outlined boxes, rows get room between them.
   Hierarchy (cards on big screens, plain links on phones?) still open. */

.workshop-connections {
	display: flex;
	flex-direction: column;
	gap: var(--space-large) var(--space-medium);
	padding-block: var(--space-large) calc(var(--space-large) * 2);

	/* A flex column so the footer sits at the foot of the card, teaser or not.
	   Its column wrapper keeps it its own height, not the row's. */
	/* The card's place in the row — keeps it its own height, not the row's. */
	.workshop-card-column {
		grid-area: card;
		align-self: start;
		display: grid;
		gap: var(--space-small);
	}

	.workshop-card {
		display: flex;
		flex-direction: column;
		gap: var(--space-small);
		padding: var(--space-medium);
		border: 1px solid var(--stroke-primary);

		/* Shaped like a page (US letter) only in the full-width row, where it's
		   a narrow column beside the others; stacked or two-across it just fits
		   its content. The ratio is a floor, not a cage — a long teaser still
		   grows it. */
		@media (width > 1200px) {
			aspect-ratio: 8.5 / 11;
		}

		/* Topics, updated date, and the Review / Edit links sit at the foot. */
		.workshop-card-footer {
			margin-top: auto;
			display: grid;
			gap: var(--space-small);
		}
	}

	/* Review (back to the workshop) on the left, admin Edit on the right;
	   above the card's fill-link layer so they stay clickable. */
	.workshop-card-actions {
		position: relative;
		z-index: 1;
		display: flex;
		justify-content: space-between;
		gap: var(--space-small);

		.admin-actions {
			margin-left: auto;
		}
	}

	/* A workshop with nothing attached says so, rather than leaving a blank
	   row that reads like a bug — and shows the gap when authoring. */
	.connection-empty {
		grid-column: 2 / -1;
		align-self: start;
		padding: var(--space-medium);
		border: 1px dashed var(--stroke-secondary);
	}

	.milestones {
		grid-area: milestones;
	}

	.on-page {
		grid-area: on-page;
	}

	.supplemental {
		grid-area: supplemental;
	}

	.practice {
		grid-area: practice;
	}

	.connection-column,
	.connection-group {
		display: grid;
		align-content: start;
		gap: var(--space-small);
	}

	/* Every label sits the same distance from its boxes, whether it names a
	   column (Supplemental) or a group inside one (Key concepts) — the extra
	   room goes between groups instead. */
	.connection-group + .connection-group {
		margin-top: var(--space-small);
	}

	ul {
		list-style: none;
		display: grid;
		gap: var(--space-small);
		margin: 0;
		padding-left: 0;
	}

	li + li {
		margin-top: 0;
	}

	/* The box is the list item — ours — not the link inside it, so global
	   link styles can't reshape it. A linked item's fill-link makes the
	   whole box clickable. */
	/* $todo Color try-out (Derek, 2026-09-28): the color follows the kind of
	   thing, not the column — resources orange, stories purple, key concepts
	   light blue, gems light green, projects light red (the old v2 type
	   colors, never tokenized). Scoped here until another surface uses them;
	   then they graduate to tokens. Kinds without a color stay neutral. */
	.connection-item {
		--connection-color: var(--stroke-primary);

		&[data-type='resource'] {
			--connection-color: var(--color-orange-400);
		}

		&[data-type='story'] {
			--connection-color: var(--color-purple-400);
		}

		&[data-type='key_concept'] {
			--connection-color: var(--color-sky-400);
		}

		&[data-type='gem'] {
			--connection-color: var(--color-green-400);
		}

		&[data-type='project'] {
			--connection-color: var(--color-red-400);
		}
	}

	.connection-item {
		padding: var(--space-small) var(--space-medium);
		border: 1px solid color-mix(in srgb, var(--connection-color) 35%, transparent);
		background: color-mix(in srgb, var(--connection-color) 10%, transparent);

		/* The icon + title is icon-label; this row only paints its icon. */
		--icon-label-color: var(--connection-color);
	}

	@media (width > 600px) {
		flex-direction: row;
		flex-wrap: wrap;

		> * {
			flex: 0 1 calc((100% - var(--space-medium)) / 2);
			min-width: 0;
		}
	}

	@media (width > 1200px) {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		grid-template-areas: 'card on-page supplemental practice milestones';
	}
}