/* Footer darkness on this page (shared default is in base.css; the gallery keeps that default) */
:root {
    --footer-bg-alpha: 0.7;
}

/* Smooth scrolling for in-page links, off for visitors who prefer reduced motion */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* --- SECTIONS --- */
/* Scoped to <main>: libraries add their own <section>s to <body> (e.g. the photo viewer's scroll area) */
main section {
    width: 100%;
    max-width: 900px;
    padding: 4rem 2rem;
    margin-bottom: 2rem;
    opacity: 0;
    /* Animated in via JS */
    transform: translateY(20px);
    transition: opacity 1s ease, transform 1s ease;
    /* Glassmorphism for readability against wireframe */
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
}

/* --- HERO --- */
/* Two columns: About Me panel on the left, title + buttons on the right */
#hero {
    min-height: calc(100vh - 40px);
    max-width: 1300px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "about intro";
    align-items: center;
    gap: 3rem;
    border: none;
    background: transparent;
    backdrop-filter: none;
    position: relative;
    /* Needed for absolute positioning context */
}

.hero-intro {
    grid-area: intro;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

h1 {
    font-family: 'VT323', monospace;
    font-size: clamp(4.5rem, 6.5vw, 8rem);
    /* Scales down so the name fits in its half of the hero */
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
    /* Tighter spacing for pixel feel */
    text-shadow: 0 0 10px var(--accent), 0 0 20px var(--accent), 0 0 40px var(--accent);
    /* Extra glow */
    margin-bottom: 1rem;
    line-height: 0.8;
    min-height: 0.8em;
    /* Prevents layout shift during typing */
}

h2 {
    font-family: 'VT323', monospace;
    font-size: 4rem;
}

/* Subtitle on a dark panel like the buttons below it, so the grid lines don't run through the letters, with an
   accent edge on the left like a terminal output line. IBM Plex Mono (as the About Me text): thicker strokes than
   Courier New and the same on every device. As wide as the button stack below (.social-links: 30ch of Courier New
   at 1.2rem = 21.6rem, + 10px); at this size the text wraps into three lines of at most 30 characters. */
p.subtitle {
    width: calc(21.6rem + 10px);
    max-width: 100%;
    padding: 0.75rem 0.9rem;
    font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
    font-size: 1.1rem;
    line-height: 1.5;
    text-align: left;
    color: var(--text);
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-left: 3px solid var(--accent);
}

/* --- SOCIAL LINKS --- */
/* Vertical stack, as wide as the subtitle's "Google TechX & NSF REU Fellow." line:
   same font as the subtitle, so 30ch is that line's 30 characters, + 10px (room the old highlight's padding took).
   Update the 30ch if that line's text changes. */
.social-links {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
    align-items: stretch;
    font-size: 1.2rem;
    width: calc(30ch + 10px);
    max-width: 100%;
}

.social-btn {
    text-align: center;
    font-family: 'VT323', monospace;
    color: var(--accent);
    border: 1px solid var(--accent);
    padding: 0.6rem 1.2rem;
    text-decoration: none;
    font-size: 1.2rem;
    text-transform: uppercase;
    background: rgba(0, 0, 0, 0.8);
    /* Same opacity as the About Me panel (section background) */
    cursor: pointer;
    transition: all 0.3s;
    letter-spacing: 0.05rem;
    font-weight: bold;
    text-shadow: 0 0 10px var(--accent);
}

.social-btn:hover {
    background: var(--accent);
    color: #000;
    box-shadow: 0 0 15px var(--accent);
}

/* The one main action ([ DOWNLOAD RESUME ]): solid accent with black text, so it reads as "start here"
   among the outlined buttons. It is already filled, so hovering makes it brighter and glow more. */
.social-btn.primary-btn {
    background: var(--accent);
    color: #000;
    text-shadow: none;
    box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.45);
}

