/* Owner's review of 28.09.2026, loaded after every other stylesheet so it wins without !important where it can.
   Photos: every place has its own frame per screen (catalog/models.py EVENT_PHOTOS). Phone: no emoji-like marks,
   one buy button, no empty gaps. Sizes of titles and descriptions are chosen in «Страницы → Главная». */

/* ---------- drawn icons (catalog/templatetags/site_edit.py `icon`) ---------- */
.i{display:inline-block;flex:none;width:1em;height:1em;vertical-align:-.14em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.search-icon .i{width:21px;height:21px;vertical-align:middle}
.search-field .i{width:18px;height:18px;color:var(--muted)}
.filter-toggle .i{width:18px;height:18px}
.manifesto-arrow .i{stroke-width:1.2}
.gold .i{transition:translate 180ms}
.gold:hover .i{translate:3px -3px}
@media(max-width:650px){
  /* The owner asked for none of these decorative marks on a phone. */
  .i-arrow,.circle-arrow,.manifesto-arrow{display:none!important}
}

/* ---------- home carousel: one frame per screen ---------- */
.hero-slide{height:auto}
.hero-slide-frame{position:relative;overflow:hidden;aspect-ratio:3/1;min-height:280px;max-height:calc(100vh - 120px);background:var(--deep)}
.hero-slide-glow{background-image:var(--glow-d)}
.hero-slide[data-d=cut] .hero-slide-glow{display:none}
.hero-slide-poster{position:absolute;inset:0;display:block}
.hero-slide-poster img{display:block;width:100%;height:100%;object-fit:contain}
.hero-slide[data-d=cut] .hero-slide-poster img{object-fit:cover}
.hero-slide-bar{align-items:center}
.hero-slide-meta strong{-webkit-line-clamp:2}
body.ts-title-m .hero-slide-meta strong{font-size:clamp(22px,2.6vw,36px)}
body.ts-title-l .hero-slide-meta strong{font-size:clamp(28px,3.5vw,52px)}
body.ts-title-xl .hero-slide-meta strong{font-size:clamp(32px,4.6vw,70px)}
body.ts-title-m .hero-slide-meta span{font-size:13px}
body.ts-title-l .hero-slide-meta span{font-size:15px}
body.ts-title-xl .hero-slide-meta span{font-size:18px}
@media(max-width:650px){
  .hero-slide-frame{aspect-ratio:4/5;min-height:0;max-height:none}
  .hero-slide .hero-slide-glow{display:block;background-image:var(--glow-m)}
  .hero-slide[data-m=cut] .hero-slide-glow{display:none}
  .hero-slide[data-m=whole] .hero-slide-poster img{object-fit:contain}
  .hero-slide[data-m=cut] .hero-slide-poster img{object-fit:cover}
  /* Name, date and the button sit under the picture on a phone instead of covering its lower part. */
  .hero-slide .hero-slide-bar,.hero-slide[data-tone=light] .hero-slide-bar,.hero-carousel.is-bare .hero-slide-bar{position:static;align-items:stretch;background:var(--deep);padding:16px 18px 46px;gap:14px}
  .hero-slide .hero-slide-meta,.hero-slide[data-tone=light] .hero-slide-meta{text-shadow:none}
  .hero-slide .hero-slide-meta strong,.hero-slide[data-tone=light] .hero-slide-meta strong{color:#fff}
  .hero-slide .hero-slide-meta span,.hero-slide[data-tone=light] .hero-slide-meta span{color:#c9ccd4}
  .hero-carousel,.hero-carousel[data-tone=light]{--hero-ink:#fff;--hero-ink-shadow:#0b0d1373}
  body.ts-title-m .hero-slide-meta strong{font-size:24px}
  body.ts-title-l .hero-slide-meta strong{font-size:30px}
  body.ts-title-xl .hero-slide-meta strong{font-size:36px}
  body.ts-title-m .hero-slide-meta span{font-size:12px}
  body.ts-title-l .hero-slide-meta span{font-size:13px}
  body.ts-title-xl .hero-slide-meta span{font-size:15px}
}

/* ---------- «Ближайшие события» and «Фильтры» on one line ---------- */
.catalog-section>.section-top{display:flex;align-items:flex-end;min-height:0;margin-bottom:22px}
.catalog-section>.section-top h2{margin:0;line-height:48px}
#filters-panel>summary{top:48px;min-height:48px}
.catalog-section.has-eyebrow #filters-panel>summary{top:auto}
@media(max-width:650px){
  .catalog-section>.section-top{min-height:0;margin-bottom:18px}
  .catalog-section>.section-top h2{line-height:44px}
  #filters-panel>summary{top:32px;min-height:44px}
}
@media(max-width:330px){
  .catalog-section>.section-top{padding-right:0;min-height:0;margin-bottom:64px}
  #filters-panel>summary{top:84px}
}

/* ---------- no empty band under the list ---------- */
.load-more{margin:28px auto 8px}
.load-more .i{width:18px;height:18px}
.catalog-end:empty{display:none}
#catalog-status:empty{display:none}
@media(max-width:650px){
  .load-more{margin:22px auto 4px}
  .catalog-end{margin:22px auto 4px}
}

/* ---------- event page ---------- */
.about-title{white-space:normal}
@media(max-width:650px){
  /* A phone gets the picture first, whole and undimmed, and the title under it; buying is the one bar at the bottom. */
  .event-hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-top:0;padding-bottom:26px}
  .event-hero::before,.event-hero::after{content:none}
  .event-hero .event-hero-image{position:relative;inset:auto;order:-1;z-index:0;width:auto;height:auto;margin:0 -18px 20px;border-radius:0;overflow:hidden;background:#0b0d13}
  .event-hero .event-hero-image .event-hero-glow{display:none}
  .event-hero .event-hero-image picture{display:block}
  .event-hero .event-hero-image img,.event-hero .event-hero-image.is-contain img{position:static;display:block;width:100%;height:auto;padding:0;opacity:1;transform:none!important;object-position:center}
  .event-hero .event-hero-image.m-cut img{aspect-ratio:4/5;object-fit:cover}
  .event-hero .event-hero-image.m-whole img{max-height:82vh;object-fit:contain}
  /* Under the picture the page reads like the home page's top slide: name, date and place, the buy button — close together. */
  .event-hero{gap:0;padding-bottom:18px}
  .event-hero .event-hero-image{margin-bottom:14px}
  .event-hero-copy{display:flex;flex-wrap:wrap;align-items:center;column-gap:10px}
  .event-hero-copy>*{flex:0 0 100%;order:3}
  .event-hero-copy>.eyebrow{flex:0 1 auto;order:1;margin:0}
  .event-hero-copy>.eyebrow:empty{display:none}
  .event-hero-copy>.age.inline{flex:0 0 auto;order:2;margin:0}
  .event-hero h1{font-size:32px;line-height:1.08;margin:8px 0 6px}
  .event-hero .event-date{margin:0;font-size:16px}
  .event-hero .event-venue{margin:2px 0 0}
  .event-hero .notice{margin:12px 0 0}
  .event-hero-actions{margin-top:14px;gap:16px;flex-wrap:nowrap}
  .event-hero-actions .buy-cta,.event-hero-actions .disabled-cta{flex:1 1 auto;width:auto;min-width:0;margin:0;justify-content:center}
  .event-hero-actions .share{flex:0 0 auto}
  .tickets-section{padding-top:20px}
  .event-info{padding-top:28px;padding-bottom:12px}
  .recommendation{padding-top:24px;padding-bottom:12px}
}
/* A computer keeps its roomier rhythm, without the empty bands around «Увидимся снова». */
@media(min-width:651px){
  .event-info{padding-bottom:40px}
  .recommendation{padding-top:32px;padding-bottom:48px}
}

/* ---------- plays and artists ---------- */
.tag.gold,.show-tags .tag.gold{background:transparent;box-shadow:none;border-color:var(--gold);color:var(--gold);font-weight:600}
.tag.gold:hover{translate:none}
.show-copy .prose{margin-top:20px}
.artist-video{margin:40px 0 8px;max-width:980px}
.artist-video video,.artist-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:8px;background:#000}
@media(max-width:650px){.artist-video{margin:28px 0 4px}}

/* ---------- sizes chosen by the owner ---------- */
body.ts-text-l .prose{font-size:18px}
body.ts-text-xl .prose{font-size:20px}
body.ts-card-l .event-card h3{font-size:19px}
body.ts-card-xl .event-card h3{font-size:22px}
body.ts-card-l .poster-caption h3{font-size:23px}
body.ts-card-xl .poster-caption h3{font-size:27px}
@media(max-width:650px){
  body.ts-card-l .event-card h3{font-size:16px}
  body.ts-card-xl .event-card h3{font-size:18px}
  body.ts-card-l .poster-caption h3{font-size:17px}
  body.ts-card-xl .poster-caption h3{font-size:20px}
  body.ts-text-l .prose{font-size:17px}
  body.ts-text-xl .prose{font-size:19px}
}

/* A play's page kept its content flush with the screen edge: the section padding wiped the side padding of .wrap. */
.wrap.show-hero,.wrap.show-section{padding-left:48px;padding-right:48px}
@media(max-width:1000px){.wrap.show-hero,.wrap.show-section{padding-left:28px;padding-right:28px}}
@media(max-width:650px){.wrap.show-hero,.wrap.show-section{padding-left:18px;padding-right:18px}}
.show-poster img{display:block;width:100%;height:auto;border-radius:8px}

/* «Добавлено событий: N» is for screen readers only; a failure with its link stays visible. */
#catalog-status:not(:has(a)){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;margin:0}

/* ---------- event page header = a carousel slide (31.10.2026) ----------
   The same as a slide of the home carousel above: the picture in its own frame; on a computer the name, when and where
   and the buy button lie over its lower edge, on a phone they sit under the picture so the poster's own lettering stays clear. */
.event-slide{position:relative;isolation:isolate;overflow:hidden;background:var(--deep)}
.event-slide .event-hero-image{position:relative;inset:auto;z-index:0;width:100%;height:auto;aspect-ratio:12/5;min-height:280px;max-height:calc(100vh - 120px);border-radius:0;overflow:hidden}
.event-slide .event-hero-image img{width:100%;height:100%;object-fit:cover}
/* The picture lies over the blurred copies, as the poster does in a carousel slide. */
.event-slide .event-hero-image picture{position:relative;z-index:1;display:block;height:100%}
.event-slide .event-hero-image.is-contain img{left:0;right:0;width:100%;padding:0;opacity:1;object-fit:contain}
.event-slide .event-hero-glow{filter:blur(40px) saturate(112%) brightness(.8)}
.event-slide-glow{display:none}
.event-slide-bar{position:absolute;z-index:2;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:26px max(24px,calc((100vw - 1344px)/2)) 34px;background:linear-gradient(0deg,#0b0d13cc 0%,#0b0d1359 44%,transparent 100%)}
.event-slide-meta{min-width:0;display:flex;flex-direction:column;gap:6px;text-shadow:0 2px 14px #0b0d13cc}
.event-slide-meta h1{margin:0;font-family:Oswald,'Arial Narrow',sans-serif;font-weight:500;font-size:clamp(20px,2.6vw,34px);line-height:1.1;letter-spacing:normal;text-transform:none;color:#fff;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* While the editor types the name in place, all of it shows: the two-line limit would hide the caret. */
.event-slide-meta h1[contenteditable]:not([contenteditable=false]){display:block;overflow:visible}
body.ts-title-m .event-slide-meta h1{font-size:clamp(22px,2.6vw,36px)}
body.ts-title-l .event-slide-meta h1{font-size:clamp(28px,3.5vw,52px)}
body.ts-title-xl .event-slide-meta h1{font-size:clamp(32px,4.6vw,70px)}
.event-when{margin:0;font-size:13px;letter-spacing:.09em;text-transform:uppercase;color:#e9e6df}
body.ts-title-l .event-when{font-size:15px}
body.ts-title-xl .event-when{font-size:18px}
.event-when i{font-style:normal;opacity:.6}
.event-when .event-date,.event-when .event-venue{margin:0;font:inherit;letter-spacing:inherit;color:inherit}
.event-when a:hover{color:var(--gold)}
.event-when .age.inline{position:static;display:inline-grid;vertical-align:middle;min-width:0;min-height:0;margin:0 0 0 6px;padding:1px 7px;border-radius:8px;letter-spacing:0;text-shadow:none}
.event-slide-meta .notice{margin:4px 0 0}
.event-slide .event-hero-actions{flex:0 0 auto;display:flex;align-items:center;gap:20px;margin:0}
.event-slide .buy-cta{white-space:nowrap}
.event-slide .share{text-shadow:0 2px 14px #0b0d13cc}
@media(max-width:1000px){.event-slide-bar{padding:22px 28px 28px}}
@media(max-width:650px){
  .event-slide .event-hero-image{aspect-ratio:4/5;min-height:0;max-height:none}
  /* The phone shows its own picture: the computer's focus point and zoom do not apply to it. */
  .event-slide .event-hero-image img{object-position:center!important;transform:none!important}
  .event-slide .event-hero-image.m-whole img{object-fit:contain}
  .event-slide .event-hero-image.m-cut img{object-fit:cover}
  .event-slide .event-hero-glow{display:none}
  .event-slide .event-hero-image.m-whole .event-slide-glow{display:block;position:absolute;inset:-8%;background-size:cover;background-position:center;filter:blur(40px) saturate(112%) brightness(.8);transform:scale(1.12)}
  /* Name, date and the button sit under the picture, as in the carousel. */
  .event-slide-bar{position:static;flex-direction:column;align-items:stretch;gap:14px;padding:16px 18px 24px;background:var(--deep)}
  .event-slide-meta,.event-slide .share{text-shadow:none}
  .event-when{color:#c9ccd4}
  body.ts-title-m .event-slide-meta h1{font-size:24px}
  body.ts-title-l .event-slide-meta h1{font-size:30px}
  body.ts-title-xl .event-slide-meta h1{font-size:36px}
  body.ts-title-m .event-when{font-size:12px}
  body.ts-title-l .event-when{font-size:13px}
  body.ts-title-xl .event-when{font-size:15px}
  /* «Купить от …» never breaks: when it and «Поделиться» do not fit side by side, «Поделиться» moves under it. */
  .event-slide .event-hero-actions{gap:10px 16px;flex-wrap:wrap}
  .event-slide .buy-cta,.event-slide .disabled-cta{flex:1 1 auto;min-width:0;margin:0;justify-content:center}
  .event-slide .share{flex:0 0 auto}
}