/* ============================================================
   „Изложби“: списък, който се отваря като галерия, и залата на цял екран
   (като в прототипа, site/src/styles/authorial.css). Червеното е --c-art.
   ============================================================ */

.pfx.shows { --c-art: #DB0000; background: var(--sec-bg, #fff); color: #161616; }
.pfx .shows-intro { max-width: 520px; }
.pfx .shows-intro > * + * { margin-top: 14px; }
.pfx.shows .eyebrow { align-items: flex-end; }
.pfx.shows .red { color: var(--c-art); }
.pfx.shows .up { text-transform: uppercase; }
.pfx.shows .a-xl { font-size: clamp(56px, 8.6vw, 140px); line-height: .88; letter-spacing: -.05em; }
.pfx.shows .serif { font-family: 'Plabo Playfair', 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 400; letter-spacing: -.01em; }

/* изложбите са малко и почти не се менят: всяка е голям, отделен ред с много въздух */
.pfx .sl { position: relative; margin-top: clamp(56px, 8vh, 96px); border-top: 1px solid #CFCFCB; }
.pfx .sl-item { border-bottom: 1px solid #CFCFCB; }
.pfx .sl-item[hidden] { display: none; }
#ajax-content-wrap .pfx .sl-row, .pfx .sl-row { width: 100%; display: grid; grid-template-columns: 70px minmax(0, 1fr) auto 52px; align-items: center; gap: 26px; padding: clamp(46px, 7.5vh, 92px) 0 !important; border-radius: 0 !important; text-align: left; color: inherit; }
.pfx .sl-row:disabled { cursor: default; opacity: .5; }
.pfx .sl-num { font-size: 13px; font-weight: 600; letter-spacing: .2em; color: #8A8A8A; }
.pfx .sl-thumb { display: none; width: 64px; height: 48px; object-fit: cover; filter: grayscale(1); }
.pfx .sl-name { font-size: clamp(40px, 6.4vw, 112px); line-height: .92; letter-spacing: -.05em; font-weight: 900; text-transform: uppercase; transition: color .5s, transform .8s var(--ease-out); }
.pfx .sl-item.is-hov .sl-name, .pfx .sl-item.is-open .sl-name { color: var(--c-art); }
.pfx .sl-item.is-hov .sl-name { transform: translate3d(12px, 0, 0); }
.pfx .sl-year { font-size: clamp(24px, 2.4vw, 38px); color: #5E5E5E; }
.pfx .sl-sign { position: relative; width: 52px; height: 52px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #161616; transition: background-color .4s; }
.pfx .sl-sign::before, .pfx .sl-sign::after { content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 1.5px; margin: -.75px 0 0 -8px; background: #161616; transition: transform .6s var(--ease-out), background-color .4s; }
.pfx .sl-sign::after { transform: rotate(90deg); }
.pfx .sl-item.is-open .sl-sign { background: var(--c-art); box-shadow: none; }
.pfx .sl-item.is-open .sl-sign::before, .pfx .sl-item.is-open .sl-sign::after { background: #fff; }
.pfx .sl-item.is-open .sl-sign::after { transform: rotate(0); }
.pfx .sl-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 1s var(--ease-out); }
.pfx .sl-item.is-open .sl-body { grid-template-rows: 1fr; }
.pfx .sl-body-in { overflow: hidden; min-height: 0; }
.pfx .sl-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: clamp(40px, 6vh, 64px); }
#ajax-content-wrap .pfx .sl-filter button { padding: 8px 16px !important; border-radius: 0 !important; font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; box-shadow: inset 0 0 0 1px #D6D6D2; transition: background-color .3s, color .3s; }
#ajax-content-wrap .pfx .sl-filter button.is-on { background: #161616; color: #fff; box-shadow: none; }
.pfx .sl-filter + .sl { margin-top: 24px; }
.pfx .sl-empty { margin: 0; padding: clamp(28px, 5vh, 48px) 0; border-top: 1px solid #E4E4E0; font-size: 15px; }
.pfx .sl-status { margin-left: 14px; padding: 3px 8px; vertical-align: middle; border: 1px solid var(--c-art); color: var(--c-art); font-size: 11px; font-style: normal; font-weight: 700; letter-spacing: .14em; text-transform: lowercase; }
.pfx .sl-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 40px; flex-wrap: wrap; padding-left: 96px; }
.pfx .sl-meta .btn { flex-shrink: 0; }
.pfx .sl-text { max-width: 640px; margin-top: 10px; font-size: 17px; line-height: 1.65; color: #4A4A4A; }

.pfx .sl-rail { display: flex; gap: 12px; margin: 22px 0 clamp(46px, 7vh, 80px); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; padding-left: 96px; }
@media (hover: none) { .pfx .sl-rail { scroll-snap-type: x proximity; } }
.pfx .sl-rail::-webkit-scrollbar { display: none; }
.pfx .sl-shot { position: relative; flex-shrink: 0; height: clamp(220px, 36vh, 360px); margin: 0; scroll-snap-align: start; overflow: clip; background: #F4F4F2; cursor: zoom-in; opacity: 0; transform: translate3d(40px, 0, 0); transition: opacity .7s, transform 1s var(--ease-out); }
.pfx .sl-item.is-open .sl-shot { opacity: 1; transform: none; }
.pfx .sl-item.is-open .sl-shot:nth-child(2) { transition-delay: .06s; }
.pfx .sl-item.is-open .sl-shot:nth-child(3) { transition-delay: .12s; }
.pfx .sl-item.is-open .sl-shot:nth-child(4) { transition-delay: .18s; }
.pfx .sl-item.is-open .sl-shot:nth-child(n + 5) { transition-delay: .24s; }
.pfx .sl-shot img { display: block; height: 100%; width: auto; max-width: none; transition: transform 1.2s var(--ease-out); }
.pfx .sl-shot:hover img { transform: scale(1.04); }
.pfx .sl-shot.is-cover figcaption { position: absolute; left: 10px; bottom: 10px; padding: 3px 8px; background: var(--c-art); color: #fff; font-size: 10px; line-height: 1.4; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
/* корицата на изложбата следва мишката над списъка */
.pfx .sl-prev { position: absolute; left: 0; top: 0; width: 300px; height: 220px; margin: -110px 0 0 -150px; pointer-events: none; z-index: 5; }
.pfx .sl-prev-in { position: absolute; inset: 0; overflow: clip; opacity: 0; transform: scale(.7) rotate(-3deg); transition: opacity .45s, transform .7s var(--ease-out); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .5); }
.pfx .sl-prev.is-on .sl-prev-in { opacity: 1; transform: none; }
.pfx .sl-prev img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; filter: grayscale(1); opacity: 0; transition: opacity .5s; }
.pfx .sl-prev img.is-on { opacity: 1; }
@media (hover: none) { .pfx .sl-prev { display: none; } }

/* ---------- залата: бяла „стена“ на галерия; творбата виси с мека сянка, табелката е до нея ---------- */
/* над цветната линия и хедъра (10001), под вратата и курсора на темата (100000+) */
.sv { --c-art: #DB0000; position: fixed; inset: 0; z-index: 10050; background: #F7F6F3; color: #111; animation: sv-fade .6s var(--ease-out, ease); cursor: default; font-family: inherit; line-height: 1.5; touch-action: pan-y pinch-zoom; outline: none; }
.sv [hidden] { display: none !important; }
/* :where, за да не надделява над цветовете по-долу (червеният надпис над заглавието и т.н.) */
.sv :where(h2, p, figure) { margin: 0; padding: 0; color: inherit; }
.sv button { margin: 0; padding: 0; border: 0; border-radius: 0 !important; background: none; box-shadow: none; font: inherit; color: inherit; cursor: pointer; }
.sv button:hover, .sv button:focus { background-color: transparent !important; transform: none; box-shadow: none; }
.sv a { color: inherit; text-decoration: none; }
html.has-cursor .sv, html.has-cursor .sv * { cursor: none; }
html.sv-open, html.sv-open body { overflow: hidden; }
html.sv-open #header-outer { opacity: 0; pointer-events: none; }
@keyframes sv-fade { from { opacity: 0; } }
.sv-top { position: absolute; left: 0; right: 0; top: 0; z-index: 4; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 26px clamp(20px, 3vw, 44px); font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(17, 17, 17, .55); }
.sv-name i { font-style: normal; color: var(--c-art); }
.sv-count { font-variant-numeric: tabular-nums; color: #111; }
.sv-actions { display: flex; justify-content: flex-end; gap: 22px; }
.sv .sv-actions button { position: relative; font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: rgba(17, 17, 17, .62); transition: color .3s; }
.sv .sv-actions button:hover { color: #111; }
.sv-stage { position: absolute; inset: 86px clamp(20px, 8vw, 140px) 150px; display: flex; align-items: center; justify-content: center; animation: sv-in 1.1s var(--ease-out, ease); }
@keyframes sv-in { from { opacity: 0; transform: scale(.985); filter: blur(6px); } }
/* сянка като от творба, окачена на стена: мека и малко по-дълга надолу */
.sv-img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 18px 34px -14px rgba(0, 0, 0, .3), 0 50px 90px -40px rgba(0, 0, 0, .35); }
/* табелката: черно поле до творбата (вдясно, подравнено по долния ѝ ръб, или под нея) */
.sv-cap { position: absolute; z-index: 4; display: flex; flex-direction: column; gap: 6px; padding: clamp(14px, 1.2vw, 20px) clamp(16px, 1.5vw, 22px); background: #111; color: #fff; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .3) transparent; animation: sv-cap .9s var(--ease-out, ease) .25s both; }
@keyframes sv-cap { from { opacity: 0; transform: translate3d(0, 10px, 0); } }
.sv-kind { font-size: 11px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--c-art); }
.sv-cap b { font-size: clamp(18px, 1.5vw, 24px); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.sv-desc { white-space: pre-line; font-size: 13.5px; line-height: 1.55; color: rgba(255, 255, 255, .72); font-weight: 300; }
/* под широка творба: заглавието вляво, описанието вдясно, за да е ниска */
.sv-cap.is-below.is-wide { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto 1fr; align-content: start; column-gap: clamp(20px, 3vw, 44px); row-gap: 6px; align-items: start; }
.sv-cap.is-below.is-wide .sv-kind, .sv-cap.is-below.is-wide b { grid-column: 1; }
.sv-cap.is-below.is-wide .sv-desc { grid-column: 2; grid-row: 1 / span 2; }
/* видео в залата: 16:9, колкото позволява екранът, с подпис отдолу */
.sv-video { position: absolute; z-index: 4; pointer-events: none; inset: 70px 0 40px; display: grid; place-content: center; justify-items: start; gap: 16px; padding: 0 var(--pad, 28px); }
.sv-video > * { pointer-events: auto; }
.sv-video-box { position: relative; width: min(1200px, calc(100vw - 2 * var(--pad, 28px)), calc((100svh - 240px) * 16 / 9)); aspect-ratio: 16 / 9; background: #000; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .45); }
.sv-video-box iframe, .sv .sv-video-p, .sv-video-p img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border: 0; padding: 0; object-fit: cover; }
.sv .sv-video-p { display: grid; place-items: center; cursor: pointer; background: #000; }
.sv-play { position: relative; z-index: 1; width: 64px; height: 64px; border-radius: 50%; background: var(--c-art); box-shadow: 0 10px 40px -10px rgba(219, 0, 0, .8); }
.sv-play::after { content: ''; position: absolute; left: 26px; top: 21px; border-left: 16px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; }
.sv-video-cap { display: grid; gap: 4px; max-width: 640px; padding: 14px 18px; color: #fff; background: #0A0A0A; }
.sv-video-cap b { font-size: clamp(18px, 1.5vw, 24px); font-weight: 800; letter-spacing: -.02em; }
/* въведението: корица и текст */
.sv-intro { position: absolute; inset: 86px clamp(20px, 6vw, 110px) 80px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 110px); align-items: center; animation: sv-in 1.1s var(--ease-out, ease); }
.sv-cover { justify-self: end; display: block; max-width: 100%; max-height: calc(100svh - 190px); width: auto; height: auto; object-fit: contain;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 18px 34px -14px rgba(0, 0, 0, .3), 0 50px 90px -40px rgba(0, 0, 0, .35); }
.sv-place { font-size: 15px; color: rgba(17, 17, 17, .66); }
.sv-intro-text { display: flex; flex-direction: column; gap: 14px; max-width: 520px; max-height: calc(100svh - 190px); }
.sv-intro-text > * { flex-shrink: 0; }
/* по-дълъг текст за изложбата се скролва сам, заглавието и бутоните остават видими */
.sv-intro-text > .sv-text { flex-shrink: 1; min-height: 4.9em; overflow-y: auto; overscroll-behavior: contain; padding-right: 14px; scrollbar-width: thin; scrollbar-color: rgba(17, 17, 17, .25) transparent; }
.sv-kicker { font-size: 11px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--c-art); }
.sv-title { font-size: clamp(36px, 4.4vw, 76px); line-height: .9; font-weight: 900; letter-spacing: -.045em; text-transform: uppercase; overflow-wrap: anywhere; }
.sv-text { font-size: 17px; line-height: 1.65; color: rgba(17, 17, 17, .8); font-weight: 300; }
.sv-meta { font-size: 13px; color: rgba(17, 17, 17, .5); }
.sv .sv-start { align-self: flex-start; display: inline-flex; align-items: center; gap: 14px; margin-top: 12px; padding: 16px 0; border-bottom: 1px solid var(--c-art); font-size: 15px; font-weight: 700; letter-spacing: .06em; transition: gap .5s var(--ease-out, ease); }
.sv .sv-start:hover { gap: 22px; }
.sv-starts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 34px; margin-top: 12px; }
.sv .sv-starts .sv-start { margin-top: 0; }
.sv .sv-start.is-quiet { border-bottom-color: rgba(17, 17, 17, .22); font-weight: 600; color: rgba(17, 17, 17, .7); }
.sv .sv-start.is-quiet:hover { color: #111; }
/* последният екран: три творби „на стената“ и покана за отпечатък */
.sv-end { position: absolute; inset: 86px clamp(20px, 6vw, 110px) 80px; z-index: 4; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 110px); align-items: center; animation: sv-in 1.1s var(--ease-out, ease); }
.sv-end-wall { position: relative; justify-self: end; width: min(100%, 520px); aspect-ratio: 5 / 4; }
.sv-end-wall img { position: absolute; width: 46%; height: auto; max-width: none; box-shadow: 0 2px 4px rgba(0, 0, 0, .08), 0 18px 34px -14px rgba(0, 0, 0, .3), 0 40px 70px -36px rgba(0, 0, 0, .3); border: 10px solid #fff;
  left: calc(var(--k) * 25%); top: 22%; }
.sv-end-wall img:nth-child(2) { z-index: 2; width: 50%; top: 4%; }
.sv-end-wall img:nth-child(3) { top: 30%; }
.sv-end-text { display: flex; flex-direction: column; gap: 14px; max-width: 520px; }
.sv-end-t { font-size: clamp(32px, 3.6vw, 62px); line-height: .98; font-weight: 800; letter-spacing: -.04em; white-space: pre-line; }
.sv .sv-hit { position: absolute; top: 86px; bottom: 120px; z-index: 3; width: 50%; background: none; }
.sv-hit.prev { left: 0; }
.sv-hit.next { right: 0; }
.sv-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(17, 17, 17, .08); }
.sv-progress i { display: block; height: 100%; background: var(--c-art); transform-origin: left; transition: transform .9s var(--ease-out, ease); }
.sv-grid { position: absolute; inset: 76px 0 0; z-index: 5; display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); align-content: start; gap: 18px; padding: 20px clamp(20px, 3vw, 44px) 60px; overflow-y: auto; overscroll-behavior: contain; background: rgba(247, 246, 243, .97); animation: sv-fade .4s var(--ease-out, ease); }
.sv .sv-grid button { display: flex; flex-direction: column; gap: 8px; text-align: left; font-size: 12px; line-height: 1.4; color: rgba(17, 17, 17, .66); }
.sv-grid img { display: block; width: 100%; max-width: none; aspect-ratio: 4 / 3; object-fit: cover; opacity: .8; transition: opacity .3s; }
.sv-grid button:hover img, .sv-grid button.is-on img { opacity: 1; }
.sv-grid button.is-on span { color: var(--c-art); }

/* ---------- телефон ---------- */
@media (max-width: 600px) {
  #ajax-content-wrap .pfx .sl-row, .pfx .sl-row { grid-template-columns: auto minmax(0, 1fr) 40px; gap: 6px 14px; padding: 30px 0 !important; }
  .pfx .sl-name { overflow-wrap: normal; font-size: clamp(22px, 6.4vw, 42px); }
  .pfx .sl-status { display: table; margin: 6px 0 0; }
  .pfx .sl-num { display: none; }
  .pfx .sl-thumb { display: block; grid-row: 1 / span 2; }
  .pfx .sl-year { grid-column: 2; grid-row: 2; font-size: 18px; }
  .pfx .sl-sign { grid-column: 3; grid-row: 1 / span 2; width: 40px; height: 40px; }
  .pfx .sl-meta { padding-left: 0; }
  .pfx .sl-rail { padding-left: 0; }
  .pfx .sl-shot { height: 240px; }
  .sv-top { grid-template-columns: 1fr auto; gap: 8px; padding: 18px 16px; }
  .sv-count { display: none; }
  .sv-actions { gap: 14px; }
  .sv-stage { inset: 70px 12px 190px; }
  .sv-end { inset: 70px 16px 30px; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 26px; overflow-y: auto; }
  .sv-end-wall { justify-self: center; width: min(100%, 360px); }
  .sv-intro-text { max-height: none; }
  .sv-intro-text > .sv-text { overflow: visible; padding-right: 0; }
  .sv-desc { font-size: 14px; }
  .sv-intro { inset: 70px 16px 30px; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 20px; overflow-y: auto; }
  .sv-cover { justify-self: center; max-height: 34svh; }
  .sv-title { font-size: clamp(34px, 11vw, 54px); }
  .sv .sv-hit { bottom: 190px; }
}
@media (prefers-reduced-motion: reduce) {
  .sv, .sv-stage, .sv-intro, .sv-end, .sv-cap, .sv-grid { animation: none; }
  .pfx .sl-body, .pfx .sl-shot, .pfx .sl-name, .pfx .sl-prev-in { transition: none; }
}

/* Salient дава на всяка снимка в ред на WPBakery „.row .col img { height: auto; margin-bottom: 15px }“
   и това е по-силно от правилата с два класа: тук снимките са без отстъп, а миниатюрата е 64 × 48 */
#ajax-content-wrap .pfx.shows img { margin-bottom: 0; }
#ajax-content-wrap .pfx .sl-thumb { height: 48px; }