/* /css/pages/about.css
 *
 * About page only. Split-image-and-text sections, the "future vision"
 * green panel with a card grid below.
 */

.about-section {
    display: flex;
    align-items: center;
    gap: var(--space-16);
    padding: var(--space-16) 0;
}

.about-section.split.reverse {
    flex-direction: row-reverse;
}

.about-text {
    flex: 1;
}

.about-text h2 {
    display: inline-block;
    margin-bottom: var(--space-6);
    border-bottom: 4px solid var(--color-green-bright);
    font-size: 2.5rem;
}

.about-text p {
    color: var(--color-brown-deep);
    font-size: var(--font-lg);
    line-height: var(--line-loose);
}

.about-image {
    flex: 1;
}

.floating-img {
    width: 100%;
    border-radius: var(--radius-xl);
    box-shadow: 20px 20px 0px var(--color-green-soft);
    transition: transform var(--transition-base);
}

.floating-img:hover {
    transform: translate(-10px, -10px);
}

/* ============================================================================
 * "Future vision" callout
 * ============================================================================ */

.future-vision {
    margin: var(--space-16) 0;
    padding: var(--space-16);
    background: var(--color-green-soft);
    border-radius: var(--radius-xl);
    text-align: center;
}

.vision-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-8);
}

.vision-card {
    padding: var(--space-8);
    background: var(--color-bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* ============================================================================
 * Responsive
 * ============================================================================ */

@media (max-width: 768px) {
    .about-section.split,
    .about-section.split.reverse {
        flex-direction: column;
        text-align: center;
    }

    .future-vision {
        padding: var(--space-8) var(--space-4);
    }
}