/* About page specific styles */

/* Section spacing */
.section { padding-block: var(--space-16); }
.section-head { margin-bottom: var(--space-8); }
.lede { font-size: var(--font-size-lg); color: var(--color-muted); }
.eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: var(--font-size-xs); color: var(--color-muted); margin-bottom: var(--space-2); }

/* Hero */
.hero { padding-block: var(--space-14) var(--space-12); }
.hero__grid { display: grid; gap: var(--space-8); grid-template-columns: 1.15fr 1fr; align-items: center; }
.hero__actions { display: flex; gap: var(--space-4); margin-top: var(--space-4); flex-wrap: wrap; }
.hero__media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.hero__media img { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } }

/* Anchor nav */
.anchor-nav { padding-block: var(--space-4); }
.anchor-list { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; padding: 0; margin: 0; }
.anchor-list a { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-full); text-decoration: none; color: var(--color-text); background: var(--color-surface); }
.anchor-list a:hover { background: var(--color-gray-100); color: var(--color-primary-700); }

/* Timeline */
.timeline { position: relative; margin-top: var(--space-6); }
.timeline::before { content: ""; position: absolute; left: 12px; top: 0; bottom: 0; width: 2px; background: var(--color-gray-300); }
.timeline-item { position: relative; padding-left: 44px; margin-bottom: var(--space-7); }
.timeline-year { position: absolute; left: 0; top: 10px; width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--color-primary-600); color: var(--color-on-primary); display: flex; align-items: center; justify-content: center; font-size: var(--font-size-xs); box-shadow: var(--shadow-sm); }
.timeline-content { background: var(--color-surface); }

/* Values */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-6); }
.value-card ul { padding-left: var(--space-6); }
@media (max-width: 960px) { .values-grid { grid-template-columns: 1fr; } }

/* Team */
.team-figure { margin-top: var(--space-4); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-6); margin-top: var(--space-6); }
.team-card .team-role { color: var(--color-muted); margin-top: var(--space-1); margin-bottom: var(--space-2); }
@media (max-width: 1100px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; } }

/* Quotes */
.quotes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); margin-top: var(--space-4); }
.quote p { font-size: var(--font-size-lg); }
.quote footer { color: var(--color-muted); margin-top: var(--space-3); font-size: var(--font-size-sm); }
@media (max-width: 960px) { .quotes-grid { grid-template-columns: 1fr; } }

/* Awards */
.awards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-6); align-items: start; }
.award-figure { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
.award-list { list-style: none; padding-left: 0; }
.award-list li { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); }
.award-list li:last-child { border-bottom: 0; }
@media (max-width: 900px) { .awards-grid { grid-template-columns: 1fr; } }

/* Community */
.community-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-6); margin-top: var(--space-6); }
.community-figure { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }
@media (max-width: 900px) { .community-grid { grid-template-columns: 1fr; } }

/* Jobs */
.jobs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); margin-top: var(--space-6); }
.job-meta { display: flex; gap: var(--space-4); list-style: none; padding: 0; margin: 0 0 var(--space-2) 0; color: var(--color-muted); font-size: var(--font-size-sm); }
.job-actions { display: flex; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; }
@media (max-width: 900px) { .jobs-grid { grid-template-columns: 1fr; } }

/* Contact */
.contact-panel { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); }
.contact-col .social-list { list-style: none; padding-left: 0; display: grid; gap: var(--space-2); }
.contact-cta { display: flex; gap: var(--space-3); margin-top: var(--space-3); flex-wrap: wrap; }
@media (max-width: 800px) { .contact-panel { grid-template-columns: 1fr; } }