/* ============================================================
   WEBNOVA — Portfolio index + project / case-study pages
   Index grid reuses .wn-card / .wn-portfolio-grid from style.css.
   This file styles the project detail (case study). Uses page.css for hero.
   ============================================================ */

/* Index: tighten grid under the hero */
.page-portfolio .wn-portfolio { padding-top: var(--wn-s-6); }

/* The hero already supplies bottom breathing room; pull the cover up so the gap
   under the hero matches the rest of the site instead of stacking two full
   section paddings (text heroes have bottom padding the video heroes don't). */
.wn-project { padding-top: clamp(3rem, 6vw, 6rem); }

/* ─── Cover (scroll-on-hover, mirrors the home .wn-card) ─── */
.wn-project-cover {
    position: relative;
    margin: 0 0 clamp(2.5rem, 5vw, 4rem);
    border-radius: var(--wn-r-xl);
    overflow: hidden;
    border: 1px solid var(--wn-line);
    box-shadow: var(--wn-glass-shadow);
    aspect-ratio: 16 / 9;
    background: var(--wn-bg-alt);
}
/* Static cover layer — sits on top by default, fades out on hover to reveal the
   scrolling full-page screenshot underneath (.wn-card-scroll, styled in style.css). */
.wn-project-cover-static {
    position: absolute;
    inset: 0;
    z-index: 1;
    transition: opacity 500ms var(--wn-ease);
}
.wn-project-cover-static img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.wn-project-cover.has-screenshot:hover .wn-project-cover-static { opacity: 0; }
.wn-project-cover.has-screenshot:hover .wn-card-scroll { opacity: 1; }
.wn-project-cover.has-screenshot:hover .wn-card-scroll-img {
    /* Own keyframe (not the home grid's wn-card-scroll) with a shorter pause at
       the top, so scrolling kicks in ~1.5s after hover instead of ~3s. The move
       phase stays near-identical, so scroll speed is unchanged. */
    animation: wn-project-cover-scroll var(--scroll-duration, 24s) ease-in-out 200ms both;
}
@keyframes wn-project-cover-scroll {
    0%   { transform: translateY(0); }
    4%   { transform: translateY(0); }                /* short pause at top */
    92%  { transform: translateY(var(--scroll-distance, -100%)); }
    100% { transform: translateY(var(--scroll-distance, -100%)); } /* pause at bottom */
}

/* ─── Meta + overview ───────────────────────────────────── */
.wn-project-body {
    display: grid;
    grid-template-columns: 4fr 7fr;
    gap: clamp(2rem, 4vw, 4.5rem);
    align-items: start;
}
.wn-project-meta {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-top: 0.4rem;
    position: sticky;
    top: 7rem;
}
.wn-project-meta-item { display: flex; flex-direction: column; gap: 0.3rem; }
.wn-project-meta-label {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--wn-ink-muted);
}
.wn-project-meta-value {
    font-size: 1.05rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--wn-ink);
    line-height: 1.4;
}
.wn-project-visit {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    width: fit-content;
    color: var(--wn-accent);
    border-bottom: 1px solid var(--wn-accent-soft);
    padding-bottom: 1px;
}
.wn-project-visit:hover { border-color: var(--wn-accent); }
.wn-project-visit svg { transition: transform var(--wn-t-fast) var(--wn-ease); }
.wn-project-visit:hover svg { transform: translate(2px, -2px); }

.wn-project-overview .wn-section-eyebrow { margin-bottom: 1.4rem; }

/* ─── Challenge / What we built ─────────────────────────── */
.wn-project-split {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(2rem, 4vw, 4rem);
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-top: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--wn-line);
}
.wn-project-block-title {
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: 500;
    letter-spacing: -0.025em;
    color: var(--wn-ink);
    margin: 0 0 1.1rem;
}

/* ─── Features ──────────────────────────────────────────── */
.wn-project-features {
    margin-top: clamp(3rem, 6vw, 5rem);
    padding-top: clamp(2.5rem, 5vw, 4rem);
    border-top: 1px solid var(--wn-line);
}
.wn-project-features .wn-section-eyebrow { margin-bottom: 2rem; }
.wn-project-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem 2rem;
}
.wn-project-feature {
    padding: 1.8rem 0 0;
    border-top: 2px solid var(--wn-ink);
}
.wn-project-feature-dot { display: none; }
.wn-project-feature-title {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--wn-ink);
    margin: 0 0 0.5rem;
}
.wn-project-feature-copy {
    font-size: 0.92rem;
    font-weight: 300;
    line-height: 1.6;
    color: var(--wn-ink-2);
    margin: 0;
}

/* ─── Results (dark band) ───────────────────────────────── */
/* Match the home wn-stats band: gradient-tinted dark surface with a soft,
   blurred highlight overlay behind the glass cards. */
.wn-project-results.is-dark {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 20% 20%, rgba(63, 152, 166, 0.35), transparent 55%),
        radial-gradient(ellipse at 80% 70%, rgba(130, 90, 180, 0.28), transparent 60%),
        radial-gradient(ellipse at 50% 100%, rgba(255, 150, 120, 0.15), transparent 55%),
        linear-gradient(180deg, #0d1015 0%, #16202b 100%);
}
.wn-project-results.is-dark::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.08) 0, transparent 30%),
        radial-gradient(circle at 70% 80%, rgba(63, 152, 166, 0.4) 0, transparent 40%);
    filter: blur(80px);
    pointer-events: none;
}
.wn-project-results .wn-container { position: relative; z-index: 1; }

