/* vCard-style homepage layout, written for this site — not a copy of the
   codewithsadee template. Sidebar + tabbed main card, using the site's
   existing --bg-*, --text-*, and --border-* variables, so the clean site's
   light/dark toggle themes this layout automatically with no second
   palette to maintain. */

/* Reserve scrollbar space always on this page: when switching tabs the
   content height changes (About is long, Contact is short), and without
   this the centered layout shifted sideways as the scrollbar appeared
   and disappeared, which read as the sidebar moving. */
html {
    scrollbar-gutter: stable;
}

/* The real Contact-shift fix. base.css makes <body> a flex column app
   shell (height: 100vh, overflow: hidden, scrolling inside <main>).
   This standalone homepage has no <main>, and its container uses
   mx-auto: in flexbox, auto margins override stretch, so the
   container's width became its content width, capped at 1280px.
   About and Projects are wide enough to hit the cap; Contact is
   not, so the whole layout shrank to fit Contact and recentered —
   measured at 111px narrower, 55px right, in headless Chrome.
   Making the homepage body a normal block document fixes both the
   width (block container fills, max-width caps, mx-auto centers)
   and the scrolling (content taller than the viewport was clipped,
   with no <main> to scroll inside). The w-full class on the wrapper
   is belt-and-braces for the same width point. */
body.vcard-page {
    display: block;
    height: auto;
    overflow: visible;
}

.vcard-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    width: 100%;
}

.vcard-layout > * {
    min-width: 0;
}

.vcard-sidebar {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 20px;
    position: sticky;
    top: 20px;
}

.vcard-profile {
    text-align: center;
}

.vcard-avatar {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
    margin: 0 auto 12px;
    display: block;
}

.vcard-profile h2 {
    margin: 0 0 4px;
    font-size: 20px;
}

.vcard-title {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0 0 10px;
}

.vcard-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

.vcard-divider {
    border-color: var(--border-color);
    margin: 16px 0;
}

.vcard-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vcard-contact li {
    margin: 8px 0;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.vcard-sidebar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

.vcard-small {
    color: var(--text-secondary);
    font-size: 13px;
    margin: 12px 0 0;
}

.vcard-main {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    padding: 64px 24px 24px;
    min-width: 0;
    width: 100%;
    position: relative;
    /* Keep the card from collapsing to a sliver on short tabs like
       Contact: height may still grow for About, but it never drops
       below this, so switching tabs does not yank the page around. */
    min-height: 560px;
}

.vcard-main h2 {
    font-size: 20px;
    margin: 20px 0 10px;
}

.vcard-main h2:first-child {
    margin-top: 0;
}

/* Tabs anchored to the top-right corner of the main card, like the
   source vCard navbar: flush with the card's top and right edges,
   rounded only where it meets the card (top-right) and where it ends
   (bottom-left), so it reads as part of the card instead of a separate
   full-width bar sitting on top of it. */
.vcard-tabs {
    position: absolute;
    top: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    background: var(--bg-color);
    border: 1px solid var(--border-color);
    border-top: none;
    border-right: none;
    border-radius: 0 var(--border-radius) 0 var(--border-radius);
    padding: 10px 12px;
    margin: 0;
    z-index: 1;
}

.vcard-tabs button {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 15px;
    padding: 6px 10px;
    cursor: pointer;
    border-radius: 6px;
}

.vcard-tabs button:hover {
    color: var(--text-color);
}

.vcard-tabs button[aria-selected="true"] {
    color: var(--primary-color);
}

@media (max-width: 800px) {
    .vcard-layout {
        grid-template-columns: 1fr;
    }

    .vcard-sidebar {
        position: static;
    }

    /* On narrow screens the anchored tabs would overlap content, so
       they become a normal bar above the sections instead. */
    .vcard-tabs {
        position: static;
        border: 1px solid var(--border-color);
        border-radius: var(--border-radius);
        margin-bottom: 20px;
    }

    .vcard-main {
        padding: 16px;
        min-height: 0;
    }
}