/* Project page styles. Loaded after main.css. Static and square-edged. */

.project-header,
.project-media,
.project-layout {
    width: var(--content-width);
    margin-left: auto;
    margin-right: auto;
}

.project-header {
    padding-top: 48px;
    padding-bottom: 24px;
}

.project-header h1 {
    margin-bottom: 12px;
    font-size: clamp(2rem, 4.5vw, 3rem);
    line-height: 1.1;
}

.project-header p {
    max-width: 68ch;
    color: var(--muted);
    font-size: 1.15rem;
}

/* Video player: autoplaying muted loop with a custom control bar (see js/project.js) */

.project-media video {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 80vh;
    background: #000;
    object-fit: contain;
}

.player {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: #000;
}

.player video {
    cursor: pointer;
}

.player-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 14px;
    background: var(--surface);
    border-top: 1px solid var(--border);
}

.player-btn {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    cursor: pointer;
}

.player-btn[hidden] {
    display: none;
}

.player-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.player-btn svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.player-progress {
    flex: 1;
    min-width: 0;
    height: 8px;
    margin: 0;
    background: linear-gradient(to right,
        var(--accent) var(--progress, 0%),
        var(--bg) var(--progress, 0%));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.player-progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 22px;
    background: var(--text);
    border: 0;
    border-radius: var(--radius);
}

.player-progress::-moz-range-thumb {
    width: 12px;
    height: 22px;
    background: var(--text);
    border: 0;
    border-radius: var(--radius);
}

.player-time {
    min-width: 9ch;
    color: var(--muted);
    font-size: .9rem;
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.player:fullscreen {
    display: flex;
    flex-direction: column;
    border: 0;
    border-radius: 0;
}

.player:fullscreen video {
    flex: 1;
    min-height: 0;
    max-height: none;
    aspect-ratio: auto;
}

/* Two columns: the written content on the left, project details on the right */

.project-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 64px;
    align-items: start;
}

