/* ===========================
   GLOBAL LAYOUT
   =========================== */

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background: #000;
    font-family: monospace;
    color: white;
}

/* Mobile: make overall UI smaller */
body.mobile-ui-active {
    font-size: 0.85em;
}

/* Mobile: 80% UI opacity */
body.mobile-ui-active #terminal-panel,
body.mobile-ui-active #display-panel {
    opacity: 0.8;
}

#container {
    display: flex;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

/* ===========================
   TERMINAL PANEL (LEFT)
   =========================== */

#terminal-panel {
    flex: 1 1 auto;          /* Fills all space when display is collapsed */
    min-width: 250px;
    background: transparent; /* Let canvas show through */
    display: flex;
    flex-direction: column;
    border-right: 2px solid #333;
    overflow-y: auto;
    padding: 10px;
}

/* Terminal output */
#terminal-output {
    flex: 1;
    padding: 10px;
    overflow-y: auto;
    white-space: pre-wrap;
    max-width: 80ch; /* wrap terminal/about text to ~80 characters */
}

/* Mobile: tighter terminal + smaller text */
body.mobile-ui-active #terminal-panel {
    min-width: 0;
    padding: 8px 8px 8px 4px;
    padding-bottom: calc(var(--mobile-controls-space, 0px) + env(safe-area-inset-bottom));
}

body.mobile-ui-active #terminal-output {
    padding: 8px 8px 8px 2px;
    font-size: 0.75em; /* 25% smaller */
}

#terminal-output div,
#terminal-output p {
    margin: 4px 0;
}

#terminal-output a {
    color: inherit;
    text-decoration: underline;
}

/* Input bar */
#terminal-input-line {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    background: #111;
    border-top: 1px solid #333;
}

.prompt {
    margin-right: 6px;
    color: #0f0;
}

#terminal-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: inherit;
    font-size: 14px;
}

/* ===========================
   RESIZER DIVIDER
   =========================== */

#divider {
    width: 2px;
    background: #444;
    cursor: ew-resize;
}

/* Mobile: lock panel sizes (no dragging) */
body.mobile-ui-active #divider {
    display: none;
}

/* ===========================
   DISPLAY PANEL (RIGHT)
   - starts COLLAPSED by default
   =========================== */

#display-panel {
    flex: 0 0 0;              /* collapsed width */
    min-width: 0;
    overflow: hidden;         /* hide content when collapsed */
    background: transparent;  /* Let canvas show through */
    color: #fff;
    padding: 0;               /* no padding when closed */
    box-sizing: border-box;
    position: relative;
}

/* Expanded state */
#display-panel:not(.collapsed) {
    flex: 0 0 60%;            /* the width when opened */
    padding: 20px;
    overflow-y: auto;
}

/* Mobile: enforce 30/70 split when a display panel is open */
body.mobile-ui-active.mobile-display-open #display-panel:not(.collapsed) {
    flex: 0 0 70% !important;
}

body.mobile-ui-active.mobile-display-open #terminal-panel {
    flex: 0 0 30% !important;
}

/* Mobile: tighter display panel */
body.mobile-ui-active #display-panel:not(.collapsed) {
    padding: 8px;
    overflow-x: hidden;
    padding-bottom: calc(var(--mobile-controls-space, 0px) + env(safe-area-inset-bottom));
}

#display-output {
    padding: 20px;
}

body.mobile-ui-active #display-output {
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Mobile: make sure media never overflows the display panel */
body.mobile-ui-active #display-output img,
body.mobile-ui-active #display-output video,
body.mobile-ui-active #display-output iframe,
body.mobile-ui-active #display-output canvas {
    max-width: 100%;
    height: auto;
}

/* ===========================
   MINI TERMINAL (BOTTOM LEFT)
   =========================== */
#mini-terminal {
    position: fixed;
    left: 10px;
    bottom: 10px;
    width: 240px;
    max-width: 70vw;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 6px;
    z-index: 900;
    font-family: monospace;
    opacity: 0.6;
    pointer-events: auto;
}

body.mobile-ui-active #mini-terminal {
    top: auto;
    right: auto;
    left: 10px;
    bottom: 48px;
}

#mini-terminal-output {
    max-height: 80px;
    overflow-y: auto;
    font-size: 11px;
    line-height: 1.2;
    opacity: 0.9;
}

#mini-terminal-input-line {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

#mini-terminal-input-line .prompt {
    color: #0f0;
    font-size: 11px;
}

#mini-terminal-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    font-family: inherit;
    font-size: 11px;
}

body.mobile-ui-active #mini-terminal-input {
    font-size: 16px;
}

/* Mobile: avoid grid layouts overflowing narrow panel widths */
body.mobile-ui-active .grid-container {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 8px 0;
}

body.mobile-ui-active .work-gallery {
    grid-template-columns: 1fr;
}

/* ===========================
   HEADERS
   =========================== */

h2 {
    margin-top: 0;
    text-transform: capitalize;
    border-bottom: none; /* remove small line under section titles */
    font-weight: normal; /* make section titles not bold */
    padding-bottom: 5px;
}

/* ===========================
   GLOBAL TEXT LINE WIDTH
   - wrap all text to ~80 characters per line
   =========================== */
