/* Teaser links with arrow */
h3.teaser-link-with-arrow {
    font-family: var(--font-bold);
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2rem);
    position: relative;
    display: inline-block;
    margin: 2rem 0;
}

@keyframes bounce-horizontal {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(0);
    }
    40% {
        transform: translateX(10px);
    }
    60% {
        transform: translateX(5px);
    }
}

h3.teaser-link-with-arrow::after {
    content: '→';
    position: absolute;
    right: -2.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.2em;
    animation: bounce-horizontal 2s infinite;
    color: inherit;
}

h3.teaser-link-with-arrow a {
    text-decoration: none;
    color: inherit;
}

h3.teaser-link-with-arrow a:hover {
    opacity: 0.8;
}

.content-section.grey h3.teaser-link-with-arrow,
.content-section.grey h3.teaser-link-with-arrow::after {
    color: var(--color-grey-dark);
}

.content-section.pink h3.teaser-link-with-arrow,
.content-section.pink h3.teaser-link-with-arrow::after {
    color: var(--color-pink-light);
}

.content-section.orange h3.teaser-link-with-arrow,
.content-section.orange h3.teaser-link-with-arrow::after {
    color: var(--color-orange-light);
}

.content-section.turquoise h3.teaser-link-with-arrow,
.content-section.turquoise h3.teaser-link-with-arrow::after {
    color: var(--color-turquoise-dark);
}

/* Turquoise Section Teaser Link Styling - Match pink section behavior */
.content-section.turquoise h3.teaser-link-with-arrow::after {
    display: none; /* Remove the original bouncing arrow */
}

.content-section.turquoise .teaser-link-with-arrow a {
    font-family: var(--font-accent) !important;
    font-weight: 600 !important;
    color: var(--color-turquoise-dark) !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.content-section.turquoise .teaser-link-with-arrow a:after {
    content: '→' !important;
    font-size: 1.2em !important;
    transition: transform 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    color: var(--color-turquoise-dark) !important;
}

.content-section.turquoise .teaser-link-with-arrow a:hover:after {
    transform: translateX(4px) !important;
}