.project-aside {
    position: sticky;
    top: 88px;
    margin-top: 48px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.project-aside h2 {
    margin-bottom: 16px;
    color: var(--primary);
    font-size: 1.1rem;
}

.project-facts {
    display: flex;
    flex-direction: column;
}

.project-fact {
    padding: 12px 0;
    border-top: 1px solid var(--border);
    line-height: 1.35;
}

.project-fact:first-child {
    padding-top: 0;
    border-top: none;
}

.project-fact .label {
    display: block;
    color: var(--muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.project-fact .value {
    margin: 0;
    font-weight: 600;
}

.project-aside .btn {
    width: 100%;
    margin-top: 12px;
}

/* Sections */

.project-section {
    margin-top: 48px;
    padding-bottom: 8px;
}

.project-content {
    display: grid;
    grid-template-columns: minmax(260px, 420px) 1fr;
    gap: 32px;
    /* stretch (the default) makes the image match the text column's height,
       rather than each side keeping its own independent height */
    align-items: stretch;
}

.project-image {
    height: 100%;
}

.project-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 260px; /* keeps the image from going tiny next to a short paragraph */
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.project-text p {
    max-width: 72ch;
    font-size: 1.05rem;
    line-height: 1.75;
}

/* A row of smaller, equally sized screenshots under the main Overview image */

.project-gallery {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.project-gallery-item {
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
}

.project-gallery-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.project-gallery-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border: 1px dashed var(--border);
    color: var(--muted);
    font-size: .85rem;
    text-align: center;
}

/* Key features: clickable rows.
   Thumbnail on the left; title, description and prompt stacked beside it. */

.feature-list {
    border-top: 1px solid var(--border);
}

.feature-card {
    display: grid;
    grid-template-columns: 220px 1fr;
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
        "thumb title"
        "thumb text"
        "thumb badge"
        "thumb more";
    column-gap: 28px;
    align-items: start;
    padding: 20px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
}

.feature-card:hover {
    background: var(--surface);
}

.feature-thumb {
    grid-area: thumb;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.feature-card h3 {
    grid-area: title;
    margin-bottom: 6px;
    font-size: 1.25rem;
    line-height: 1.3;
}

.feature-card p {
    grid-area: text;
    max-width: 72ch;
    color: var(--muted);
}

.feature-more {
    grid-area: more;
    margin-top: 12px;
    color: var(--accent);
    font-weight: 600;
}

.feature-badge {
    grid-area: badge;
    justify-self: start;
    margin-top: 10px;
    padding: 3px 10px;
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    color: var(--accent);
    font-size: .8rem;
    font-weight: 600;
}

.feature-card:hover .feature-more {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Reflection: a lead sentence, then a short grid of labelled answers */

.reflection-lead {
    max-width: 68ch;
    margin-bottom: 28px;
    font-size: 1.3rem;
    line-height: 1.5;
    font-weight: 500;
}

.reflection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.reflection-block {
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.reflection-block .label {
    display: block;
    margin-bottom: 8px;
    color: var(--accent);
    font-weight: 700;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}

.reflection-block p {
    color: var(--muted);
    font-size: .95rem;
    line-height: 1.7;
}

/* Feature detail modal */

.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(17, 15, 11, .94);
}

.modal-overlay.active {
    display: flex;
}

.modal-panel-wrap {
    position: relative;
    /* This defines the actual size; .modal-panel just fills it. Putting the
       width here (rather than on the panel) avoids a circular percentage
       calculation - the panel is a flex item wrapping a percentage-sized
       child, so the two sizes can otherwise fight and disagree. */
    width: min(1200px, calc(100% - 180px));
}

.modal-panel {
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    padding: 28px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.modal-panel h3 {
    margin-bottom: 16px;
    color: var(--primary);
    font-size: 1.5rem;
}

.modal-media {
    position: relative;
}

.modal-media img,
.modal-media iframe,
.modal-media .modal-code {
    display: block;
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.modal-media iframe,
.modal-media .modal-code {
    aspect-ratio: 16 / 9;
}

.modal-media img[hidden],
.modal-media iframe[hidden],
.modal-media .modal-code[hidden] {
    display: none;
}

/* Screenshots keep their own shape: the whole image is always visible, and
   very tall or very wide ones are letterboxed rather than cropped. */
.modal-media img {
    height: auto;
    max-height: calc(100vh - 270px);
    object-fit: contain;
    background: var(--bg);
}

.modal-media iframe {
    background: var(--bg);
}

/* Tabs above the media that switch between the screenshot and its
   blueprint or code view. Both options are always visible, and the active
   one is filled so it's obvious which view you are looking at. */
.modal-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.modal-tabs[hidden] {
    display: none;
}

.modal-tab {
    padding: 10px 22px;
    background: transparent;
    border: 2px solid var(--accent);
    border-radius: var(--radius);
    color: var(--accent);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

.modal-tab:hover {
    background: var(--bg);
}

.modal-tab[aria-selected="true"] {
    background: var(--accent);
    color: var(--on-accent);
}

/* Code alternate view */
.modal-code {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    overflow: hidden;
}

.modal-code-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.modal-code-lang {
    color: var(--muted);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
}

.modal-code-copy {
    padding: 4px 10px;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}

.modal-code-copy:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.modal-code pre {
    flex: 1;
    margin: 0;
    padding: 16px;
    overflow: auto;
}

.modal-code code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
    line-height: 1.6;
    white-space: pre;
    color: var(--text);
}

/* highlight.js token colours, mapped to the site's own palette so a colour
   change elsewhere keeps the code view consistent without editing this. */
.hljs-comment,
.hljs-quote {
    color: var(--muted);
    font-style: italic;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-literal,
.hljs-meta,
.hljs-doctag,
.hljs-tag,
.hljs-name {
    color: var(--accent);
}

.hljs-string,
.hljs-attr,
.hljs-number,
.hljs-template-variable {
    color: var(--primary);
}

.hljs-title,
.hljs-title.function_,
.hljs-title.class_,
.hljs-section {
    color: var(--text);
    font-weight: 700;
}

.hljs-type,
.hljs-built_in,
.hljs-class .hljs-title {
    color: var(--accent);
}

.modal-panel p {
    margin-top: 16px;
    font-size: 1.05rem;
    line-height: 1.7;
}

.modal-external-link {
    display: inline-block;
    margin-top: 10px;
    font-weight: 600;
}

.modal-external-link[hidden] {
    display: none;
}

.modal-close,
.modal-arrow {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font: inherit;
    cursor: pointer;
}

.modal-close {
    position: absolute;
    top: -18px;
    right: -18px;
    padding: 10px 16px;
    font-weight: 600;
}

/* The frame stacks the prev/panel/next row above the slide counter.
   The row holds the arrows right next to the panel, whatever the panel's
   own width ends up being, instead of pinning them to the edges of the
   screen where a wide monitor leaves them far from it. */
.modal-frame {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.modal-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    width: 100%;
}

.modal-arrow {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    font-size: 1.4rem;
}

.modal-arrow[hidden] {
    display: none;
}

.modal-close:hover,
.modal-arrow:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.modal-counter {
    color: var(--muted);
    font-size: .9rem;
}

/* Small screens */

@media (max-width: 800px) {
    .project-content {
        grid-template-columns: 1fr;
    }

    /* Once stacked, "match the text height" no longer applies -
       give the image back a normal, fixed shape instead. */
    .project-image {
        height: auto;
    }

    .project-image img {
        height: auto;
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .project-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature-card {
        grid-template-columns: 1fr;
        grid-template-areas:
            "thumb"
            "title"
            "text"
            "badge"
            "more";
        grid-template-rows: none;
        row-gap: 8px;
        padding: 20px 0;
    }

    .feature-card h3 {
        margin-top: 8px;
        margin-bottom: 0;
    }

    .feature-more {
        margin-top: 4px;
    }
}

@media (max-width: 1100px) {
    .project-layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .project-aside {
        position: static;
        order: -1;
        margin-top: 32px;
    }

    .project-facts {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 24px;
    }

    .project-fact:nth-child(2) {
        padding-top: 0;
        border-top: none;
    }
}

@media (max-width: 700px) {
    .player-bar {
        gap: 10px;
        padding: 8px 10px;
    }

    .player-time {
        display: none;
    }

    .project-header {
        padding-top: 32px;
    }

    .modal-panel-wrap {
        width: calc(100% - 24px);
    }

    .modal-panel {
        max-height: calc(100vh - 130px);
        margin-bottom: 60px;
        padding: 20px;
    }

    /* -18px outside the panel corner overlaps the title on a wide screen's
       generous margins, but there's not enough room to spare on a phone -
       so pull it in just enough to clear the panel border without
       overlapping the heading inside it. */
    .modal-close {
        top: -34px;
        right: 0;
    }

    /* Not enough room beside a near-full-width panel, so the arrows and
       counter go back to floating over the bottom corners instead of
       sitting beside/below it, matching the panel's own reserved margin. */
    .modal-arrow {
        position: absolute;
        bottom: 12px;
    }

    .modal-counter {
        position: absolute;
        bottom: 26px;
        left: 50%;
        transform: translateX(-50%);
    }

    .modal-prev {
        left: 12px;
    }

    .modal-next {
        right: 12px;
    }
}