/*------------------------------------------------
Hero
------------------------------------------------*/
.hero.learning,
.hero.research,
.hero.advocacy {
    padding-bottom: 0!important;
}
.hero h1 {
    margin-bottom: 1em;
}
.hero figure {
    max-width: 550px;
    margin: auto;
}

.hero.learning {
    background-image: url("https://ahead.africa/wp-content/uploads/2024/11/shapes-tile-green-1.svg");
}
.hero.research {
    background-image: url("https://ahead.africa/wp-content/uploads/2025/01/shapes-tile-yellow.svg");
	background-color: #FFF7E9;
}
.hero.advocacy {
    background-image: url("https://ahead.africa/wp-content/uploads/2024/11/shapes-tile-red-1.svg");
}

/*------------------------------------------------
Coming Soon
------------------------------------------------*/
.coming-soon-divider .shape {
    position: absolute;
    right: 0;
    top: 5%;
    translate: 0 -50%;
    max-width: clamp(100px, 10%, 200px);
    z-index: 1;
}
@media screen and (max-width: 700px) {
	.coming-soon-divider .shape {
		top: 20%;
	}
}

.card {
    padding: 1em;
    position: relative;
    isolation: isolate;
    border-radius: var(--border-radius);
    overflow: clip;
}
.card .shape {
    position: absolute;
    width: fit-content;
    z-index: -1;
    margin: 0;
	transition: translate 0.25s ease;
}

.learning .card {
    background-color: var(--wp--preset--color--secondary-alt);
}
.learning .card.card-1 .shape {
    inset: auto auto 0 0;
    rotate: -90deg;
}
.learning .card-1:hover .shape {
	translate: -15px 15px;
}
.learning .card.card-2 .shape {
    inset: 0 auto auto 0; 
}
.learning .card-2:hover .shape {
	translate: -15px -15px;
}
.learning .card.card-3 .shape {
    inset: auto 0 0 auto;
    rotate: 180deg;
}
.learning .card-3:hover .shape {
	translate: 15px 15px;
}
.learning .card.card-4 .shape {
    inset: 0 0 auto auto;
    rotate: 90deg;
}
.learning .card-4:hover .shape {
	translate: 15px -15px;
}

.research .card {
    background-color: #ffe2a8;
}
.research .card.card-1 .shape {
    inset: 0 auto auto 0; 
    rotate: -135deg;
}
.research .card-1:hover .shape {
	translate: -15px -15px;
}
.research .card.card-2 .shape {
    inset: auto 0 0 auto;
    rotate: 45deg;
}
.research .card-2:hover .shape {
	translate: 15px 15px;
}
.research .card.card-3 .shape {
    inset: -20px -20px auto auto;
    rotate: 180deg;
}
.research .card-3:hover .shape {
	translate: 15px -15px;
}
.research .card.card-4 .shape {
    inset: auto auto -20px -20px;
}
.research .card-4:hover .shape {
	translate: -15px 15px;
}

.advocacy .card {
    background-color: #FFC3B7;
}
.advocacy .card.card-1 .shape {
    inset: auto 0 0 auto;
}
.advocacy .card.card-2 .shape {
    inset: 0 0 auto auto;
    rotate: -90deg;
}
.advocacy .card.card-3 .shape {
    inset: auto auto 0 0;
    rotate: 90deg;
}
.advocacy .card-3:hover .shape {
	translate: -15px 15px;
}

@media screen and (min-width: 550px) {
	.more-news .wp-block-post-template {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
	}
	.more-news .wp-block-post {
		max-width: 305px;
		width: 100%;
	}
}