.wn-project-results .wn-section-eyebrow { margin-bottom: 2.4rem; }
.wn-project-results-grid {
    display: grid;
    /* auto-fit so 3- and 4-stat sections both fill the row cleanly (item count
       caps it at 4 here; tablet/mobile counts are set in the media queries). */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.2rem;
}
.wn-project-result {
    padding: 2.4rem 1.8rem;
    /* Dark frosted glass — same treatment as the home .wn-stat cards. */
    background: var(--wn-glass-bg-dark);
    backdrop-filter: blur(26px) saturate(1.5);
    -webkit-backdrop-filter: blur(26px) saturate(1.5);
    border: 1px solid var(--wn-glass-border-dark);
    border-radius: var(--wn-r-lg);
    box-shadow: var(--wn-glass-shadow-dark);
    position: relative;
    overflow: hidden;
    transition: background 400ms var(--wn-ease-out), box-shadow 400ms var(--wn-ease-out);
}
.wn-project-result:hover { background: rgba(20, 25, 34, 0.32); }
.wn-project-result::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 40%);
    pointer-events: none;
}
.wn-project-result-num {
    font-size: clamp(2.6rem, 4vw, 3.6rem);
    font-weight: 300;
    letter-spacing: -0.04em;
    line-height: 1;
    color: var(--wn-ink-inv);
    margin-bottom: 0.9rem;
    font-variant-numeric: tabular-nums;
    position: relative;
    z-index: 1;
}
.wn-project-result-num sup { font-size: 0.45em; font-weight: 400; vertical-align: top; margin-left: 2px; color: var(--wn-accent-soft); top: 0.6em; position: relative; }
.wn-project-result-label {
    font-size: 0.9rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--wn-ink-inv-muted);
    position: relative;
    z-index: 1;
}

/* ─── Testimonial ───────────────────────────────────────── */
.wn-project-quote-inner {
    margin: 0 auto;
    max-width: 60rem;
    text-align: center;
}
.wn-project-quote-inner blockquote {
    margin: 0 0 1.6rem;
    font-size: clamp(1.4rem, 2.6vw, 2.1rem);
    font-weight: 300;
    line-height: 1.4;
    letter-spacing: -0.02em;
    color: var(--wn-ink);
}
.wn-project-quote-name { font-weight: 600; color: var(--wn-ink); }
.wn-project-quote-role { color: var(--wn-ink-muted); margin-left: 0.5rem; }
.wn-project-quote-since {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--wn-ink-faint);
}

/* ─── Next project ──────────────────────────────────────── */
/* Balanced band: breathing room above the divider, and a trimmed bottom since
   the CTA section that follows brings its own full top padding. */
.wn-project-next { padding-top: var(--wn-s-6); padding-bottom: var(--wn-s-5); }
.wn-project-next-link {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "label arrow" "title arrow" "tag arrow";
    align-items: center;
    gap: 0.3rem 2rem;
    padding: clamp(2rem, 4vw, 3rem) 0;
    border-top: 1px solid var(--wn-line);
    border-bottom: 1px solid var(--wn-line);
}
.wn-project-next-label {
    grid-area: label;
    font-size: var(--wn-t-label);
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--wn-ink-muted);
}
.wn-project-next-title {
    grid-area: title;
    font-size: clamp(1.8rem, 3.4vw, 2.8rem);
    font-weight: 300;
    letter-spacing: -0.03em;
    color: var(--wn-ink);
    line-height: 1.05;
}
.wn-project-next-tag {
    grid-area: tag;
    font-size: 0.9rem;
    font-weight: 300;
    color: var(--wn-ink-muted);
    margin-top: 0.3rem;
}
.wn-project-next-arrow {
    grid-area: arrow;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    border: 1px solid var(--wn-line-strong);
    color: var(--wn-ink);
    transition: transform var(--wn-t-med) var(--wn-ease), background var(--wn-t-med) var(--wn-ease), color var(--wn-t-med) var(--wn-ease);
}
.wn-project-next-link:hover .wn-project-next-arrow { background: var(--wn-ink); color: var(--wn-ink-inv); transform: translateX(6px); }

/* ─── Fallback: case study coming soon ──────────────────── */
.wn-project-soon {
    margin-top: clamp(2.5rem, 5vw, 4rem);
    padding: clamp(2rem, 3.5vw, 3rem);
    background: var(--wn-bg-alt);
    border-radius: var(--wn-r-lg);
}
.wn-project-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.9rem;
    margin-bottom: 1.2rem;
    background: var(--wn-accent-tint);
    color: var(--wn-accent);
    border-radius: var(--wn-r-pill);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.wn-project-soon-copy {
    font-size: var(--wn-t-lead);
    font-weight: 300;
    line-height: 1.65;
    color: var(--wn-ink-2);
    margin: 0 0 1.6rem;
    max-width: 52ch;
}
.wn-project-soon-actions { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.wn-project-soon-actions .wn-textlink svg { transition: transform var(--wn-t-fast) var(--wn-ease); }
.wn-project-soon-actions .wn-textlink:hover svg { transform: translateX(-4px); }

/* ─── Responsive ────────────────────────────────────────── */
@media (max-width: 1024px) {
    .wn-project-body { grid-template-columns: 1fr; gap: 2.2rem; }
    .wn-project-meta { position: static; flex-flow: row wrap; gap: 1.5rem 2.5rem; }
    .wn-project-split { grid-template-columns: 1fr; gap: 2rem; }
    .wn-project-features-grid { grid-template-columns: repeat(2, 1fr); }
    .wn-project-results-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
@media (max-width: 720px) {
    .wn-project-features-grid { grid-template-columns: 1fr; }
    .wn-project-results-grid { grid-template-columns: 1fr 1fr; }
    .wn-project-next-link { grid-template-columns: 1fr; grid-template-areas: "label" "title" "tag" "arrow"; }
    .wn-project-next-arrow { margin-top: 1rem; }
}