.social-btn.primary-btn:hover {
    filter: brightness(1.12);
    box-shadow: 0 0 24px var(--accent);
}

/* LinkedIn + GitHub: a smaller pair side by side at the bottom of the stack (secondary: they lead off the site) */
.profile-links {
    display: flex;
    gap: 0.75rem;
}

@media (min-width: 769px) {
    .profile-links .social-btn {
        flex: 1;
        font-size: 1rem;
        padding: 0.4rem 0.5rem;
    }
}

/* --- TYPING CURSOR --- */
.cursor {
    display: inline-block;
    vertical-align: bottom;
    animation: blink 1s step-end infinite;
    color: var(--accent);
    margin-left: 5px;
}

@keyframes blink {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* About Me panel, nested in the hero's left column */
#about {
    grid-area: about;
    width: 100%;
    max-width: none;
    margin-bottom: 0;
    padding: 2.5rem 2rem;
    /* Jump target for the [ ABOUT ME ] button: stop below the floating navbar (~46px) with some breathing room */
    scroll-margin-top: 70px;
}

/* --- NEW: PROFILE LAYOUT --- */
/* Beside the title the panel is narrow, so the picture sits above the text */
.about-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
    /* Space between image and text */
}

/* About Me body text: IBM Plex Mono, which looks the same on every device (Courier New isn't on Android).
   1rem reads about as large as Courier New did at 1.1rem (Plex's letters are bigger) and keeps the panel compact. */
.profile-text p {
    font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
    font-size: 1rem;
    color: var(--text);
}

/* Bold keywords keep the full accent, so they stand out from the softer paragraph text */
.profile-text strong {
    color: var(--accent);
}

/* Both halves are already on screen, so the jump button only matters once they stack */
.about-btn {
    display: none;
}

/* Phone-only parts of the profile card and About Me (shown in the 768px block at the end) */
.hero-photo,
.read-more {
    display: none;
}

.profile-frame {
    flex-shrink: 0;
    /* Prevents image from squishing */
    width: 234px;
    height: 234px;
    border: 2px solid var(--accent);
    /* Accent-coloured wireframe border */
    padding: 5px;
    /* Gap between border and image */
    box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.2);
    /* Subtle glow */
    position: relative;
}

/* Decorative "Corner" markers for sci-fi look */
.profile-frame::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    border-bottom: 2px solid var(--accent);
    border-right: 2px solid var(--accent);
}

.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Ensures photo fills square without stretching. Always in full colour (it used to be black and white
       until hovered). */
}

/* Jump target for the [ PROJECTS ] buttons (hero and navbar): stop below the floating navbar, same as #about */
#projects {
    scroll-margin-top: 70px;
}

/* Phones: the navbar is at the bottom, so jumps only need a small gap at the top */
@media (max-width: 768px) {
    #about,
    #projects {
        scroll-margin-top: 1rem;
    }
}

/* Two-column hero: widen Projects so its edges line up with the About Me panel (hero width minus its 2rem side padding) */
@media (min-width: 1025px) {
    #projects {
        width: calc(100% - 4rem);
        max-width: calc(1300px - 4rem);
    }
}

/* --- PROJECTS GRID --- */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

/* Same look as the hero buttons: accent border on 80% black. Column layout so the button sits at the bottom. */
.card {
    border: 1px solid var(--accent);
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.8);
    transition: transform 0.3s, box-shadow 0.3s, background 0.3s;
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 15px rgba(var(--accent-rgb), 0.4);
    background: rgba(0, 0, 0, 0.9);
    background: rgb(from var(--accent) calc(r * 0.157) calc(g * 0.157) calc(b * 0.157) / 0.9);
}

/* Pixel font and glow, like the hero headings and buttons */
.card h3 {
    font-family: 'VT323', monospace;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.1;
    text-shadow: 0 0 10px var(--accent);
    margin-bottom: 0.75rem;
    border-bottom: 1px dashed var(--accent);
    padding-bottom: 0.5rem;
}

