/* An author's profile page (central/blog/profile.blade.php), in the shape of Rio's reference,
   https://armpos.online/rio-akram-miiro-2/ (2026-10-14): the navy card with the photo in a green
   circle beside the name, "What I can do for you" with dark cards, then their posts. In the site's
   tokens (landing-home.css): the hero card's navy and glow, the IBM Plex headings, the mint page.
   Loaded after blog.css (armpos-03's, shared with the index and post pages), which isn't edited.
   Every section sets its own padding: landing.css pads each <section> by 5rem (CLAUDE.md). */

/* ── 1. The navy card ── */
.bp-hero { padding: 16px 24px 0; }
.bp-hero__card {
    position: relative;
    display: grid;
    grid-template-columns: 660px minmax(0, 1fr); /* a fixed photo column: an image sized 100% has no width of its own to give a track */
    align-items: center;
    gap: 64px;
    max-width: 1392px;
    margin: 0 auto;
    padding: 104px 80px 0 72px;
    overflow: hidden;
    border-radius: 24px;
    background: var(--h-950);
    isolation: isolate;
}
.bp-hero__glow {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 34% 62% at 50% 108%, rgb(30 122 78 / 0.95), rgb(26 99 67 / 0.5) 45%, transparent 76%),
        radial-gradient(ellipse 50% 40% at 78% 100%, rgb(26 99 67 / 0.3), transparent 70%);
}

/* the photo: a circle near the card's foot, as in the reference */
.bp-hero__photo {
    position: relative;
    aspect-ratio: 1;
    margin-bottom: 48px;
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; /* the bubble at rest (and under reduced motion) */
    overflow: hidden;
    background: #4f8a3a;
    /* a water bubble in motion (Rio, 2026-10-14: "this is under a water bubble ... so it is in motion"):
       the shape morphs through seven blobs and back, as on the reference page */
    animation: bp-bubble 10s linear infinite alternate;
}
.bp-hero__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
@keyframes bp-bubble {
    0%, 100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; }
    14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; }
    28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; }
    42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; }
    56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; }
    70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; }
    84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; }
}
@media (prefers-reduced-motion: reduce) {
    .bp-hero__photo { animation: none; }
}
.bp-hero__initials { display: grid; place-items: center; width: 100%; height: 100%; color: var(--h-950); font-family: "IBM Plex Sans", "Geist", ui-sans-serif, system-ui, sans-serif; font-size: 160px; font-weight: 600; background: var(--h-400); }

