/* ── BASE ────────────────────────────────────────────────────────────────── */
/* All design tokens (--bg-color, --card-bg, --accent-bright, --radius, etc.) come from shared.css */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'JetBrains Mono', monospace;
    background-color: var(--bg-color);
    padding: 60px 20px;
    color: var(--text-body);
    position: relative;
    overflow-x: hidden;
}

/* body::before (the background dot-grid) comes from shared.css via --grid-dot -
   this used to hardcode the same pattern independently, another instance of
   the drift-prone duplication found elsewhere this session. */

.container { max-width: 1200px; margin: 0 auto; position: relative; z-index: 1; }

/* ── PROFILE HEADER ──────────────────────────────────────────────────────── */
.profile-header { text-align: center; margin-bottom: 60px; }

.profile-pic {
    width: 280px; height: 280px; border-radius: 50%;
    object-fit: cover; margin-bottom: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.header-label {
    display: block; font-size: 0.75rem; letter-spacing: 0.25em;
    color: var(--accent-bright); text-transform: uppercase;
    margin-bottom: 10px; opacity: 0.75;
}

.profile-header h1 {
    font-family: 'Syne', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem); font-weight: 800;
    color: #fff; line-height: 1.1; margin-bottom: 14px;
}
.profile-header h1 span { color: var(--accent-bright); }

.bio { font-size: 0.9rem; color: var(--text-bio); max-width: 640px; margin: 0 auto; line-height: 1.7; opacity: 0.85; }
.cta { font-family: 'Syne', sans-serif; font-size: 1.1rem; font-weight: 700; margin-top: 18px; color: var(--accent-bright); }

/* ── GRID ────────────────────────────────────────────────────────────────── */
.bento-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 240px;
    gap: 20px;
}
.small { grid-column: span 1; grid-row: span 1; }
.wide  { grid-column: span 2; grid-row: span 1; }
.tall  { grid-column: span 1; grid-row: span 2; }
.large { grid-column: span 2; grid-row: span 2; }

/* ── CARD BASE ───────────────────────────────────────────────────────────── */
.card {
    position: relative;
    background: var(--card-bg);
    border-radius: var(--radius);
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    display: flex;
    border: 1px solid rgba(var(--accent-rgb),0.2);
    transition: transform 0.35s cubic-bezier(0.175,0.885,0.32,1.275),
                box-shadow 0.35s ease, border-color 0.35s ease, filter 0.35s ease,
                opacity 0.7s ease; /* needed so reveal transition plays correctly */
}
@media (hover: hover) and (pointer: fine) {
    .card:hover {
        transform: translateY(-5px) scale(1.025);
        border-color: rgba(var(--accent-bright-rgb),0.4);
        box-shadow: 0 20px 50px rgba(0,0,0,0.5),
                    0 0 14px 1px rgba(var(--glow-rgb, var(--accent-bright-rgb)),0.65),
                    0 0 4px rgba(var(--glow-rgb, var(--accent-bright-rgb)),0.8);
        filter: brightness(1.07);
    }
    .card:hover .ig-photo { transform: scale(1.05); }
    .card:hover .solid-icon-wrap { transform: scale(1.1); background: rgba(255,255,255,0.2); }
    .card:hover .card-corner-icon { color: rgba(255,255,255,0.9); }
    .card:hover .card-slug { color: rgba(255,255,255,0.85); }
    .gh-bar:hover { background: rgba(90,170,255,0.85); }
    .footer-logo:hover {
        opacity: 1;
        filter: drop-shadow(0 2px 16px rgba(var(--accent-bright-rgb),0.35));
    }
    .footer-copy a:hover { color: var(--accent-bright); }
    .footer-links a:hover { color: var(--accent-bright); }
}

/* ── INSTAGRAM GRID ──────────────────────────────────────────────────────── */
.ig-grid-container {
    display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
    width: 100%; height: 100%; z-index: 1;
}
.ig-photo { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }

/* ── OVERLAY (image / ig) ────────────────────────────────────────────────── */
.overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    padding: 22px 24px; z-index: 2;
}
.card:has(.card-image-bg) .overlay,
.card:has(.ig-grid-container) .overlay {
    justify-content: flex-end; align-items: flex-start;
    background: linear-gradient(to top, rgba(0,8,8,0.78) 0%, transparent 62%);
}

