/* Tonitza — gallery styles (exhibition index + page, works catalogue, lot page, carousel, lightbox). */
/* Loaded from templates/exhibitions/*.html after main.css; tokens and shared components live there. */
/* The rule of the room: the work is shown complete on a neutral --paper-3 field, never cropped,
   never tinted, no shadow, no bloom. Lists are rule-separated entries; clay is a small accent. */

/* ---------- Shared ---------- */
/* A page block: no top padding (the hairline of .ex-section leads), a measured bottom. */
.ex-block { padding-block: 0 clamp(3rem, 6vw, 5rem); }
/* A hairline-topped block inside a .wrap (section divider that stays inside the gutters). */
.ex-section { border-top: 1px solid var(--line); padding-top: clamp(2rem, 4vw, 3rem); }

/* An art field that hugs its image instead of taking a fixed ratio: the image keeps its own
   proportions, is capped by --art-max-h, and the field wraps it in the usual padding. */
.art-field--fit { --art-pad: clamp(1rem, 3vw, 2.2rem); --art-max-h: 70vh; padding: var(--art-pad); }
.art-field--fit picture { display: flex; justify-content: center; width: 100%; height: auto; }
.art-field--fit img {
  width: auto; max-width: 100%;
  height: auto; max-height: calc(var(--art-max-h) - 2 * var(--art-pad));
}

/* ---------- Exhibition index: the current show as the feature ---------- */
.ex-feature {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  color: inherit;
}
/* 3:2 is the minimum: a box with a preferred aspect ratio still grows to fit its content
   (only while overflow is visible — .art-field hides it, so undo that here), so a portrait
   work can rise to --art-max-h while a landscape one fills the 3:2 field. */
.ex-feature__media { aspect-ratio: 3 / 2; overflow: visible; --art-max-h: min(650px, 78vh); }
.ex-feature__body { min-width: 0; }
.ex-feature__tags { margin: 0 0 1.1rem; }
.ex-feature__title {
  font-style: italic;
  font-size: clamp(2.2rem, 1.4rem + 3vw, 4.2rem);
  margin: 0 0 0.6rem;
}
.ex-feature__sub { color: var(--ink-soft); font-size: 1.05rem; line-height: 1.5; margin: 0 0 0.9rem; max-width: 42ch; }
.ex-feature__dates {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); font-variant-numeric: tabular-nums; margin: 0;
}
.ex-feature__sale { display: inline-block; margin-top: 1.5rem; }
.ex-feature:hover .ex-feature__sale { border-bottom-color: var(--terracotta); }
.ex-feature + .ex-grid { margin-top: clamp(2.5rem, 5vw, 4rem); }
@media (max-width: 820px) {
  .ex-feature { grid-template-columns: 1fr; gap: clamp(1.2rem, 4vw, 2rem); }
  .ex-feature__media { --art-max-h: 70vh; }
}

/* ---------- Exhibition index: upcoming / past as rule-topped entries ---------- */
.ex-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.4rem);
}
.ex-entry {
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
  color: inherit;
}
.ex-entry__media { aspect-ratio: 4 / 3; margin-bottom: 1.1rem; }
.ex-entry__meta {
  display: flex; justify-content: space-between; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); font-variant-numeric: tabular-nums;
  margin: 0 0 0.6rem;
}
.ex-entry h3 { margin: 0 0 0.4rem; }
.ex-entry__sub { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.5; margin: 0; }
.ex-entry__sale { margin: auto 0 0; padding-top: 1rem; }
.ex-entry:hover .link-underline { border-bottom-color: var(--terracotta); }
@media (max-width: 950px) { .ex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .ex-grid { grid-template-columns: 1fr; } }

/* ---------- Exhibition page ---------- */
/* The hero, contained in a field capped at 70vh (see .art-field--fit). */
.ex-hero--empty { aspect-ratio: 16 / 9; max-height: 70vh; }
.ex-hero--empty .field { position: absolute; inset: 0; }
.ex-hero--empty { position: relative; }

/* Description + artists aside. Top-aligned (the shared .split centres, which suits photos, not prose). */
.ex-body {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 0.8fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 820px) { .ex-body { grid-template-columns: 1fr; } }

/* An artist entry in the aside: rule-topped, name → bio → website. */
.artist-entry { border-top: 1px solid var(--line); padding: 1rem 0 1.3rem; }
.artist-entry .eyebrow { margin-bottom: 0.4rem; }
.artist-entry h3 { font-size: 1.5rem; margin: 0 0 0.35rem; }
.artist-entry__bio { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; margin: 0 0 0.7rem; }

/* ---------- Works catalogue (sales overview) ---------- */
.catalogue-meta {
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-top: 1rem;
}

.works-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.4rem);
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.works-grid--compact { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 2rem 1.5rem; }

