/* ============================================================================
   fang.work — /work/{slug} (project detail) page styles
   Layout: site-wide navbar + main containing a small back link (mirroring
   /writing/article.html's .article-back) followed by a centred .work-wrap
   holding the project Hero (cover, title, role, year, intro, tags) + a
   Meta strip (Year / Role / Stack / Status) + the project's self-contained
   case study (16-slide deck / gallery / markdown).

   Compatible with light + dark themes; uses the same color tokens as the
   home page so navigation feels seamless.
   ============================================================================ */

/* ---- Container --------------------------------------------------------- */
.work-wrap {
    max-width: 64rem;            /* wider than writing — Hero + 16:9 deck */
    margin-inline: auto;
    padding-inline: 1rem;
    padding-top: 5rem;           /* pt-20 — leaves room for the floating pill */
    padding-bottom: 4rem;        /* pb-16 */
}
@media (min-width: 640px) {
    .work-wrap {
        padding-inline: 2rem;
        padding-top: 8rem;       /* sm:pt-32 */
    }
}

/* ---- Back link (mirrors .article-back in /writing/article.html) -------- */
.work-back {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    color: var(--muted-foreground);
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease,
                opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
    opacity: 0;
    transform: translateY(8px);
}
.work-back.is-revealed { opacity: 1; transform: none; }
.work-back:hover { color: var(--foreground); }
.work-back:hover svg { transform: translateX(-2px); }
.work-back svg {
    width: 12px;
    height: 12px;
    transition: transform 0.2s ease;
}

/* "Work" label becomes "active" while viewing a detail page */
.nav-link[aria-current="page"] {
    color: var(--foreground);
}

/* ---- Hero (cover + title + role + intro + tags) ----------------------- */
.work-hero {
    margin-top: 2.5rem;
    display: grid;
    gap: 1.75rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.work-hero.is-revealed {
    opacity: 1;
    transform: none;
}

.work-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    margin: 0;
}
.work-kicker::before {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1px;
    background: currentColor;
}

/* Cover: 16:9 frame, optional image; falls back to a labelled placeholder */
.work-cover {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent);
    border-radius: 0;
    background: var(--secondary);
}
.work-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.work-cover[data-empty="true"] {
    display: grid;
    place-items: center;
    color: var(--muted-foreground);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    background:
        radial-gradient(120% 80% at 0% 0%, color-mix(in oklab, var(--foreground) 6%, transparent) 0%, transparent 60%),
        radial-gradient(120% 80% at 100% 100%, color-mix(in oklab, var(--foreground) 4%, transparent) 0%, transparent 60%),
        var(--secondary);
}

/* Title row: title block (with logo + title + role/year line) + view-case link */
.work-title-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 1.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent);
}
.work-title-block { display: grid; gap: 0.5rem; min-width: 0; }

.work-logo {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0;
    background: var(--secondary);
    display: grid;
    place-items: center;
    overflow: hidden;
    flex-shrink: 0;
}
.work-logo img { width: 100%; height: 100%; object-fit: cover; }

.work-title {
    margin: 0;
    font-family: var(--font-fj);
    font-size: clamp(2rem, 5vw, 3.25rem);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: var(--foreground);
}
.work-sub {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    letter-spacing: 0.02em;
    color: var(--muted-foreground);
}
.work-sub .dot {
    display: inline-block;
    margin: 0 0.5rem;
    color: var(--muted-foreground);
    opacity: 0.6;
}

.work-link-out {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    align-self: end;
    font-family: var(--font-mono);
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
    transition: color 0.2s ease, transform 0.2s ease;
    white-space: nowrap;
}
.work-link-out:hover { color: var(--foreground); }
.work-link-out:active { transform: scale(0.95); transition-duration: 75ms; }
.work-link-out svg { width: 12px; height: 12px; }

/* Intro: 1 short paragraph under the title */
.work-intro {
    margin: 0;
    max-width: 100ch;
    font-family: var(--font-fj);
    font-size: clamp(1.125rem, 1.6vw, 1.375rem);
    font-weight: 100;
    line-height: 1.45;
    letter-spacing: -0.005em;
    color: var(--foreground);
}

/* ---- Meta strip (Year / Role / Stack / Status) ------------------------ */
.work-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: color-mix(in oklab, var(--foreground) 12%, transparent);
    border: 1px solid color-mix(in oklab, var(--foreground) 12%, transparent);
}
@media (min-width: 640px) {
    .work-meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.work-meta-cell {
    background: var(--background);
    padding: 0.875rem 1rem;
    display: grid;
    gap: 0.25rem;
}
.work-meta-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
}
.work-meta-value {
    font-size: 0.875rem;
    line-height: 1.4;
    color: var(--foreground);
}
.work-meta-value .dot {
    margin: 0 0.4rem;
    color: var(--muted-foreground);
    opacity: 0.6;
}