/* ── SOLID CARD ──────────────────────────────────────────────────────────── */
.solid-overlay {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; text-align: center;
    padding: 24px; gap: 12px; z-index: 2;
}
/* Wide → horizontal */
.card.wide .solid-overlay {
    flex-direction: row; justify-content: flex-start;
    text-align: left; gap: 22px; padding: 28px 32px;
}

.solid-icon-wrap {
    flex-shrink: 0;
    width: 64px; height: 64px; border-radius: 18px;
    background: rgba(255,255,255,0.13);
    border: 1px solid rgba(255,255,255,0.18);
    display: flex; align-items: center; justify-content: center;
    transition: transform 0.3s ease, background 0.3s ease;
}
.solid-icon-wrap i   { font-size: 1.8rem; line-height: 1; }
.solid-icon-wrap svg,
.solid-icon-wrap img { display: block; }

/* Small cards */
.card.small .solid-icon-wrap { width: 52px; height: 52px; border-radius: 14px; }
.card.small .solid-icon-wrap i   { font-size: 1.45rem; }
.card.small .solid-icon-wrap img { width: 26px; height: 26px; }
.card.small .solid-overlay       { gap: 9px; }
.card.small h3                   { font-size: 0.9rem; }

.card-text-group { display: flex; flex-direction: column; gap: 4px; }

/* ── TEXT ────────────────────────────────────────────────────────────────── */
.card h3 {
    font-family: 'Syne', sans-serif;
    font-size: 1.08rem; font-weight: 700; color: #fff; line-height: 1.2;
}
.card p, .solid-desc {
    font-size: 0.74rem; color: rgba(255,255,255,0.65); line-height: 1.45;
}
.card:has(.ig-grid-container) h3,
.card:has(.ig-grid-container) p {
    text-shadow: 0 1px 8px rgba(0,0,0,0.85);
}

/* ── CORNER ICON ─────────────────────────────────────────────────────────── */
.card-corner-icon {
    position: absolute; top: 16px; right: 16px; z-index: 10;
    color: rgba(255,255,255,0.5); font-size: 1rem;
    pointer-events: none; text-shadow: 0 2px 6px rgba(0,0,0,0.5);
    transition: color 0.3s ease;
}

/* .card-slug comes from shared.css (0.65 alpha, tuned for 4.5:1+ against both
   --card-bg and --bg-color) - this used to redeclare it at 0.28, another
   footer-style drift that also happened to fail contrast even worse. */

/* ── GITHUB CUSTOM CARD ──────────────────────────────────────────────────── */
.gh-loading, .gh-error {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    width: 100%; height: 100%; gap: 12px;
    color: rgba(255,255,255,0.35); font-size: 0.8rem;
}
.gh-spinner { font-size: 2.5rem; animation: ghSpin 1.5s linear infinite; }
@keyframes ghSpin { to { transform: rotate(360deg); } }

/* ── CARD LAYOUT ── */
.gh-card {
    display: flex; flex-direction: column;
    width: 100%; height: 100%;
    padding: 20px 22px 16px;
    gap: 10px;
    overflow: hidden;
    box-sizing: border-box;
}

/* ── HEADER: avatar + user info ── */
.gh-header { display: flex; gap: 14px; align-items: flex-start; }

.gh-avatar {
    width: 52px; height: 52px; border-radius: 50%;
    border: 2px solid rgba(var(--accent-bright-rgb),0.45);
    flex-shrink: 0;
}

