/* ==========================================
   PYGIT About Page Styles
   ========================================== */

.about-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
    align-items: center;
    margin-bottom: var(--space-16);
}

.about-intro-img { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.about-intro-img img { width: 100%; height: auto; }

.about-intro-text h3 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); margin-bottom: var(--space-4); color: var(--c-primary); }
.about-intro-text p { margin-bottom: var(--space-4); color: var(--c-text-secondary); line-height: var(--lh-relaxed); }

.about-services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-6);
}

.about-service-item {
    padding: var(--space-6);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    border-radius: var(--radius-lg);
    transition: all var(--transition-base);
}

.about-service-item:hover {
    border-color: var(--c-primary);
    box-shadow: var(--shadow-hover);
}

.about-service-item h4 { font-size: var(--fs-lg); font-weight: var(--fw-bold); margin-bottom: var(--space-2); color: var(--c-text); }
.about-service-item p { font-size: var(--fs-base); color: var(--c-text-secondary); line-height: var(--lh-normal); }

@media (max-width: 768px) {
    .about-intro { grid-template-columns: 1fr; gap: var(--space-8); }
}