/* ---- Section label (HIGHLIGHTS / OVERVIEW etc.) --------------------- */
.work-section-label {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted-foreground);
    margin: 0;
}
.work-section-label::before {
    content: "";
    display: inline-block;
    width: 1.5rem;
    height: 1px;
    background: currentColor;
    margin-right: 0.625rem;
    vertical-align: middle;
}

/* ---- Highlights bullets ---------------------------------------------- */
.work-bullets {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    font-family: var(--font-fj);
    font-weight: 100;
    gap: 0.75rem;
    max-width: 100ch;
}
.work-bullets li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--foreground);
}
.work-bullets li::before {
    content: "";
    position: absolute;
    left: 0; top: 0.7em;
    width: 0.4rem; height: 0.4rem;
    background: var(--foreground);
    opacity: 0.7;
}

/* ---- Tags ------------------------------------------------------------- */
.work-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.625rem;     /* row × column — extra horizontal air */
    /* The <li> children are inert wrappers — strip default marker + indent
       so only the inner <span class="work-tag"> chip shows. */
    list-style: none;
    padding: 0;
    margin: 0;
}
.work-tags > li {
    display: contents;
}
.work-tag {
    /* Pill chip with a leading hash + tiny dot — designed to read like a
       topic tag (GitHub / Linear) but in the site's mono+serif voice. */
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.3125rem 0.75rem 0.3125rem 0.625rem;
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
    color: var(--muted-foreground);
    background: color-mix(in oklab, var(--foreground) 4%, transparent);
    border: 1px solid color-mix(in oklab, var(--foreground) 10%, transparent);
    border-radius: 999px;       /* full pill */
    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease;
    cursor: default;
    user-select: none;
    position: relative;
}

/* Leading hash glyph — adds the "topic tag" affordance without extra HTML */
.work-tag::before {
    content: "#";
    color: color-mix(in oklab, var(--foreground) 35%, transparent);
    font-weight: 500;
    transition: color 0.2s ease;
}

/* Hover: lift + highlight foreground, brighten hash */
.work-tag:hover {
    color: var(--foreground);
    background: color-mix(in oklab, var(--foreground) 7%, transparent);
    border-color: color-mix(in oklab, var(--foreground) 28%, transparent);
}
.work-tag:hover::before {
    color: var(--foreground);
}

/* Active: tiny tactile press */
.work-tag:active {
    transform: scale(0.96);
    transition-duration: 75ms;
}

/* Focus ring for keyboard users */
.work-tag:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

/* ---- Project body slot (iframe-embedded deck) ------------------------ */
.work-body-slot {
    margin-top: 2.5rem;
    /* The iframe inside this slot is sized to the deck's intrinsic height
       via postMessage (see work-detail.js). We clip horizontal overflow
       so the iframe never escapes the work-wrap container. */
    overflow-x: hidden;
    overflow-y: visible;
    min-width: 0;
}
.work-body-slot > * { max-width: 100%; }

/* The iframe that embeds deck.html. Height is auto-managed by JS
   (parent listens to 'deck-resize' postMessages from the embedded page).
   Why no aspect-ratio: deck.html is a long, scrollable case study — a
   fixed ratio would crop content. The deck hides its own scrollbar and
   the host page owns scrolling instead. By default (after JS handshake)
   the iframe is sized to fit ALL slides at once inside the host viewport
   (see work-detail.js → deck-fit-all), so no internal scroll is needed. */
.work-deck-frame {
    display: block;
    width: 100%;
    /* height is set inline by JS from `deck-resize` messages — no min-height
       so the iframe can shrink to a compact "fit-all" thumbnail stack
       (~85vh) without forcing extra empty space. */
    height: 600px;
    border: 0;
    background: var(--secondary);
    /* Belt-and-suspenders: hide the iframe's own scrollbar in browsers
       that ignore `scrolling="no"` (notably older Chromium on Windows). */
    overflow: hidden;
}

.work-loading {
    margin-top: 3rem;
    padding: 1.5rem;
    border: 1px dashed color-mix(in oklab, var(--foreground) 20%, transparent);
    color: var(--muted-foreground);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    text-align: center;
}

/* ---- Section divider ------------------------------------------------- */
.work-divider {
    margin: 2.5rem 0 0;
    border: 0;
    border-top: 1px solid color-mix(in oklab, var(--foreground) 10%, transparent);
}

/* ---- Responsive tweaks ------------------------------------------------ */
@media (max-width: 639px) {
    .work-title-row {
        grid-template-columns: 1fr;
        align-items: start;
    }
    .work-link-out { align-self: start; }
}