/* ==========================================================================
   ABOUT SECTION - Professional Therapist Introduction
   ========================================================================== */

.about-section {
    padding: var(--spacing-16) 0;
    background-color: var(--color-neutral-white);
}

/* Credential Badge - Professional Experience Display */
.about-section__credential-badge {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--spacing-2);

    /* Spacing */
    margin-top: 0;
    margin-bottom: var(--spacing-4);

    /* Typography base (mobile) */
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    color: var(--color-decorative-copper);
    letter-spacing: var(--letter-spacing-wide);
    text-transform: uppercase;
}

.about-section__credential-label {
    /* Inherits all properties from parent .about-section__credential-badge */
}

.about-section__credential-separator {
    color: var(--color-neutral-400);
    font-weight: var(--font-weight-normal);
}

.about-section__credential-value {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary-700);
}

.about-section__heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary-500);
    margin-top: 0;
    margin-bottom: var(--spacing-6);
    line-height: var(--line-height-tight);
    letter-spacing: var(--letter-spacing-wide);
}

.about-section p {
    font-family: var(--font-body);
    font-size: var(--font-size-base);
    color: var(--color-neutral-700);
    line-height: var(--line-height-relaxed);
    margin-bottom: var(--spacing-4);
    text-align: justify;
}

.about-section p:last-of-type {
    margin-bottom: 0;
}

.about-section__image-wrapper {
    /* Positioning context for absolute positioned decoratives */
    position: relative;

    /* Visual styling - transparent wrapper */
    display: block;
    width: 100%;

    /* Ensure wrapper doesn't introduce layout shift */
    margin: 0;

    /* Decorative frame border */
    border: var(--border-width-2) solid var(--color-decorative-copper);
    padding: var(--spacing-2);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: box-shadow var(--transition-normal);
}

.about-section__image {
    position: relative;
    width: 100%;
    height: auto;
    border-radius: var(--border-radius-lg);
    object-fit: cover;
    box-shadow: var(--shadow-md);
    transition: transform var(--transition-normal);
    z-index: 5;
}

.about-section__brand-text {
    /* Positioning */
    position: absolute;
    bottom: 0;
    right: 0;

    /* Z-index layering (above image, below future leaf elements) */
    z-index: var(--z-index-10);

    /* Typography - mobile base */
    font-family: var(--font-heading);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-neutral-white);
    letter-spacing: var(--letter-spacing-wider);
    text-transform: uppercase;

    /* Readability background */
    background-color: rgba(44, 0, 33, 0.7);
    padding: var(--spacing-2) var(--spacing-4);
    border-radius: var(--radius-sm);

    /* Prevent text wrapping */
    white-space: nowrap;
}

.about-section__image-wrapper::before {
    content: '';
    position: absolute;
    top: calc(var(--spacing-2) * -1);
    left: calc(var(--spacing-2) * -1);
    width: var(--spacing-8);
    height: var(--spacing-8);
    border-top: var(--border-width-4) solid var(--color-primary-200);
    border-left: var(--border-width-4) solid var(--color-primary-200);
    border-top-left-radius: var(--radius-md);
    z-index: var(--z-index-20);
}

.about-section__image-wrapper::after {
    content: '';
    position: absolute;
    bottom: calc(var(--spacing-2) * -1);
    right: calc(var(--spacing-2) * -1);
    width: var(--spacing-8);
    height: var(--spacing-8);
    border-bottom: var(--border-width-4) solid var(--color-primary-200);
    border-right: var(--border-width-4) solid var(--color-primary-200);
    border-bottom-right-radius: var(--radius-md);
    z-index: var(--z-index-20);
}

/* Decorative Leaf Elements - Desktop Only */
.about-section__decorative-leaf {
    /* Positioning - Absolute relative to .about-section__image-wrapper */
    position: absolute;

    /* Sizing - Maintain aspect ratio */
    width: var(--spacing-20);  /* 5rem = 80px base size */
    height: auto;

    /* Z-index - Behind image (image has z-index: 5) */
    z-index: 1;

    /* Accessibility - Prevent pointer events interference */
    pointer-events: none;

    /* Animation - Floating effect with performance optimization */
    animation: floating-leaf 4s ease-in-out infinite;
    will-change: transform;

    /* Responsive - Hidden by default (mobile-first) */
    display: none;
}

/* Left Side Leaf 1 - Middle left position */
.about-section__decorative-leaf--left-1 {
    top: 45%;                   /* 10% weiter nach unten verschoben */
    left: calc(var(--spacing-4) * -1);  /* -1rem = -16px (extends beyond wrapper) */
    animation: floating-leaf-1 4s ease-in-out infinite;
}

/* Left Side Leaf 2 - Middle left position */
.about-section__decorative-leaf--left-2 {
    top: 60%;                   /* 10% weiter nach unten verschoben */
    left: calc(var(--spacing-6) * -1);  /* -1.5rem = -24px (extends further out) */
    animation: floating-leaf-2 4s ease-in-out infinite;
}

/* Left Side Leaf 3 - Middle left position */
.about-section__decorative-leaf--left-3 {
    top: 75%;                   /* 10% weiter nach unten verschoben */
    left: calc(var(--spacing-3) * -1);  /* -0.75rem = -12px (subtle extension) */
    animation: floating-leaf-3 4s ease-in-out infinite;
}