.gh-user-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gh-name     { font-family: 'Syne', sans-serif; font-size: 1rem; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gh-handle   { font-size: 0.7rem; color: rgba(var(--accent-bright-rgb),0.85); }
.gh-location { font-size: 0.65rem; color: rgba(255,255,255,0.38); margin-top: 1px; }
.gh-location i { margin-right: 3px; }
.gh-bio      { font-size: 0.65rem; color: rgba(255,255,255,0.5); margin-top: 3px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── STATS ROW: 4 pill counters ── */
.gh-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 6px; flex-shrink: 0;
}
.gh-stat {
    display: flex; flex-direction: column; align-items: center;
    background: rgba(var(--accent-bright-rgb),0.06);
    border-radius: 10px; padding: 6px 4px;
    border: 1px solid rgba(var(--accent-bright-rgb),0.12);
}
.gh-stat-val { font-family: 'Syne', sans-serif; font-size: 0.92rem; font-weight: 700; color: var(--accent-bright); }
.gh-stat-lbl { font-size: 0.54rem; color: rgba(255,255,255,0.38); margin-top: 1px; text-align: center; line-height: 1.3; }

/* ── STREAK IMAGE ── */
.gh-streak {
    width: 100%;
    flex: 1;
    min-height: 0;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.gh-stat-img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    mix-blend-mode: lighten;
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════════════ */

/* ── TABLET ≤900px ───────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .bento-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-auto-rows: 220px;
    }
    .profile-pic { width: 200px; height: 200px; }
    .profile-header h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); }
}

/* ── MOBILE ≤600px ───────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    body { padding: 16px; }

    /* Profile */
    .profile-header { margin-bottom: 36px; }
    .profile-pic { width: 130px; height: 130px; margin-bottom: 14px; }
    .profile-header h1 { font-size: clamp(1.6rem, 8vw, 2.2rem); margin-bottom: 10px; }
    .bio  { font-size: 0.8rem; line-height: 1.6; }
    .cta  { font-size: 0.9rem; margin-top: 12px; }

    /* Grid: single column, auto height */
    .bento-grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 12px;
    }
    /* Size hierarchy: small ≈ 1 unit, wide ≈ 2 units tall */
    .small { min-height: 90px;  max-height: 110px; }
    .wide  { min-height: 160px; }
    .tall,
    .large { min-height: 280px; }
    /* Wide cards: keep horizontal layout (icon + text side by side) */
    .card.wide .solid-overlay {
        flex-direction: row;
        text-align: left;
        justify-content: flex-start;
        gap: 16px;
        padding: 20px 20px;
    }
    /* GitHub card: 2:1 ratio (full width, half as tall) */
    .card-github { min-height: 200px; max-height: 240px; }
    /* Instagram cards: square-ish for the 2×2 photo grid */
    .card:has(.ig-grid-container) { min-height: 280px; max-height: 320px; }

    /* Small card: compact — just icon + label */
    .card.small { min-height: 90px; max-height: 110px; }
    .card.small .solid-overlay { gap: 6px; padding: 14px 16px; flex-direction: row; text-align: left; justify-content: flex-start; }
    .card.small .solid-icon-wrap { width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; }
    .card.small .solid-icon-wrap img { width: 20px; height: 20px; }

    /* GitHub card internals — compact for 2:1 box */
    .card-github .gh-card     { padding: 12px 14px; gap: 8px; }
    .card-github .gh-header   { gap: 10px; }
    .card-github .gh-avatar   { width: 38px; height: 38px; }
    .card-github .gh-name     { font-size: 0.85rem; }
    .card-github .gh-handle   { font-size: 0.62rem; }
    .card-github .gh-location { display: none; }
    .card-github .gh-bio      { display: none; }
    .card-github .gh-stats    { gap: 4px; }
    .card-github .gh-stat     { padding: 4px 2px; }
    .card-github .gh-stat-val { font-size: 0.75rem; }
    .card-github .gh-stat-lbl { font-size: 0.5rem; }

    /* Footer */
    .site-footer { margin-top: 40px; }
}

/* ── SMALL MOBILE ≤400px ─────────────────────────────────────────────────── */
@media (max-width: 400px) {
    body { padding: 12px; }
    .bento-grid { gap: 10px; }
    .profile-pic { width: 110px; height: 110px; }
    .card.wide .solid-overlay { gap: 12px; padding: 16px; }
}

/* ── SITE FOOTER ─────────────────────────────────────────────────────────── */
/* .site-footer/.footer-inner/.footer-logo/.footer-name/.footer-copy/.footer-links/
   .footer-sep all come from shared.css (loaded before this file) - this used to
   redeclare all of them with slightly bumped-up values (bigger logo, brighter
   text), making the bento footer silently render differently from every other
   page for no documented reason. Removed so it just inherits like everywhere
   else. The one genuine bento-specific override (.site-footer margin-top on
   mobile) stays above in the ≤900px media query.