/* ============================================================
   PORTFOLIO PAGE — portfolio.css
   Page-specific styles. Uses global CSS variables.
   All new classes prefixed .pf-
   ============================================================ */

/* ── Page wrapper ─────────────────────────────────────────── */
.pf-page {
    max-width: 1280px;
    margin:    0 auto;
    padding:   calc(var(--sp-16) + 64px) var(--sp-8) var(--sp-20);
    position:  relative;
}

/* Subtle radial glow top-left */
.pf-page::before {
    content:       '';
    position:      fixed;
    top:           -40px;
    left:          -80px;
    width:         500px;
    height:        500px;
    background:    radial-gradient(circle, rgba(202,255,111,0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index:       0;
}

/* ── Hero ─────────────────────────────────────────────────── */
.pf-hero {
    margin-bottom: var(--sp-16);
    position:      relative;
    z-index:       1;
}

.pf-h1 {
    font-family:    var(--font-display);
    font-size:      clamp(2.5rem, 7vw, 5.5rem);
    font-weight:    700;
    letter-spacing: -0.04em;
    line-height:    1.05;
    color:          #fff;
    margin-top:     var(--sp-4);
    margin-bottom:  var(--sp-6);
}

.pf-h1 em {
    font-style: italic;
    color:      var(--clr-green);
}

.pf-hero-rule {
    display:         flex;
    flex-direction:  column;
    gap:             var(--sp-5);
    padding-top:     var(--sp-6);
    border-top:      1px solid rgba(255,255,255,0.08);
    margin-top:      var(--sp-2);
}

@media (min-width: 768px) {
    .pf-hero-rule {
        flex-direction: row;
        align-items:    center;
        justify-content: space-between;
    }
}

.pf-hero-sub {
    font-family: var(--font-body);
    font-size:   1rem;
    color:       rgba(255,255,255,0.42);
    line-height: 1.7;
    font-weight: 300;
    max-width:   580px;
}

.pf-index-label {
    display:        flex;
    align-items:    center;
    gap:            var(--sp-3);
    font-family:    var(--font-display);
    font-size:      0.5625rem;
    font-weight:    700;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color:          rgba(202,255,111,0.55);
    white-space:    nowrap;
    flex-shrink:    0;
}

.pf-index-label::before {
    content:    '';
    display:    block;
    width:      28px;
    height:     1px;
    background: rgba(202,255,111,0.4);
}

/* ── Bento grid ───────────────────────────────────────────── */
.pf-grid {
    display:               grid;
    grid-template-columns: 1fr;
    gap:                   var(--sp-12);
    position:              relative;
    z-index:               1;
}

@media (min-width: 900px) {
    .pf-grid {
        grid-template-columns: repeat(12, 1fr);
        gap:                   var(--sp-8);
        align-items:           start;
    }
}

/* Column spans */
@media (min-width: 900px) {
    .pf-item--featured { grid-column: span 8; }
    .pf-item--sidebar  { grid-column: span 4; }
    .pf-item--half     { grid-column: span 6; }
    .pf-item--full     { grid-column: span 12; }
}

/* ── Project card ─────────────────────────────────────────── */
.pf-item { cursor: default; }

/* Whole-card cover link */
.pf-item--linked {
    position: relative;
    cursor:   pointer;
}

/* Real anchor element that covers the entire card */
.pf-item-cover {
    position: absolute;
    inset:    0;
    z-index:  2;
    display:  block;
}

/* Browser mockup frame */
.pf-mockup {
    border:        1px solid rgba(255,255,255,0.1);
    border-radius: 8px 8px 0 0;
    overflow:      hidden;
    box-shadow:    0 20px 50px rgba(0,0,0,0.45);
    margin-bottom: var(--sp-6);
    background:    #1a1919;
    display:       block;
    text-decoration: none;
    transition:    border-color 0.4s, box-shadow 0.4s;
}

.pf-item:hover .pf-mockup {
    border-color: rgba(202,255,111,0.2);
    box-shadow:   0 24px 60px rgba(0,0,0,0.55), 0 0 0 1px rgba(202,255,111,0.08);
}

/* Top bar with traffic light dots + URL pill */
.pf-mockup-bar {
    position:    relative;
    height:      28px;
    background:  #262626;
    display:     flex;
    align-items: center;
    padding:     0 12px;
    gap:         6px;
    flex-shrink: 0;
    transition:  background 0.4s;
}

.pf-item--featured .pf-mockup-bar,
.pf-item--full     .pf-mockup-bar { background: rgba(202,255,111,0.06); }

.pf-mockup-dots {
    display:     flex;
    align-items: center;
    gap:         6px;
    flex-shrink: 0;
}

.pf-mockup-dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    #484847;
    transition:    background 0.4s;
}

.pf-item--featured .pf-mockup-dots .pf-mockup-dot:nth-child(1),
.pf-item--full     .pf-mockup-dots .pf-mockup-dot:nth-child(1) { background: rgba(202,255,111,0.5); }
.pf-item--featured .pf-mockup-dots .pf-mockup-dot:nth-child(2),
.pf-item--full     .pf-mockup-dots .pf-mockup-dot:nth-child(2) { background: rgba(202,255,111,0.3); }
.pf-item--featured .pf-mockup-dots .pf-mockup-dot:nth-child(3),
.pf-item--full     .pf-mockup-dots .pf-mockup-dot:nth-child(3) { background: rgba(202,255,111,0.15); }

/* Faux browser address bar centred in the top bar */
.pf-mockup-url {
    position:       absolute;
    left:           50%;
    transform:      translateX(-50%);
    font-family:    var(--font-display);
    font-size:      0.5625rem;
    font-weight:    600;
    color:          rgba(255,255,255,0.28);
    background:     rgba(255,255,255,0.05);
    border:         1px solid rgba(255,255,255,0.07);
    border-radius:  3px;
    padding:        2px 10px;
    max-width:      55%;
    overflow:       hidden;
    text-overflow:  ellipsis;
    white-space:    nowrap;
    letter-spacing: 0.02em;
    pointer-events: none;
}

/* Image container */
.pf-mockup-img {
    overflow: hidden;
    display:  block;
}

.pf-item--featured .pf-mockup-img { aspect-ratio: 16/9; }
.pf-item--sidebar  .pf-mockup-img { aspect-ratio: 4/5; }
.pf-item--half     .pf-mockup-img { aspect-ratio: 16/10; }
.pf-item--full     .pf-mockup-img { aspect-ratio: 16/7; }

.pf-mockup-img img {
    width:            100%;
    height:           100%;
    object-fit:       cover;
    object-position:  top center;
    display:          block;
    filter:           grayscale(1);
    transition:       filter 0.7s ease, transform 0.7s ease;
}

.pf-item:hover .pf-mockup-img img {
    filter:    grayscale(0);
    transform: scale(1.03);
}

/* Placeholder for items without an image */
.pf-mockup-placeholder {
    width:           100%;
    height:          100%;
    background:      linear-gradient(145deg, #141614 0%, #0e0e0e 100%);
    display:         flex;
    align-items:     center;
    justify-content: center;
}

.pf-mockup-placeholder svg {
    width:   48px;
    height:  48px;
    stroke:  rgba(202,255,111,0.15);
    fill:    none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ── Project info ─────────────────────────────────────────── */
.pf-item-meta {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    gap:             var(--sp-4);
    padding:         0 var(--sp-1);
}

.pf-item-body { flex: 1; }

.pf-item-industry {
    font-family:    var(--font-display);
    font-size:      0.5625rem;
    font-weight:    700;
    letter-spacing: 0.25em;
    text-transform: uppercase;
    color:          var(--clr-green);
    margin-bottom:  var(--sp-2);
    display:        block;
}

.pf-item-name {
    font-family:    var(--font-display);
    font-weight:    700;
    letter-spacing: -0.02em;
    color:          #fff;
    line-height:    1.2;
    margin-bottom:  var(--sp-3);
    transition:     color 0.3s;
}

.pf-item--featured .pf-item-name { font-size: clamp(1.375rem, 2.5vw, 1.875rem); }
.pf-item--sidebar  .pf-item-name { font-size: 1.25rem; }
.pf-item--half     .pf-item-name { font-size: 1.25rem; }

.pf-item:hover .pf-item-name { color: var(--clr-green); }

.pf-item-desc {
    font-family:   var(--font-body);
    font-size:     0.875rem;
    color:         rgba(255,255,255,0.38);
    line-height:   1.65;
    font-weight:   300;
    margin-bottom: var(--sp-4);
    max-width:     520px;
}

.pf-item--sidebar  .pf-item-desc,
.pf-item--half     .pf-item-desc { font-size: 0.8125rem; }

/* Tags */
.pf-item-tags {
    display:   flex;
    flex-wrap: wrap;
    gap:       var(--sp-2);
}

.pf-item-tag {
    font-family:    var(--font-display);
    font-size:      0.5rem;
    font-weight:    700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color:          rgba(255,255,255,0.35);
    border:         1px solid rgba(255,255,255,0.12);
    border-radius:  3px;
    padding:        3px 8px;
    transition:     border-color 0.3s, color 0.3s;
}

.pf-item:hover .pf-item-tag {
    border-color: rgba(202,255,111,0.2);
    color:        rgba(255,255,255,0.5);
}

/* View site arrow */
.pf-item-link {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--sp-2);
    font-family:     var(--font-display);
    font-size:       0.75rem;
    font-weight:     700;
    letter-spacing:  0.05em;
    text-transform:  uppercase;
    color:           rgba(255,255,255,0.25);
    text-decoration: none;
    flex-shrink:     0;
    transition:      color 0.3s, transform 0.3s;
    padding-top:     var(--sp-1);
}

.pf-item:hover .pf-item-link {
    color:     var(--clr-green);
    transform: translate(2px, -2px);
}

.pf-item-link svg {
    width:        18px;
    height:       18px;
    stroke:       currentColor;
    fill:         none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition:   transform 0.3s;
}

/* ── Empty state ──────────────────────────────────────────── */
.pf-empty {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    text-align:      center;
    padding:         var(--sp-20) var(--sp-8);
    position:        relative;
    z-index:         1;
}

.pf-empty-icon {
    width:         72px;
    height:        72px;
    border:        1px solid rgba(202,255,111,0.15);
    border-radius: 50%;
    display:       flex;
    align-items:   center;
    justify-content: center;
    margin-bottom: var(--sp-8);
    background:    rgba(202,255,111,0.04);
}

.pf-empty-icon svg {
    width:        30px;
    height:       30px;
    stroke:       rgba(202,255,111,0.5);
    fill:         none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pf-empty-h2 {
    font-family:    var(--font-display);
    font-size:      clamp(1.5rem, 3vw, 2.25rem);
    font-weight:    700;
    letter-spacing: -0.03em;
    color:          #fff;
    margin-bottom:  var(--sp-4);
    line-height:    1.2;
}

.pf-empty-sub {
    font-family: var(--font-body);
    font-size:   1rem;
    color:       rgba(255,255,255,0.38);
    line-height: 1.75;
    font-weight: 300;
    max-width:   480px;
}

/* ── CTA section ──────────────────────────────────────────── */
.pf-cta {
    margin-top:    calc(var(--sp-20) + var(--sp-8));
    background:    #111311;
    border:        1px solid rgba(255,255,255,0.06);
    border-radius: var(--r-xl);
    padding:       var(--sp-16);
    text-align:    center;
    position:      relative;
    overflow:      hidden;
    z-index:       1;
}

/* Glow blob */
.pf-cta::before {
    content:       '';
    position:      absolute;
    top:           0;
    right:         0;
    width:         360px;
    height:        360px;
    background:    radial-gradient(circle, rgba(202,255,111,0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.pf-cta-h2 {
    font-family:    var(--font-display);
    font-size:      clamp(2rem, 4.5vw, 3.5rem);
    font-weight:    700;
    letter-spacing: -0.035em;
    color:          #fff;
    line-height:    1.1;
    margin-bottom:  var(--sp-5);
    position:       relative;
    z-index:        1;
}

.pf-cta-h2 em {
    font-style: italic;
    color:      var(--clr-green);
}

.pf-cta-sub {
    font-family:   var(--font-body);
    font-size:     1rem;
    color:         rgba(255,255,255,0.4);
    line-height:   1.7;
    max-width:     480px;
    margin:        0 auto var(--sp-10);
    font-weight:   300;
    position:      relative;
    z-index:       1;
}

.pf-cta-actions {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    gap:             var(--sp-4);
    position:        relative;
    z-index:         1;
}

@media (min-width: 480px) {
    .pf-cta-actions { flex-direction: row; justify-content: center; }
}

.pf-cta-btn-primary {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--sp-3);
    background:      var(--clr-green);
    color:           #0e0e0e;
    font-family:     var(--font-display);
    font-size:       1rem;
    font-weight:     700;
    text-decoration: none;
    padding:         1rem 2.25rem;
    border-radius:   var(--r-pill);
    transition:      opacity 0.2s, box-shadow 0.2s;
    box-shadow:      0 8px 32px -4px rgba(202,255,111,0.3);
}

.pf-cta-btn-primary:hover { opacity: 0.88; box-shadow: 0 12px 40px -4px rgba(202,255,111,0.38); }

.pf-cta-btn-primary svg {
    width:        18px;
    height:       18px;
    stroke:       #0e0e0e;
    fill:         none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition:   transform 0.3s var(--ease-out);
}

.pf-cta-btn-primary:hover svg { transform: translateX(3px); }

.pf-cta-btn-secondary {
    display:         inline-flex;
    align-items:     center;
    font-family:     var(--font-display);
    font-size:       1rem;
    font-weight:     700;
    color:           rgba(255,255,255,0.5);
    text-decoration: none;
    padding:         1rem 2.25rem;
    border-radius:   var(--r-pill);
    border:          1px solid rgba(255,255,255,0.12);
    transition:      background 0.2s, color 0.2s, border-color 0.2s;
}

.pf-cta-btn-secondary:hover {
    background:   rgba(255,255,255,0.05);
    color:        #fff;
    border-color: rgba(255,255,255,0.2);
}

/* ── Mobile tweaks ────────────────────────────────────────── */
@media (max-width: 599px) {
    .pf-page { padding-left: var(--sp-5); padding-right: var(--sp-5); }
    .pf-cta  { padding: var(--sp-10) var(--sp-6); }
}