/* Carousel of event posters on top of the catalogue.
   The band never crops a poster: the uncropped image is contained, and a blurred copy of the same image fills whatever
   space is left, so any proportions a designer delivers look intentional. */

.catalog-hero.has-hero-carousel{
  /* Full-bleed: the poster is the message, so it runs edge to edge instead of sitting inside the 1344 px text column. */
  padding-left:0;
  padding-right:0;
  min-height:0;
  display:block;
  background:var(--deep);
}

/* The band is always full width. The dark wash exists only to carry the Hero text: with no text it is simply gone,
   and with text it covers the left side it is written on and fades out long before the right edge. */
.catalog-hero.has-hero-carousel::after,
.catalog-hero.has-hero-carousel::before{content:none}
.catalog-hero.has-hero-carousel .hero-atmosphere{display:none}
.catalog-hero.has-hero-carousel .hero-side{display:none}

@media(min-width:1001px){
  .catalog-hero.has-hero-carousel.has-hero-copy::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    background:linear-gradient(90deg,#0b0d13e6 0%,#0b0d13b3 20%,#0b0d1359 36%,#0b0d1300 54%);
  }
}

/* Ink for everything the carousel draws on top of a poster. The tone comes from the poster's own lower band,
   measured when the file is uploaded, so the marks stay readable on a black poster and on a white one alike. */