p,
li {
    max-width: 80ch;
}

/* ===========================
   GRID LAYOUT FOR WORKS/MUSIC
   =========================== */

.grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px 0;
}

/* ===========================
   SIMPLE GRID ITEMS (NO HOVER)
   =========================== */

.grid-item {
    display: flex;
    flex-direction: column;
}

.grid-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0; /* sharp corners */
    transition: none; /* no fade-in/out on hover */
}

.grid-item-title {
    margin-top: 8px;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    text-transform: capitalize;
    max-width: 80ch; /* limit caption line length */
}

.grid-item-title:hover {
    color: #ddd;
}

/* Hover: subtle zoom + darken image while keeping layout */
.grid-item:hover img,
.grid-img-link:hover img,
.grid-item.hover img,
.grid-img-link.hover img {
    transform: scale(1.03);
    filter: invert(1);
}

/* ===========================
   INDIVIDUAL WORK GALLERY
   =========================== */
.work-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.work-gallery .wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 0;
}

.work-gallery .wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

/* Center hero artwork inside the work-hero using the existing gallery wrapper */
.work-hero .wrapper {
    max-width: 560px;
    margin: 0 auto;
}

.work-hero .wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.work-hero h2 {
    text-align: left;
}

/* Layout: hero row with artwork left and meta on the right */
.work-hero .hero-row {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.work-hero .hero-art {
    flex: 0 0 50%;
    max-width: 50%;
    order: 1; /* ensure artwork appears first (left) */
}

.work-hero .hero-art img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

/* Invert effect applied on hover or when the wrapper has the 'invert' class */
.work-hero .hero-art {
    transition: filter 180ms ease;
}
.work-hero .hero-art img {
    transition: filter 180ms ease, transform 180ms ease;
}
.work-hero .hero-art.invert img,
.work-hero .hero-art:hover img {
    filter: invert(1);
}

.work-hero .hero-meta {
    flex: 1 1 50%;
    order: 2; /* ensure meta appears after artwork (right) */
}

/* ensure title is top-left */
.work-hero > h2 {
    margin: 0 0 12px 0;
    text-align: left;
}

@media (max-width: 800px) {
    .work-hero .hero-row {
        flex-direction: column-reverse;
    }
    .work-hero .hero-art {
        flex: 0 0 auto;
        max-width: 100%;
    }
    .work-hero .hero-meta {
        flex: 1 1 auto;
    }
}

/* Generic caption utility */
.caption {
    max-width: 80ch;
}

/* ===========================
   WORKS CREDITS LINKS
   =========================== */
.work-credits a {
    color: #aaa;
    text-decoration: none;
    border-bottom: 1px dotted #666;
}

.work-credits a:hover {
    color: #ccc;
    border-bottom-color: #888;
}












/* ===========================
   TEACHING MAGAZINE GRID
   =========================== */

.teaching-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    grid-auto-rows: 180px;
    margin-top: 20px;
}

/* Base card */
.teaching-card {
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #111;
    padding: 0;
    cursor: pointer;
}

.teaching-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(30%);
    transition: transform 0.5s ease, filter 0.5s ease, opacity 0.3s ease;
}

/* Text overlay */
.teaching-card .teaching-meta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 14px;
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.teaching-card .teaching-meta span {
    display: block;
    opacity: 0.8;
}

.teaching-card .teaching-meta strong {
    display: block;
    font-size: 13px;
    margin-top: 4px;
}

/* Hover */
.teaching-card:hover img {
    transform: scale(1.05);
    filter: grayscale(0%) brightness(1.1);
}

/* Magazine variations */
.teaching-card--wide {
    grid-column: span 2;
}

.teaching-card--tall {
    grid-row: span 2;
}

.teaching-card--big {
    grid-column: span 2;
    grid-row: span 2;
}

/* Mobile fallback */
@media (max-width: 600px) {
    .teaching-card--wide,
    .teaching-card--tall,
    .teaching-card--big {
        grid-column: span 1;
        grid-row: span 1;
    }
}

/* ===========================
     MOBILE CONTROLS (on-screen)
     =========================== */
#mobile-controls { display:none; position:fixed; bottom:6px; left:6px; right:6px; gap:4px; z-index:999; pointer-events:none; }
#mobile-controls.hidden { display:none !important; }
#mobile-controls.active { display:flex; flex-direction:column; align-items:center; }
#mobile-controls.active button { font-size:10px; min-width:34px; min-height:34px; }
#mobile-controls.active .row.small button { min-width:28px; font-size:9px; }

#mobile-controls .row { display:flex; gap:4px; justify-content:center; }
#mobile-controls .row.nav button { min-width:34px; min-height:34px; font-size:16px; line-height:1; font-weight:700; }
#mobile-controls .row.menu { flex-wrap: wrap; }
#mobile-controls button { min-width:34px; min-height:34px; border-radius:6px; font-size:10px; background:rgba(160,160,160,0.85); color:#000; border:1px solid rgba(0,0,0,0.35); pointer-events:auto; }
#mobile-controls button:active { transform: translateY(1px); opacity:0.95; }
#mobile-controls .row.small button { min-width:28px; padding:4px 6px; font-size:9px; }

@media (max-width:800px) {
    #mobile-controls { bottom:8px; }
}