/* Same font and size as the About Me text (IBM Plex Mono, @font-face in base.css); grows to push the button to the bottom of the card */
.card p {
    font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
    color: var(--text);
    font-size: 1rem;
    line-height: 1.4;
    flex-grow: 1;
}

/* Tech tags under the description: same look as the gallery's tags (labels, not buttons),
   so recruiters can scan each project's stack at a glance */
.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.card-tag {
    font-family: 'IBM Plex Mono', 'Courier New', Courier, monospace;
    background: rgba(var(--accent-rgb), 0.12);
    border: 1px solid rgba(var(--accent-rgb), 0.8);
    color: var(--accent);
    padding: 0.24rem 0.6rem;
    font-size: 0.8rem;
    text-transform: uppercase;
}

/* Hero-style button inside a card: buttons line up along the bottom of each row */
.card .social-btn {
    margin-top: 1.5rem;
}

/* [ VIEW SOURCE ] waiting for its link (portfolio repo not public yet) */
.card .social-btn[aria-disabled="true"] {
    cursor: not-allowed;
}

/* --- PROJECT IMAGES: same shape on every card; click (or [ VIEW IMAGE ]) to enlarge (lightbox.js) --- */
.card-photo {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    margin-bottom: 1rem;
    border: 1px dashed rgba(var(--accent-rgb), 0.3);
    background: #000;
    overflow: hidden;
    cursor: zoom-in;
}

.card-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: opacity 0.3s ease, transform 0.4s ease;
}

/* Screenshots of pages/documents: show the top (title, header) rather than the middle */
.card-photo.top img {
    object-position: top;
}

/* Labels over a card's image: [ N PHOTOS ] top right (added by index.js, same look as the gallery's cards)
   and [ IN PROGRESS ] top left for unfinished projects */
.card-photo .photo-count,
.card-photo .card-status {
    position: absolute;
    top: 0.5rem;
    z-index: 1;
    padding: 0.1rem 0.5rem;
    font-family: 'VT323', monospace;
    font-size: 1rem;
    color: var(--accent);
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--accent);
    pointer-events: none;
}

.card-photo .photo-count {
    right: 0.5rem;
}

.card-photo .card-status {
    left: 0.5rem;
}

