/* Elegant profile card styles for About page
   All page-specific styles live here as requested.
*/
:root {
    --accent: #6a8f71;
    /* subtle green */
    --muted: #6b7280;
    --card-bg: #ffffff;
}

.profile-card {
    background: var(--card-bg);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(18, 24, 28, 0.06);
    transition: transform .22s ease, box-shadow .22s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.profile-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(18, 24, 28, 0.10);
}

.profile-figure { position: relative; margin: 0; overflow: hidden; }
.profile-figure img { display:block; width:100%; height: 320px; object-fit:cover; transition: transform .45s ease; }
.profile-figure img { vertical-align: middle; }

.profile-overlay {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 12px 14px;
    background: linear-gradient(180deg, rgba(0,0,0,0.0) 0%, rgba(0,0,0,0.34) 35%, rgba(0,0,0,0.68) 100%);
    color: #fff;
}

.profile-name { margin:0; font-size:1.05rem; font-weight:700; color:#fff }
.profile-role { font-weight:400; font-size:.82rem; color: rgba(255,255,255,0.9); margin-left:8px }

.profile-body { padding: 14px 12px 18px; background: transparent; }
.profile-snippet { margin:0 0 10px; color:var(--muted); font-size:0.95rem }
.profile-full-bio { color: #333; font-size:0.95rem; line-height:1.55 }
.profile-full-bio p { margin:0 0 10px }

/* image hover */
.profile-card:hover .profile-figure img { transform: scale(1.03) }

@media (max-width:767px) {
    .profile-figure img { height: 400px }
    .profile-card { border-radius: 10px }
}

@media (min-width:992px) {
    .profile-figure img { height: 420px }
}

/* Typography & accessibility */
.profile-name, .profile-snippet, .profile-full-bio { font-family: Poppins, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial }

.profile-card:focus, .profile-card:focus-within { outline: none; box-shadow: 0 18px 40px rgba(18,24,28,0.10), 0 0 0 3px rgba(106,143,113,0.08) }