.hero-carousel{position:relative;z-index:1;width:100%;--hero-ink:#fff;--hero-ink-shadow:#0b0d1373}
.hero-carousel[data-tone=light]{--hero-ink:#15161c;--hero-ink-shadow:#ffffff8c}

.hero-track{
  display:flex;
  overflow-x:auto;
  overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.hero-track::-webkit-scrollbar{display:none}

.hero-slide{
  position:relative;
  flex:0 0 100%;
  scroll-snap-align:center;
  scroll-snap-stop:always;
  height:clamp(360px,44vw,660px);
  overflow:hidden;
  isolation:isolate;
  background:var(--deep);
}

/* Blurred, over-scaled copy of the poster: fills the band with the poster's own colours instead of a dead bar. */
.hero-slide-glow{
  position:absolute;
  inset:-8%;
  z-index:0;
  background-size:cover;
  background-position:center;
  filter:blur(40px) saturate(112%) brightness(.8);
  transform:scale(1.12);
}
/* A pale poster keeps a pale band: the ink drawn on top is the same everywhere, on the poster and beside it. */
.hero-slide[data-tone=light] .hero-slide-glow{
  filter:blur(40px) saturate(108%) brightness(1.08);
  pointer-events:none;
}

.hero-slide-poster{
  position:absolute;
  inset:0;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* The poster fills the band as far as its own proportions allow and is never cropped; the blur takes the rest.
   A file too small for the band is scaled up and goes soft - the upload form warns about that before it happens. */
.hero-slide-poster img{
  width:100%;
  height:100%;
  object-fit:contain;
}

/* Caption and the buy button live inside the slide, so they travel with the poster they belong to. */
.hero-slide-bar{
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  /* Extra room at the bottom keeps the name and the button clear of the dots row. */
  padding:26px max(24px,calc((100vw - 1344px)/2)) 58px;
  background:linear-gradient(0deg,#0b0d13cc 0%,#0b0d1359 44%,transparent 100%);
  pointer-events:none;
}
/* A light poster gets a light scrim and dark lettering instead of a dark smear across its bottom. */
.hero-slide[data-tone=light] .hero-slide-bar{background:linear-gradient(0deg,#f4f2ebe6 0%,#f4f2eb73 44%,transparent 100%)}
.hero-slide[data-tone=light] .hero-slide-meta{text-shadow:0 1px 10px #f4f2ebcc}
.hero-slide[data-tone=light] .hero-slide-meta strong{color:#15161c}
.hero-slide[data-tone=light] .hero-slide-meta span{color:#3a3d47}
.hero-slide-bar>*{pointer-events:auto}
.hero-slide-meta{min-width:0;display:flex;flex-direction:column;gap:6px;text-shadow:0 2px 14px #0b0d13cc}
.hero-slide-meta strong{
  font-family:Oswald,'Arial Narrow',sans-serif;
  font-weight:500;
  font-size:clamp(20px,2.6vw,34px);
  line-height:1.1;
  color:#fff;
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.hero-slide-meta span{font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:#e9e6df}
.hero-slide-meta i{font-style:normal;opacity:.6}

/* With the caption turned off in «Настройки страниц» nothing is written over the poster, so the scrim that existed only
   to keep that writing readable goes away too, and the lone button keeps to the right edge where the caption left it. */
.hero-carousel.is-bare .hero-slide-bar{background:none}
.hero-slide-bar>:only-child{margin-left:auto}

.hero-buy{flex:0 0 auto;white-space:nowrap}

/* Bare chevrons, no discs and no blurred plates: the poster is the picture, the controls are only marks on it. */
.hero-nav{
  position:absolute;
  top:50%;
  translate:0 -50%;
  z-index:3;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  color:var(--hero-ink);
  opacity:.7;
  filter:drop-shadow(0 1px 3px var(--hero-ink-shadow));
  transition:opacity 160ms;
}
.hero-nav svg{width:26px;height:26px}
.hero-nav:hover,.hero-nav:focus-visible{opacity:1}
.hero-prev{left:10px}
.hero-next{right:10px}

/* Position marker: flat rules, one per poster, inked in whatever reads against the poster underneath. */
.hero-dots{
  position:absolute;
  z-index:3;
  left:50%;
  translate:-50% 0;
  bottom:14px;
  display:flex;
  align-items:center;
  gap:7px;
}
/* The site keeps every button at a 44 px tap target; the visible rule is drawn inside it. */
.hero-dots button{
  position:relative;
  width:30px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}
.hero-dots button::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:50%;
  height:2px;
  background:var(--hero-ink);
  opacity:.35;
  transition:opacity 200ms;
}
.hero-dots button[aria-current]::after{opacity:1}
.hero-dots button:hover::after{opacity:.7}
.hero-dots button[aria-current]:hover::after{opacity:1}

.hero-live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Hero text lies over the poster, as it did over the photograph before: the carousel keeps the full width either way. */
@media(min-width:1001px){
  .catalog-hero.has-hero-carousel.has-hero-copy .hero-copy{
    position:absolute;
    z-index:3;
    top:0;
    bottom:0;
    left:0;
    width:min(54%,760px);
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:0 32px 0 max(48px,calc((100vw - 1344px)/2));
    /* Nothing here is clickable, so the poster underneath stays a link across its whole width. */
    pointer-events:none;
  }
  /* The blurred backdrop still spans the whole band, but the poster itself steps aside so the text never darkens it. */
  .catalog-hero.has-hero-carousel.has-hero-copy .hero-slide-poster{padding-left:min(50%,700px)}
  /* The slide's own name and button move to the right, clear of the text and of its wash. */
  .catalog-hero.has-hero-carousel.has-hero-copy .hero-slide-bar{justify-content:flex-end;align-items:center;gap:18px}
  .catalog-hero.has-hero-carousel.has-hero-copy .hero-slide-meta{text-align:right;max-width:46%}
  /* Both arrows sit on the right for the same reason. */
  .catalog-hero.has-hero-carousel.has-hero-copy .hero-prev{left:auto;right:76px}
}

@media(max-width:1000px){
  .catalog-hero.has-hero-carousel.has-hero-copy .hero-copy{padding:26px 28px 18px}
  .hero-slide-bar{padding:22px 28px 58px}
}

@media(max-width:650px){
  /* Posters are usually taller than they are wide, so the phone band is portrait too. */
  .hero-slide{height:clamp(400px,125vw,600px)}
  .hero-slide-bar{
    flex-direction:column;
    align-items:stretch;
    gap:14px;
    padding:20px 18px 46px;
  }
  .hero-buy{width:100%;justify-content:center}
  .hero-nav{display:none}
  /* Swiping is the real control on a phone; the marks only report position and stay under the button, in the same
     lower band whose brightness the ink was measured from. */
  .hero-dots button{width:24px}
  .catalog-hero.has-hero-carousel.has-hero-copy .hero-copy{padding:22px 18px 14px}
}

@media(prefers-reduced-motion:reduce){
  .hero-track{scroll-behavior:auto}
  .hero-dots button,.hero-nav{transition:none}
}

/* Event page header. The same promise as the carousel, chosen per event: either the cover is cut down to the wide
   header around its focus point, or the whole poster is shown and a blurred copy of itself fills what is left. */
.event-hero-image{overflow:hidden}
/* A cropped cover stepped back below 100 % in Медиа leaves margins; the glow fills them and the photo stays on top. */
.event-hero-image:not(.is-contain) .event-hero-glow+img{position:relative}
.event-hero-glow{
  position:absolute;
  inset:-8%;
  background-size:cover;
  background-position:center;
  /* Darker than the carousel's: the event title is written across this band, not beside it. */
  filter:blur(46px) saturate(110%) brightness(.5);
  transform:scale(1.12);
}
.event-hero-image.is-contain img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
@media(min-width:1001px){
  /* The copy holds the left 60% of the header, so the whole poster steps aside instead of hiding behind the words. */
  .event-hero-image.is-contain img{left:auto;right:0;width:46%;padding:34px 0}
}
@media(max-width:1000px){
  /* Too narrow to stand side by side: the poster stays behind the copy and steps back so the text keeps its contrast. */
  .event-hero-image.is-contain img{opacity:.45}
}

/* Without the carousel the single picture is shown as is: no edge haze, no fade, no grain. A dark wash appears only
   when there is Hero text, and only on the left where the text is written. */
.catalog-hero:not(.has-hero-carousel)::before{content:none}
.catalog-hero:not(.has-hero-carousel) .hero-atmosphere{display:none}
.catalog-hero:not(.has-hero-carousel) .hero-photo{mask-image:none;-webkit-mask-image:none;opacity:1;filter:none}
.catalog-hero:not(.has-hero-carousel):not(.has-hero-copy)::after{content:none}
.catalog-hero:not(.has-hero-carousel).has-hero-copy::after{opacity:1;mask-image:none;-webkit-mask-image:none;background:linear-gradient(90deg,#0b0d13d9 0%,#0b0d13a6 22%,#0b0d1340 40%,#0b0d1300 58%)}@media(max-width:650px){.catalog-hero:not(.has-hero-carousel).has-hero-copy::after{background:linear-gradient(90deg,#0b0d13d9 0%,#0b0d1380 60%,#0b0d1326 100%)}}
/* Event header: the cover keeps clean edges like on the poster - no haze at the top or bottom. Only the left side,
   where the title is written, gets a light wash; on a phone the title sits over the lower part, so the wash is even. */
.event-hero::before{content:none}
.event-hero::after{mask-image:none;-webkit-mask-image:none;opacity:1;background:linear-gradient(90deg,#0b0d13d9 0%,#0b0d13a6 25%,#0b0d1340 45%,#0b0d1300 62%)}
.event-hero-image,.event-hero-image img{mask-image:none;-webkit-mask-image:none}
@media(max-width:650px){.event-hero::after{background:linear-gradient(90deg,#0b0d13cc 0%,#0b0d1399 60%,#0b0d1366 100%)}}