/* "Enlarge" hint over the image on hover / keyboard focus, like the gallery */
.card-photo::after {
    content: '[ + ENLARGE ]';
    position: absolute;
    inset: auto 0 0 0;
    padding: 0.4rem;
    font-family: 'VT323', monospace;
    font-size: 1.2rem;
    letter-spacing: 0.1rem;
    text-align: center;
    color: #fff;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    text-shadow: 0 0 8px var(--accent);
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.card-photo:hover img,
.card-photo:focus-visible img {
    opacity: 1;
    transform: scale(1.05);
}

.card-photo:hover::after,
.card-photo:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

/* Touch screens can't hover, so the hint stays visible there */
@media (hover: none) and (pointer: coarse) {
    .card-photo::after {
        content: '[ + TAP TO ENLARGE ]';
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- HERO STACKED (tablets & phones) --- */
/* Title fills the first screen as before; the About Me panel follows below it */
@media (max-width: 1024px) {
    #hero {
        max-width: 900px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "intro"
            "about";
        padding-top: 0;
    }

    .hero-intro {
        min-height: calc(100vh - 40px);
    }

    h1 {
        font-size: 8rem;
    }

    .about-container {
        flex-direction: row;
        gap: 2rem;
    }

    .about-btn {
        display: block;
    }
}

@media (max-width: 768px) {
    /* --- RESPONSIVE --- */
    h1 {
        font-size: 2.5rem;
    }

    main section {
        padding: 2rem 1rem;
        width: 95%;
    }

    /* --- PHONE PROFILE CARD: photo beside the name and subtitle, LinkedIn + GitHub side by side below --- */
    /* The hero no longer fills the first screen: the card and About Me panel share the same width as Projects */
    #hero {
        min-height: 0;
        padding: 0;
        gap: 1rem;
        margin-bottom: 1rem;
    }

    #about {
        width: 100%;
        padding: 1.5rem 1rem;
    }

    .hero-intro {
        min-height: 0;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "photo name"
            "photo subtitle"
            "links links";
        grid-template-rows: auto 1fr auto;
        column-gap: 1rem;
        align-items: start;
        text-align: left;
        padding: 1.25rem 1rem;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(2px);
        border: 1px solid rgba(var(--accent-rgb), 0.2);
    }

    .hero-photo {
        display: block;
        grid-area: photo;
        width: 104px;
        height: 104px;
        padding: 3px;
        margin: 0;
    }

    .hero-photo::after {
        width: 12px;
        height: 12px;
        bottom: -4px;
        right: -4px;
    }

    .hero-intro h1 {
        grid-area: name;
        font-size: 2.5rem;
        line-height: 0.9;
        margin-bottom: 0.5rem;
    }

    /* Already on the profile card's dark panel: no panel of its own, just the font */
    p.subtitle {
        grid-area: subtitle;
        width: auto;
        padding: 0;
        font-size: 0.95rem;
        line-height: 1.4;
        background: none;
        backdrop-filter: none;
        border: none;
    }

    .social-links {
        grid-area: links;
        flex-direction: row;
        width: 100%;
        gap: 0.75rem;
        margin-top: 1.25rem;
    }

    /* Every button stays at least 44px tall (comfortable tap target) */
    .social-links .social-btn {
        flex: 1;
        min-height: 44px;
        padding: 0.6rem 0.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* The LinkedIn + GitHub pair's wrapper steps aside, so the two buttons share the card's row as before */
    .profile-links {
        display: contents;
    }

    /* Résumé, Projects and Contact are already in the bottom navbar, and About Me follows right below:
       keep only LinkedIn and GitHub (after the rule above, which would otherwise show them again) */
    .social-links .nav-duplicate,
    .social-links .about-btn {
        display: none;
    }

    /* About Me is on the first screen, so it skips its scroll fade-in (it would stay transparent until 10% is visible) */
    #about {
        opacity: 1;
        transform: none;
    }

    /* --- PHONE ABOUT ME: the photo is in the card above; first lines only until [ READ MORE ] --- */
    #about .profile-frame {
        display: none;
    }

    .about-container {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
        gap: 0;
    }

    h2 {
        font-size: 3rem;
        line-height: 1;
    }

    /* The blank lines around the text become a small margin */
    .profile-text > br {
        display: none;
    }

    .profile-text h2 {
        margin-bottom: 0.75rem;
    }

    #about:not(.expanded) .profile-text p {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
    }

    .read-more {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 44px;
        margin-top: 0.5rem;
    }

    /* --- PHONE PROJECTS: one swipeable row, one card and the edge of the next on screen --- */
    #projects h2 {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
    }

    #projects h2::after {
        content: '<< SWIPE >>';
        font-size: 1.2rem;
        letter-spacing: 0.05rem;
        opacity: 0.8;
    }

    /* Runs edge to edge inside the panel (cancels its 1rem side padding) so the next card peeks in from the edge */
    #projects .grid {
        display: flex;
        gap: 1rem;
        margin: 1.25rem -1rem 0;
        padding: 0 1rem 0.75rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 1rem;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        scrollbar-color: var(--accent) transparent;
        /* Each card keeps its own height (only one is in view), so short cards don't stretch to the longest one */
        align-items: flex-start;
    }

    #projects .card {
        flex: 0 0 85%;
        scroll-snap-align: start;
        padding: 1rem;
    }

    #projects .card:hover {
        transform: none;
    }

    #projects .card .social-btn {
        margin-top: 1rem;
    }
}