:root {
	--phillipsOpportunitiesGreen: #9ac368;
	--phillipsOpportunitiesDarkGreen: #8ab35c;
	--phillipsOpportunitiesLightGray: #f4f4f4;
}

.po-archive {
	margin-bottom: 3rem !important;
	.sr-only {
		position: absolute;
		width: 1px !important;
		height: 1px !important;
		padding: 0 !important;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
	}

	h1 {
		color: var(--phillipsOpportunitiesGreen);
		margin-bottom: .25em;
	}
	.po-archive-header p {
		margin: 0 0 2rem;
		max-width: 700px;
		font-size: 1.05rem;
		line-height: 1.5;
	}

	.po-archive-filters input[type="search"] {
		width: 280px;
		padding: 10px 12px;
		background-color: rgba(0, 0, 0, 0.035);
		box-shadow: none;
		-webkit-box-shadow: none;
		border: none;
		position: relative;
		margin: 0;
		font-size: 14px;
		border-bottom: 2px solid var(--phillipsLightGray);
		-webkit-transition: border-color 0.2s ease;
		transition: border-color 0.2s ease;
		border-radius: 0;
	}

	.po-archive-filters {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 14px 18px;
		margin-bottom: 3rem;
		padding-bottom: 2rem;
		border-bottom: 2px solid var(--phillipsOpportunitiesLightGray);

		label {
			font-size: 1rem;
		}
		button {
			background-color: var(--phillipsOpportunitiesGreen);
			border: none;
			color: #fff;
			cursor: pointer;
			padding: 9px 14px;
			transition: background-color 0.2s ease;
			&:hover {
				background-color: var(--phillipsOpportunitiesDarkGreen);
			}
		}
	}

	.po-clear-filters {
		font-size: 0.95rem;
	}

	.po-archive-grid {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 22px;
		padding: 0;
		margin: 0;
		list-style: none;
		li {
			list-style: none;
			&:hover {
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
				cursor: pointer;
				transition: box-shadow 0.1s ease;
				.po-card-main h2 {
					text-decoration: underline;
				}
			}
		}
	}

	.po-opportunity-card {
		background: var(--phillipsOpportunitiesLightGray);
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		padding: 16px;
		
		h2 {
			color: var(--phillipsOpportunitiesGreen);
			margin: 0 0 6px;
			font-size: 1.5rem;
			line-height: 1.2;
		}

		p {
			font-size: 1.15rem;
			margin: 0 0 .85rem;
			padding: 0;
			line-height: 1.5;
			&.po-card-org {
				font-weight: 600;
			}
			&.description {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
				margin: 0;
			}
		}
		.po-card-footer {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-top: 12px;
			position: relative;
		}

		.po-card-button {
			display: inline-block;
			color: #fff;
			background-color: #333;
			cursor: pointer;
			font-size: 1rem;
			line-height: 1.2;
			padding: 8px 12px;
			text-decoration: none;
			transition: all .45s cubic-bezier(.25, 1, .33, 1);
			width: auto;
			&:hover {
				background-color: #555;
			}
		}

		.po-paid-pill {
			border-radius: 100%;
			box-sizing: border-box;
			background: var(--phillipsOpportunitiesGreen);
			padding: 8px;
			width: 32px;
			height: 32px;
			svg {
				display: block;
				width: 100%;
				height: 100%;
			}
		}
	}

	.po-pagination {
		ul {
			display: flex;
			font-size: 1rem;
			gap: 1rem;
			justify-content: center;
			list-style: none;
			padding: 0;
			margin: 3rem 0 0;
			.current {
				font-weight: bold;
				color: var(--phillipsOpportunitiesGreen);
			}
			a.next,
			a.prev {
				background-color: var(--phillipsOpportunitiesGreen);
				border: none;
				color: #fff;
				cursor: pointer;
				padding: 9px 14px;
				text-decoration: none;
				transition: background-color 0.2s ease;
				&:hover {
					background-color: var(--phillipsOpportunitiesDarkGreen);
				}
				&.disabled {
					background-color: rgba(0, 0, 0, 0.1);
					cursor: default;
					pointer-events: none;
				}
				&.disabled:hover {
					background-color: rgba(0, 0, 0, 0.1);
				}
			}
		}
	}

	@media (max-width: 980px) {
		.po-archive-grid {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (max-width: 640px) {
		.po-archive-grid {
			grid-template-columns: 1fr;
		}

		.po-archive-filters {
			align-items: flex-start;
			flex-direction: column;
		}
	}
}