/* "About me" resume page styles.
   Used by the public page (inc/page_about.php) and by the
   visual editor canvas in the admin panel (admin/about.php). */

.about-page { max-width: 900px; margin: 0 auto; }
.about-page-standalone { padding: 130px 0 2rem; } /* clears the 100px fixed header */

.about-page .resume-header { text-align: center; margin-bottom: 3rem; }
.about-page .resume-header h1 { font-size: 2.25rem; margin-bottom: 0.5rem; }
.about-page .resume-role { color: var(--primary); font-weight: 600; font-size: 1.1rem; margin-bottom: 1.25rem; }
.about-page .resume-contacts { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 2rem; color: var(--text-muted); }
.about-page .resume-contacts span { font-weight: 600; color: var(--text); }
.about-page .resume-contacts a { color: var(--primary); text-decoration: none; }
.about-page .resume-contacts a:hover { text-decoration: underline; }
.about-page .resume-section { background: var(--surface); border: 1px solid var(--border); border-radius: 1rem; padding: 2rem; margin-bottom: 1.5rem; backdrop-filter: blur(10px); }
.about-page .resume-section > h2 { font-size: 1.35rem; margin-bottom: 1.25rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--primary); display: inline-block; }
.about-page .resume-section p { line-height: 1.7; color: var(--text); margin-bottom: 1rem; }
.about-page .resume-list { list-style: none; padding: 0; margin: 0; }
.about-page .resume-list li { position: relative; padding-left: 1.5rem; margin-bottom: 0.85rem; line-height: 1.65; color: var(--text); }
.about-page .resume-list li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 8px; height: 8px; border-radius: 50%; background: var(--primary); }
.about-page .resume-list strong { color: var(--text); }
.about-page .resume-job { margin-bottom: 1.75rem; }
.about-page .resume-job:last-child { margin-bottom: 0; }
.about-page .resume-job-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 0.75rem; }
.about-page .resume-job-head h3 { font-size: 1.05rem; margin: 0 0 0.25rem; }
.about-page .resume-period { flex-shrink: 0; background: var(--primary); color: #fff; font-size: 0.8rem; font-weight: 600; padding: 0.25rem 0.75rem; border-radius: 999px; white-space: nowrap; margin-top: 0.1rem; }
.about-page .resume-position { color: var(--text-muted); font-size: 0.95rem; margin: 0; }
.about-page .resume-cta p { margin: 0; font-size: 1.05rem; font-style: italic; }
.about-page .resume-downloads { text-align: center; }
.about-page .resume-downloads h2 { display: block; border-bottom: none; margin-bottom: 0.5rem; }
.about-page .resume-downloads-note { color: var(--text-muted); margin-bottom: 1.5rem; }
.about-page .resume-dl-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.about-page .resume-dl { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--primary); color: #fff; text-decoration: none; font-weight: 600; padding: 0.9rem 1.6rem; border-radius: 0.75rem; transition: background 0.2s ease, transform 0.2s ease; }
.about-page .resume-dl:hover { background: var(--primary-light); transform: translateY(-2px); }
.about-page .resume-dl small { font-weight: 400; opacity: 0.85; }
.about-page .resume-dl svg { flex-shrink: 0; }

@media (max-width: 640px) {
    .about-page .resume-section { padding: 1.25rem; }
    .about-page .resume-job-head { flex-direction: column; gap: 0.4rem; }
    .about-page-standalone { padding-top: 115px; }
}