/* Mockup overrides + new components on top of the design system's site.css.
   This file is loaded AFTER site.css so it can refine without forking. */

/* No max width inside artboards — let the canvas handle width */
.inc-main { padding-bottom: var(--s-24); }

/* ===========================================================================
   EXHIBITIONS LIST — adopted from the Artists list layout
   Long single column of titles on the left, hover preview on the right.
   =========================================================================== */
.inc-list {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--s-12);
  margin-top: var(--s-6);
  padding-bottom: var(--s-16);
}
.inc-list__col      { min-width: 0; }
.inc-list__items    { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
/* Status groups (Forthcoming / Current / Past, #132) — each a labelled section
   so the list distinguishes them at a glance. Space sets one group off the next;
   the heading uses the shared section-label spec (site.css). */
.inc-list__group + .inc-list__group { margin-top: var(--s-10); }
.inc-list__row      { border-top: 1px solid var(--hairline); }
.inc-list__row:last-child { border-bottom: 1px solid var(--hairline); }
.inc-list__link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-4) var(--s-6);
  align-items: baseline;
  padding: var(--s-5) 0;
  color: var(--ink);
  border: 0;
  transition: color var(--dur-fast) var(--ease);
}
.inc-list__link:hover { color: var(--green); border: 0; }
.inc-list__title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.inc-list__name {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.inc-list__work {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(16px, 1.5vw, 20px);
  line-height: 1.2;
  color: var(--ink-2);
}
.inc-list__dates {
  font-size: 13px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
  font-feature-settings: "tnum";
  white-space: nowrap;
  align-self: center;
}

/* Wide viewport default: preview poster tracks the list as you scroll.
   Declared BEFORE the narrow-viewport query below so the `position: static`
   override there wins on mobile (equal specificity → later rule loses). */
.inc-list__preview {
  position: sticky;
  top: calc(var(--header-h) + 24px);
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

/* Narrow viewport: dates drop under the title, preview poster goes full-width above the list. */
@container (max-width: 820px) {
  .inc-list {
    grid-template-columns: 1fr;
    gap: var(--s-8);
  }
  .inc-list__preview {
    position: static;
    order: -1;
  }
  .inc-list__link {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .inc-list__dates {
    align-self: start;
    white-space: normal;
  }
  .inc-list__name { font-size: 22px; }
  .inc-list__work { font-size: 17px; }
}
.inc-list__preview .inc-poster { width: 100%; }
/* The preview poster+caption is a link (navigates on tap) but should read as
   the plain preview it replaced — no underline, inherited colour. */
.inc-list__preview-link {
  display: flex; flex-direction: column; gap: var(--s-4);
  color: inherit; border: 0; text-decoration: none;
}
.inc-list__preview-link:hover { color: inherit; border: 0; }
.inc-list__preview-meta {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-6);
  font-size: 14px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
/* Artist on the first line, italic title on its own line beneath (#114). */
.inc-list__preview-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.inc-list__preview-meta em { font-style: italic; color: var(--ink); }
.inc-list__preview-dates { flex-shrink: 0; text-align: right; }

/* Sort + filter row above the list */
.inc-listbar {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-6);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  padding: var(--s-3) 0;
  margin-top: var(--s-4);
}
/* Caps spec comes from .inc-eyebrow (shared class); only the layout differs. */
.inc-listbar__count { margin-bottom: 0; }
/* On narrow artboards the three groups can't share one row: the tabs get
   squeezed until their labels ("Group shows", "By date", "A – Z") break
   mid-word. Stack the row instead — filter tabs, count, then sort tabs — each
   on its own line. Container query (not @media) to match the artboard-driven
   breakpoints used elsewhere in this file. */
@container (max-width: 600px) {
  .inc-listbar { flex-direction: column; gap: var(--s-3); }
}

/* ===========================================================================
   EXHIBITION DETAIL — refinements
   =========================================================================== */

/* Solo title block — name + show title big and serif */
.inc-detail__head h1 em { font-style: italic; }

/* Group-show participating-artist row */
.inc-participants {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-3);
}
.inc-participants__label {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
  align-self: center;
}
.inc-participants a {
  font-size: 16px;
  font-family: var(--font-serif);
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 1px;
}
.inc-participants__names {
  font-size: 16px;
  font-family: var(--font-serif);
  font-style: italic;
}
.inc-participants a:hover { color: var(--green); }

/* Section jump-links on detail pages */
.inc-jumps {
  display: flex; gap: var(--s-6);
  margin-top: var(--s-4);
  font-size: 13px; letter-spacing: 0.04em;
  color: var(--ink-3);
}
.inc-jumps a { color: var(--ink-3); border-bottom: 1px solid var(--hairline); padding-bottom: 1px; }
.inc-jumps a:hover { color: var(--green); border-bottom-color: currentColor; }

/* ===========================================================================
   ARTIST DETAIL — restructured per brief
   1. Installation views   2. Biography   3. "more info" link
   =========================================================================== */
.inc-detail__show-head h2 {
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.15;
}
.inc-detail__show-meta {
  font-size: 14px; color: var(--ink-3); letter-spacing: 0.04em;
  font-feature-settings: "tnum";
  margin-top: 4px;
}

/* ===========================================================================
   HOME — refinements
   =========================================================================== */

.inc-hero__title { letter-spacing: -0.005em; }
.inc-hero__title em { font-style: italic; }
.inc-hero__cta {
  display: inline-block;
  margin-top: var(--s-3);
  font-size: 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  padding-bottom: 2px;
}
.inc-hero__cta:hover { color: var(--green); border-bottom-color: currentColor; }

.inc-coming {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s-10);
  align-items: center;
  /* No hairline between rows — a page-wide rule under each "Read more →"
     read as a stray line; whitespace separates the entries instead. */
}
.inc-coming__meta { display: flex; flex-direction: column; gap: var(--s-3); }
/* Several forthcoming shows can now stack (#125); on narrow viewports each
   row folds to poster-above-text instead of squeezing two columns. */
