/* =========================================================
   NEXEN — portfolio page components
   Loaded AFTER style.css. Uses the same :root tokens
   (--bg, --ink, --accent, --mono, --display, --body, etc.)
   Only defines what's unique to a portfolio page:
   photo header, quick-facts strip, carousel, timeline.
   ========================================================= */

/* ---------------- Back-to-site link ---------------- */
.pfBack {
    font-family: var(--mono);
    font-size: var(--fs-footnote);
    line-height: var(--lh-footnote);
    letter-spacing: var(--tr-footnote);
    text-transform: uppercase;
    color: var(--label-2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.2s ease;
}

@media (hover: hover) {
    .pfBack:hover {
        color: var(--label);
    }
}

/* ---------------- Header (photo + identity) ---------------- */
#pfHero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 160px 0 80px;
}

.pfHeroGrid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    align-items: center;
    width: 100%;
}

.pfPhotoFrame {
    position: relative;
    border: var(--edge);
    aspect-ratio: 4 / 5;
    background: var(--bg-panel);
    overflow: hidden;
}

.pfPhotoFrame img:not(.pfInstitutionBadge) {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Placeholder state — shown until a real <img> src is added.
   Remove .pfPlaceholder and the <span class="pfPlaceholderLabel">
   once a real photo is in place. */
.pfPlaceholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        repeating-linear-gradient(135deg,
            var(--line-faint),
            var(--line-faint) 10px,
            transparent 10px,
            transparent 20px);
}

.pfPlaceholderLabel {
    font-family: var(--mono);
    font-size: var(--fs-caption);
    line-height: var(--lh-caption);
    letter-spacing: var(--tr-caption);
    text-transform: uppercase;
    color: var(--label-3);
    text-align: center;
    padding: 16px 20px;
    border: 1px dashed var(--line-dim);
    background: var(--bg-deep);
    max-width: 70%;
}

.pfPhotoFrame .schematicLabel {
    bottom: 12px;
    left: 12px;
}

.pfInstitutionBadge {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 88px;
    height: 88px;
    padding: 6px;
    background: var(--bg-deep);
    border: var(--edge);
    border-radius: 50%;
    opacity: 0.75;
}

.pfIdentity {
    margin-bottom: 4px;
}

.pfName {
    font-family: var(--display);
    font-weight: 700;
    font-size: var(--fs-title-1);
    line-height: var(--lh-title-1);
    letter-spacing: var(--tr-title-1);
    margin: 14px 0 8px;
}

.pfRole {
    font-family: var(--mono);
    font-size: var(--fs-callout);
    line-height: var(--lh-callout);
    letter-spacing: var(--tr-callout);
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 22px;
}

.pfBio {
    color: var(--label-2);
    font-size: var(--fs-lede);
    line-height: var(--lh-lede);
    letter-spacing: var(--tr-lede);
    max-width: 52ch;
    margin-bottom: 28px;
}

/* Quick facts strip — like a spec sheet, not a resume list */
.pfFacts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--line-dim);
    border: var(--edge);
    margin-bottom: 28px;
}

.pfFact {
    background: var(--bg-panel);
    padding: 14px 18px;
}

.pfFact .pfFactLabel {
    font-family: var(--mono);
    font-size: var(--fs-micro);
    line-height: var(--lh-micro);
    letter-spacing: var(--tr-micro);
    text-transform: uppercase;
    color: var(--label-3);
    display: block;
    margin-bottom: 6px;
}

.pfFact .pfFactValue {
    font-family: var(--body);
    font-size: var(--fs-subhead);
    line-height: var(--lh-subhead);
    letter-spacing: var(--tr-subhead);
    color: var(--label);
}

.pfLinkRow {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* ---------------- Gallery ("beyond the lab") ----------------
   Masonry via CSS multi-column layout: each item keeps its own
   aspect ratio (photo's natural size, or --ratio on the placeholder)
   and flows into whichever column has room, so mixed portrait/
   landscape/square photos tile together with no manual layout. */
.gallery {
    column-count: 3;
    column-gap: 16px;
}

.galleryItem {
    break-inside: avoid;
    margin-bottom: 16px;
    border: var(--edge);
    background: var(--bg-panel);
    overflow: hidden;
}

.galleryItem img {
    width: 100%;
    height: auto;
    display: block;
}

.galleryItem .pfPlaceholder {
    width: 100%;
    height: auto;
    aspect-ratio: var(--ratio, 4 / 3);
}

.galleryCaption {
    padding: 10px 14px;
    border-top: var(--edge);
    font-family: var(--mono);
    font-size: var(--fs-footnote);
    line-height: var(--lh-footnote);
    letter-spacing: var(--tr-footnote);
    color: var(--label-3);
}

/* ---------------- Timeline (path / milestones) ---------------- */
.pfTimeline {
    border: var(--edge);
    font-family: var(--mono);
    font-size: var(--fs-callout);
    line-height: var(--lh-callout);
    letter-spacing: var(--tr-callout);
}

.pfTimelineRow {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 24px;
    padding: 18px 20px;
    border-bottom: var(--edge);
}

.pfTimelineRow:last-child {
    border-bottom: none;
}

.pfTimelineYear {
    color: var(--accent);
    font-weight: 700;
}

.pfTimelineDesc {
    color: var(--label);
    font-family: var(--body);
    font-size: var(--fs-subhead);
    letter-spacing: var(--tr-subhead);
    line-height: var(--lh-subhead);
}

.pfTimelineDesc strong {
    font-family: var(--mono);
    font-size: var(--fs-footnote);
    line-height: var(--lh-footnote);
    letter-spacing: var(--tr-footnote);
    color: var(--label-3);
    text-transform: uppercase;
    display: block;
    margin-bottom: 4px;
}

/* ---------------- Responsive ---------------- */
@media (max-width: 860px) {
    .pfHeroGrid {
        grid-template-columns: 1fr;
    }

    .pfPhotoFrame {
        max-width: 380px;
        margin: 0 auto;
        aspect-ratio: 1 / 1;
    }

    .gallery {
        column-count: 2;
    }
}

@media (max-width: 640px) {
    #pfHero {
        padding-top: 148px;
    }

    .pfFacts {
        grid-template-columns: 1fr;
    }

    .pfTimelineRow {
        grid-template-columns: 1fr;
        gap: 6px;
    }

    .gallery {
        column-count: 1;
    }
}