/* Right Side Leaf 1 - Top right position */
.about-section__decorative-leaf--right-1 {
    top: 0%;                    /* Top position */
    right: calc(var(--spacing-5) * 5);  /* -1.25rem = -20px (extends beyond wrapper) */
    animation: floating-leaf-right 4s ease-in-out infinite;
}

/* Floating Animation - Gentle vertical movement */
@keyframes floating-leaf {
    0% {
        transform: translateY(0) rotate(var(--leaf-rotation, 0deg));
    }
    50% {
        transform: translateY(calc(var(--spacing-3) * -1)) rotate(calc(var(--leaf-rotation, 0deg) + 3deg));
    }
    100% {
        transform: translateY(0) rotate(var(--leaf-rotation, 0deg));
    }
}

/* Floating Animation - Leaf 1 (150% larger, -30deg rotation, vertically centered) */
@keyframes floating-leaf-1 {
    0% {
        transform: translateY(-50%) scale(2.5) rotate(-30deg);
    }
    50% {
        transform: translateY(calc(-50% - var(--spacing-3))) scale(2.5) rotate(-27deg);
    }
    100% {
        transform: translateY(-50%) scale(2.5) rotate(-30deg);
    }
}

/* Floating Animation - Leaf 2 (150% larger, -60deg rotation, vertically centered) */
@keyframes floating-leaf-2 {
    0% {
        transform: translateY(-50%) scale(2.5) rotate(-60deg);
    }
    50% {
        transform: translateY(calc(-50% - var(--spacing-3))) scale(2.5) rotate(-57deg);
    }
    100% {
        transform: translateY(-50%) scale(2.5) rotate(-60deg);
    }
}

/* Floating Animation - Leaf 3 (150% larger, -90deg rotation, vertically centered) */
@keyframes floating-leaf-3 {
    0% {
        transform: translateY(-50%) scale(2.5) rotate(-90deg);
    }
    50% {
        transform: translateY(calc(-50% - var(--spacing-3))) scale(2.5) rotate(-87deg);
    }
    100% {
        transform: translateY(-50%) scale(2.5) rotate(-90deg);
    }
}

/* Floating Animation - Right Leaf (top right position, -15deg rotation) */
@keyframes floating-leaf-right {
    0% {
        transform: translateY(0) rotate(-15deg);
    }
    50% {
        transform: translateY(calc(var(--spacing-3) * -1)) rotate(-12deg);
    }
    100% {
        transform: translateY(0) rotate(-15deg);
    }
}

/* Accessibility - Respect user motion preferences (WCAG 2.1) */
@media (prefers-reduced-motion: reduce) {
    .about-section__decorative-leaf {
        animation: none;
    }

    /* Apply static transforms when animations are disabled */
    .about-section__decorative-leaf--left-1 {
        transform: translateY(-50%) scale(2.5) rotate(-30deg);
    }

    .about-section__decorative-leaf--left-2 {
        transform: translateY(-50%) scale(2.5) rotate(-60deg);
    }

    .about-section__decorative-leaf--left-3 {
        transform: translateY(-50%) scale(2.5) rotate(-90deg);
    }

    .about-section__decorative-leaf--right-1 {
        transform: rotate(-15deg);
    }
}

/* Responsive adjustments - Mobile First */
@media (max-width: 767px) {
    .about-section {
        padding: var(--spacing-12) 0;
    }

    .about-section__credential-badge {
        font-size: var(--font-size-xs);
        text-align: center;
    }

    .about-section__heading {
        font-size: var(--font-size-3xl);
        text-align: center;
    }

    .about-section__image {
        margin-bottom: var(--spacing-8);
    }

    .about-section__image-wrapper {
        padding: var(--spacing-1);
        margin-bottom: var(--spacing-8);
    }

    .about-section__brand-text {
        font-size: var(--font-size-sm);
        padding: var(--spacing-1-5) var(--spacing-3);
        bottom: 0;
        right: 0;
    }

    .about-section__image-wrapper::before,
    .about-section__image-wrapper::after {
        width: var(--spacing-6);
        height: var(--spacing-6);
        border-width: var(--border-width-2);
    }
}

@media (min-width: 768px) {
    .about-section .row {
        align-items: center;
    }

    .about-section__credential-badge {
        font-size: var(--font-size-sm);
    }

    .about-section__heading {
        font-size: var(--font-size-4xl);
    }

    .about-section__brand-text {
        font-size: var(--font-size-lg);
        bottom: 0;
        right: 0;
        padding: var(--spacing-2-5) var(--spacing-5);
    }

    .about-section__image-wrapper::before,
    .about-section__image-wrapper::after {
        width: var(--spacing-10);
        height: var(--spacing-10);
    }
}

@media (min-width: 1024px) {
    .about-section__credential-badge {
        font-size: var(--font-size-base);
        letter-spacing: var(--letter-spacing-wider);
    }

    .about-section__heading {
        font-size: var(--font-size-5xl);
    }

    .about-section__brand-text {
        font-size: var(--font-size-xl);
        bottom: 0;
        right: 0;
        letter-spacing: var(--letter-spacing-widest);
        padding: var(--spacing-3) var(--spacing-6);
    }

    .about-section__image-wrapper::before,
    .about-section__image-wrapper::after {
        width: var(--spacing-12);
        height: var(--spacing-12);
    }

    /* Show decorative leaves on desktop only */
    .about-section__decorative-leaf {
        display: block;
    }
}