/* ==========================================================================
   CONTACT
   Simple CTA section with email link and decorative flower illustration.
   Mobile: centered, stacked. Desktop: same layout with more spacing.
   ========================================================================== */

/* Section: light pink background, centered content */
.contact {
    background-color: var(--color-pink-light);
    padding: var(--space-xl) var(--space-sm);
    text-align: center;
}

/* Title: space below */
.contact__title {
    margin-bottom: var(--space-lg);
}

/* CTA text: medium weight, space below */
.contact__text {
    font-size: var(--text-body);
    font-weight: 500;
    margin-bottom: var(--space-lg);
}

/* Email: bold, underlined, dark color */
.contact__email {
    display: inline-block;
    font-family: var(--font-body);
    font-size: var(--text-h3);
    font-weight: 700;
    color: var(--color-primary-dark);
    text-decoration: underline;
    margin-bottom: var(--space-lg);
}

/* Decoration: container for flower illustration with hover effect */
.contact__decoration {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

/* Stamen: always visible, centered in container */
.contact__stamen {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    mix-blend-mode: multiply;
}

/* Petals: hidden by default, appear on hover */
.contact__petals {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    opacity: 0;
    transition: opacity 300ms ease;
    mix-blend-mode: multiply;
}

/* Hover: show petals */
.contact__decoration .contact__petals {
    opacity: 1;
}