/* ==========================================================================
   SL Anchor Section
   ========================================================================== */

.sl-anchor-section {
	background-color: var(--sl-color-white);
	padding: 64px 0 120px;
}

.sl-anchor-section__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 868px;
	margin: 0 auto;
	padding: 0 64px;
}

/* Diamond Decoration */
.sl-anchor-section__diamond {
	width: 24px;
	height: 24px;
	background-color: var(--sl-color-yellow);
	border-radius: 4px;
	transform: rotate(45deg) scale(0);
	margin-left: 64px;
	margin-bottom: -14px;
	position: relative;
	z-index: 1;
	opacity: 0;
	transition: transform 0.4s ease-out, opacity 0.3s ease-out;
	transition-delay: 0.5s;
}

/* Diamond revealed */
.sl-anchor-section.is-revealed .sl-anchor-section__diamond {
	transform: rotate(45deg) scale(1);
	opacity: 1;
}

/* Yellow CTA Box */
.sl-anchor-section__box {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
	width: 100%;
	padding: 0;
	background-color: var(--sl-color-yellow);
	border-radius: 4px;
	position: relative;
	max-height: 0;
	overflow: hidden;
	transition: max-height 1s ease-out, padding 1s ease-out;
	transition-delay: 0.6s;
}

/* Revealed state */
.sl-anchor-section.is-revealed .sl-anchor-section__box {
	max-height: 500px;
	padding: 40px;
}

/* Content inside box – slides in from top */
.sl-anchor-section__content,
.sl-anchor-section__box > .sl-textlink {
	opacity: 0;
	transform: translateY(-20px);
	transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.sl-anchor-section.is-revealed .sl-anchor-section__content {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 0.9s;
}

.sl-anchor-section.is-revealed .sl-anchor-section__box > .sl-textlink {
	opacity: 1;
	transform: translateY(0);
	transition-delay: 1s;
}

/* Content: Headline + Copy */
.sl-anchor-section__content {
	display: flex;
	flex-direction: column;
	gap: 16px;
	flex: 1 1 auto;
	min-width: 0;
}

.sl-anchor-section__headline {
	color: var(--sl-color-green);
	margin: 0;
}

.sl-anchor-section__copy {
	color: var(--sl-color-green);
	margin: 0;
}

.sl-anchor-section__copy p {
	margin: 0 0 16px;
}

.sl-anchor-section__copy p:last-child {
	margin-bottom: 0;
}

/* Textlink inside box – keep green color on hover (yellow bg!) */
.sl-anchor-section__box .sl-textlink,
.sl-anchor-section__box .sl-textlink:hover,
.sl-anchor-section__box .sl-textlink:focus {
	color: var(--sl-color-green);
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
	.sl-anchor-section {
		padding: 40px 0 80px;
	}

	.sl-anchor-section__inner {
		max-width: 100%;
		padding: 0 22px;
	}

	.sl-anchor-section__diamond {
		margin-left: 40px;
	}

	.sl-anchor-section.is-revealed .sl-anchor-section__box {
		padding: 40px;
	}
}