/* ==========================================================================
   ABOUT
   Short intro section with photo and link to /o-mne subpage.
   Mobile: stacked vertically, centered. Desktop: photo left, text right.
   ========================================================================== */

/* Section: light pink background, centered content */
.about {
    background-color: var(--color-pink-light);
    padding-top: var(--space-2xl);
    padding-right: var(--space-sm);
    padding-bottom: var(--space-sm);
    padding-left: var(--space-sm);
    text-align: center;
}

/* Title: space below */
.about__title {
    margin-bottom: var(--space-md);
    z-index: 2;
}

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

/* Photo wrapper: contains placeholder + SVG text overlay */
.about__photo {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto var(--space-lg);
}

/* Circular photo: cropped to circle, covers the full wrapper */
.about__photo-img {
    width: 80%;
    height: 80%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 20%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Decorative rotating text SVG around the photo */
.about__photo-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Hover: rotate SVG text around the photo */
.about__photo:hover .about__photo-text {
    animation: rotate-text 10s linear infinite;
}

@keyframes rotate-text {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Button: dark background, light text */
.about__button {
    display: inline-block;
    padding: 10px;
    background-color: var(--color-primary-dark);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 500;
}

/* Hover: button text changes to green accent */
.about__button:hover {
    color: var(--color-mint-medium);
}

/* Decorative leaf: top-right corner, hover swaps to v2 (veined version) */
.about {
    position: relative;
    overflow: clip;
}

/* Mobile + tablet: hide decorative leaf */
.about__leaf {
    display: none;
}

/* ==========================================================================
   DESKTOP (768px+): photo left, text and button right
   ========================================================================== */

@media (min-width: 768px) {
    .about {
        padding-right: var(--space-2xl);
        padding-left: var(--space-2xl);
        padding-bottom: 0;
    }

    .about__title {
        position: relative;
        z-index: 2;
    }

    /* Wrapper for photo + text side by side */
    .about__body {
        display: flex;
        align-items: center;
        gap: var(--space-2xl);
        max-width: var(--max-width);
        margin: 0 auto;
    }

    /* Photo: larger on desktop */
    .about__photo {
        width: 460px;
        height: 460px;
        flex-shrink: 0;
    }

    .about__leaf {
        display: block;
        position: absolute;
        top: 15%;
        right: -25%;
        width: 70vw;
        max-width: 1000px;
        height: auto;
        pointer-events: auto;
        transition: opacity 0.3s ease;
        transform: rotate(5deg);
        z-index: 1;
    }

    .about__leaf {
        content: url('/static/images/green_leaf_v2.webp');
    }


}