/* ===== Team-member profile page — shared layout =====
 * Used by the majority of team-member pages (12 of 15). The 3 pages with
 * the distinct "pill" hero variant (janaina-mauricio, luis-azevedo,
 * raquel-rocha) keep their own inline styles and do NOT include this file.
 *
 * The `.profile-photo` and `.ot-photo` backgrounds default to a soft
 * gradient. Pages whose portrait already has a white background (carla-branco,
 * ines-silva, joselina-sousa, mafalda-goncalves, sandra-goncalves) override
 * with an inline `style="background: #ffffff;"` on the div, mirroring how
 * equipa.php handles photo_white_bg.
 */

.breadcrumbs { font-size: 13px; color: var(--ink-500); display: flex; gap: 8px; margin-bottom: 28px; }
.breadcrumbs a { color: var(--ink-500); }
.breadcrumbs a:hover { color: var(--emerald-700); }

.profile-hero { background: var(--cream-50); padding-top: clamp(40px, 6vw, 80px); padding-bottom: clamp(48px, 7vw, 96px); border-bottom: 1px solid var(--line); }
.profile-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 7vw, 88px); align-items: start; }
.profile-photo { aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; position: sticky; top: 100px; background: linear-gradient(180deg, #ffffff 0%, var(--cream-100) 100%); }
.profile-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

.profile-tag { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--clay-700); font-weight: 500; display: inline-block; margin-bottom: 16px; }
.profile-info h1 { font-size: clamp(2.4rem, 5vw, 4rem); margin: 0 0 8px; font-weight: 300; }
.profile-role { font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: var(--emerald-700); font-weight: 300; margin: 0 0 28px; }

.profile-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 32px; }
.pm-item { padding: 18px 0; border-right: 1px solid var(--line); padding-right: 20px; }
.pm-item:nth-child(2n) { border-right: none; padding-left: 20px; padding-right: 0; }
.pm-item:nth-child(n+3) { border-top: 1px solid var(--line); }
.pm-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); margin: 0 0 4px; font-weight: 500; }
.pm-value { font-family: var(--font-display); font-size: 1.1rem; margin: 0; color: var(--ink-900); font-weight: 400; }

.profile-cta { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

.profile-body { background: var(--bg); }
.body-content { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(32px, 6vw, 80px); align-items: start; }
.section-label { font-family: var(--font-sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-500); font-weight: 500; margin: 0; padding-top: 6px; }
.section-content > * + * { margin-top: 16px; }
.section-content h3 { margin-top: 0; font-size: 1.5rem; }
.section-content p { color: var(--ink-700); line-height: 1.7; max-width: 60ch; }
.section-content blockquote { border-left: 2px solid var(--clay-500); padding: 12px 0 12px 24px; margin: 24px 0; font-family: var(--font-display); font-style: italic; font-size: 1.3rem; line-height: 1.4; color: var(--ink-900); max-width: 60ch; }

.profile-section { padding: clamp(40px, 5vw, 64px) 0; border-bottom: 1px solid var(--line); }
.profile-section:last-of-type { border-bottom: none; }

.areas-list { display: flex; flex-wrap: wrap; gap: 8px; }
.area-chip { font-size: 13px; padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--cream-50); color: var(--ink-700); }

.spec-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.spec-item { padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--cream-50); }
.spec-item h4 { margin: 0 0 6px; font-size: 1.05rem; font-family: var(--font-display); font-weight: 400; }
.spec-item p { margin: 0; font-size: 14px; color: var(--ink-500); line-height: 1.6; }

.formation-list { list-style: none; padding: 0; margin: 0; }
.formation-item { display: grid; grid-template-columns: 110px 1fr; gap: 24px; padding: 18px 0; border-top: 1px solid var(--line); }
.formation-item:last-child { border-bottom: 1px solid var(--line); }
.formation-year { font-family: var(--font-display); font-size: 14px; color: var(--emerald-700); font-variant-numeric: tabular-nums; }
.formation-item h4 { margin: 0 0 4px; font-size: 1rem; }
.formation-item p { margin: 0; font-size: 14px; color: var(--ink-500); }

.other-team { background: var(--cream-50); }
.ot-card { background: var(--bg); padding: 24px; border-radius: var(--radius); text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 16px; border: 1px solid var(--line); transition: border-color .2s var(--ease); }
.ot-card:hover { border-color: var(--emerald-700); color: inherit; }
.ot-photo { aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; background: linear-gradient(180deg, #ffffff 0%, var(--cream-100) 100%); }
.ot-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.ot-name { font-family: var(--font-display); font-size: 1.1rem; margin: 0; }
.ot-role { font-size: 12px; color: var(--ink-500); margin: 4px 0 0; }

@media (max-width: 880px) {
  .profile-grid { grid-template-columns: 1fr; }
  .profile-photo { position: static; aspect-ratio: 4/3; max-width: 480px; }
  .body-content { grid-template-columns: 1fr; gap: 16px; }
  .profile-meta-grid { grid-template-columns: 1fr; }
  .pm-item { border-right: none; padding-left: 0 !important; padding-right: 0 !important; }
  .pm-item:nth-child(n+2) { border-top: 1px solid var(--line); }
  .other-team .ot-grid { grid-template-columns: 1fr 1fr; }
}