.wp-block-acf-honorees {
	
}

.honorees-section {
	&.grey {
		--title-background-color: #E9E9E9;
		--title-font-color: #4C4C4C;
		--block-background-color: #F5F5F5;
	}
	&.purple {
		--title-background-color: #D4D0DA;
		--title-font-color: #483B63;
		--block-background-color: #E8E6EB;
	}
	&.green {
		--title-background-color: #D4E5D8;
		--title-font-color: #217552;
		--block-background-color: #E8F1EA;
	}
	&.blue {
		--title-background-color: #DFE3EA;
		--title-font-color: #65779C;
		--block-background-color: #EEF0F4;
	}
	overflow: clip;

	.title-area {
		background-color: var(--title-background-color);
		color: var(--title-font-color);
		padding-block: 10px 0;
	}
	
	.collapsible {
		background-color: var(--block-background-color);
		
		@supports (interpolate-size: allow-keywords) {
			interpolate-size: allow-keywords;
			height: auto;
			transition: height 0.2s ease;
		}
		@supports not (interpolate-size: allow-keywords) {
			@media (min-width: 1241px) {
				max-height: calc(round(up, var(--number-of-items) / 5) * 500px);
			}
			@media (max-width: 1119px) {
				max-height: calc(round(up, var(--number-of-items) / 4) * 500px);
			}
			@media (max-width: 899px) {
				max-height: calc(round(up, var(--number-of-items) / 3) * 500px);
			}
			@media (max-width: 679px) {
				max-height: calc(round(up, var(--number-of-items) / 2) * 500px);
			}
			@media (max-width: 459px) {
				max-height: calc(var(--number-of-items) * 500px);
			}
			transition: max-height 0.3s ease;
		}
		
		.animation-control {
			overflow: clip;
			display: grid;
		}
		
		.content-area {
			padding-block: 40px;
			
			.boxes {
				container-type: inline-size;
				display: grid;
				grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
				gap: 20px;
				overflow-y: clip;
				
				.text-area {
					color: #000000;
					font-size: 16px;
					line-height: 26px;
					
					p {
						margin-block: 0;
					}
					
					h6, .h6 {
						font-size: 19px;
						font-weight: 600;
						letter-spacing: normal;
						line-height: 26px;
						margin-block: 5px 0;
					}
				}
			}
		}
	}
	
	.collapse-indicator {
		.content-area {
			align-items: center;
			display: grid;
			grid-template-columns: 1fr auto;

			.collapse-toggle {
				font-size: 15px;
				text-decoration: none;
				
				&::after {
					align-self: center;
					justify-self: center;
				}
				&:not(.collapsed)::after {
					content: "➖";
				}
				&.collapsed::after {
					content: "➕";
				}
			}
		}
		
		.h3, .collapse-toggle {
			color: var(--title-font-color);
			font-family: "Acta", serif;
			font-size: 40px;
			font-weight: 50;
			margin: 0;
			padding: 0;
		}
	}
	
	&:has(.collapse-indicator a.collapse-toggle.collapsed) {
		.collapsible {
			@supports (interpolate-size: allow-keywords) {
				height: 0px;
			}
			@supports not (interpolate-size: allow-keywords) {
				max-height: 0px;
			}
			padding: 0;
		}
	}

}