/* ============================================
   ZETRE - About Us Mobile (max-width: 767px)
   ============================================ */

.page-hero {
    padding: calc(56px + var(--space-6)) 0 var(--space-10);
}
.page-hero-content h1 { font-size: var(--text-2xl); }
.page-hero-content p { font-size: var(--text-sm); }
.page-hero-shape { width: 250px; height: 250px; top: -100px; right: -60px; }
.hero-wave svg { height: 30px; }

/* Story */
.story-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
}

.story-content h2 {
    font-size: var(--text-xl);
}

.story-content p {
    font-size: var(--text-sm);
}

.story-highlight {
    padding: var(--space-4);
}

.story-highlight blockquote {
    font-size: var(--text-base);
}

.story-image {
    aspect-ratio: 16/9;
}

.story-stat-cards {
    margin-top: calc(-1 * var(--space-6));
    padding: 0 var(--space-2);
    gap: var(--space-3);
    flex-wrap: wrap;
}

.story-stat-card {
    min-width: calc(50% - var(--space-2));
    flex: 1;
}

.story-stat-card .counter-value {
    font-size: var(--text-xl);
}

/* Mission/Vision */
.mv-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.mv-card {
    padding: var(--space-5);
}

.mv-icon {
    width: 48px;
    height: 48px;
    font-size: var(--text-xl);
}

.mv-card h3 { font-size: var(--text-lg); }

/* Values Section Mobile */
.values-grid {
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

.value-card {
    padding: var(--space-5);
}

.value-card-icon {
    width: 44px;
    height: 44px;
    font-size: var(--text-xl);
}

.value-card h3 {
    font-size: var(--text-lg);
}

/* Directors - 2 columns on mobile */
.director-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
}

.director-photo-placeholder {
    aspect-ratio: 1;
}

.director-photo-placeholder i {
    font-size: 40px !important;
}

.director-info {
    padding: var(--space-3);
}

.director-info h3 { font-size: var(--text-sm); }
.director-title { font-size: var(--text-xs); }
.director-info p { font-size: var(--text-xs); display: none; } /* Hide bio on small screens */

/* Show social on mobile always */
.director-social {
    transform: translateX(-50%) translateY(0);
}

.director-social a {
    width: 32px;
    height: 32px;
    font-size: var(--text-sm);
}

/* Timeline */
.timeline::before {
    left: 12px;
}

.timeline-item {
    gap: var(--space-3);
    padding-bottom: var(--space-5);
}

.timeline-marker {
    min-width: 26px;
}

.timeline-dot {
    width: 12px;
    height: 12px;
    box-shadow: 0 0 0 3px var(--primary-100);
}

.timeline-content {
    padding: var(--space-4);
}

.timeline-content h4 { font-size: var(--text-sm); }
.timeline-content p { font-size: var(--text-xs); }

/* Section header */
.section-header h2 {
    font-size: var(--text-xl);
}