.inc-coming + .inc-coming { margin-top: var(--s-14); }
@container (max-width: 700px) {
  .inc-coming { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* The "Past" archive grid — denser than primary card grid */
.inc-past {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-8) var(--s-6);
}
@container (max-width: 1000px) { .inc-past { grid-template-columns: repeat(3, 1fr); } }
@container (max-width: 700px)  { .inc-past { grid-template-columns: repeat(2, 1fr); } }

.inc-past .inc-card__title { font-size: 16px; }

/* ===========================================================================
   PRESS — 2026-first refinements
   =========================================================================== */

.inc-press-year h2 { font-size: 24px; }
.inc-press-item__cta { color: var(--ink-3); }
.inc-press-item:hover .inc-press-item__cta { color: var(--green); }

/* ===========================================================================
   CONTACT — refinements
   =========================================================================== */

@media (min-width: 901px) {
  .inc-contact__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-12); }
}
.inc-map {
  display: block;
  width: 100%; aspect-ratio: 4/3;
  background:
    radial-gradient(circle at 30% 40%, #e8e3da 0, transparent 30%),
    radial-gradient(circle at 65% 70%, #d8d2c5 0, transparent 35%),
    repeating-linear-gradient(90deg, #efece4 0 1px, transparent 1px 80px),
    repeating-linear-gradient( 0deg, #efece4 0 1px, transparent 1px 80px),
    #f4f1ea;
  border: 1px solid var(--hairline);
  position: relative;
}
.inc-map::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 12px; height: 12px;
  border: 2px solid var(--green);
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: #fff;
}
.inc-map__caption {
  font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em;
  margin-top: 6px;
}

/* ===========================================================================
   COMPACT HEADER state (for the "Menu disclosure" mock)
   =========================================================================== */
.inc-header--compact .inc-header__inner { height: var(--header-h-compact); }
.inc-menu-btn--show { display: inline-flex !important; }

/* ===========================================================================
   POSTER — size the wordmark by container width, not viewport
   The .inc-poster is its own inline-size container so the wordmark scales
   to the card / hero band it actually sits in, preventing the right-edge
   cut-off on past-show cards in a 4-up grid.
   =========================================================================== */
.inc-poster { container-type: inline-size; overflow: hidden; }
.inc-poster__wm {
  font-size: clamp(18px, 10cqi, 56px) !important;
  letter-spacing: 0.04em !important;
}
.inc-poster--card .inc-poster__wm {
  font-size: clamp(14px, 11cqi, 32px) !important;
  letter-spacing: 0.02em !important;
}
.inc-poster--hero .inc-poster__wm {
  font-size: clamp(28px, 9cqi, 88px) !important;
}

/* ===========================================================================
   INSTALLATION STRIP — clarify interaction
   Each view is a button that opens the lightbox; cursor + hover affordance
   (subtle zoom, vignette) make that visible.
   =========================================================================== */
.inc-strip__btn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  overflow: hidden;            /* clip the hover zoom inside the frame */
}
.inc-strip__btn .inc-tile {
  transition: transform var(--dur) var(--ease), opacity var(--dur-fast) var(--ease);
}
.inc-strip__btn:hover .inc-tile,
.inc-strip__btn:focus-visible .inc-tile { transform: scale(1.05); }
.inc-strip__btn:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }

/* ---------- Lightbox ------------------------------------------------------- */
.inc-lightbox {
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: clamp(24px, 5vw, 72px);
  background: rgba(17, 17, 17, 0.94);
  cursor: zoom-out;
  animation: inc-lb-fade var(--dur) var(--ease);
}
@keyframes inc-lb-fade { from { opacity: 0; } to { opacity: 1; } }
.inc-lightbox__stage {
  margin: 0;
  max-width: min(92vw, 1100px);
  width: 100%;
  cursor: default;
  display: flex; flex-direction: column; gap: var(--s-3);
  animation: inc-lb-rise var(--dur) var(--ease);
}
@keyframes inc-lb-rise { from { transform: translateY(8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* Each step through the strip re-keys the media (components.jsx); the new
   frame fades in over the previous one, which the wrapper holds as its
   background — a dissolve, not a blink to the dark backdrop. */
.inc-lightbox__img { width: 100%; max-height: 80vh; animation: inc-lb-imgfade var(--dur) var(--ease); }
@keyframes inc-lb-imgfade { from { opacity: 0; } to { opacity: 1; } }
.inc-lightbox__xfade {
  width: 100%;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
.inc-lightbox__caption {
  font-family: var(--font-serif);
  font-size: 13px; letter-spacing: 0.06em;
  color: rgba(255,255,255,0.75);
  text-align: center;
  font-feature-settings: "tnum";
}
.inc-lightbox__close,
.inc-lightbox__nav {
  position: absolute;
  background: none; border: 0; color: #fff;
  cursor: pointer;
  font-family: var(--font-serif);
  line-height: 1;
  opacity: 0.7;
  transition: opacity var(--dur-fast) var(--ease);
}
.inc-lightbox__close:hover,
.inc-lightbox__nav:hover { opacity: 1; }
.inc-lightbox__close { top: clamp(16px, 3vw, 32px); right: clamp(16px, 3vw, 32px); font-size: 24px; }
/* Nav arrows: hide the heavy ‹ › glyph and draw a thin, angular chevron. */
.inc-lightbox__nav {
  top: 50%; transform: translateY(-50%);
  font-size: 0;
  width: clamp(48px, 7vw, 84px); height: clamp(48px, 7vw, 84px);
  display: flex; align-items: center; justify-content: center;
}
.inc-lightbox__nav::before {
  content: "";
  width: clamp(15px, 2.1vw, 24px); height: clamp(15px, 2.1vw, 24px);
  border: solid currentColor; border-width: 0 1.25px 1.25px 0;
}
.inc-lightbox__nav--prev::before { transform: rotate(135deg); margin-left: 0.25em; }
.inc-lightbox__nav--next::before { transform: rotate(-45deg); margin-right: 0.25em; }
.inc-lightbox__nav--prev { left: clamp(4px, 2vw, 24px); }
.inc-lightbox__nav--next { right: clamp(4px, 2vw, 24px); }

/* ===========================================================================
   PRESS — no persistent underline; hover-only colour shift.
   The row divider and the row-wide bottom-border that read as "underline"
   are gone; rows are separated by space only. The title gets the underline
   on hover, scoped to the title text itself (not the whole row).
   =========================================================================== */
.mock .inc-press-item {
  border-bottom: 0;
  padding: var(--s-3) 0;
}
/* Hover underline comes solely from the title's draw-in rule (site.css) —
   stacking text-decoration on top produced a double underline. */
.mock .inc-press-item__title {
  border-bottom: 0;
}
.mock .inc-press-item__cta {
  text-decoration: none;
  border: 0;
}

/* ===========================================================================
   ARTBOARD shell — the white frame each mockup sits inside on the canvas
   Each frame is a container query root so layouts respond to the artboard
   width (the design dimension) rather than the host viewport.
   =========================================================================== */
.shell-board__frame { container-type: inline-size; }

.mock {
  width: 100%;
  min-height: 100vh;            /* fill the viewport so the footer can pin to the bottom */
  background: var(--paper);
  display: flex; flex-direction: column;
  overflow: hidden;
  container-type: inline-size;
}
/* Sticky-footer chain: the scroll/view columns grow, and the screen's <main>
   takes up any slack, pushing the footer to the bottom on short pages (e.g. Press). */
.mock__scroll { flex: 1 0 auto; display: flex; flex-direction: column; }
.mock__view { flex: 1 0 auto; display: flex; flex-direction: column; }
.mock__view > .inc-main { flex: 1 0 auto; }

/* Override the design-system container max width so the artboard width
   becomes the page width — the artboard's px size IS the breakpoint. */
.mock .container {
  max-width: none;
  padding-inline: var(--gutter-lg);
}