/* About page. Extends case.css with a short profile header and the experience timeline. */

.about-hero{padding:clamp(40px,8vh,88px) 0 24px;display:flex;flex-direction:column;align-items:center;gap:24px}
.about-photo{width:120px;height:120px;border-radius:12px;background:var(--color-surface) url(../assets/mayara-about.jpg) -90px 0/300px auto no-repeat;box-shadow:var(--shadow-sm);border:1px solid var(--color-border)}

.xp{list-style:none;margin:8px 0 0;padding:0}
.xp>li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 32px;padding:28px 0;border-top:1px solid var(--color-border-strong)}
.xp-when{font-size:13px;font-weight:500;color:var(--color-text-subtle);font-variant-numeric:tabular-nums;padding-top:4px}
.xp-body{display:flex;flex-direction:column;gap:8px}
.xp-body h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
.xp-role{font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted)}
.xp-body p{margin:0;font-size:16px;line-height:1.65;color:var(--color-text)}
.xp-projects{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:14px}
.xp-projects li{padding-left:16px;border-left:2px solid var(--color-border-strong);font-size:15px;line-height:1.6;color:var(--color-text-muted)}
.xp-projects b{display:block;font-weight:700;color:var(--color-text)}

.about-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px;margin-top:8px}
.about-facts div{display:flex;flex-direction:column;gap:4px;padding:18px 0;border-top:1px solid var(--color-border-strong)}
.about-facts b{font-size:17px;font-weight:700;letter-spacing:-.01em}
.about-facts span:not(.label){font-size:15px;line-height:1.6;color:var(--color-text-muted)}

.about-cta{margin-top:8px;padding:28px;border:1px solid var(--color-border);border-radius:12px;background:var(--color-surface);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:16px}
.about-cta p{margin:0}
.about-actions{display:flex;flex-wrap:wrap;gap:12px}

@media (max-width:640px){
  .xp>li{grid-template-columns:minmax(0,1fr)}
  .about-facts{grid-template-columns:minmax(0,1fr)}
}

.about-accent{color:var(--color-primary-text)}

/* Collapsible details under each experience */
.xp-more{margin-top:4px}
.xp-more summary{display:inline-flex;align-items:center;gap:6px;padding:6px 8px 6px 0;font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);cursor:pointer;list-style:none;border-radius:var(--radius-sm)}
.xp-more summary::-webkit-details-marker{display:none}
.xp-more summary:hover{color:var(--color-text)}
.xp-more summary:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.xp-chev{transition:transform .2s ease}
.xp-more[open] .xp-chev{transform:rotate(180deg)}
.xp-more[open] summary span::after{content:""}
.xp-more .xp-projects{margin-top:10px}
.xp-projects .xp-group{padding:0;border:0;margin-top:8px;font-size:12px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:var(--color-text-subtle)}
.xp-projects a{color:var(--color-primary-text)}
@media (prefers-reduced-motion:reduce){.xp-chev{transition:none}}