.bp-hero__copy { padding-bottom: 40px; }
.bp-hero__crumbs ol { justify-content: flex-start; margin-bottom: 28px; }
.bp-hero__name {
    margin: 0;
    font-family: "IBM Plex Sans", "Geist", ui-sans-serif, system-ui, sans-serif;
    font-size: 92px;
    line-height: 1.04;
    font-weight: 700;
    letter-spacing: -1.6px;
    color: #fff;
    text-wrap: balance;
}
.bp-hero__role {
    margin: 26px 0 0;
    color: rgb(255 255 255 / 0.86);
    font-size: 28px;
    line-height: 1.35;
    font-weight: 300;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
/* scripts whose letters join or carry marks: no spacing (as blog.css does for its labels) */
.bp-hero__role:is(:lang(ar), :lang(ur), :lang(hi), :lang(bn)) { letter-spacing: 0; }

/* the profile links: down the card's left edge, as in the reference */
.bp-hero__links {
    position: absolute;
    top: 50%;
    inset-inline-start: 28px; /* the start edge: left, or right in Arabic and Urdu */
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    transform: translateY(-50%);
}
.bp-hero__links a {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--h-400);
    font-size: 15px;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bp-hero__links a:hover { border-color: rgb(255 255 255 / 0.2); background: rgb(255 255 255 / 0.06); color: var(--h-300); }
.bp-hero__links a:focus-visible { outline: 3px solid color-mix(in oklch, var(--h-500) 55%, transparent); outline-offset: 3px; }

/* ── 2. What they do ── */
.bp-about { max-width: 1216px; margin: 0 auto; padding: 88px 32px 24px; }
.bp-about__head { max-width: 720px; margin: 0 auto; text-align: center; }
.bp-about__title { margin: 0; font-family: "IBM Plex Sans", "Geist", ui-sans-serif, system-ui, sans-serif; font-size: 44px; line-height: 1.15; }
.bp-about__bio { margin-top: 22px; color: var(--h-text); font-size: 16.5px; line-height: 1.7; }
.bp-about__bio p { margin: 0; }
.bp-about__bio p + p { margin-top: 14px; }
.bp-about__bio a { color: var(--h-600); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.bp-about__bio a:hover { color: var(--h-700); }

.bp-skills {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    max-width: 1100px; /* the reference's row: three cards narrower than the page */
    margin: 48px auto 0;
    padding: 0;
    list-style: none;
}
/* The reference's cards (Rio's screenshot, 2026-10-14): a square navy frame round a darker inside,
   a white line icon, a light title, and a bright green strip along the frame's foot whose light
   rises into the card. The frame is an inset shadow, so the card needs no inner wrapper. */
.bp-skill {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 46px 34px 54px;
    overflow: hidden;
    border-radius: 2px;
    background: #070b17;
    box-shadow: inset 0 0 0 10px var(--h-950);
    color: #fff;
    text-align: center;
    isolation: isolate;
}
.bp-skill::before { /* the light rising inside, from the foot's middle */
    content: "";
    position: absolute;
    inset: auto 10px 10px;
    z-index: -1;
    height: 60%;
    background: radial-gradient(ellipse 45% 70% at 50% 112%, rgb(36 150 90 / 0.55), rgb(26 99 67 / 0.18) 50%, transparent 75%);
}
.bp-skill::after { /* the green strip in the frame's foot */
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 10px;
    background: radial-gradient(ellipse 42% 100% at 50% 100%, rgb(61 220 120 / 0.95), rgb(36 150 90 / 0.45) 45%, transparent 80%);
}
.bp-skill__icon { color: #fff; font-size: 38px; line-height: 1; }
.bp-skill__title { margin: 22px 0 0; font-family: "IBM Plex Sans", "Geist", ui-sans-serif, system-ui, sans-serif; font-size: 28px; line-height: 1.25; font-weight: 600; color: #e1e6ff; }
.bp-skill__text { margin: 16px 0 0; color: rgb(255 255 255 / 0.9); font-size: 16px; line-height: 1.65; }

/* ── 3. What they wrote ── */
.bp-posts { padding-top: 72px; padding-bottom: 32px; }
.bp-posts__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.bp-posts__head .b-related__title { margin: 0; }

/* ── Smaller screens ── */
@media (max-width: 1299px) {
    .bp-hero__card { grid-template-columns: 480px minmax(0, 1fr); gap: 48px; padding: 104px 64px 0 96px; }
    .bp-hero__name { font-size: 76px; }
    .bp-hero__role { font-size: 24px; }
}
@media (max-width: 1099px) {
    .bp-hero__card { grid-template-columns: 380px minmax(0, 1fr); gap: 40px; padding: 100px 48px 0 84px; }
    .bp-hero__name { font-size: 60px; }
    .bp-hero__role { font-size: 20px; }
}
/* phones and tablets: the reference's order, the photo first, then the name, then the links */
@media (max-width: 899px) {
    .bp-hero__card { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 96px 24px 32px; text-align: center; }
    .bp-hero__photo { order: 1; width: min(100%, 420px); margin: 0 auto 28px; }
    .bp-hero__copy { order: 2; padding-bottom: 0; }
    .bp-hero__crumbs ol { justify-content: center; margin-bottom: 16px; }
    .bp-hero__name { font-size: 48px; }
    .bp-hero__role { margin-top: 16px; font-size: 18px; letter-spacing: 0.2em; }
    .bp-hero__links { position: static; order: 3; flex-direction: row; justify-content: center; margin-top: 24px; transform: none; }
    .bp-about { padding-top: 64px; }
    .bp-about__title { font-size: 34px; }
}
@media (max-width: 639px) {
    .bp-hero { padding: 8px 8px 0; }
    .bp-hero__card { padding: 88px 16px 28px; border-radius: 20px; }
    .bp-hero__photo { width: min(100%, 320px); }
    .bp-hero__name { font-size: 36px; letter-spacing: -0.6px; }
    .bp-hero__role { font-size: 15px; letter-spacing: 0.18em; }
    .bp-about { padding: 56px 16px 8px; }
    .bp-about__title { font-size: 30px; }
    .bp-about__bio { font-size: 15.5px; }
    .bp-skills { gap: 16px; margin-top: 36px; }
    .bp-skill { padding: 32px 22px 36px; }
    .bp-posts { padding-top: 56px; padding-left: 16px; padding-right: 16px; }
}