/* Field-authored exhibition pages — same rhythm as the migrated canvases. */
.sexh { --sg: clamp(24px, 4vw, 80px); display: flex; flex-direction: column; gap: 60px; }
.sexh-head { display: flex; gap: 40px; align-items: center; }
.sexh-titles { width: 33.33%; flex: 0 0 auto; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.sexh-titles h1 { margin: 0; font-size: 54px; line-height: 62px; font-weight: 400; color: #444; }
.sexh-subtitle { font-size: 24px; line-height: 32px; font-weight: 400; color: #444; }
.sexh-dates { font-size: 14px; line-height: 20px; font-weight: 400; color: #444; margin-top: 6px; }
.sexh-reception { font-size: 14px; line-height: 20px; font-weight: 400; color: #676767; }
.sexh-hero { flex: 1 1 auto; min-width: 0; }
.sexh-hero-img { width: 100%; height: auto; display: block; }

.sexh-body { display: flex; gap: 40px; align-items: flex-start; }
.sexh-statement { width: 33.33%; flex: 0 0 auto; }
.sexh-statement p { margin: 0 0 17px; font-size: 14px; line-height: 20px; font-weight: 400; color: #444; }
.sexh-statement p:last-child { margin-bottom: 0; }
.sexh-works { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.sexh-work { display: block; aspect-ratio: 1 / 1; background: #F1F1F1; overflow: hidden; }
.sexh-work-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .2s ease; }
.sexh-work:hover .sexh-work-img { opacity: .85; }

/* Lightbox */
.sexh-lb { position: fixed; inset: 0; z-index: 3000; background: rgba(10,10,10,0.94); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.sexh-lb[hidden] { display: none; }
.sexh-lb-img { max-width: 88vw; max-height: 78vh; object-fit: contain; display: block; }
.sexh-lb-cap { color: #fff; font-size: 13px; line-height: 20px; margin-top: 18px; max-width: 80vw; text-align: center; }
.sexh-lb-btn { position: absolute; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; background: none; border: 0; color: #fff; cursor: pointer; opacity: .8; }
.sexh-lb-btn:hover { opacity: 1; }
.sexh-lb-prev { left: 12px; top: 50%; transform: translateY(-50%); }
.sexh-lb-next { right: 12px; top: 50%; transform: translateY(-50%); }
.sexh-lb-close { top: 8px; right: 12px; }
body.sexh-lb-open { overflow: hidden; }

@media (max-width: 1199px) { .sexh-works { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .sexh { gap: 32px; }
  .sexh-head, .sexh-body { flex-direction: column; gap: 24px; }
  .sexh-titles, .sexh-statement { width: 100%; }
  .sexh-titles h1 { font-size: 29px; line-height: 36px; }
  .sexh-subtitle { font-size: 20px; line-height: 27px; }
  .sexh-works { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sexh-lb-img { max-width: 94vw; max-height: 70vh; }
}

/* Full-width header image -- restores Salient's `_nectar_header_bg` format,
   which lived in page meta and so was invisible to the WPBakery converter.
   It sits in its own Bricks section with no container inside, so that section
   is already full width -- no negative-margin break-out needed. An earlier
   attempt used the usual `width:100vw; margin-left:calc(50% - 50vw)` trick and
   sat 7px off, because 100vw counts the scrollbar and the content box does not.
   Heights follow the home hero idiom (calc(100vh - 100px), clamped). */
.sexh-header { position: relative; width: 100%; height: 800px; max-height: 80vh; overflow: hidden; margin-bottom: 60px; background: #F1F1F1; }
.sexh-header.is-full { height: calc(100vh - 100px); min-height: 420px; max-height: 1100px; }
.sexh-header-img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 999px) {
  .sexh-header { height: 62vw; min-height: 240px; max-height: none; margin-bottom: 40px; }
  .sexh-header.is-full { height: calc(100vh - 64px); min-height: 320px; }
}

/* Under a full-width header image the title block should read as centred on the
   page. The migrated canvases already carry `text-align: center` on the
   headings, but the text element itself is only as wide as its content and sits
   left in its block -- so the type was centred inside a box that was not,
   landing ~124px left of the page centre. Widening the block lets the existing
   centring do what it looks like it is doing. Scoped to header pages only. */
body.stremmel-has-header .brxe-text:has(h1),
body.stremmel-has-header .brxe-text:has(h2) { width: 100%; max-width: none; margin-left: auto; margin-right: auto; }

/* Catalogue link. Follows the framing-form button idiom: 44px, grey, uppercase. */
.sexh-catalog { margin: 10px 0 0; }
.sexh-catalog-link { display: inline-flex; align-items: center; height: 44px; padding: 0 22px; background: #555; color: #fff; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; }
.sexh-catalog-link:hover { background: #0A0A0A; color: #fff; }

/* Per-artist names in a group show, restored on Configurations. */
.sexh-artist-name { font-size: 22px; line-height: 30px; font-weight: 400; letter-spacing: 1px; color: #444; margin: 0 0 18px; }