.work {
  display: flex; flex-direction: column; height: 100%;
  border-top: 1px solid var(--line);
  padding-top: 1.1rem;
  color: inherit;
}
/* The work hangs complete on a square field (.art-field supplies ground, padding, contain). */
.work__media { position: relative; aspect-ratio: 1 / 1; }
.work__body { padding-top: 1rem; display: flex; flex-direction: column; gap: 0.25rem; flex: 1; }
/* Artist as a signature label, the status tag opposite. */
.work__meta {
  display: flex; justify-content: space-between; align-items: center; gap: 0.6rem;
  margin: 0 0 0.35rem; min-height: 1.3rem;
}
.work__artist {
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  line-height: 1.6; color: var(--clay-deep); margin: 0;
}
.work__title {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: 1.35rem; line-height: 1.15; letter-spacing: -0.015em;
  font-optical-sizing: none; font-variation-settings: "opsz" 32;
  margin: 0 0 0.35rem;
}
.work__year { color: var(--ink-soft); }
.work__line { font-size: 0.85rem; color: var(--ink-soft); margin: 0; }
.work__line--muted { font-variant-numeric: tabular-nums; }
.work__foot {
  display: flex; justify-content: space-between; align-items: baseline; gap: 0.8rem;
  margin: auto 0 0; padding-top: 0.7rem;
}
.work__price { margin: 0; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); }
.work--sold .work__price, .work--nfs .work__price { color: var(--ink-soft); font-weight: 400; }
.work__lot {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-soft); font-variant-numeric: tabular-nums; margin: 0; white-space: nowrap;
}
.work:hover .work__title { color: var(--clay-deep); }

/* ---------- Single work (lot detail) ---------- */
.lot { padding-top: clamp(2rem, 5vw, 3.5rem); }
.lot__main { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.lot__crumbs {
  display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap;
  font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.lot__crumbs a:hover { color: var(--clay-deep); }
.lot__crumbs span { color: var(--ink-soft); } /* a faded separator measured 2:1; ink-soft is 4.9:1 */
/* RO-length gate: flex items default to min-width:auto and won't shrink below their
   content, so a long localized crumb/reference could overflow at 360px. Let them wrap. */
.lot__crumbs > *, .lot__eyebrow > * { min-width: 0; }

.lot__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.lot-figure { margin: 0; }
.lot-figure .art-field--fit { --art-pad: clamp(1.2rem, 4vw, 3rem); --art-max-h: 82vh; }
.lot-figure .field { aspect-ratio: 4 / 5; }
.lot-figure figcaption { font-size: 0.8rem; color: var(--ink-soft); margin-top: 0.7rem; }

.lot-thumbs {
  list-style: none; margin: 1.2rem 0 0; padding: 0;
  display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
.lot-thumbs .art-field { aspect-ratio: 1 / 1; padding: 0.8rem; }
.lot-thumbs figcaption { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.4rem; }

.lot__panel { position: sticky; top: calc(var(--header-h) + 1.25rem); }
.lot__eyebrow {
  display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap;
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 1.1rem;
}
.lot__artist {
  font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  line-height: 1.6; color: var(--clay-deep); margin: 0 0 0.5rem;
}
.lot__title {
  font-style: italic;
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 2.8rem); line-height: 1.05;
  margin: 0 0 1.5rem;
}
.lot__year { color: var(--ink-soft); }

/* Specification rows: dt label, dd value, hairlines between. */
.spec { margin: 0 0 1.6rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.spec__row { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0.3rem 1rem; padding: 0.6rem 0; }
.spec__row + .spec__row { border-top: 1px solid var(--line); }
.spec__row dt { font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.spec__row dd { margin: 0; font-size: 0.95rem; }

.price-block { margin-bottom: 1.8rem; }
.price-block__price {
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: -0.01em; color: var(--ink);
  margin: 0 0 1rem;
}
.price-block__price--quiet { color: var(--ink-soft); font-weight: 400; }
/* The enquiry <summary> is a full-width square .btn with the arrow at the far edge. */
.price-block .btn { width: 100%; justify-content: space-between; }
.price-block__note { font-size: 0.82rem; color: var(--ink-soft); line-height: 1.55; margin: 0.9rem 0 0; }

.lot__section { margin-top: 1.8rem; }
.provenance { list-style: none; margin: 0; padding: 0; font-size: 0.9rem; }
.provenance li { padding: 0.45rem 0; border-top: 1px solid var(--line); color: var(--ink-soft); }

.lot__note {
  margin-top: clamp(3rem, 6vw, 5rem); padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--line);
}
.lot__note .prose { max-width: 70ch; }

@media (max-width: 880px) {
  .lot__grid { grid-template-columns: 1fr; }
  .lot__panel { position: static; }
}

/* ---------- Image carousel ----------
   Works without JS as a horizontal scroll-snap strip; main.js layers on the
   arrows, the dots, the catalogue counter and a gentle autoplay. Every slide is
   an art field: the work is contained, never cropped; neighbours are not dimmed. */
.carousel { --frame-h: clamp(300px, 56vh, 620px); position: relative; }
.carousel__stage { position: relative; }

.carousel__viewport {
  min-width: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}
.carousel__viewport::-webkit-scrollbar { display: none; }
.carousel__viewport:focus-visible { outline: 2px solid var(--clay); outline-offset: 4px; }

.carousel__track { list-style: none; margin: 0; padding: 0; display: flex; }
.carousel__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always; }
.carousel__figure { margin: 0; }

.carousel__frame { height: var(--frame-h); }
.carousel__frame picture { display: block; }

.carousel__caption {
  margin: 0.9rem auto 0;
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-soft);
  max-width: 56ch;
}

/* Foot: square dots on the left; pause, arrows and the catalogue counter on the right. */
.carousel__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 1.2rem;
}
.carousel__dots { display: flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
/* A 6px square with a 44px-tall hit area (content-box + clipped background). */
.carousel__dot {
  box-sizing: content-box;
  width: 6px; height: 6px;
  padding: 19px 5px;
  border: 0; border-radius: 0;
  background: var(--olive-soft);
  background-clip: content-box;
  cursor: pointer;
  transition: width 0.3s var(--ease), background-color 0.2s var(--ease);
}
.carousel__dot:hover { background-color: var(--ink); }
.carousel__dot.is-active { width: 22px; background-color: var(--terracotta); }

.carousel__meta { display: flex; align-items: center; gap: 0.5rem; }

/* Arrows: 40px squares, 1px ink outline, filling on hover. Hidden until JS unhides them
   (no-JS users scroll/swipe the strip); dimmed, not removed, at either end. */
.carousel__nav {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--ink); border-radius: 0;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease), opacity 0.2s var(--ease);
}
.carousel__nav svg { width: 18px; height: 18px; }
.carousel__nav:hover { background: var(--ink); color: var(--paper); }
.carousel__nav:disabled { opacity: 0.3; cursor: default; background: transparent; color: var(--ink); }

