.imdeec-opportunities {
	--imdeec-opportunities-primary: #004b87;
	--imdeec-opportunities-secondary: #00a1df;
	--imdeec-opportunities-background: #f4f7f6;
	--imdeec-opportunities-text: #333;
	--imdeec-opportunities-muted: #666;
	background: var(--imdeec-opportunities-background);
	box-sizing: border-box;
	color: var(--imdeec-opportunities-text);
	font-family: inherit;
	margin: 0 calc(50% - 50vw);
	max-inline-size: none !important;
	overflow: clip;
	width: 100vw;
}

.imdeec-opportunities,
.imdeec-opportunities * {
	box-sizing: border-box;
}

.imdeec-opportunities__hero {
	background: var(--imdeec-opportunities-primary);
	color: #fff;
	padding: 55px 20px;
	text-align: center;
}

.imdeec-opportunities__hero h1 {
	color: #fff !important;
	display: contents !important;
	font-size: clamp(32px, 4vw, 45px) !important;
	line-height: 1.15 !important;
	margin: 0 !important;
	text-align: center !important;
}

.imdeec-opportunities__grid {
	align-items: stretch;
	display: grid !important;
	gap: 28px;
	grid-auto-rows: 1fr;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin: 0 auto !important;
	max-width: 1200px;
	padding: 55px 20px;
}

.imdeec-opportunities__card {
	background: #fff;
	border-radius: 10px;
	border-top: 5px solid var(--imdeec-opportunities-primary);
	box-shadow: 0 8px 24px rgba(0, 75, 135, 0.1);
	display: flex !important;
	flex-direction: column;
	margin: 0 !important;
	min-width: 0;
	padding: 30px;
}

.imdeec-opportunities__card h2 {
	color: var(--imdeec-opportunities-text) !important;
	font-size: 22px !important;
	line-height: 1.3 !important;
	margin: 0 0 10px !important;
}

.imdeec-opportunities__status {
	align-self: flex-start;
	border-radius: 999px;
	font-size: 14px !important;
	font-weight: 700;
	line-height: 1.3 !important;
	margin: 0 0 16px !important;
	padding: 6px 12px;
}

.imdeec-opportunities__status--open {
	background: #dff4e8;
	color: #176b43 !important;
}

.imdeec-opportunities__status--next {
	background: #fff2cc;
	color: #805600 !important;
}

.imdeec-opportunities__audience {
	color: var(--imdeec-opportunities-primary) !important;
	font-size: 15px !important;
	font-weight: 700;
	line-height: 1.45 !important;
	margin: 0 0 16px !important;
}

.imdeec-opportunities__description {
	color: var(--imdeec-opportunities-muted) !important;
	line-height: 1.6 !important;
	margin: 0 0 22px !important;
}

.imdeec-opportunities__details {
	display: grid;
	gap: 9px;
	list-style: none !important;
	margin: 0 0 24px !important;
	padding: 0 !important;
}

.imdeec-opportunities__details li {
	line-height: 1.45;
	padding-left: 24px;
	position: relative;
}

.imdeec-opportunities__details li::before {
	color: var(--imdeec-opportunities-secondary);
	content: "✓";
	font-weight: 700;
	left: 0;
	position: absolute;
}

.imdeec-opportunities__buttons {
	margin-top: auto !important;
	width: 100%;
}

.imdeec-opportunities__button {
	width: 100%;
}

.imdeec-opportunities__button .wp-block-button__link {
	background: var(--imdeec-opportunities-primary);
	border-radius: 999px;
	color: #fff !important;
	display: block;
	font-weight: 700;
	padding: 12px 20px;
	text-align: center;
	text-decoration: none !important;
	width: 100%;
}

.imdeec-opportunities__button .wp-block-button__link[aria-disabled="true"] {
	cursor: default;
}

@media (hover: hover) {
	.imdeec-opportunities__button .wp-block-button__link[href]:hover {
		background: var(--imdeec-opportunities-secondary);
		color: #fff !important;
	}
}

@media (max-width: 700px) {
	.imdeec-opportunities__grid {
		grid-template-columns: 1fr;
		padding: 35px 16px;
	}

	.imdeec-opportunities__card {
		padding: 24px;
	}

	.imdeec-opportunities__hero {
		padding: 40px 16px;
	}
}

/* Gutenberg limits ordinary blocks to the theme content width. Remove that
 * editor-only limit so this full-width composition is edited like the home. */
.editor-styles-wrapper .imdeec-opportunities {
	inline-size: auto !important;
	margin-inline: 0 !important;
	max-inline-size: none !important;
	width: auto !important;
}

/* Gutenberg can add an editor-only wrapper around a Group's children. */
.editor-styles-wrapper .imdeec-opportunities__grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
	align-items: stretch;
	display: grid !important;
	gap: 28px;
	grid-auto-rows: 1fr;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 700px) {
	.editor-styles-wrapper .imdeec-opportunities__grid > .block-editor-inner-blocks > .block-editor-block-list__layout {
		grid-template-columns: 1fr;
	}
}