/* ---------------------------------------------------------------------------
   Operations — patterns/operations.php (mockup section.operations#operations)

   Three trigger/first-move rows. The row is a 1fr 70px 1fr grid; below 720px it
   stacks and the arrow turns to point down the column.
--------------------------------------------------------------------------- */
.agenda-operations .problem-list { border-top: 1px solid var(--line); }

.agenda-operations .problem {
	display: grid;
	grid-template-columns: 1fr 70px 1fr;
	align-items: center;
	border-bottom: 1px solid var(--line);
	padding: 27px 0;
}
.agenda-operations .problem > * { margin-block: 0; }
.agenda-operations .problem h3 { font-size: 1.2rem; margin: 0 0 5px; }
.agenda-operations .problem p { margin: 0; color: var(--muted); font-size: .94rem; }

.agenda-operations .arrow {
	text-align: center;
	color: var(--green);
	font-size: 1.6rem;
}

.agenda-operations .first-move {
	border-left: 3px solid var(--green);
	padding-left: 22px;
}
/* Mockup renders this label as a display:block <strong>; ported as a paragraph
   (no bare inline element in block markup), so the weight is set here. */
.agenda-operations .first-move .first-move-label {
	color: var(--green-dark);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 0 0 5px;
}

@media (max-width: 720px) {
	.agenda-operations .problem {
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.agenda-operations .arrow {
		text-align: left;
		transform: rotate(90deg);
	}
}