/* Autoplay toggle — unhidden by JS only when autoplay actually runs (never under
   reduced-motion or without JS). The two inline SVGs swap on .is-paused. */
.carousel__playpause {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  padding: 0;
  border: 1px solid var(--line); border-radius: 0;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  margin-right: 0.4rem;
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.carousel__playpause:hover { border-color: var(--ink); color: var(--ink); }
.carousel__playpause svg { width: 13px; height: 13px; }
.carousel__playpause .carousel__pp-play,
.carousel__playpause.is-paused .carousel__pp-pause { display: none; }
.carousel__playpause.is-paused .carousel__pp-play { display: block; }

.carousel__count {
  margin: 0 0.2rem;
  min-width: 3.2rem;
  text-align: center;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.carousel__count [data-carousel-current] { color: var(--ink); font-weight: 500; }
.carousel__count-sep { margin-inline: 0.3rem; color: var(--ink-soft); }

/* The [hidden] attribute must win over the display values above (no JS / reduced motion). */
.carousel__nav[hidden], .carousel__playpause[hidden] { display: none; }

/* A single image needs no machinery. */
.carousel--single .carousel__foot { display: none; }

@media (max-width: 560px) {
  .carousel { --frame-h: clamp(240px, 52vh, 420px); }
  .carousel__foot { flex-wrap: wrap; gap: 0.5rem 1rem; }
  .carousel__nav, .carousel__playpause { width: 44px; height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__viewport { scroll-behavior: auto; }
}

/* ---------- Artwork lightbox ---------- */
/* Native <dialog> full-screen viewer. The trigger links stay plain anchors to a
   large rendition, so with JS off they simply open the image. */
.lightbox-link { display: block; cursor: zoom-in; }
.lightbox {
  border: 0; padding: 0;
  background: transparent;
  max-width: none; max-height: none;
  overflow: visible;
}
.lightbox::backdrop { background: rgba(39, 48, 32, 0.9); }
.lightbox__img {
  display: block;
  max-width: min(92vw, 1500px);
  max-height: 86vh;
  width: auto; height: auto;
}
.lightbox__close {
  position: fixed; top: 1rem; right: 1rem;
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid rgba(242, 235, 221, 0.7); border-radius: 0;
  background: transparent;
  color: var(--paper);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lightbox__close:hover { background: var(--paper); border-color: var(--paper); color: var(--ink); }
.lightbox__close:focus-visible { outline-color: var(--paper); }
.lightbox__close svg { width: 1.2rem; height: 1.2rem; }
.lightbox[open] { animation: lightbox-in 0.3s var(--ease); }
.lightbox[open]::backdrop { animation: lightbox-fade 0.3s var(--ease); }
@keyframes lightbox-in { from { opacity: 0; } }
@keyframes lightbox-fade { from { opacity: 0; } }

@media print {
  .carousel__nav,
  .carousel__playpause,
  .carousel__foot,
  .lightbox { display: none !important; }
  .art-field { background: transparent; padding: 0; }
}